The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
What Web Accessibility Standards are in a Nutshell
Currently, web usability definition reads as follows: it is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.
For catering all categories of users with equal opportunities for web browsing, the World Wide Web Consortium (W3C), represents Web Content Accessibility Guidelines (WCAG), which contain clear instructions on how to make a website browsable and provide website accessibility for disables users. The first version was released in 1999, then WCAG 2.0 in 2008, and since 2018 the actual version is WCAG 2.1. Web Consortium also announced the release of WCAG 3.0 in late 2022.
Why it’s Important to Follow Web Accessibility Guidelines
Currently, there are two main reasons that make business owners search for an answer to the question “how to make a website more accessible for the disabled”. The first one is obviously providing equal opportunities for browsing for all the categories of users, whatever limitation they have.
The second factor for making digital content accessible can be characterized as a legal one. So, why is accessibility important from a legal standpoint? The matter is that currently all the websites that don’t provide their users with an accessible interface are supposed to be sued in a short time.
For instance, we can consider the case of Domino’s – multinational pizza restaurant chain that pretends to provide exceptional customer experience. In October 2016 Guillermo Robles, a blind man, filed the lawsuit, claiming the Domino’s website is not accessible via screen reader, and he was unable to order a pizza. Guillermo Robles won the trial – the supreme court held that from this point forward, websites should be treated as the places of public accommodation, and thus they should provide equal opportunities for browsing to all the categories of users with diverse abilities. Now, Domino’s can tell a lot on how to make a website blind accessible on the basis of their own experience.
Levels of Website Accessibility Guidelines
The answer to the question “how do I make my website accessible?” should start from learning the basics of website accessibility guidelines. Actual web accessibility guidelines consist of three levels of web content accessibility: Level A, which includes the most basic rules, Level AA – the one which is considered essential now, and Level AAA, which provides the most opportunity for access to content.
Web Content Accessibility Guidelines
Each one of WCAG compliance levels consists of three components that work together. These components are:
- Web Content Accessibility Guidelines (WCAG). WCAG refer to any part of a website, including text, images, forms, and multimedia, as well as any markup code, scripts, applications, and so on.
- User Agents Accessibility Guidelines (UAAG). UAAG are about the software that’s used by people to access web content. This software can be desktop graphical browsers, voice browsers, mobile phone browsers, multimedia players, plug-ins, and some assistive technologies.
- Authoring Tools Accessibility Guidelines (ATAG). This component of accessibility refers to the software or services that enable people to produce web content, including code editors, document conversion tools, content management systems, blogs, database scripts, and other tools.
In this article, we focus on considering Web Content Accessibility Guidelines. WCAG accessibility relies on four main principles of information provided, that are abbreviated as POUR – Perceivable, Operable, Understandable and Robust. Keep reading and discover the actual WCAG 2.1 checklist below!
How to Make Your Website AccessibleDownload Now!
Perceivable information and user interface
The first component of web accessibility guidelines is the perceivability principle. So, how to make your website more accessible in terms of perceivability principle? First and foremost you must ensure that both information and user interface components are presented to users in ways they can perceive. This means that any user must be able to perceive the information being presented with at least one of senses. Currently there are two main approaches to gain perceivability – text alternatives and captions usage.
Text alternatives for non-text content
Text is a real saving when it comes to representing non-text content. Below are examples of how you can use text to represent non-text information:
- Use short equivalents for images, including icons, buttons, and graphics.
- Implement description of data represented on charts, diagrams, and illustrations.
- Utilize brief descriptions of audio and video files.
- Employ labels for form controls, inputs fields, and other user interface components.
Captions and other alternatives for multimedia
People who are hearing impaired can’t hear audio or see video. Consequently, they need some alternatives to perceive the information. Such alternatives can be the following:
- Exploit text transcripts and captions for audio content like radio interviews recordings.
- Handle audio descriptions to describe important visual details in a video.
- Implement sign language interpretation of audio content.
You should also take into account that well-written text transcripts containing the correct sequence of any auditory or visual information will provide a basic level of accessibility and facilitate the production of captions and audio descriptions.
Operable user interface and navigation
Operability aspect states that user interface components and navigation must be operable: users must be able to operate the interface. Or, in other words, the interface cannot require interaction that a user cannot perform.
Being operable for the content means providing such components as keyboard accessibility, sufficient time, navigation, and input modalities.
Some people do not use the mouse. Instead, they rely on the keyboard to interact with the web. This approach requires fully-fledged keyboard access to all functionality, including form controls, input, and other user interface components.
Keyboard accessibility requirements include:
- Making all functionality is available by the keyboard.
- Ensuring the keyboard focus does not get trapped in any part of the content.
Some categories of people need more time than others to read the content and interact with it. For instance, such actions as typing text, understanding instructions, operating control elements or complete tasks on a website may be time-consuming.
To provide the users with sufficient time for fully-fledged interaction with your website, we recommend that you consider the following measures:
- Making it possible to stop, extend, or adjust time limits, except when necessary.
- Implementing features to pause, stop, or hide moving, blinking, or scrolling content.
- Enabling re-authentication without any data-loss when a session expires.
Ensuring web content is well-organised is an important step since it guides the users through the website and helps users to orient themselves and to navigate effectively. The following steps will help you to make your website navigable to the users:
- Writing clear meta-title tags for all the pages across the website.
- Providing an opportunity to reach every webpage in multiple ways.
- Implementing breadcrumbs to inform users with actual information about their current location.
- Making it possible to bypass blocks of content that are repeated across multiplicity of the pages.
- Ensuring the keyboard focus is visible, and the focus order follows a meaningful sequence.
- All the links should have clear and evident purpose. Strive to the situation when the link is viewed on its own.
One more idea you can address to answer the question of how to make your website accessible is addressing to input modalities. The introduction of input modalities beyond the keyboard is vital when it comes to providing web content accessibility. Such input modalities can be represented as touch activation, voice recognition (or speech input), and gestures. Yet not everyone can use each of these input modalities, and to the same degree. Particular design considerations can maximize the benefit of these input modalities and increase accessibility compliance for the websites. This consideration look as follows:
- Gestures that require dexterity or fine movement should have alternatives that do not require high dexterity.
- Major web components must be designed in a way to avoid accidental activation, for example by providing undo functionality.
- Providing users with labels that match corresponding object names in the code, to support activation by voice.
- Implementing functionality that is activated by movement or through user interface components.
- Designing buttons, links, and other active components large enough to make them easier to be activated by touch.
Understandable information and user interface
Being understable for website content means that any user must be able to understand all the information provided along with the user interface. So, what makes a website accessible in terms of understandability? The main ways for obtaining understandable website content are following principles of readability, predictability and input assistance.
When working on creating accessible websites, content writers must ensure that every piece of the text content is readable and understandable enough to the broadest audience possible, as it’s implemented in the best e-commerce blogs. Cases when the text content is read aloud by text-to-speech should also be taken into account. This can be reached in the following ways:
- Identifying the primary language of a web page, as well as identifying the language of separate text passages, phrases, or other parts of a web page.
- Providing definitions for any unusual words in the text content, as well as for phrases, idioms, abbreviations, and so on.
- Using the clear and simple language, or providing simplified versions of the text content.
Many people are getting disoriented or distracted by inconsistent appearance or behavior of web content. To prevent this, you must follow the principle of predictability, which states the following:
- Navigation that is repeated on multiple pages must be placed in the same place each time.
- User interface components that are repeated across the pages on the website should have the same labels.
- No changes on the web page happen without the consent of the user.
Some interactions on the website can be particularly confusing to the users. Among such interactions filling inputs has a special place – many people claim they experience difficulties with it, and thus result in making mistakes. Here are the ways you can help the users to prevent, avoid, or correct mistakes:
- Add descriptive instructions, error messages, and suggestions for correction.
- Implement context-sensitive help for more complex functionality and interaction.
- Provide an opportunity to review, correct, or reverse submissions if necessary.
The fourth and the last principle of WCAG guidelines is robustness. According to this principle of accessibility requirements for the websites, you should strive for making content robust enough so that it can be interpreted properly by a wide range of user agents, including assistive technologies. One more requirement here is that users must be able to access the content along with development of technologies, which means the content must remain accessible along technologies and user agents evolve.
The only component for robust principle is compatibility, which states that content should be compatible with different browsers and assistive technologies, as well as with other user agents. This can be achieved via the following measures:
- Making sure the markup can be reliably interpreted by verifying it’s valid.
- Providing a clear explanation of a name, role, and value for non-standard user interface components.
Web Accessibility Evaluation: Tools, Methods, and Techniques
To ensure if everything is fine with your website in terms of accessibility, the best idea ever is addressing some tool. The best ones of them can help you not only with testing your website but also deliver clear and understandable recommendations on how to make it even better and how to make a website accessible for the disabled.
Currently, you can find plenty of tools and automatic checkers to verify the accessibility of your website. Among the most popular of them, we can distinguish the following ones:
1. WAVE by WebAIM
The most popular accessibility checker to date, WAVE, is available both online and as a Firefox add-on. Developed by WebAIM, an organization devoted to making web content accessible to people with disabilities, WAVE gives clear recommendations about how to enhance particular page accessibility and provides a comprehensive understanding of how to make your website ADA compliant.
In case you need an automated solution to assure ADA compliance retail stores, you may find it interesting to use WAVE API on a paid basis. It’s fairly beloved by many business owners and web developers for its usability, insightfulness, and almost endless opportunities for customizing reports.
AChecker (or Accessibility Checker), is an open-source tool to help you obtain a clear impression about your website accessibility. Developed by Inclusive Design Research Centre (formerly known as the Adaptive Technology Resource Centre) of the University of Toronto in 2005, this tool remains one of the most popular ones when it comes to answering the question of how to make your website handicap accessible.
Depending on your role: public user, registered user, administrator or developer – AChecker offers different sets of features. To get all the benefits of the AChecker accessibility tool, you must register an account at an official AChecker website. In such a way, you’ll get access to enhanced features such as saving your reports, generating an AChecker seal for the websites that passed accessibility checks successfully.
It is important to follow ADA guidelines when designing your website for many reasons. Choose only the most reliable and trustworthy methods to ensure your website is able to cater to all categories of users.
Web Accessibility Standards Implementation Examples: For Your Inspiration
Quite probably, after you’ve learned some basics about levels of accessibility, requirements for each separate level, and got an impression on how to make a website more accessible, you might think that an average accessible website looks boring and bleak. However, that’s not like that!
That belief comes from obsolete web technologies, when tools and methods for making the website content appealing were unavailable to developers and designers, making them limited in terms of delivering interactive websites and forcing them to make simple text-based layouts. This is no longer the case.
There are many companies that found an answer for the question “how to make a website accessible to everyone?” and combined it with a sleek and appealing design. In such a way, the users can not only have accessibility features but also enjoy delightful user experience.
For your inspiration, we’ve compiled a list of ADA compliant website examples that demonstrate an outstanding understanding of accessibility and security compliance. Let’s start!
The first one in the list of accessibility websites examples is Nomensa, an American-based strategic UX design agency transforming digital experiences. With their unique approach which draws on extensive experience in psychology, interaction design and technology, Nomensa drives value for the clients, being real professionals in everything about how to make a website ADA compliant.
Being a top-notch UX design agency, Nomensa knows that following website compliance standards is an integral part of any solid user experience, which is clearly demonstrated on their own website. In the accessibility statement on their website, Nomensa declares they adhere to Level AA requirements.
Parramatta Park website can be one more source of inspiration for you to answer the question of how to make your website accessible. The website is devoted to a major urban park in Parramatta, Western Sydney, Australia, which has a fascinating importance to Australia.
Vibrant and appealing, Parramatta Park knows good what makes a website ADA compliant, and thus the website can also boast decent website accessibility features level! Taking care of the visitors with vision impairment, the website gladly employs bold colors, link styling, proper size of elements, right code structure, and alt tags for important images. Parramatta Park implemented accessibility requirements for the websites on a really decent level!
New South Wales, or NSW Australia is the governmental website which masterfully combines usability and accessibility in web design stating their top priority is providing all categories of users with equal opportunities in terms of browsing the content.
The website is designed with an intention to make the content available to the widest audience possible, Following level AA accessibility principles, NSW Australia website implemented Australian government accessibility standards, catering their visitors with keyboard-accessible functionality, contrast tuning features, and convenient layout. In such a way, users that use assistive technologies to browse the website can enjoy fully-fledged access to all content provided!
As you can see visiting accessible websites examples mentioned above, making a website accessible is not some sort of challenge. All you have to do is to bring some creativity and imagination to your project, right after you select recommended usability and accessibility practices for the website of yours!
Whidegroup’s Expertise in Creating ADA-Compliant User Experience
Let’s learn how you can improve the accessibility of your design and the website in general via considering real examples. Recently, one of our clients decided to provide web accessibility options for browsing his website. To make this come true, we used Equalweb software, which provides 100% compliance with WCAG 2.1 – the latest web content accessibility guideline available. The process of making the website available looked as follows:
- Then our developers reviewed the website manually to examine if everything is fine and made some minor fixes.
- QA engineers made final testings for ADA compliance and verified the website is accessible.
As for the timeframes of the process – in general, we spent around 40 minutes for each page to implement accessibility features on the website.
The final result after applying accessibility requirements for websites on the part of the user looks as follows: after accessing the website, the visitors can see the disability icon with a caption inviting them to open the accessibility options menu. The menu itself is being opened as a sidebar and represents features intended to make the website accessible. The features are represented as clear icons, which are also supplemented with text captions. The users can change the contrast, change the cursor, use magnifier lens, change font size, highlight the links, and many more. Due to visually impaired website compliance, visitors are welcome to use text readers, voicing all the text content on the page.
In this article, we learned what is accessibility of a website, the requirements to the websites to be considered accessible-compliant, and how to make your website ADA compliant via considering real examples.
As you can see, implementing website accessibility best practices is not just important, it’s vital in today’s new realities. In such a way, you’ll be able to welcome as many people as possible. Don’t miss your chance to ensure customer satisfaction along with growing your traffic and conversion rate via making your website compliant to digital accessibility standards.
At Whidegroup, we take the power of the web seriously, and thus strictly follow accessibility standards for the websites, believing that everyone should have access regardless of disability. Opting for cooperation with us, you can rest assured of the fact your website would be not just, usable, but enjoyable and delightful. Let’s make the world wide web accessible together!