search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.47k stars 254 forks source link

Accessibility for Table and Table Title #5043

Closed samanr closed 2 years ago

samanr commented 2 years ago

Feature Request Description

As a user we require our application to be accessible with screen readers softwares for Windows and MacOs. Prominent softwares are JAWS (Windows) VoiceOver (MacOS ).

Requirements:

  1. The Table component should read table total rows and columns count using JAWS. With Mac VoiceOver this is read. (See screenshot).
  2. The reader should specifically read the table title in this case 'MyTable' before it begins reading the table information. In the ui5 react library, there is no provision to attach a 'title' to the table and therefore we have to obtain this behaviour by adding a tag, which allows the screen reader to skip it completely. </li> </ol> <h3><strong>Proposed Solution</strong></h3> <p>Library should provide accessibility and read the table rows and columns count out of the box by all allowed screen readers. Library should provide a table title property which would be accessible as well. For example Should read as "Entering 'My Table' table"</p> <h3><strong>Proposed Alternatives</strong></h3> <p>As an alternative library should allow attaching title component to the table such that they can be read together.</p> <h3><strong>Additional Context</strong></h3> <p>Screenshot: </p> <img width="1792" alt="Screen Shot 2022-04-08 at 8 29 09 PM" src="https://user-images.githubusercontent.com/22089053/162785916-257b16b0-94f6-4356-a1b0-98c0cd562582.png"> <p>Code Sandbox: You can reproduce this in the sandbox below.: <a rel="noreferrer nofollow" target="_blank" href="https://codesandbox.io/s/exciting-johnson-siskby?file=/src/App.js">https://codesandbox.io/s/exciting-johnson-siskby?file=/src/App.js</a></p> <h3><strong>Priority</strong></h3> <ul> <li>[ ] Low</li> <li>[x] Medium</li> <li>[ ] High</li> <li>[ ] Very High</li> </ul> <p>A clear and concise description of the impact/urgency of the required feature.</p> <h3><strong>Stakeholder Info</strong> (if applicable)</h3> <ul> <li>Organization: {...}</li> <li>Business impact: {...}</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/stbodurov"><img src="https://avatars.githubusercontent.com/u/62516604?v=4" />stbodurov</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Hello @SAP/ui5-webcomponents-topic-rl,</p> <p>Would you mind evaluating this feature request regarding ui5-table?</p> <p>Regards, Stanislav </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/nikolay-kolarov"><img src="https://avatars.githubusercontent.com/u/17043004?v=4" />nikolay-kolarov</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Hello @samanr,</p> <p>For the first issue - I tested in your example with Jaws 2021 and Jaws 2022 on Edge and Chrome. The column and row count is announced when you navigate with the virtual cursor. If you turn off the virtual cursor and navigate with the arrows it reads on which row you are and how many there are in total. Maybe you miss this announcement on first focus in the table, but this is not something that we can influence and it is up to Jaws to read it (like in the virtual mode). </p> <p>Here is a part of the speech output in reading mode/virtual cursor: heading level 2 My Table table with 2 columns and 27 rows Column 1 Column 2</p> <p>For the second - We have recently introduced APIs for this with this request <a href="https://github.com/SAP/ui5-webcomponents/issues/3597">https://github.com/SAP/ui5-webcomponents/issues/3597</a>, so you can use it to set your title.</p> <p>@elenastoyanovaa - FYI</p> <p>Best Regards, Nikolay</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>