Design comparison
Solution retrospective
I attempted to create an accessible accordion. To achieve this, I used the details
and summary
elements, and added some aria
attributes to link the elements together. Additionally, I utilized components to construct the HTML.
Making the accordion accessible was very challenging. For the first time, I used some new elements and tried to link these elements together, while also adopting a component-based approach. Additionally, I tried to use a background image for the page with the picture
element. Since there was an overlap with the content, I used a grid layout to resolve this issue.
I think the area where I need the most help is accessibility. One problem with accessibility is that the screen reader NVDA I used does not read content in Firefox, and I’m not sure why. Initially, when I did not use aria-polite
, it did not read the content after expanding, even though I have aria-expanded
in my code and linked my summary
to the content with aria-controls
. I want to know how I can solve this and what the problem in my code might be.
Community feedback
- @AnaCarol2001Posted 3 months ago
Hey, good job with your solution!
About your accessibility concerns, since you used the
details
andsummary
tags, you don't need thearia-expanded
andaria-controls
becausedetails
already provide an accessible description.I don't know much about screen readers. So, after testing your project and comparing it to the
details
examples provided by MDN docs with NVDA in Firefox, it seems to work as expected. The screen reader announces that it is clickable, and when clicked, it announces that it's expanded, and with the arrow down key or NVDA+downArrowKey, you can keep reading and access the information.As far as I know, the screen reader shouldn't read the content immediately but announce the element's state (collapsed or not collapsed), and the user will keep reading.
Accessible description - MDN Stackoverflow answer about screen reader reading new content ('Simply read on' part talks about aria-expanded)
Marked as helpful0@kaamiikPosted 3 months agoThanks for your good feedback @AnaCarol2001 Yes, you are absolutely right. The truth is, I had a misconception about this, thinking that when the accordion opens, the screen reader should read the text, but then I realized that the arrow key should be used. The links you shared are really great, thank you very much.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord