@maheshnnaik
Submitted
@AnaCarol2001
@maheshnnaik
Submitted
@AnaCarol2001
Posted
Hey! Congratulations on completing this challenge.
I noticed you used h4
for the heading, but it's important not to skip heading levels because screen readers users use them to navigate through the page. So, I'd suggest changing them to an h1
and an h2
and resizing them using CSS.
About the CSS, removing the fixed height and width from the container makes your project more similar to the design.
<h1>–<h6>: The HTML Section Heading elements : Accessibility - MDN
Marked as helpful
@kaamiik
Submitted
What are you most proud of, and what would you do differently next time?
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.
What challenges did you encounter, and how did you overcome them?
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.
What specific areas of your project would you like help with?
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.
@AnaCarol2001
Posted
Hey, good job with your solution!
About your accessibility concerns, since you used the details
and summary
tags, you don't need the aria-expanded
and aria-controls
because details
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 helpful
@chaithawat21
Submitted
What are you most proud of, and what would you do differently next time?
First time to use JavaScript DOM
What challenges did you encounter, and how did you overcome them?
trying to analyze each section parts for writing Javascript
What specific areas of your project would you like help with?
I would greatly appreciate any feedback or suggestions you might have.
@AnaCarol2001
Posted
Hey, great job with your solution!
My only suggestion is regarding accessibility. Since you used span elements as the rating options, it's impossible to navigate between them using the keyboard (Tab to focus, arrow keys to choose an option, and Enter key to select/submit). So, instead, you could use radio buttons, which have these functionalities native implemented, and get the selected value from the submitted form. You can check this Star Rating example from the Web Accessibility Initiative to get an idea.