search

mpaiva / CRDC-DSRC

Accessibility Assessment for Civil Rights Data Collection Data Submission Resource Center
0 stars 0 forks source link

Logo: Visible label and accessible name do not match #10

Open mpaiva opened 6 months ago

mpaiva commented 6 months ago

2.5.3 Label in Name

Reference: https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html

There's no need to use aria-label and title in the links. Ideally, you should wrap the entire logo (emblem + text) with the a single link, instead of three links taking to the same place.

Here's my recommendation, if you can implement it in Drupal:

<div class="usa-logo__text has-flex">
  <a class="is-clickable margin-right-05" href="/">  
    <div class="ed-seal-container margin-right-05">
      <img src="/themes/custom/civil_rights/ed-seal.svg" width="57" class="logo-img margin-right-05" alt="U.S. Department of Education Seal">
    </div>
    <div class="has-flex flex-column flex-justify-center">
      <div class="is-clickable font-sans-3xs text-base-lightest text-uppercase is-hidden-touch text-normal">
        Civil Rights Data Collection
      </div>
      <div class="margin-bottom-1 font-sans-lg is-hidden-touch text-base-lightest text-bold">
        Data Submission Resource Center
      </div>
    </div>
  </a>     
</div>