Allow Octicon to take and render alt text
See original GitHub issueOur Octicon component doesn’t allow setting an alt text (for screen readers, and other accessibility technologies) via its props. Tackling some accessibility bugs requires that we implement this.
According to this somewhat outdated article you can do this by adding a title tag at the beginning of the svg block, which I think will work nicely with our current implementation.
The Octicon component prop should be called ariaLabel
, as this is used by the octicons-react package’s components. This will ease our transition whenever we tackle #5185.
The Octicon component’s render method lives here:
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
Accessibility: Image Alt text best practices - Siteimprove Support
According to WCAG, images of text are not allowed. If you cannot avoid images of text, its best to have the exact same...
Read more >Writing Alt Text for Accessibility: Guidelines and Examples
In general, it's a good idea to use HTML to render text as much as possible, rather than embedding text in an image....
Read more >Avatar | Primer ViewComponents
Use avatars to represent users or organizations. ... If the avatar functions as a link, provide alt text that helps convey the function....
Read more >How do I write alt text for an icon inside a button tag?
You should remove the alt attribute from your Icon element. If it doesn't render to an img element, then it's not valid HTML...
Read more >Image ALT Tag Tips for HTML - Penn State | Accessibility
If images fail to load, ALT text will show what the images would have said in a ... but may be the only...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@outofambit I would like to pick this up. I still need to study what is currently going on, but I always approve of accessibility improvements! Need alerts anywhere else?
@lisavogtsf thanks for picking this up. We can talk more about the changes over in #6848! 🎉