Astro JavaScript Responsive

Community feedback

• 

  

  Grace•32,170

  @grace-snowPosted 5 months ago

  I'm afraid this is inaccessible at the moment. It is essential to get the right markup with this. Disclosures / accordions need to be triggered with aria-expanded buttons.

  Also note the images including icons should be treated as decorative.

  Links to help you:

  • Accordions: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
  • Disclosures: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  • my blog post on this: https://fedmentor.dev/posts/disclosure-ui/

  Marked as helpful

  0

  ---

  

  Slideur•180

  @SlideurPosted 5 months ago

  @grace-snow I checked my page and when you click on it, everything works. I'm sending you the link I have : https://faqaccordionmainfrontendmentor.netlify.app/ I thought the plus and minus were part of the links. I didn't know about the aria-expanded buttons system. I'll take a look at how it works. thank you for the links

  0

  

  

  Grace•32,170

  @grace-snowPosted 5 months ago

  @Slideur read the resources. This is an extremely important pattern, everyone has to understand the requirements. It must work for keyboards and voice control and screen readers (including communicating the expanded or collapsed state to screen readers).

  Marked as helpful

  0

  

  Slideur•180

  @SlideurPosted 5 months ago

  @grace-snow I'd forgotten... These are things I've never done. I need to learn before I correct.

  0

  

  Slideur•180

  @SlideurPosted about 2 months ago

  @grace-snow Hello, I've added the code for the accessibility. I'm not sure that's a good code but it works. I've been having some difficulties to understand these things ( may be the programming in general :-) )

  0
• 

  

  Grace•32,170

  @grace-snowPosted about 2 months ago

  It doesn't look like you've followed the pattern here https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

  For example:

  • aria-selected is incorrect for this interface.
  • images should be decorative
  • a strange cursor has been added to everything implying everything is interactive

  As a general rule, try to avoid setting inline styles with javaScript. Styling should be a CSS concern. Change the aria, and optionally a class using JSm then use that as the style hook.

  I wrote a blog about this same pattern that encourages people to use the aria-expanded value as the CSS selector to control visibility of everything else https://fedmentor.dev/posts/disclosure-ui/

  0

  ---

  

  Slideur•180

  @SlideurPosted about 2 months ago

  @grace-snow I'll try to change my code. And I'm reading your article. I need to understand the process if I want to do that correctly. Thank you for your help... I haven't watched the strange cursor. I'm going to wach

  0