A quick guide on how to create inclusive, compliant websites.
We’ve all experienced it: the annoyance at a slow-loading website, the squinting at badly-designed font, or the despair of trying to navigate a mobile unfriendly page. While these problems may be a slight inconvenience to us, for people with disabilities, they can completely restrict their internet use.
Accessibility on the web is the need for websites to utilize tools and technologies developed to aid the perception, understanding, contribution, navigation, and interaction of a disabled person on the site. Integrating accessibility can seem intimidating to those that are just getting acquainted with it, but it is a vital element of user experience. Accessibility should be built into the web development and design process, rather than trying to retrofit it as an afterthought.
The Types of Disability
Disabilities that can potentially affect an individual’s experience in a site are:
Why Is Web Accessibility Important?
According to the World Health Organization's (WHO) 2011 world report on disabilities, 15% of the world’s population possesses some sort of disability. This includes physical disabilities, as well as cognitive and neurological disabilities. Rates of disability are only set to increase due to population ageing and the increase in chronic health conditions.
People with disabilities should be able to enjoy the same access to information as those without. Luckily, there are technologies available to reduce or remove the barriers to their digital access. The provision of these benefits ensures that everyone, regardless of age, physical or mental capabilities, can use the internet and have good web experience.
Besides making the internet a more inclusive place for everyone, a good accessibility strategy also has business benefits. Accessibility is a component of design and development that touches on almost every element of the website’s creation. It overlaps the aspects of mobile-friendly designs, device independence, multi-modal interaction, usability, search engine optimization (SEO) and more. Accessible websites can have better search results, reduced maintenance costs, increased audience reach, and demonstrate corporate social responsibility (CSR). Therefore, having a well-designed, accessible website doesn’t just make your website available to those with disabilities, but it can also significantly improve the user experience for all users of your site.
The Web Content Accessibility Guidelines (WCAG) was developed by the World Wide Web Consortium (W3C) with the purpose of setting a series of internationally shared guidelines governing the standards of web content accessibility to make websites, devices, and content accessible to users with disabilities. Content under the WCAG refers to web content which is the information on a web page or web application, which includes:
- natural information such as text, images and sounds
- code or markup that defines structure, presentation, etc.
There are two versions of WCAG applied currently: WCAG 2.0 and 2.1. WCAG 2.0 was published in 2008 and became an ISO standard in 2012. WCAG 2.1 was published in 2018. All requirements (“success criteria”) from 2.0 are included in 2.1, with a few additional success criteria in 2.1. However, the guidelines are backward-compatible, meaning that content that conforms to WCAG 2.1 also conforms to WCAG 2.0.
The WCAG forms the basis of most legislation on accessibility across the world, like the Title III of the Americans with Disabilities Act (ADA), The EU Web Accessibility Directive, the Accessibility for Ontarians with Disabilities Act (AODA), etc.
WCAG’s success criteria are categorized into three levels of conformance, Level A, AA, and AAA.
Level A – this covers the most basic requirements of accessibility features and is the minimum degree of accessibility that must be satisfied. Failure to conform to this level will result in a completely inaccessible website.
Level AA - This level addresses some of the more common barriers to entry for people with disabilities. This is the highest level of conformance required by most websites as it ensures that the biggest accessibility barriers are removed.
Level AAA – This is the highest level for accessibility under WCAG and it is more difficult to achieve by most sites. Achieving this level is desirable but not of the utmost necessity.
The Four Principles of Accessibility
The principles of web accessibility are the foundations of content produced for the web and for anyone who wants to use the web. These principles are known as POUR, which is an acronym that describes functional accessibility:
Perceivable - Perceivability refers to the information and elements of user interface that must be presented in a manner that can be perceived by the senses and that nothing is left undetectable or invisible. To most web users, perceivability is based primarily on visuals, but for those that are unable to, sound and touch are used instead.
Operable - Interactive interface elements such as controls, buttons, navigation and more should be operable. This means that a user must be able to operate interface elements by first identifying them, and for most by physically clicking, tapping, swiping, or rolling. For those that can’t interact in these ways, voice commands or the use of other assistive devices like head wands and eye trackers.
Understandable - This means that technology should be clear and consistent in the presentation and format, with predictable patterns of usage and design. End users should have no issue in comprehending the meaning and purpose of the information presented in the content while discerning the user flow and operation of the interface.
Robust - Robustness is the ability for content to function reliably by a wide variety of technologies, including assistive devices.
The lack of any one of these four principles will thus make the web inaccessible to users with disabilities.
The Components of Web Accessibility
Web accessibility is an aspect that covers every element of a website. The different components of the website should be interconnected and complementary to each other to create a site that is functional and available for the benefit of those with disabilities.
These components include:
Content which comprises the information on a web page or web applications, such as text, images, and sounds; or the code, script, or markup that defines the structure, presentation, etc. of the site.
User agents, which are the web browsers, mobile phone browsers, media players, plug-ins, assistive technology, and other software that acts on behalf of a user.
Authoring tools which are the software that creates websites such as code editors, content management systems, blogs, etc.
Evaluation tools to help you review the effectiveness of your accessibility attributes and to help track your remediation efforts
How to Create an Accessible Website
The following principles that describe accessibility solutions are developed and benchmarked by the W3C Web Accessibility Initiative (WAI), in conformance to WCAG standards.
- Use text alternatives to convey the context and purpose of visual content. Text alternatives render the information of visual content into electronic text that can be presented in a form that best fits the requirements of the user. Examples of which include read-aloud recordings of text, enlargement of text sizes, or the option of text to be read on braille devices.
- Multimedia, while providing users with a richer and more diversified experience on the web, can be limiting to those with audio or visual impairments. Providing text transcripts and captions for audio content, such as recordings of a radio interview; or adding a sign language interpretation of audio content can help overcome these limiting factors.
- Content should be presented in different formats and users should be able to change the presentation of content. Examples of multiple content presentations include allowing options for content to be read aloud, displaying content in custom color combinations, or creating mobile-friendly content.
- Content perception and comprehension are not made equal. Some users may need more time to read instructions, type, or complete tasks on a website. Care should be taken to adjust time-sensitive elements on a website and to use dynamic content that does not interrupt, pause, blink or scroll. Content that is animated and that that flashes at certain rates can also be harmful to those with photosensitive disorders. Such content should be avoided or a warning of the nature of the content should be presented beforehand.
- Navigation is an essential element of user experience and creating a site with well-organized content can provide users with disabilities an equal opportunity to experience the website fully based on their needs. Some important aspects to consider regarding accessible navigation is to understand how users interact with site structures such as hierarchical menus, search boxes, site maps.
- Text content should be readable and understandable in all the formats it is presented in. The level of comprehension of the text should be presented to cater to the broadest audience possible so that it is inclusive to those with learning disabilities and cognitive limitations. Providing measures to ensure that users are helped to avoid, and correct mistakes are also essential. This can help people who do not see or hear the content or may not recognize implicit relationships, sequences, and other cues on web elements such as forms.
- Ensure that the content on your site follows a predictable and consistent pattern and interface. A consistent design can help users learn to navigate the site quickly and follow predictable patterns to achieve certain goals on a site.
Once you’ve implemented solutions to accessibility, you should review your site for compliance with the required standards. However, the process doesn’t end there. Your site should be evaluated throughout your website’s development or redesign process. This can ensure that issues are detected early and resolved easily. While there are many tools available to assist in the evaluation process, Monsido’s comprehensive governance and evaluation tools can determine if your site meets all the accessibility compliance requirements and provides a dashboard overview of issues to help you optimize your site’s accessibility.
...accessibility isn’t the toughest nut to crack. All it takes is some commitment to learning the common issues and their solutions. A good rule of thumb is to never leave accessibility planning as the last project in designing a website. Rather, accessibility should be incorporated from the very beginning of the site planning and creation and subsequently to every project that follows.
Free Guide to Web Accessibility!