Accessible Web Design – Something To POUR Over
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
– Tim Berners-Lee, W3C Director and inventor of the World Wide Web.
As the above quote from Tim Berners-Lee illustrates, accessibility, far from being a pc fad, in fact underpins the very invention of the world wide web. In order for the web to honour its founding principle of universality, it must be accessible to a wide range of people, including those with visual, motor, auditory, speech, or cognitive disabilities. The web holds a specific appeal to such groups because of its potential to radically change the impact of disability – by removing barriers to communication and interaction presented by the physical world. However, when web sites, applications, technologies, or tools are badly designed, then barriers arise mirroring the exclusion of the physical world.
Accessibility, therefore, is essential for developers and organizations that want to create high quality websites and web tools, which do not exclude people from using their products and services. The web must be accessible to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.
The first step towards achieving accessibility is to carry out a site audit. To help you assess the accessibility of your site, there are tools such as the AXE Chrome Extension.
Over 1 billion people worldwide suffer from a disability. In 2017, there were 814 website accessibility lawsuits filed in federal and state courts. Thus, a strong business case can be built for accessibility. Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO). Furthermore, case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach.
Aside from complying with legal requirements, it’s in everybody’s interest to design accessible websites. Obviously, it’s beneficial to people with disabilities if your website is navigable. Beyond this however, web accessibility can deliver benefits to businesses themselves and a range of users. Beyoncé knowles all about it – sorry, couldn’t resist – with her own website on the receiving end of a lawsuit on grounds of accessibility. Businesses wishing to avoid such cases of discrimination and accompanying legal action should implement web accessibility standards such as the Web Content Accessibility Guidelines (WCAG). It’s also possible to obtain a Letter of Reasonable Accessibility testifying that your website has been audited & met the required standards for accessibility for people with disabilities.
Disabilities manifest in many ways. The U.S. Centres for Disease Control and Prevention (CDC) estimate that 1 in 4 U.S. adults is living with a disability. Businesses that neglect accessibility when designing their websites, do so at their own peril. According to the Click-Away Pound survey, UK retailers lost an estimated £11.75 billion in 2016 because people with disabilities were unable to purchase their products online. Therefore, complying with accessibility practices is not just altruistic & sensible in reducing exposure to legal consequences, it also makes business sense. Moreover, accessibility modifications such as transcripts and closed captions, support for mobile devices & a clear design benefit all users, not just those who require them due to a disability.
Tips For Achieving Accessibility
Add enough color contrast
People who have low vision could find it difficult to read text from a background color if it has low contrast. In a fact sheet on visual impairment and blindness, the World Health Organization (WHO) estimates that there are 217 million people who suffer from moderate to severe vision impairment. So, it is critical to consider the sufficient contrast between text and backgrounds. The contrast ratio between text and its background should be at least 4.5 to 1 (conformance level AA.) The ratios narrow with larger and heavier fonts, as they’re easier to read at lower contrast. If your type is at least 18 pt or 14 pt bold, the minimum contrast ratio drops to 3 to 1.
Tools: For Mac users, the Contrast app, checks contrast using a color picker. For a more detailed score enter colour values onto the WebAIM color contrast checker. This calculates the score for regular and larger text sizes in different conformance levels (A, AA, AAA.) You can change the color values and see the results in real time.
Don’t use color alone to stress information
Relying on color alone as a visual cue prohibits people with low visual acuity or color blindness from understanding content. Instead it’s best to use an indicator other than color such as text labels or patterns. When showing errors on the screen, don’t rely on colored text alone, add an icon or include a title to the message. Consider adding a visual cue such as font weight or underline text style to linked text.
Elements with more complex information like charts and graphs can be especially hard to read when only colour is used to distinguish the data. Other visual aids like shape, labels, and size communicate information more effectively. You can also try incorporating patterns into fills to make differences more apparent. A great example of this guideline is Trello’s colorblind mode. When turned on, labels become more accessible by adding texture.
Tool: The App Color Oracle, shows in real time what people with common color vision impairments see.
Design usable focus states
Focus Indicators are the blue outlines around links, inputs, and buttons. Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. Focus indicators clarify which element has keyboard focus. This helps users understand where they are when navigating a site. These are used by people who are blind and require screen readers, individuals with limited mobility, individuals who have suffered injuries like carpal tunnel, and power users who prefer this type of navigation.
Elements that should be focusable are links, form fields, widgets, buttons, and menu items. They need to have a focus indicator that makes them look different from the elements around them. States should be highly visible, with good contrast, so they stand out from other content.
Use labels or instructions with form fields and inputs
Using placeholder text as labels is one of the biggest mistakes when designing a form. Placeholder text is usually gray and has low contrast, so it’s hard to read. Those dependent on screen readers tend to navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over. It’s best if labels don’t disappear, even when the person is filling an input otherwise people may lose context.
Useful alternative text
Users with impaired vision often rely on screen readers to “hear” the web. Since these tools convert text to speech, apt descriptions of visual elements are vital.
Two ways to present alternative text:
- Within the <alt> attribute of the image element.
- Within context or surroundings of the image itself.
Try to describe what’s happening in the image, and its pertinence to the story. If the image is purely decorative or if it creates redundancy because the surrounding context already explains the content, then adding an empty <alt> attribute will make screen readers skip it. Neglecting to write any alt text can result in some screen readers reading the file name to the user!
Use correct markup on content
Headings mark where content starts — they’re tags given to text to define its style and purpose. Headings also establish the hierarchy of the page’s content. Titles with large font sizes help readers better understand the content order. Likewise, screen readers also use heading tags to read content. This way, people with low-vision get an overview of the page by reading each heading in a hierarchical flow.
It’s important to use proper structural elements when developing a site. HTML elements communicate to browsers what kind of content a site contains and how they should render or treat it. The components and structure of a page are what arranges an accessibility tree, which powers screen readers.
Neglecting to markup correctly affects accessibility. Screen readers navigate web pages by heading structure (true headers, not just text that is styled big and bold) hierarchically. Site users can listen to a list of all of the headings, jump the content by types of titles, or navigate directly to top-level headings <h1>.
Support keyboard navigation
Keyboard accessibility is one of the most critical aspects of web accessibility. People with motor disabilities, blind people that rely on screen readers, people that don’t have precise muscle control, and even power users are dependent on a keyboard to navigate content.
People typically use the Tab key on their keyboards to navigate through interactive elements on a web page: links, buttons, or input fields. The focus state provides a visual indicator of the component that is currently selected. As you navigate through a page, the order of the interactive elements is essential, and the navigation must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom, header, main navigation, content buttons and inputs, and finally the footer.
Good practice dictates testing your site only using a keyboard. Use the Tab key to move through links and forms. Test using the Enter key to select an element. Verify that all the interactive components are predictable and in order. The goal should be to navigate through all your site without a mouse.
Be conservative with navigation size — including number of links and text length. Tabbing through long menus may be demanding for people with motor disabilities. Listening to lengthy links can be laboursome for people that use screen readers. Providing ARIA landmarks or HTML5 structural elements like <main> or <nav> will make navigation easier.
One of the benefits of accessibility, from a humanistic perspective, is that it ensures disabled users aren’t shut out. However, improved accessibility on your site provides you with a lot of benefits as well. Crucially, it immediately expands your potential audience. The more users are able to use your site, the more your potential user base grows. This can create an advantage over competitors who ignore accessibility.
Steps necessary to make your site accessible – such as providing meaningful alternate text for images and using a proper and clear heading structure – dovetail with SEO best practices, therefore by improving your site’s accessibility you also increase the page ranking of your website!
Improved User Experience
In the process of making your site accessible, you design an interface which is operable and consistent, which improves overall user experience.
Improved Mobile User Experience
Another byproduct of building a fully accessible web application is an application/website that works well for smartphones.
Web Accessibility should not be an afterthought; instead, it should be made part of your standard development practices. Make your development and QA teams aware of commonly used Web Accessibility guidelines: WCAG 2.0 (http://www.w3.org/TR/WCAG20/) and US Govt. Section 508 (https://www.section508.gov/) are 2 very common guidelines for compliance.
Companies taking initiative/leading the way
WordPress has its own Make WordPress Accessible team that focuses specifically on the platform. Wix also prompts users to follow steps towards accessible design. There are also countless other community-driven projects, such as A11Y, that provide guidance and resources to help you create highly accessible websites.
Web Content Accessibility Guidelines
The Web Content Accessibility Guidelines (WCAG) 2.0, a set of guidelines and best practices put together by accessibility experts to address what “accessibility” means in a methodical way.
WCAG is organized around four principles ocalled by the acronym POUR:
- Perceivable: Can users perceive the content? This helps us keep in mind that just because something is perceivable with one sense, such as sight, that doesn’t mean that all users can perceive it.
- Operable: Can users use UI components and navigate the content? For example, something that requires a hover interaction cannot be operated by someone who can’t use a mouse or touch screen.
- Understandable: Can users understand the content? Can users understand the interface and is it consistent enough to avoid confusion?
- Robust: Can the content be consumed by a wide variety of user agents (browsers)? Does it work with assistive technology, such as screen readers that vocalize the text on each page, speech recognition software that converts speech into text, Braille terminals, and even alternative keyboards that accommodate special needs.?
To discover how we can help you incorporate accessibility into the design process, check out the Design section of our site, or get in touch with us for a detailed proposal.