Skip to content
This repository was archived by the owner on Nov 21, 2019. It is now read-only.

Add Accessibility #114

Open
discodavey wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add Accessibility #114

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a8922d
Add Accessibility
Jun 21, 2019
7db28f6
Refactored wording from review
Jun 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,18 @@ This codebase follows [single-direction margin declarations](https://csswizardry

Margins are generally preferred to padding for whitespace (due to [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)), but the latter can be used when relevant.

Accessibility
------------

### Screen Reader Observations

aria-label on `<a>` elements

We have noticed that Voiceover on Mac's does not read aria-labels in anchor tags `<a href="" arial-label="Voiceover ignores this on page load"></a>` in Safari when you load or reload the page. The only time it seems to read it out is if you tab to another piece of software or browser and then tab back to Safari.

When the link contains an image but no text (and so a description is essential), one work around is removing the anchor element's aria-label, and moving its descriptive text to the alt attribute.

Copy link
Contributor

@davidcmoulton davidcmoulton Jun 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overall structure above is good: the first paragraph states the problem, the second paragraph describes a solution.

First paragraph: the code example could be slightly tightened up, something like <a href="..." arial-label="Voiceover ignores this"></a>.

Second paragraph: rather than saying what we've done in a specific case, better to phrase in terms of how to address the problem for the general case.

Copy link
Contributor Author

@discodavey discodavey Jun 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think at this point we will need to add visuallyhidden so we can add a span for links that do not have an image. What do you think?

Copy link
Contributor

@davidcmoulton davidcmoulton Jun 26, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think keep it focused, so para 2 could be something like:

"When the link contains an image but no text (and so a description is essential), one work around is removing the anchor element's aria-label, and moving its descriptive text to the alt attribute."


Getting help
------------

Expand Down