King County COVID19 - Bug: Navigation to translated pages appears as buttons but works like hyperlinks

[alboss]

Issue Summary

Links to translated pages are formatted to look like buttons. This causes accessibility issues, because you activate links and buttons with different keys.

There are also UX issues with this, because things that look like buttons generally perform actions, whereas things that look like links are ordinarily used for navigation.

Note: menus like the kingcounty.gov left-hand navigation tend to blur those boundaries. Responsive design often reuses the same style for phones (where a menu takes over the screen and actually should be buttons) and larger screens (where a menu is really links to other pages). We didn't know better in 2013. We do now.

Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://kingcounty.gov/depts/health/covid-19.aspx
2. Scroll about halfway down to the available translations
3. Click the button for any language

Behavior

• A new page loads.

Expected behavior

• A link navigates the user to a new resource, taking them away from the current context (internal links are the only wrinkle here). A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu using aria-haspopup. (Source: marcysutton.com)

Actual behavior

• Clicking takes you to a completely different page, because what looks like buttons are actually hyperlinks.

Versions

• All

Device Information:

• OS: all
• Browser: all
• Version: all

Code

Current Code

<a class="btn btn-primary btn-block" href="/depts/health/covid-19/languages/ASL.aspx" 
role="button" data-toggle="tooltip" data-placement="left" title="" 
data-original-title="COVID-19 resources in American Sign Language for the 
Deaf/Hard of Hearing and DeafBlind">ASL for D/HOH &amp; DB</a>

Suggested Code

Difficult to say. Obviously you want some sort of stylistic choice that makes these links differentiated from the rest of the page. Perhaps use list groups?

<ul class="list-group">
  <li class="list-group-item">
     <a href="/depts/health/covid-19/languages/ASL.aspx" data-toggle="tooltip" 
data-placement="left" title="" data-original-title="COVID-19 resources in 
American Sign Language for the Deaf/Hard of Hearing and 
DeafBlind">ASL for D/HOH &amp; DB</a>
  </li>
  <li class="list-group-item"> (for each language option) </li>
</ul>

Specifications

• WCAG Principal 3.2: Predictable
  Make Web pages appear and operate in predictable ways.
• WCAG SC: Success Criterion 3.2.4: Consistent Identification
  Components that have the same functionality within a set of Web pages are identified consistently.
• Severity:
  Fails Level AA Conformance to Web Content Accessibility Guidelines

Additional References

• ARIA: button role

[alboss]

I'll pass this on to the Public Health webmaster. Stay tuned.