Top ten tests for alternatives on mobile

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:

  1. Give all functional and content related images an alternative and hide meaningless images and objects.
  2. Ensure the alternative is short and accurately describes the purpose of the image or object.

Top ten tests:

  1. 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).
  2. Functional and content related objects have an alternative: all objects that are functional or contain content have an alternative that is clear and concise.
  3. 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.
  4. 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.
  5. 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’.
  6. Describe the state of the object: Elements announce what state they are in i.e. checkbox, selected.
  7. Avoid duplicated links: Images and links to the same page are not duplicated and are contained within one clickable area or touch zone.
  8. Localise alternatives: where different language versions are given alternatives must be localised.
  9. 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.
  10. 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.

5 thoughts on “Top ten tests for alternatives on mobile

  1. As always great post Heni! My two cents for “describing the state of the object” can be done using ‘role’ in web & by specifying ‘traits’ in iOS.

    Henny Reply:

    Thanks Pooja, I was wary about going into too much technology specific detail as I was trying to keep it down to quick tests. I think what I may do in the new year is write a more in depth post about ‘how’ in the New Year.

  2. Thanks Henny – mobile is very much on the agenda down here, and your various posts are much appreciated. Seasons greetings 🙂

    Henny Reply:

    Thank you Andrew, appreciate the feedback 🙂

Comments are closed.