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
In essential, web accessibility 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. The first version was released in 1999, then it was proceeded by 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 factors which make an idea of web content accessibility more than just reasonable. The first one is obviously providing equal opportunities for browsing for all the categories of users, whatever limitation they have.
The second factor can be characterized as a legal one. 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.
Levels 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). ATAG refer 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 that states that both information and user interface components must be presentable 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.
We develop optimized
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.
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. 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. The main ways for obtaining understandable website content are following principles of readability, predictability and input assistance.
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, 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 Standards Implementation Examples: For Your Inspiration
Quite probably, that after you’ve learned some basics about levels of accessibility and requirements for each separate level, 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.
For your inspiration, we’ve compiled a list of the websites that are pretty successful in combining web accessibility with appealing design. Let’s start!
Nomensa is 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 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.
2. Parramatta Park
Parramatta Park 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 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.
3. NSW Australia
New South Wales, or NSW Australia is the governmental website which states that one of their top priorities 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 caters 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!
Whidegroup’s Expertise in Creating ADA-Compliant User Experience
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 on the website.
The final result 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. Visually impaired categories of visitors are welcome to use text readers, voicing all the text content on the page.
Making your website friendly to people with disabilities 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.
At Whidegroup, we take the power of the web seriously, and strongly believe 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!