Result Summary Component - semantic HTML5 & CSS3

Hey @akpekig ! 🙂

I want to thank you so much for providing such an extensive feedback on my solution and questions. It really means a lot to me!

I've incorporated most of what you recommended here into my solution, however I still have got a couple questions if you don't mind.

• When it comes to ensuring the accessibility for your projects, do you use any other tools other than the built-in DevTools? Maybe some screen readers that you would recommend?
• For the sr-only class do you have some kind of best practice that you'd use for each of your projects? I skimmed through some of your GitHub repos, though I couldn't find use of such class in that short time. I found one online that seems to be working just the way I want it, though it looks quite cumbersome despite how simple a task it needs to achieve:

.screen__reader__only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}

• at your memory section part recommendation the last <p> has tabindex="0", despite setting it hidden for accessibility devices with aria-hidden="true". Being able to tab to something that should be hidden seems a bit contradicting to me. Wouldn't it cause any issues with accessibility devices? Also when I inspect this <p> element with the Accessibility Tree in DevTools, I can see it's content added to the Section's Name attribute, resulting in Memory 92 out of 100 92 / 100.

I haven't experimented with your recommendations on the layout yet, but will definitely give it a try.

I just wanted to let you know that I really appreciate your help so far, and that I didn't forget about you at all, just had to make the time to respond. 😄

@tamasgazdik Np! I'm glad I could help.

• No, there aren't really a lot of tools out there, so I'd recommend learning the ins and outs on your own. Unfortunately, as it stands, accessibility is very programmatic, with the most popular tools focusing mainly on colour contrast and screen readers and even accessibility leaders like W3 unable to cover all the bases. There are some tools that "mimic" a screen reader by stripping your whole page down to just text content (I use ARIA DevTools for this), but even screen readers aren't universal. Tools like pa11y also do something a little like Lighthouse, but again, very visual/hearing impairment focused. Personally, I just turn my device's screen reader on and off. It helps to have a shortcut for this purpose. Additionally, there are way more user needs than visual/hearing impairments. A talented web developer compiled them into this book. Kitty Giraudel is another developer working to expand accessibility and she often posts pretty useful snippets.
• On most of the projects I work on (private because they're proprietary, sorry 😭), stylesheets are often pre-processed or taken from templates that do have this class or something similar. Bootstrap and Tailwind both have this class built-in, but yes, the snippet you posted is good too. Compared to other snippets, it isn't too lengthy IMO.
• My bad, I think that was an error. I meant to put the tab index on the section element, especially because this helps with keyboard navigation too. That said, even though it isn't semantically appropriate, you can tab into an aria-hidden element and I think most screen readers will simply understand it as tabbing into its nearest non-hidden element.

@akpekig

I haven't used Bootstrap or Tailwind yet, but I hear they're game changers so I'm looking forward to get to know them.

Regarding the tab order now I'm just curious how a screen reader would interpret it by tabbing into it, despite being aria-hidden, so I might just make a little experiment soon...

Thanks once again for your inputs and the sources on a11y, I'll definitely check them out!

Happy coding! 🙂

Hi @0xAbdulKhalid !

Thanks for the suggestion, makes total sense. I'll incorporate this suggestion in the code 🙂

@LoaiEsam37

Thank you for your kind words, Loai, I appreciate that! :)