Mobile Accessibility

According to W3C “Mobile accessibility” refers to making websites and applications more accessible to people with disabilities when they are using mobile phones and other devices. WAI’s work in this area addresses accessibility issues of people using a broad range of devices to interact with the web: phones, tablets, TVs, and more.

Accessibility testing on mobile devices can be made easy with the following tools, while automation catches 40% of the bugs we always need to perform manual accessibility audits to make sure that applications are universally designed.

1. WCAG Accessibility Checklist For Android
   Let the WCAG Accessibility Checklist app help you bake accessibility directly into digital design. Optimize websites, meet important legal standards, and do it all with a streamlined, easy-to-understand, first-in-class tool.

   The WCAG Accessibility Checklist app is a powerful accessibility checker and reporting tool, offering a clear To Do list that delivers reminders and checklists to help you achieve the three tiers of accessibility compliance — Levels A, AA, and AAA.

   An accessible digital experience allows all people — regardless of ability — to utilize and benefit from sites, apps, and products. This app helps product owners, developers, and designers learn, understand, and take action toward building a better web for those with and without disabilities.

   Part checker, part To Do list loaded with as-you-go reminders, the WCAG Accessibility Checklist app acts like a quickfinder that clarifies guidelines and steers you step by step through accessibility best-practices.

   Great accessibility isn’t a thing you do, it’s a side-effect of thoughtful design. Together, let’s make the web more accessible to all.

   (The Web Content Accessibility Guidelines, or WCAG [pronounced “WOO-kag”] are backed and vetted by the World Wide Web Consortium [W3C], an international collective that develops open web standards for long-term usability.)

   Features

   • Simple checklists that detail three levels of accessibility compliance (Levels A, AA, and AAA)
   • Clear guardrails that align with WCAG 2.0 Guidelines
   • In-app Tips and What to Do lists
   • In-app links explain each WCAG 2.0 guideline in detail
   • Easy-to-understand dashboards keep track of your progress
   • Optimization actions automatically map to P.O.U.R, WCAG’s four principles of accessibility:
     • Perceivable
     • Operable
     • Understandable
     • Robust

     Performance

     • Identify accessibility issues and notify team members
     • Email checklist results to a customized recipient list
     • Manually test digital product accessibility against WCAG 2.0 Guidelines
     • Start optimizing immediately: no sign-up, sign-in, account, or authentication required
   • ‎WCAG Accessibility ChecklistFor IOS
     Let the WCAG Accessibility Checklist app help you bake accessibility directly into digital design. Optimize websites, meet important legal standards, and do it all with a streamlined, easy-to-understand, first-in-class tool.

     The WCAG Accessibility Checklist app is a powerful accessibility checker and reporting tool, offering a clear To Do list that delivers reminders and checklists to help you achieve the three tiers of accessibility compliance — Levels A, AA, and AAA.

     An accessible digital experience allows all people — regardless of ability — to utilize and benefit from sites, apps, and products. This app helps product owners, developers, and designers learn, understand, and take action toward building a better web for those with and without disabilities.

     Part checker, part To Do list loaded with as-you-go reminders, the WCAG Accessibility Checklist app acts like a quickfinder that clarifies guidelines and steers you step by step through accessibility best-practices.

     Great accessibility isn’t a thing you do, it’s a side-effect of thoughtful design. Together, let’s make the web more accessible to all.

     (The Web Content Accessibility Guidelines, or WCAG [pronounced “WOO-kag”] are backed and vetted by the World Wide Web Consortium [W3C], an international collective that develops open web standards for long-term usability.)

     Features

     • Simple checklists that detail three levels of accessibility compliance (Levels A, AA, and AAA)
     • Clear guardrails that align with WCAG 2.0 Guidelines
     • In-app Tips and What to Do lists
     • In-app links explain each WCAG 2.0 guideline in detail
     • Easy-to-understand dashboards keep track of your progress
     • Optimization actions automatically map to P.O.U.R, WCAG’s four principles of accessibility:
       • Perceivable
       • Operable
       • Understandable
       • Robust

       Performance

       • Identify accessibility issues and notify team members
       • Email checklist results to a customized recipient list
       • Manually test digital product accessibility against WCAG 2.0 Guidelines
       • Start optimizing immediately: no sign-up, sign-in, account, or authentication required
     • Mobile Web Accessibility Check
       Mobile Web Accessibility Check is a complete mobile solution to enable verification of mobile web accessibility against internationally recognized accessibility guidelines.

       INTEGRATIONS

       Mobile Web Accessibility Check uses heuristics from Google, ASLint or Deque (aXe Core).

       RESULTS

       Results can be viewed in a dashboard that shows the number of issues per page and the number of issues overall in a project.

       A detailed summary of each can issue found along with a screen shot highlighting the issue on the page can be found by navigating to a project.

       Issues for each batch can be exported to a Google Spreadsheet or CSV file.

       PROJECT

       Mobile Web Accessibility Check allows you to set up a project that contains multiple batches. Usually a project will be reviewed and issues fixed over time. This approach enables a diff to be created over time to see if accessibility issues are actually increasing or decreasing.

       IMPORT MULTIPLE URLS

       Mobile Web Accessibility Check enables multiple URLs to be extracted from one URL. Tap on ‘Manage pages’ and ‘Save all’ to extract all URLs.

       AUTOMATIC AUDITS

       Given a set of URLs, Mobile Web Accessibility Check can verify a set of URLs.

       COLOR CONTRAST

       Mobile Web Accessibility Check provides a built-in manual color contrast analyser that works on mobile.

       SAFARI INTEGRATION

       Mobile Web Accessibility Check can be run from Safari – tap on the Action icon, and select ‘MWAC’ icon to audit the current web page.

       FREE TRIAL

       Mobile Web Accessibility Check can be trialled for free for 7 days, after which the full version, which costs $1.99 per month, features multiple projects, multiple pages, unlimited audits and an integrated color contrast checker tool. The subscription is auto-renewable.

     • A11y Ally by Quittle
       As a developer, it can be hard to keep all your customers in mind when your primary focus is on delivering killer, new features. A11y Ally is an an accessibility issue discovery tool. You can use it passively to discover issues as they appear during regular use of your app or catch regressions during automated integration tests.

       Discover accessibility issues that static analysis tools can’t by checking what your app looks like to an accessibility service running on your device. For more details on how it works, instructions on usage, and everything else see https://github.com/quittle/a11y-ally

     • google/GSCXScanner: iOS Accessibility Scanner
       Google Scanner for A11y abbreviated GSCX is a developer assistant, as an objective-C library it sits in an iOS app’s process scanning it for issues to catch them before the developer even writes a test for them. The scanner comes built-in with checks for catching accessibility issues and supports an extensible plugin framework for adding your own checks.
     • Lint in Android Studio
       Android Studio provides a code scanning tool called lint that can help you to identify and correct problems with the structural quality of your code without your having to execute the app or write test cases. Each problem detected by the tool is reported with a description message and a severity level, so that you can quickly prioritize the critical improvements that need to be made. Also, you can lower the severity level of a problem to ignore issues that are not relevant to your project, or raise the severity level to highlight specific problems.The lint tool checks your Android project source files for potential bugs and optimization improvements for correctness, security, performance, usability, accessibility, and internationalization.
       Android Accessibility Tutorial: Getting Started
     • Axe for Android – WCAG Accessibility Scanner
       Deque’s Axe for Android Accessibility Service is an automated accessibility analysis tool kit available for analyzing the Accessibility of Android Native and Hybrid applications. Featuring Automated Eventing Stream AND View Hierarchy analysis, it is the most comprehensive Accessibility Suite available for the Android Operating System.Axe for Android is similar to Google’s Accessibility Scanner and supports a lot of the same features. It is built for WCAG 2.1 Compliance and backed by the industry leading Accessibility Expertise at Deque, the brains behind axe-core web compliance library.

       Introduction to axe for Android

     • Accessibility Inspector in Xcode
       Apple provides the Accessibility Inspector testing tool that can be launched by choosing Xcode > Open Developer Tool > Accessibility Inspector in the menu bar or Dock. You can download Xcode from the Mac App Store for free. The Accessibility Inspector presents a utility window that displays the information properties (and values), action methods, and position in the accessibility hierarchy of the object currently under the mouse pointer.

       Video Tutorial on using the Accessibility Inspector in Xcode

     • Talk Back for Android
       TalkBack is an Accessibility Service that helps blind and vision-impaired users interact with their devices.
       Talkback adds spoken, audible, and vibration feedback to your device. It is a system application that was pre-installed on most devices and is updated when the accessibility service is improved.
     • VoiceOver for iOS
       VoiceOver is a gesture-based screen reader that lets you enjoy the fun and simplicity of iOS even if you can’t see the screen. With VoiceOver enabled, just triple-click the Home button to access it wherever you are in iOS. Hear a description of everything happening on your screen, from battery level to who’s calling to which app your finger’s on. You can adjust the speaking rate and pitch to suit you.
     • android Accessibility Test Kit
       The AccessibilityChecks class allows you to use your existing test code to test for accessibility issues. As a View is acted upon in tests, checks from the accessibility test framework will be run automatically before proceeding. Simply import the class and add the following line of code to your setup methods annotated with @Before:(Use the above links to get more info)
     • Debugging Firefox for Android over USB
       It’s been possible for a long time to connect the Firefox Developer Tools to Firefox for Android so you can debug your mobile website. Until now, this
       was a fairly complex and error-prone process. From Firefox 36 we’ve made the process much simpler: in particular, you don’t need to deal directly with
       theadbtool at all. Now you connect using
       WebIDE, which takes care of setting up adb behind the scenes. For this to work, you need at least Firefox 36 on the desktop and Firefox 35 on the mobile device.
     • Remote Debugging on Android with Chrome
       Remote debug live content on an Android device from your Windows, Mac, or Linux computer.
       • Set up your Android device for remote debugging, and discover it from your development machine.
       • Inspect and debug live content on your Android device from your development machine.
       • Screencast content from your Android device into DevTools.
     • Accessibility Scanner
       Accessibility Scanner is a tool that suggests accessibility improvements for Android apps without requiring technical skills. Just open the app you want to scan, then tap the Accessibility Scanner button to find items in the app that might benefit from accessibility improvements. You can use this app to suggest changes to developers or to make changes yourself.Accessibility Scanner suggests improvements such as enlarging small touch targets, increasing contrast, and providing content descriptions so that your app can be more easily used by individuals with accessibility needs. Designing for accessibility can allow you to reach a larger audience and provide a more inclusive experience.
     • A11Y Tools by Paul J Adam
       A11yTools is a collection of HTML Web Accessibility Testing Tools in one location on your iPhone and iPad for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and easily take a screenshot on your phone showing the a11y error to developers and designers.
     • IOS Color Contrast Checker
       Color Contrast is a tool to measure the contrast between two colors in a screenshot or mobile website, helping ensure your app meets the internationally recognized recommendations in the Web Content Accessibility Guidelines (WCAG) 2.0.Color Contrast has the following features:
       + Verify that the color contrast between two colors in an app, website or photo is sufficient to pass WCAG 2.0 accessibility guidelines / Section 508.
       + View suggested colors
       + Generate a report that can be shared using SMS, Email or Notes.
       + Verify color contrast directly from Safari and Photos app.

       To use Color Contrast

       • Load an image or website by tapping the icon in the top right corner. The image can be an existing image from the Photo Library or a new picture taken with the camera. Enter a URL to load a mobile website.
       • Move each color picker in turn to select two colors.
         You can also pan around the image by swiping left/right/up/down or pinch to zoom in/out.
       • The Color Contrast results will be displayed at the bottom of the screen.
       • Tap the ‘Share’ icon to create a report that can be emailed, added to notes, copied or saved to your Photo Library.

There are a number of bookmark lets/favelets that also help test for accessibility bugs on responsive design, so please check out our collection of “Bookmarklets for accessibility testing” & also feel free to share any more tools/resources that can be added to the list.