Moodle App Accessibility: Difference between revisions
From MoodleDocs
- Moodle App Overview
- Moodle App Development Guide
- Moodle App Plugins Development Guide
- Moodle App Remote Themes
- Moodle App Customisation
- Setting up your development environment
- Using the Moodle App in a browser
- Moodle App Translation
- Moodle App FAQ
- Moodle App Development Process
- Moodle App Release Notes
Upgrade from previous versions:
- See all Moodle App pages
- See pages for Moodle App Ionic 5 (current)
- See pages for Moodle App Ionic 3 (legacy)
- See pages Moodle App Ionic 1 (legacy)
- See pages for Moodle App Phonegap (legacy)
For user documentation see Moodle Mobile
m (Noeldemartin moved page Moodle Mobile Accessibility to Moodle App Accessibility: Consistency) |
No edit summary |
||
| Line 3: | Line 3: | ||
= Screen readers = | = Screen readers = | ||
VoiveOver and TalkBack are the native applications for screen reading in iOS and Android devices. In order to make the code understandable to these applications we encourage the developers | VoiveOver and TalkBack are the native applications for screen reading in iOS and Android devices. In order to make the code understandable to these applications we encourage the developers to use the [https://www.w3.org/TR/wai-aria-1.1/|Accessible Rich Internet Applications (WAI-ARIA) 1.1] recommendations of W3C. Those documents includes a bunch of rules to be applied to the HTML code to add semantic information to it. | ||
First step on that is to [https://www.w3.org/TR/wai-aria-1.1/#role_definitions|identify the role] of the main elements of navigation and information of the page. Then, | First step on that is to [https://www.w3.org/TR/wai-aria-1.1/#role_definitions|identify the role] of the main elements of navigation and information of the page. Then, you should apply the correct aria attributes to the elements that conform that role. | ||
[https://github.com/moodlehq/moodleapp/commit/b95de260ee46d6278d03cff294015aa11fd99a6b Here you have some examples] of how to apply these attributes. | [https://github.com/moodlehq/moodleapp/commit/b95de260ee46d6278d03cff294015aa11fd99a6b Here you have some examples] of how to apply these attributes. | ||
= Tools and resources = | |||
These are some tools and resources that can be useful to improve accessibility: | |||
* [https://chrome.google.com/webstore/detail/aria-devtools/dneemiigcbbgbdjlcdjjnianlikimpck ARIA DevTools browser extension] — Navigate a site like a non-sighted user would. | |||
* [https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi headingMaps browser extension] — Navigate page headings. | |||
* [https://chrome.google.com/webstore/detail/landmark-navigation-via-k/ddpokpbjopmeeiiolheejjpkonlkklgp Landmarks Navigation browser extension] — Navigate landmarks. | |||
* [https://developer.chrome.com/docs/devtools/accessibility/reference/#pane Accessibility Pane in Chrome] — Inspect accessibility roles and values. | |||
* [https://www.youtube.com/watch?v=HE2R86EZPMA BingO Bakery: Headings, Landmarks, and Tabs] — Video introducing some basic concepts. | |||
Revision as of 12:03, 15 September 2021
Screen readers
VoiveOver and TalkBack are the native applications for screen reading in iOS and Android devices. In order to make the code understandable to these applications we encourage the developers to use the Rich Internet Applications (WAI-ARIA) 1.1 recommendations of W3C. Those documents includes a bunch of rules to be applied to the HTML code to add semantic information to it.
First step on that is to the role of the main elements of navigation and information of the page. Then, you should apply the correct aria attributes to the elements that conform that role.
Here you have some examples of how to apply these attributes.
Tools and resources
These are some tools and resources that can be useful to improve accessibility:
- ARIA DevTools browser extension — Navigate a site like a non-sighted user would.
- headingMaps browser extension — Navigate page headings.
- Landmarks Navigation browser extension — Navigate landmarks.
- Accessibility Pane in Chrome — Inspect accessibility roles and values.
- BingO Bakery: Headings, Landmarks, and Tabs — Video introducing some basic concepts.
