Sep 17, 2012

Best practices for web accessibility on mobile platforms

Estou publicando este post em meu blog, com a devida autorização da Helene, chamando à atenção especialmente para as plataformas móveis.

Esta postagem foi publicada pela , no dia 11 de setembro 2012.

One of the main principles of accessibility optimization is to ensure platform independence, which ensures the website is usable on many different platforms. If you ensure that your website is conforming to the Web Content Accessibility Guidelines (WCAG), you will find that your accessibility for mobile devices is ensured to a large extent as well.
A number of principles are relevant when using best practices for web accessibility on mobile platforms. Here are 13 tips on how to fix the most common problems faced by mobile web users.


1. Layout

Design in a way that makes the website work when users can only see a small part of the screen at a time, when they are browsing with mobile units. Some disabled users use zooming software to help them read the page, which creates the same issues imposed by the small screen on many smart phones. Avoid a situation where the user has to scroll both vertically and horizontally, and avoid images that are larger than the screen.

2.  Use of color

It is important to avoid creating features or giving information solely based on the user's ability to see colors. Some users are unable to see or differentiate between certain colors. It's also important to make sure the contrast between the background and the text is sufficiently high.
Also, make sure to avoid giving instructions that are color-dependent. (A color-dependent way of giving instructions can be to write: "click on the green button" or "in the blue box to your right you will find more information". If these kinds of descriptions are used make sure to supplement them with a text reference also, such as, ''click on the green button labelled Send" or ''in the blue box to your right with the heading Events you will find more information").


3. Following standards

Make sure to follow the standards on the format which you have chosen to publish in. Having clean, validated code helps to ensure that the content is shown in a consistent manner across different platforms and enabling assistive technologies to render content in a meaningful way to users.

4. Order of content

Make sure content is wrapped in a sensible way and that content makes sense from the document order and when linearized. This ensures the content order is meaningful regardless of how the user accesses it and how much CSS is supported by their device.
Tables commonly don't work well on small screens. Consider if there is an alternative way to give tabular content.

5. Navigation

Make sure links and forms are navigable when tabbing through content.

6. Plugins

Avoid making it a required process for users to install plugins to be able to use content. There might be situations where these are not supported or do not work with certain types of assistive technologies a user might need.

7. Sound and warnings

Avoid giving warnings and other significant information by the use of sound. Some users are not able to hear this either because of a hearing impairment or because of a situation such as being in a location with background noise that makes it hard to hear.

8. Entering data

It may be difficult for some users to enter information by the use of the limited keyboard available on a mobile unit. Make sure to use radio buttons, check boxes and combo boxes when user input is needed. This way users have to enter as little text as possible via the keyboard.
When users are entering data, make sure to prompt them and help them when they make mistakes. Make sure to technically do this in a way that ensures that it works with voice over and the likes.

9. Page titles

Give each web page a meaningful, short descriptive title. This helps users to ensure that they are on the right page.


10. Links

Make sure all links have a text or a description that makes sense also when read out of context. Some users navigate between links and for this reason they are dependent on the link text indicating what the link is for.

11. Words and sentences

Avoid complicated words and long sentences. These are not very well suited to mobile units and they complicate things unnecessarily for people with reading difficulties.

12. Subtitles

Multimedia content such as video and sound must be provided with subtitles. In this way people who cannot hear, and those hard of hearing will still be able to understand the content.

13. Images and alternatives

Make sure that when content is non-text, such as images, it has a text alternative. This way users who cannot see and users who have disabled images on their mobile devices can still use the content. Avoid using CSS image replacement and make sure not to use images of text.

More information

W3C has developed a set of documents describing how to best create web content for mobile units and apps for mobile units. You can also read more on how these are connected to the WCAG. Follow these links if you would like to learn more about web accessibility on mobile units or if your starting point is web accessibility and you need to learn more on mobile units.