Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve a11y of SVG elements using ARIA #6976

Open
schalkneethling opened this issue Sep 17, 2018 · 2 comments · May be fixed by #12077
Open

Improve a11y of SVG elements using ARIA #6976

schalkneethling opened this issue Sep 17, 2018 · 2 comments · May be fixed by #12077
Labels
♿ a11y An MDN Web Docs accessible by everyone effort: medium This task is a medium effort. idle p3 We don't have visibility when this will be addressed.

Comments

@schalkneethling
Copy link

schalkneethling commented Sep 17, 2018

After reading the tip Chris Mills recently learned with regards to setting role=img on an SVG, I did some more reading and found some additional things we can do to improve the a11y of our SVG images.

This means updating the current SVG elements of the icon system to make proper use of:

  • role="img"
  • aria-labeledby="title desc"
  • title with an id that matches the value of aria-labeledby
    *<title>
  • <description> (as appropriate) with an id that matches the value of aria-labeledby
  • role="presentation" on the SVG child element, unless the child is of type text

More can be read here:
https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

Bugzilla

https://bugzilla.mozilla.org/show_bug.cgi?id=1491779

@schalkneethling schalkneethling self-assigned this Sep 17, 2018
@schalkneethling schalkneethling removed their assignment Jun 26, 2019
@Elchi3 Elchi3 transferred this issue from mdn/sprints May 26, 2020
@caugner caugner transferred this issue from mdn/kuma Aug 26, 2022
@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Aug 26, 2022
@github-actions github-actions bot added the 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. label Oct 2, 2022
@caugner caugner added p3 We don't have visibility when this will be addressed. ♿ a11y An MDN Web Docs accessible by everyone accepting PR We invite you to open a PR to resolve this issue. and removed 🐌 idle Issues and PRs without recent activity. Flagged for maintainer follow-up. needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Nov 14, 2022
@caugner
Copy link
Contributor

caugner commented Nov 14, 2022

Resolving this PR would mean going through all our SVGs and ...

  1. Add role="img" on the <svg> element.
  2. Add<title> element inside it with an appropriate title text.
  3. Add ` element where it makes sense with an appropriate description text.
  4. Add role="presentation" on SVG child elements like <circle>.

But probably we can ignore <svg>s that have aria-hidden="true".

@caugner
Copy link
Contributor

caugner commented Jun 24, 2024

Note that we have meanwhile used role="none" on some purely decorative SVGs.

@caugner caugner added effort: medium This task is a medium effort. and removed accepting PR We invite you to open a PR to resolve this issue. labels Jun 24, 2024
@github-actions github-actions bot removed the idle label Jun 25, 2024
@github-actions github-actions bot added the idle label Jul 26, 2024
vladboisa added a commit to vladboisa/yari that referenced this issue Nov 3, 2024
Added the role="img" attribute with role="presentation" on the child SVG and title for improving a11y

Fixes mdn#6976
vladboisa added a commit to vladboisa/yari that referenced this issue Nov 3, 2024
Added the role="img" attribute with role="presentation" on the child SVG and title for improving a11y

Fixes mdn#6976

Signed-off-by: GitHub <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
♿ a11y An MDN Web Docs accessible by everyone effort: medium This task is a medium effort. idle p3 We don't have visibility when this will be addressed.
Projects
Status: No status
Development

Successfully merging a pull request may close this issue.

2 participants