There are a few fundamental checks you can run on mobile web content and native apps to test screen reader support on mobile. The good news is that while there are clearly some differences the key principles of web accessibility on the desktop are true also for the mobile. This applies to the mobile web, web apps and native apps.
Note: The tests below are just a subset of mobile accessibility guidelines that should be followed and focuses purely on alternatives for screen reader users.
There are two basic rules for alternatives on mobile:
- Give all functional and content related images an alternative and hide meaningless images and objects.
- Ensure the alternative is short and accurately describes the purpose of the image or object.
Top ten tests:
- Functional and content related objects must be accessible: ensure objects have the correct attribure i.e. alt attribute (HTML), label (iOS) or android:contentDescription (Android).
- Functional and content related objects have an alternative: all objects that are functional or contain content have an alternative that is clear and concise.
- Decorative objects are ignored: objects that are not functionality or content are ignored i.e. alt=”” in HTML or accessibility is not enabled in iPS and Android.
- Use tooltips for additional information: objects that need further explanation can use a tooltip or Hint (iOS). This should be used sparingly however and start with a plural; explanations should describe what the image/object does rather than read as a command i.e. “Increases font size” not “Increase font size”. Note, title is not well supported on mobile and should be avoided.
- Alternatives do not describe type: alternatives do not describe what the object is i.e. button, link, tab etc as this is already identified via the native code. The alternative for a play button therefore is ‘Play’, not ‘Play button’.
- Describe the state of the object: Elements announce what state they are in i.e. checkbox, selected.
- Avoid duplicated links: Images and links to the same page are not duplicated and are contained within one clickable area or touch zone.
- Localise alternatives: where different language versions are given alternatives must be localised.
- Consistent alternatives across devices: use consistant alternatives across desktop, mobile and apps in order to ensure for a more seamless user experience and easier content management internally.
- Alternatives should be unique: Ensure repeated objects, such as ‘Download’, ‘Save’, ‘View’ buttons, contain the item name they relate to or bundling the content into the same clickable area or touch zone.