Overview
Mobile accessibility, also known as A11Y, is the design and creation of mobile applications that can be used by everyone regardless of age, device, or disability. Accessibility support is necessary to allow assistive technology to interpret mobile pages. Abyss fully supports building accessible mobile applications and follows the Web Content Accessibility Guidelines (WCAG 2.1) and the UHG Accessibility Engineering Standards by the Accessibility Center of Excellence (ACOE).
The list below are steps to take as a developer to ensure accessibility compliance. Please take a minute to read through the following testing resources and familiarize yourself with how to utilize them for best practices.
Keyboard Navigation
Use an external Bluetooth keyboard only to navigate the page without using your finger to tap or swipe. A visual indicator, known as the keyboard focus, should appear when navigating content. Look for difficulty reaching or activating interactive components, or if the focus becomes trapped on portions of the screen.
Expected keyboard behavior for custom components is typically the following, but there are exceptions
- Content navigation
- Tab to enter a component
- Use arrow keys to navigate within the component
- Tab to exit the component
- Interacting with CTA or form components
- Enter or Space to mimic a tap or press
- Arrow keys to navigate to an item within a list OR mimic a swipe
- Tab to move onto the next item
Desktop Development Tools
XCode's Accessibility Inspector tool is available for inspecting the code of the application for accessibility features and labels via a mobile emulator.
Screen Reader Mobile Controls
A Screen Reader is an accessibility tool used primarily by sight-deficient users to navigate computer/mobile content. They interact with applications by reading aloud the content presented in the code. On mobile devices, users utilize either custom tap/swipe controls, Bluetooth keyboards, or both, to interact with the application. These users are impacted the most from lacking A11Y implementation.
Testing with a screen reader on physical mobile devices is important to understand if the code is working effectively for these tools.
Mobile devices provide the following screen readers, each with similar, yet unique functionality
- iOS VoiceOver: Learn about VoiceOver gestures
- Android TalkBack: Learn about TalkBack gestures
NPM Packages
Most NPM packages rely on axe-core. Set an impact level and start with critical issues then work down. Remember to allow time to fix critical issues in the User Story. Otherwise, the product developers will get frustrated and learn to ignore the errors, which defeats the purpose and doesn't help anyone.
Linting
For linting rules, work with an Accessibility Engineer to determine what to include there.
Summary
Remember, the tools/processes mentioned above don't catch all A11Y issues, but they serve as a great start to empowering the team to do some of your own testing.
You can learn more from the Mobile Accessibility page in the Accessibility Knowledge Center.
For further information, reach out to an Accessibility Engineer!
Accessibility Tools
If you're looking for an in-depth overview of what accessibility standards Abyss is working towards, visit our Abyss Accessibility page.