Conversation
README.md
Outdated
|
|
||
| ### Screen Reader Observations | ||
|
|
||
| #### Voiceover (Mac)** |
There was a problem hiding this comment.
Maybe orientate this around the code rather than a particular reader, so this heading could be "aria-label on <a> elements"
There was a problem hiding this comment.
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
There was a problem hiding this comment.
It's more about framing it in terms of what elements cause a problem.
README.md
Outdated
|
|
||
| #### Voiceover (Mac)** | ||
|
|
||
| Download Link Icon |
There was a problem hiding this comment.
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. | ||
|
|
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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."
2 participants
No description provided.