We have heard about website accessibility, but what about mobile accessibility? Mobile accessibility is when websites and apps provide content that is able to be consumed whether or not a user has a disability. The Web Accessibility Initiative (WAI) categorizes the mobile landscape as phones, tablets, Smart TVs, and other devices that emerge that interact with the web through either a browser or app (think wearables, fitness trackers, etc.).
We all know that websites in this day in age need to be responsive to suit different types of devices. Website accessibility should follow the same trend in that no matter what type of device you are viewing a website on, the experience should be optimal for that device. For an overview of web accessibility, check out our post: http://www.empiredesigns.ca/blog/what-is-website-accessibility/. Mobile web accessibility, while similar to standard website accessibility, does have its own unique challenges.
Is the content legible?
This is a consideration for traditional websites on laptops/desktops, but with the smaller screen sizes of mobile phone and tablets, content is already minimized. One of the easiest ways to address this potential problem is to keep the content minimal with a dedicated mobile or responsive site. Don’t forget to start at a reasonable text size and to provide options to increase the text size if need be. Another tip from WAI is when you are creating forms, to place the field below the label (rather than beside the label).
For most of us, we know how to zoom into content. You simply pinch the screen and move your fingers outward. There are other ways to do this should someone not be able to do this due to physical disabilities. Users can magnify the whole screen using the accessibility settings in the OS, but you can also add a magnifying glass or adding a reading mode that allows the user to see the content rendered to a text size that they specify. In short, there should be an on-page method to change the text size to support people with low vision.
Contrast is an issue for both desktops/laptops and mobile devices, but at least the former are more typically used indoors. Mobile devices often have to deal with many different lighting environments making the contrast between the background and the text that much more difficult. Keeping the content uncluttered, using titles, larger text size and bolding are all ways to help keep contrast ratios at the proper levels to meet WCAG 2.0 guidelines of at least 4.5:1 (or 3:1 for large-scale text) for Level AA.
Is the mobile site easy to operate?
Touchscreens and the lack of a physical keyboard can make navigating trickier on a mobile device. You can make your website or your app compatible with an external keyboard. For touchscreens, you can ensure that there is enough space in between an object that requires selection and that the object itself is at least 9mm x 9 mm.
Is your mobile site understandable?
Keeping consistency between pages, properly labelling, and support for more than one orientation are just a few considerations when making sure that your site is easy to follow and understand. If you have elements of your site that are the same for each page, this should be kept constant and placement should remain the same. The most important information should be placed before the scroll and labelled with proper H1, H2 etc. tags. Developers should also always support both portrait and landscape orientations. It is important to remember the different possible needs and usages when developing, W3C gives a good example of a user that requires the device to be in a particular orientation because it is placed on the arm of a wheelchair. These are the types of reasons why functionality such as dual orientation is so important.
Offering more than just one way to enter data could also help to make your site more accessible. This might be more of an OS thing, like speech to text, but when you are designing your site, if you require data to be entered, keep it short and simple. Don’t require a user to enter more information than they need to and provide alternatives such as checkboxes to reduce the overall amount of entry required.
For more detailed information about how to meet WCAG requirements, visit W3C at https://www.w3.org/TR/mobile-accessibility-mapping/#wcag-2.0-and-mobile-content-applications to learn more.
Have you experienced difficulty accessing a mobile site or app? Tell us about your experience.