From 1a8922d7cc58a7acc976fc6a71f573431a4606cd Mon Sep 17 00:00:00 2001 From: Dave Price Date: Fri, 21 Jun 2019 13:29:58 +0100 Subject: [PATCH 1/2] Add Accessibility --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 39be9682..03e71171 100644 --- a/README.md +++ b/README.md @@ -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)** + +Download Link Icon + +We have noticed that Voiceover does not read aria-labels in anchor tags `` 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. + + Getting help ------------ From 7db28f69275e764ce7251815899a6de84258571e Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 26 Jun 2019 14:49:02 +0100 Subject: [PATCH 2/2] Refactored wording from review --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 03e71171..3dade210 100644 --- a/README.md +++ b/README.md @@ -198,13 +198,11 @@ Accessibility ### Screen Reader Observations -#### Voiceover (Mac)** +aria-label on `` elements -Download Link Icon +We have noticed that Voiceover on Mac's does not read aria-labels in anchor tags `` 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. -We have noticed that Voiceover does not read aria-labels in anchor tags `` 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. +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