Make header links more screen-reader friendly
MelissaBraxton opened this issue · comments
Background
We recently added header links as #s to the UX Guide and Methods. We used aria-hidden="true" tabindex="-1" so that screen readers would not read the header link as "number," but it turns out support for aria hidden is potty, so a screen reader now reads "[heading] number," which is not intuitive and may create confusion for folks who rely on screen readers.
Acceptance criteria (we'll know we're done when…)
- Our new linked headers make logical sense to folks using screen readers / screen readers read only relevant header information
- Screen reader reads "permanent link to [heading]" when focused on the heading link.
Tasks
- Ask in #g-accessibility for tips on making linked headings more accessible??
- research additional solution options as needed
- Implement change
- PO review
- Accessibility review
Screen shot of example page w/ header link #
We want to change our approach to header links to match how they're implemented in the TTS handbook per this example. ^. I think this entails replacing our current # with an icon, and adding alt text for the screen reader (I'm not a front end person, so others with FE expertise may know of a better approach!). We want a screen reader to read "permanent link to [heading]" when focused on the heading link icon.
Can we change the octothorp to the link icon like in the Handbook? Or usability test--my assumption is that the chainlink icon is more recognizable for what it does
That's the plan!
@MelissaBraxton - would love to keep updated with where you end up on recommended approach, so we can make the update in the product guide as well
@AnitaYCheng and I submitted a PR to make this change in the UX Guide, but we're awaiting a PR review from a front end person to review and revise (there's one part we couldn't get to work). Once that's done, we'll merge the PR on the UX Guide and also open a PR to make the same change on the Methods. Here's the PR: 18F/ux-guide#373