Accessibility updates to arrow SVGs #2231
Conversation
| </g> | ||
| <g> | ||
| </g> | ||
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 444.531 444.531" style="enable-background:new 0 0 444.531 444.531;" xml:space="preserve" role="img"> |
There was a problem hiding this comment.
For this svg add the attribute aria-hidden="true" so the screen reader won't read the "left arrow" part
<svg ... aria-hidden="true">
There was a problem hiding this comment.
I tried it out using the ChromeVoxLite just adding role="img" and it seems to avoid the <title> and <desc> text. Are there other screen readers that need aria-hidden?
There was a problem hiding this comment.
Yeah when i used Voiceover it was still reading the arrow.
| @@ -35,6 +35,7 @@ h4 { | |||
|
|
|||
| a { | |||
| color: $color-medium; | |||
| cursor: pointer; | |||
There was a problem hiding this comment.
The whole card is clickable, I noticed a couple of areas where there wasn't a pointer. The top image and some white space between text
|
@nickbristow I made both of your suggested changes. Let me know if you think this is 👌 to merge! |
| </g> | ||
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 444.531 444.531" style="enable-background:new 0 0 444.531 444.531;" xml:space="preserve" role="img" aria-hidden="true"> | ||
| <title>Arrow left</title> | ||
| <desc>Icon image of an arrow pointing to the left</desc> |
There was a problem hiding this comment.
Is there a reason to include title and desc tags in the SVG? /cc @nickbristow
There was a problem hiding this comment.
yeah, screen readers can read that. Although putting aria-hidden='true' on them will hide them anyway.
Its kind of a wash. At the very least its there if someone forces a screen reader to read them anyway.
| Read more | ||
| <span class="usa-sr-only">about {{ include.tagline }}</span> |
There was a problem hiding this comment.
I tested this in VoiceOver and it's reading it backwards ("about..." is first, then "Read more"):
Does "Read more" have to be in a span to be read first, since the other text is in a span? /cc @nickbristow
There was a problem hiding this comment.
Hmm that's interesting. I'll try doing that and check with VoiceOver
There was a problem hiding this comment.
@maya mine reads more about ... either way 😕
There was a problem hiding this comment.
Oh that's interesting! I have no idea why it's doing that then on my machine. 🤷♀️
There was a problem hiding this comment.
It could just be on my machine. If you feel motivated to check it with/without the <span> we could determine if it is how one of our machines renders it
| <article class="card {{ wds_grid_class }}"> | ||
| <div class="card-link" onclick='window.location = "{{ include.link }}";' tabindex="-1"> | ||
| <div role="img" | ||
| title="{{ include.image_alt }}" |
There was a problem hiding this comment.
So it seems like you set your alt image tags manually in the post pages, but I just want to mention that you shouldn't be using "Image of..." bc that's redundant as it being an image is already announced to users with the role="img" property. More info here: http://webaim.org/techniques/alttext/
There was a problem hiding this comment.
I believe I've addressed this in 9c36a35, but we should make sure this is noted elsewhere as an accessibility training resource, since I know people are often writing alt-text on the fly (not just for this site, but across 18F).
There was a problem hiding this comment.
j/k, this is covered in the accessibility guide!
There was a problem hiding this comment.
👍 👍 to both of these. @coreycaitlin maybe in our example post we could make sure to phrase the alt text so that we don't get duplication like Maya is talking about??
Fixes issue(s) #2221
😎 PREVIEW
Changes proposed in this pull request:
arrow-rightandarrow-lefticons. They now haverole="img"which makes them presentational and not apparent while tabbing on a screenreader. Checked manually with ChromeVoxLitesr-onlyhelp text near arrows in place of arrow image descriptions.<a>, but has a click handler that follows the link provided. I then added anchors to the title andRead moretext./servebuild script. We don't need to include markdown and helper files in our development build!/cc @maya @nickbristow @coreycaitlin