FAQ accordion card (only mobile screens)

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted over 1 year ago

  It doesn't look like you’ve done the large screen version of the design. was that intentional?

  i’m afraid this is not accessible because you’ve not used correct HTML. You must use interactive elements for interactive behaviour. This needs buttons with aria expanded on them toggling on click. In fact you could do everything else in css, that is all that is needed on this challenge.

  Ideally, accordions like this should have a no js fallback. Usually that means they are shown as expanded by default, but as soon as the js loads all become collapsed and interactive. Not essential for this challenge but necessary when this UI is used in production

  Marked as helpful

  1

  ---

  

  Danil_Dikhtyar 🔥•200

  @Rock-n-Roll-CRCPosted over 1 year ago

  I don't really get it...

  If I need to replace my elements with interactions set on them with buttons, then people with no disabilities will see a different design. How does this work?

  For example, my current design is with interactive h3 and img do I need to replace them with buttons or something? In that case, the design would be horrible for people with no disabilities...

  @grace-snow

  0

  

  T

  Grace•31,230

  @grace-snowPosted over 1 year ago

  @Rock-n-Roll-CRC the design stays exactly as it is. But you must use the correct html

  That means buttons for this (you can style them however you like) with aria-expanded attributes that toggle between false and true on click - that communicateds state. When I say that's all you need I mean you can use the aria-expanded value as the styling hook to apply the open or closed styles

  This is called a disclosure ui or expandable content

  Alternatively for a purely html version (no js) you can use the details summary elements

  It is essential to use interactive elements for interactive behaviour so that solutions work for ALL people (eg including keyboard, screenreader users, switch control users, or voice control users etc)

  Marked as helpful

  1