Accessible Time Tracking Dashboard with Gulp and JSON

Community feedback

• 

  T

  Grace•31,270

  @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 helpful

  0

  ---

  

  Marie Pascale Brunelle•230

  @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
• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Looks really good, mate! 👌

  Just a bit of margin bottom on the top section on mobile.

  Marked as helpful

  0