Accessible Time Tracking Dashboard with Gulp and JSON
Design comparison
Solution retrospective
I have tried to make this page as accessible as I could. But the result seems awkward to me, especially the main, which has an aria-live attribute. I would really appreciate some help with this problem. Thanks!
Community feedback
- @grace-snowPosted almost 3 years ago
hi there
Big points for effort, but I don't think this is the most accessible approach I'm afraid.
There are 2 main problems
Firstly, you have a nav that doesn't navigate. It's actually a toolbar with buttons. For it to be a nav it would need to contain anchor tags that navigate to a different page for each option. Similarly, aria current page is telling me that this is a page navigation, but it's not. Very confusing.
If those are buttons, this is a tab interface so no nav is needed, just the expanded attribute and focus management like with any set of tabs. If you want to use a nav with links, the content should be on individual pages
The other potential problem is because you are generating all the page html markup via javascript. That means search engines for example (and potentially some screenreaders or other assistive technology) would not have access to that content all the time. This would be better if it was pre-hydtated I think, like in a static site or even better if the html was all present but the data only got populated via JS.
Things to think about anyway...
The other thing to mention is the content doesn't fit on my iPhone screen. Make sure you use max-width not width to allow content to fit - I'd need to inspect in browser to work out exactly what's causing it but I would guess its some explicit width and maybe margin in there somewhere
Marked as helpful0@mpbrunellePosted almost 3 years ago@grace-snow Thank you so much for your help! I'll try to improve accessibility by following your recommendations.
Could you tell me what kind of iPhone you have? I have tested the site on different devices without problems, so I wonder what you see on your phone.
Thanks again
0 - @byronbyronPosted almost 3 years ago
Looks really good, mate! 👌
Just a bit of margin bottom on the top section on mobile.
Marked as helpful0
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