Faq-accordion JS Challenge

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 8 months ago

  Hi

  As good as this looks on the surface, I’m afraid it is inaccessible and needs re-coding. It’s really important to get the HTML right so that components like this are accessible.

  This must follow an accordion (or disclosure) pattern. You can see all requirements for these ui patterns on the aria authoring practices guide. But essentially these must be opened using a button element that has aria-expanded on it correctly set. The icons also must be inside the button and have empty alt as they are decorative. The aria-expanded value is already communicating the expanded/collapsed state of the disclosure.

  Other pointers:

  • it's better for performance to link fonts in the html head instead of css imports.
  • don't forget to always include a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • the max width on the component should be in rem not px so it scales correctly for all users including those who have a different text size setting.
  • you should be coding mobile first and not using min and max media queries like this. Let the mobile styles be the default. Then set a min-width media query to target larger screens only. This should be defined in rem or em not px so that the layout adjusts nicely when people change their default text size. More info: https://fedmentor.dev/posts/responsive-meaning/
  • you don't need to repeat any style properties in a media query if they are unchanged from the default.
  • it would be better for performance to include the purple image in the html in a picture element instead of using background image. Users will currently have to download both images, whereas the picture element would only download the relevant one for their screen size.
  • try not to change inline styles with javascript. That can make sites very difficult to maintain. Keep concerns separate. Use JS to toggle classes or attributes and let css handle all styling. All that's needed in this is the aria-expanded value to change with javascript as you can use that attribute as the style hook in css to show/hide faq answers. Or if you prefer JS can toggle a class or data- attribute as well as aria-expanded and use that as the style hook instead.

  I hope this is helpful info.

  01

  Marked as helpful