#31 additional “assistance”

submitted on by Stefania

Bad code

 <a href="/contact" aria-label="If you find that you need additional 
assistance in navigating or accessing the content of this website,
please call our customer service toll free number 1-800-666-8654309" title="If
you find that you need additional assistance in navigating or accessing
the content of this website, please call our customer service
toll free number 1-800-666-8654309"
>

Contact
</a>
<a href="/login" aria-label="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309" title="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309">
Login
</a>

Issues and how to fix them

  1. aria-label, aria-labelledby, etc. must not be misused for dumping contact information or other unrelated content.
  2. Text in a link must describe the purpose or the target of the link.
  3. The visible label of an element should match the accessible name.
  4. Information concerning accessibility should be on a dedicated page (e.g. an accessibility statement) and/or the contact page.
  5. The title attribute shouldn't be used for important contact information due to inconsistent browser support and lack of accessibility.
  6. Redundant link text should be avoided.

Good code

<a href="/contact">
Contact
</a>
<a href="/login">
Login
</a>