Accessibility Guide - forem/ForemWebView-android GitHub Wiki

What is Accessibility?

Accessibility is a practice of making products usable by as many people as possible, mainly focused towards specially enabled people with conditions like:

  • blindness / low vision
  • color blindness
  • impaired hearing
  • cognitive disabilities
  • confined motor skills, etc. Accessibility is also written as A11Y or a11y in shorthand.

How to check if app is accessible by everyone?

There are various manual and automated tests to check if app is accessible by all or not. Some of the most important services are mentioned below.

Accessibility Scanner : Using Accessibility Scanner we can take screenshots of each and every screen in the Oppia-app manually and the Accessibility Scanner app will give the output for the individual screenshot mentioning all the errors.

Screen Reader: Screen readers like Talkback can be used to test the app manually. Talkback app is used by blind people to navigate to different items in the screen and get audio based output. This app will not give any error like Accessibility Scanner.

AccessibilityChecks: Developers can activate the AccessibilityChecks in all Espresso test cases which will give errors related to accessibility.

Some other services are : Magnification, Color Inversion, Color Contrast, Font size, Switch Access, Live Transcribe, etc which can be found in Android Device's settings similar to Accessibility Scanner and Talkback.

Note: We do not enable AccessibilityChecks in our Espresso test case because the accessibility guidelines for web-pages are different and they mostly fail on android device so because of WebView usage all Espresso test will usually fail because of website.

What is Accessibility Scanner?

Accessibility Scanner is an app/service in android which scans through screens and provide accessibility based suggestions like:

  • increasing the size of all clickable items - so that people with confined motor skills can click on items easily,
  • increasing foreground:background color contrast or text size so that people with color-blindness or low vision can read content easily, etc.

This service is useful for developers and testers and not for users.

Using Accessibility Scanner

  1. Open Google Play Store
  2. Download/Install Accessibility Scanner app
  3. Open Settings and search Accessibility Scanner
  4. Click on Use Accessibility Scanner -> Allow
  5. You will notice a blue colored floating button with tick/check icon.
  6. Now on any screen inside the app click on the floating button to take snapshot.
  7. You will notice that the scanner scans the screen and gives suggestion/errors if any.

Developer Tips

Color Contrast

  • for large text(14sp bold or 18sp regular) foreground:background ratio should be >= 3 : 1
  • for small text foreground:background ratio should be >= 4.5 : 1

Touch Targets

  • Minimum size for any clickable item — 48dp x 48dp (including padding)
  • Minimum gap between two clickable items - 8dp

Content Labels

  • for clickable images, floating action buttons, etc. there should be meaningful content description.

What is Talkback?

Talkback is a screen-reader by Google available in android devices. It gives spoken feedback so that anyone can use the device without even looking at the screen. This is especially useful for blind people.

How is it different from Accessibility Scanner?

Accessibility Scanner: detect errors, cannot be used by blind people Talkback: cannot detect errors, actually used by blind people

Setting up Talkback

  1. Open Google Play Store
  2. Install Android Accessibility Suite app
  3. Open Settings, search Talkback
  4. Read all the information about it on the screen.
  5. Turn on Use Service -> Allow

Common gestures while using Talkback

Swipe Left/Right: Screen reader outputs the audio for each view/item in the app so that blind people can understand what's going on in the app. Not all content is spoken at once otherwise the user will lose the context easily. To make it more friendly the screen reader allows swipe left/right gesture with which the user can navigate between views back-and-forth.

Double Tap: Exactly similar to single tap for non-accessibility users. Why? Because blind people can tap on screen but don't know exactly where to do that so screen-readers normally highlight a specific view and users can double-tap anywhere on the screen and it will act as single-click on that highlighted view.

Swipe up then right to view or Tap with three fingers: What happens if we have some swipe gesture? For example in Gmail app you can swipe on emails to archive or delete email. But how would an accessibility-user do that because a swipe gesture in such cases requires precision and sometimes a particular length of swipe too. For such cases this gesture (swipe up then right to view) helps users to navigate to new dialog which shows list of actions that the user can do on specific item.

Developer tips

  1. Try to use any android app using Talkback and keep your eyes closed as this will give you much better context.
  2. The screen-reader starts from top-left view of screen and with each swipe shifts to next view.
  3. The format screen-reader follows is: <content-text>, <type-of-view>, <possible-gestures>.

References