URL Shortener API Landing Page

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hello

  This looks really great!

  I looked at code for one component and see some accessibility issues though

  1. Aria label value is not code for a computer , it's human readable text. “menu-toggle-btn” would not be read correctly and would make no sense
  2. The links in the nav should be links not buttons. That's really important as they have very different meanings
  3. a nav toggle button should actually be inside the nav, and you should be toggling the ul. This is because nav is a landmark, which screenreaders use to jump to common content sections. They would not be able to find the nav in this on first load
  4. In a disclosure pattern it's essential to use aria-expanded on the button, toggling between true and false to communicate state (and preferably aria-controls as well, pointing to the ID of the content being toggled)

  It’s also really important that you make sure content changes on the screen are announced. That’s not so necessary for the nav toggle, but really important with the shortened link. Add an aria-live attribute to the div wrapping the results (the shortened link). That div would need to be on the page at all times (not a conditional or display none), just the content within it would change. This aria live attribute is a way of saying “announce this when the content changes”

  I hope these are helpful learning points. Good luck

  Marked as helpful

  2

  ---

  

  Arsh Goyal•940

  @arshGoyalDevPosted over 2 years ago

  @grace-snow Thank you very much for the feedback. I will fix all these issues as soon as possible.

  0