search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
164.44k stars 29.35k forks source link

[Accessibility] Lacks textual equivalent to <svg> elements in notifications. #227494

Open Krituhar opened 2 months ago

Krituhar commented 2 months ago

[Issue] The "i" icon and "tick" icon that appears when user hover on "Editor Language Status" ({}) control are without textual equivalents.

[User Impact] Screen reader users will not receive an accurate impression of the contents of these images.

[Code Reference]

<span class="codicon codicon-info">::before</span>

[Recommendation] Ensure images provide informative alternative text. Textual equivalents must be both concise and descriptive.

To add a textual equivalent to an <svg> element, add a child to the SVG. Place the textual equivalent in the <code><title></code>, then add an ID to the <code><title></code>. Finally, on the<code><svg></code>, add an <code>aria-labelledby</code> attribute and set its value to the ID of the <code><title></code> Provide "info" for the i icon and "selected" or similar for the tick icon.</p> <p>Screenshot of the issue: <img referrerpolicy="no-referrer" src="https://github.com/user-attachments/assets/47957f0f-050c-444b-bd09-0e6cacc6d331" alt="Screenshot 2024-09-03 at 5 17 47 PM" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vs-code-engineering[bot]"><img src="https://avatars.githubusercontent.com/in/281319?v=4" />vs-code-engineering[bot]</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.92.2. Please try upgrading to the latest version and checking whether this issue remains.</p> <p>Happy Coding!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/meganrogge"><img src="https://avatars.githubusercontent.com/u/29464607?v=4" />meganrogge</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>This seems really low priority</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jrieken"><img src="https://avatars.githubusercontent.com/u/1794099?v=4" />jrieken</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>This is uses the standard codicon rendering of <code>IStatusbarEntry#text</code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bpasero"><img src="https://avatars.githubusercontent.com/u/900690?v=4" />bpasero</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>@jrieken no, this is from rendering a custom hover here:</p> <p><a href="https://github.com/microsoft/vscode/blob/d0b2168a691be86907a2709f701acea482e8a584/src/vs/workbench/contrib/languageStatus/browser/languageStatus.contribution.ts#L290-L295">https://github.com/microsoft/vscode/blob/d0b2168a691be86907a2709f701acea482e8a584/src/vs/workbench/contrib/languageStatus/browser/languageStatus.contribution.ts#L290-L295</a></p> <p><img src="https://github.com/user-attachments/assets/691fee06-0e56-4a9e-a371-9b0559ae5b72" alt="Image" /></p> <p>If I understand this issue correctly, rendering a codicon alone is not sufficient to convey the information to screen reader users and thus needs ARIA labels. </p> <p>@Krituhar can you clarify how this should be done specifically for this case? There is no SVG element involved, rather the icon is renderer with a <code>:before</code>:</p> <p><img src="https://github.com/user-attachments/assets/e78ea974-f3c1-48ea-9fe5-2e254732672f" alt="Image" /></p> <p>Wouldn't it help if the entire hover had a custom ARIA label that is being read out that includes the severity per item?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jrieken"><img src="https://avatars.githubusercontent.com/u/1794099?v=4" />jrieken</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>@jrieken no, this is from rendering a custom hover here:</p> </blockquote> <p>But it used <code>renderLabelWithIcons</code>, which I assumed you own. Not?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bpasero"><img src="https://avatars.githubusercontent.com/u/900690?v=4" />bpasero</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>@jrieken no, I do not recall writing any of it, it seems to have come in via <a href="https://github.com/microsoft/vscode/pull/105589">https://github.com/microsoft/vscode/pull/105589</a></p> <p>But if we can make <code>renderLabelWithIcons</code> and maybe <code>renderIcon</code> accessible, we can likely fix it for more cases. I am just not sure how to convert a simple <code><span></code> element with a Codicon to be screen reader accessible without adding to many new elements around it, or without even having access to the parent node. That's why I suggested to fix it in the language status contribution code.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/meganrogge"><img src="https://avatars.githubusercontent.com/u/29464607?v=4" />meganrogge</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>@rperez030 and @jooyoungseo, do you have thoughts here?</p> <p>On the one hand, if the icon is providing useful info, it would be good to convey that. however, doing so will mean it's more verbose.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>