-
-
Notifications
You must be signed in to change notification settings - Fork 778
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
Update wiki page with another method for making SVGs WCAG compliant #6653
Comments
This comment was marked as duplicate.
This comment was marked as duplicate.
Hi @Jperparas, thank you for taking up this issue! Hfla appreciates you :) Do let fellow developers know about your:- You're awesome! P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :) |
Availability: 4/25-4/30 early afternoon ETA: 4/30 EoD |
Overview MethodsUse an
|
@Jperparas this is well done, however the "Solution" under "Potential conflicts with adding an accessible name to an element" is not always effective and the situation is rather complex, so I think it would be better to omit mention of this problem. I modified the last Action Item to be much simpler, so please edit accordingly. |
@roslynwythe Thank you! I was dubious of the solution as well. I omitted the potential conflict section and added the new last Action Item. |
Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.
If you need help, be sure to either: 1) place your issue in the You are receiving this comment because your last comment was before Tuesday, May 7, 2024 at 12:06 AM PST. |
|
Thank you @Jperparas for creating this documentation of methods to make accesible SVGs. |
Overview
As developers we need to update a wiki page with an additional method for providing SVG graphics with accessible names in order to comply with WCAG
Details
An accessible name is a short string of text that identifies a user interface element and gives users of assistive technology a label for it. The "alt-text" attribute is used to provide an accessible name for an img element, however the "alt-text" attribute is not applicable to an svg element. The wiki page https://github.com/hackforla/website/wiki/How-to-make-SVGs-and-other-images-WCAG-compliant describes methods for providing an accessible name to svg elements, and in this issue we will add a new method.
Action Items
fill
andviewBox
to the outer svg), and outer svg can also provide an accessible name using these rules:aria-labelledby
attribute to reference the element containing the desired text.aria-label
attribute to specify the name, or else use thearia-labelledby
attribute and reference a new child<title>
element. If used, the<title>
element should be the first child of the outer<svg>
aria-labelledby
is preferable toaria-label
Resources/Instructions
HTML and accessibility tree depicting a duplicate accessible name "GitHub GitHub" on the link wrapping an svg element
HTML and accessibility tree depicting solution to duplicate accessible name
https://github.com/hackforla/website/wiki/How-to-make-SVGs-and-other-images-WCAG-compliant
https://www.w3.org/TR/using-aria/
https://canvas.workday.com/accessibility/the-accessibility-tree/#how-to-view-the-accessibility-tree
The text was updated successfully, but these errors were encountered: