We’ve experienced a recent surge in popularity of mobile-related accessibility services, with mobile and responsive site audits and mobile app evaluations being high on the agenda for many organisations. In response to the increasing demand for a comprehensive mobile assessment, Digital Access has developed a custom mobile accessibility checklist incorporating the Web Content Accessibility Guidelines (WCAG), as well as mobile accessibility best practice guidelines from other sources such as the BBC Mobile Accessibility Guidelines. Key to its success is that the checklist focuses on the unique and important differences between a desktop and mobile environment.
At the recent OZeWAI 2013 conference, we were invited to present on these important differences, as well as discuss techniques to create an accessible mobile and responsive website. A good place to start to ensure accessibility for mobile users is to follow good web development and usability practices; for example, using the most appropriate semantic HTML elements and taking care to implement keyboard support for all functionality that relies on scripting. It sounds simple enough, but we’ve found that even basic practices are commonly neglected for mobile sites. One reason for this may be a more limited understanding within development teams of how different users access content in a mobile environment compared with a ‘traditional’ desktop environment.
Another common challenge, particularly for responsive sites, is sections of HTML code that are hidden visually but still read out by screen readers. This commonly occurs where navigation menus are collapsed to maximise limited screen real estate, or where 'code switching' is used to change layouts rather than restyling the page using CSS media queries. Working with clients, our approach has been to implement such designs as true responsive sites – using CSS to format a single piece of HTML source code rather than dynamically showing and hiding separate segments of duplicated code. This solution enables you to avoid repetition and reduces the administrative overheads to maintain duplicated content.
Collapsing navigation menus can also be confusing for screen reader users if the menu button is not implemented in a way that communicates its functionality. Developers often rely on ARIA and 'role' attributes to add role and state information to menu buttons; however, it is important to note that the TalkBack screen reader in Android devices has limited support for ARIA; therefore a redundant solution such as hidden text is still required at present. This will avoid situations such as one we encountered during a recent mobile accessibility audit, where a navigation menu link was read as, “navigation menu – landmark region” by VoiceOver, but as “hamburger” (the <a> element’s ‘src’ attribute) by TalkBack. Similarly, tabbed and accordion content are other examples of interactive content that can be difficult for some users to interact with unless implemented correctly.
HTML dialog boxes (lightboxes) are another potentially problematic element within a mobile environment. In fact, one of Vision Australia’s adaptive technology consultants rates lightboxes as the most common problem he encounters when accessing mobile websites. This is often because the lightbox content is placed at the end of the page source code, making it difficult for blind users to locate although it is prominently positioned on the screen. Lightboxes can also cause difficulties for users with mild visual impairments who use pinch zoom, as they frequently calculate the viewport incorrectly and realign themselves partially off-screen when zoomed. Perhaps for this reason, it is common for developers to use the <meta> tag to set a fixed-size viewport for mobile sites; effectively disabling pinch-zoom. While this does avoid the problem of disappearing lightboxes, it does so at the expense of usability. Vision Australia’s Dialog Box web page provides example code for creating accessible dialog boxes that scale correctly when zoomed on mobile platforms.
As the need for guidance, techniques and understanding within the mobile space continues to grow, so too does the expertise within the Digital Access team. Every mobile and responsive Web Accessibility Audit and Mobile App evaluation we undertake brings new insights that we can share with our clients and, as soon-to-be active members of the W3C Mobile Accessibility Taskforce, the greater industry. We also have a key position working alongside adaptive technology consultants and people with various disabilities who significantly contribute to our real-world understanding of how people access the mobile space.
Visit our website for further information about Digital Access’ mobile auditing, evaluation and support services.