Accessibility Best Practice in Responsive Design
A great website doesn't just look good, it's also accessible to as many people as possible – aiming to offer the best user experience to all visitors regardless of who they are and how they interact with your website.
When people think of website accessibility they generally think about catering for vision impaired people, but the goal of making your website truly accessible is much broader. Accessibility best practice in responsive design entails building a website which is ideally readable by all users on all devices.
This doesn't just mean catering to people with physical disabilities, but also catering to the various technologies they rely on to help them navigate the online world. Accessibility best practice also means making your website easily accessible to machines such as search engine robots and social media previewers, to ensure your website reaches as many people as possible.
Rule of law
Web Content Accessibility Guidelines (WCAG) 2.0 is the gold standard when it comes to accessibility best practice. Aspiring to meet this standard isn't just common courtesy to visitors with disabilities, in some cases meeting the standard is a legal requirement.
The websites of all Australian federal, state and territory government departments and agencies are required by law to meet the WCAG 2.0 Level A standard. This includes intranet and extranet sites, not just public-facing sites. The requirement can also apply to organisations which receive government funding. By the end of 2014, all federal websites must meet the WCAG 2.0 Level AA standard.
The WCAG 2.0 standard is built around four key principles; Perceivable, Operable, Understandable and Robust. It's vital to ensure that your website's interface and information is available to all users, and that interface components and navigation tools are usable. It's also necessary to ensure that users are able to understand the information and interface, plus the content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
These aren't just check boxes on a piece of paper, they have real-world implications for people living with disabilities. A vision impaired internet user filed a successful complaint against the Sydney Organising Committee for the Olympic Games after its website and ticketing system failed to meet their needs.
Catering to humans and machines alike
Building an accessible website involves writing clean source code to ensure that machines can read your website as easily as people. Taking shortcuts because people won't be looking at the backend code is a bad idea. Screen reader software does its best to interpret the various components of a webpage, but that's no excuse for not clearly labelling headings, page structure and data tables in the markup code. Search engine crawlers also benefit from clean and detailed code when indexing a page.
Labelling images with alternative text is important for both people and machines which can't see the images on the page. Accessibility considerations also include high contrast images and page elements which rely on colour. Considering how the page looks when printed is also important, along with the way the page looks in plain text with the style sheets stripped away. Meanwhile captions may be necessary to make multimedia content accessible to hearing impaired users.
Responsive design isn't just about making your website look fancy. It's about providing the best user experience to all visitors, considering their accessibility needs regardless of who or what they are and how they interact with your website.
Want more? Here are some other blog posts you might be interested in.
A content calendar can be an extremely powerful tool – if well set-up and maintained. Content Strategist Tami Iseli outlines some of the factors that can reduce the chances of abandonment, along with a downloadable content calendar spreadsheet that automatically syncs your content ideas to a Google calendar.
Want to build a .NET Core MVC website using Umbraco Headless? Follow this tutorial from Luminary Technical Lead Emmanuel Tissera...