Skip to content

SVG accessibility fixes#27826

Merged
patrickhlauke merged 4 commits intov4-devfrom
v4-dev-svg-a11y-fixups
Dec 13, 2018
Merged

SVG accessibility fixes#27826
patrickhlauke merged 4 commits intov4-devfrom
v4-dev-svg-a11y-fixups

Conversation

@patrickhlauke
Copy link
Copy Markdown
Member

  • add focusable="false" to all SVGs, to stop IE from including the <svg> in its default focus cycle
  • completely hide decorative SVGs using aria-hidden="true"
  • add role="img" to meaningful/"content" SVGs, ensure they have an appropriate <title> and/or aria-label

Comment thread site/_includes/icons/placeholder.svg Outdated
- add `focusable="false"` to all SVGs, to stop IE from including the `<svg>` in its default focus cycle
- completely hide decorative SVGs using `aria-hidden="true"`
- add `role="img"` to meaningful/"content" SVGs, ensure they have an appropriate `<title>` and/or `aria-label`
- simplify placeholder default title
- in most cases, no need for separate/redundant text and title (now that we make text itself part of the alternative text explicitly)
- no need (expect in rare cirumstances) to describe the placeholder image (unless the look of the image is important/the actual content, as is the case with the image thumbnail class)
- as the `alt` for the placeholder isn't really important, just add an ellipsis instead (otherwise, to be correct, we'd have to construct the whole "title+text" construct like we do now in the
placeholder.svg itself
@patrickhlauke
Copy link
Copy Markdown
Member Author

@XhmikosR force-pushed a change, and expanded this PR quite a bit to remove some redundant/overly descriptive text (now that this is constructed from both title and text). also includes changes to SVGO configuration to not remove role and to add/force focusable="false"

Comment thread build/svgo.yml Outdated
…sable=false

- regarding `focusable=false`, see svg/svgo#1011 (which would be the "proper" SVGO fix) and the (hacky) solution svg/svgo#817
@XhmikosR XhmikosR force-pushed the v4-dev-svg-a11y-fixups branch from b3d986a to 5dbcdc3 Compare December 13, 2018 13:02
@mdo mdo mentioned this pull request Dec 13, 2018
@patrickhlauke patrickhlauke merged commit c031584 into v4-dev Dec 13, 2018
@XhmikosR XhmikosR deleted the v4-dev-svg-a11y-fixups branch December 13, 2018 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants