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 1 commit
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
14 changes: 14 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,20 @@ 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

#### Voiceover (Mac)**
Copy link
Copy Markdown
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.

Maybe orientate this around the code rather than a particular reader, so this heading could be "aria-label on <a> elements"

Copy link
Copy Markdown
Contributor Author

@discodavey discodavey Jun 24, 2019

Choose a reason for hiding this comment

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

This only applies to Safari with Voiceover so having the header defines it as an issue with this rather than someone scanning and thinking the problem is on all screen readers

Copy link
Copy Markdown
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.

It's more about framing it in terms of what elements cause a problem.


Download Link Icon
Copy link
Copy Markdown
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.

We're talking general approaches to take, so I don't think we need to mention the specific pattern in this case.


We have noticed that Voiceover does not read aria-labels in anchor tags `<a href="" arial-label="Voiceover"></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.

To overcome this we have removed the aria-label from the anchor tag and put the label description into the image alt tag instead. This means the description gets read out consistently.

Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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