search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.07k stars 13.51k forks source link

feat: Define top-level ARIA landmark regions to improve accessibility #18671

Closed amymarsh4work closed 5 years ago

amymarsh4work commented 5 years ago

Feature Request

Ionic version: [x] 4.x

Description I’m working on a new Ionic 4 app that is based on the split-pane w\side-menu starter template. We have members on the team that specialize in UX and accessibility. I'm a developer and have been collaborating with them on improving our apps. We recently had a PR approved in 4.6.0 to assign the ARIA role 'navigation' to the menu component. Yay!

This was a proud moment, having my first pull request approved. The team seemed optimistic too...and then I had a followup meeting with one of our accessibility experts. :D

The feedback I got next was extremely useful. It went something like this: "So, you're a user and you arrive at the site and an ARIA role of 'navigation' is announced...and you think 'oh, great'! But then, there's nothing else there because none of the larger structural elements are labeled or recognizable to the assistive technology". It was immediately apparent how incomplete my solution was within the broader context!

Preferred Solution This feature aims at giving all perceivable content on a page a semantically meaningful role - focusing on the top-level of the Accessibility Tree. Assigning each region a role would make it easy for assistive technology users to understand the meaning of the overall layout of a page, content and functionality it contains.

These are small, non-breaking code changes that will make significant impact. Implementation could involve using either HTML5 sectioning elements (preferred) or ARIA landmark roles, and follow WAI-ARIA guidelines. Here's what I'm considering as a mapping between landmark roles and Ionic components:

I will be submitting a PR shortly! :)

Alternatives Although in many cases we could simply modify the markup to improve accessibility within our own codebase, it wouldn't be DRY, and we are motivated to contribute to the Ionic Framework, and make it accessible for everyone.

References https://www.w3.org/TR/wai-aria-practices-1.2/#html5-sectioning-elements https://www.w3.org/TR/wai-aria-practices/examples/landmarks/banner.html https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html https://www.w3.org/TR/wai-aria-practices/examples/landmarks/contentinfo.html

Related Support Case and PR bug: Unable to set ARIA role to 'navigation' on menu component. fix(menu): change ARIA role from complementary to navigation

brandyscarney commented 5 years ago

Thanks again for the thorough issue and PR! I am going to close this as I believe your PR resolves it, but please correct me if I am wrong and I will reopen. 🙂

ionitron-bot[bot] commented 5 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.