The phenomenal success of the London 2012 Paralympics (with 2.7 million tickets sold and watched by over 4 billion people on TV worldwide) has done much to raise disability awareness in the public consciousness.
The London 2012 Olympics/Paralympics Website also leads by example. At the top of every Web page there is an impressive menu of small icons/links providing shortcuts to make the site more accessible for people with disabilities, such as visual impairments. These are quite discrete, so if you missed them, look again and click on them – you can’t help but consider the accessibility of your own Website.
The accessibility-friendly icons/shortcuts on the London 2012 site include:
• Change text size: A A A makes it easy for people with visual impairments to enlarge the text.
• Change style sheet: a second A A A changes the style of the Web site (background color, text color, text size etc) with options for a dyslexia style sheet and a high-visibility style sheet.
• Sign language – the hands icon links to a sign language section, with key information presented in sign-language videos.
• Disabled access – the wheelchair icon links to a section with ticketing, travel, parking, seating etc information for disabled people wishing to watch the action live.
(See below for more examples of accessibility options from other sites).
A lot can also be learned from the organizers’ policy statement and how to use this site sections. These are a good blue print for companies that are committed to making their Web presence more inclusive.
So what about the London 2012 mobile site?
Considering the incredible number of people following the Olympics on their mobile devices, you’d expect to find the same accessibility options on the London 2012 Olympics/Paralympics mobile site. When you visit the Olympics Website with a mobile phone you are automatically redirected to this site, with an option to use the PC site (which is good practice).
Disappointingly, the same accessibility menu, so prominently displayed on the PC site, is not present on the mobile site. Nor is there a link to an accessibility section, with options for changing style sheets or text size, in the main navigational menu. The disability statement and the site usage guide is similarly absent from the mobile site, as is the sign language section. If you hunt around you can find information for disabled visitors to the event in the spectators section.
According to Fredrik Söderquist, a developer at the award-winning mobile agency Mobiento (who mobiThinking asked to take a peak at the site’s source code), the mobile site fixes the font size at 14 pixels and restricts zooming, which makes it difficult for visitors with visual impairments to manually increase the font size or zoom using their browsers.
The point of this blog is to discuss whether mobile sites should provide a menu of accessibility options giving access to alternative style sheets, the ability to easily increase/decrease font size and relevant information for disabled customers, including an accessibility statement. Clearly the London 2012 organizers deemed this a priority for the PC site, but not for the mobile site.
However, there is much more to Website accessibility best practice, much of which happens behind the scenes. There are Web-based tools that check compliance, with standards including the W3C’s Web Content Accessibility Guidelines (WCAG), such as WebAIM’s Web accessibility evaluation tool WAVE (which found errors in both the London 2012 PC and mobile sites, incidentally) and Contrast ratio calculator from MSF&W, which checks the color scheme used on sites.
But, while we are looking under the hood, we should also point out that on other fronts, the mobile site displays good practice. According to Söderquist, including a) using sufficient color contrast (between text and background colors) in most places; b) applying descriptive alt-text to all images; and c) using heading levels to structure the document. Both b) and c) help screen-readers to decipher and navigate a Web page. People with more severe visual impairments rely on screen readers to read aloud Websites. On the negative side, there are no roles marking up the code in document [i.e. describing the purpose of each bit of html code] or its structure, which could make it harder for screen-readers to decipher and navigate a Web page. However using the site with a screen reader, Söderquist finds he is able to browse the site and find things okay.
List of common accessibility shortcuts/options found on Websites
The London 2012 desktop site isn’t the only site to include a menu of accessibility shortcuts in the header of each Webpage, but it is far from being the common practice that it ought to be. There is considerable variety in the shortcuts that are included and in the style used (i.e. the type of icon or text used to represent each shortcut). mobiThinking has collected together a list shortcuts found in the accessibility menus of Websites. These are all from desktop sites, as mobile sites with similar accessibility options (either in the header or footer of the Web page) are rare – which is why it is a shame that the London 2012 organizers didn’t lead by example.
Examples of accessibility shortcuts found in the header of Websites.
• Change text size (A A A; + -; and other styles):
AFB.org; Ec.europa.eu/justice/discrimination; RNIB.org.uk; SANCB.org.za; HHS.gov/; NDS.org.au; NACDD.org
• Change color (various styles):
DAA.org.uk; SANCB.org.za; DAA.org.uk; LDAC-acta.ca; Dyslexia.ie;
• Customize design/style: (links to page where you can customize zoom, text color, background color, text font, navigational bar position):
• Change style sheet (Dyslexia and high-visibility style sheets):
• Reduce/increase contrast:
• Sitemap (A-Z and other styles):
DAA.org.uk; SANCB.org.za; NDS.org.au; DyslexiaAction.org.uk/
• Keyboard shortcuts:
• Text only (T):
• Sign language (two hands icon):
• Skip to page content/main content:
• Listen to this page/read aloud (loud speaker icon):
• Accessibility options:
• Accessibility statement:
• Accessibility information:
Shouldn’t mobile sites have accessibility options also?
It is difficult to see why accessibility shortcuts that are deemed useful for the desktop site should be excluded from the mobile site. If providing the opportunity to zoom in, change the text size, font, or color scheme/contrast helps people to access your site, shouldn’t mobile sites include it? Similarly if people require a text-only version, keyboard shortcuts to help navigate or the option to listen to the content, shouldn’t mobile sites provide it?
This doesn’t need to be in the header (top of every Web page) necessarily, but it should be easy to find, either in the footer or accessed through the main menu.
Mobile sites with accessibility options
So far mobiThinking was only able to find one mobile site with accessibility shortcuts.
• m.guardian.co.uk – The mobile site of the UK newspaper, provides an option to change the text size in the footer: A A A.
• Do you know of any mobile sites that provide accessibility options such as changing text size, color contrast or style? Please comment below or email editor (at) mobiThinking.com.
• A Day in the life of a US mobile commerce user: stats on who, what, when, where of m-commerce
• Mobile ad expenditure expected to quadruple by 2016
• Confessions of a Cannes Mobile Lions jury member • with tips for awards entrants •
• Guide to mobile agencies • latest profile: The Hyperfactory •
• Cannes Mobile Lions winners 2012 – winners with videos and case studies
• Guide to mobile ad networks 2012 • with 5 new ad networks •
• Mobile events 2012: best conferences, great discounts and free tickets
• Role of mobile in publishing – friend or foe? Interview with Judith Curr, Atria Books
• Safaricom M-PESA – building a mobile business centered on essential services
• The insiders’ guides to world’s greatest mobile markets
• Guide to mobile industry awards
• The big compendium of global mobile stats