question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow Octicon to take and render alt text

See original GitHub issue

Our 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:

https://github.com/desktop/desktop/blob/249c06d51332a7254de848e1c77a60e1ae52d587/app/src/ui/octicons/octicon.tsx#L65-L79

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

4reactions
lisavogtsfcommented, Feb 14, 2019

@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?

1reaction
shiftkeycommented, Feb 14, 2019

@lisavogtsf thanks for picking this up. We can talk more about the changes over in #6848! 🎉

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found