Web accessibility is nothing new in the digital age. However, conversations about its growing importance are often missed.
In this article, WCAG Principles: Overview, Guidelines, and Best Practices, we will understand more what web accessibility means before we learn about the compliance that comes with it.
It is also essential to understand the many facets of digital accessibility. Like for example, the standard expectations of images with alternative texts for the visually impaired or video captions for the hearing impaired only account for a small segment included in making the website remain accessible.
In this article, we will discuss the following topics:
Individuals and organizations around the world develop the WCAG 2.0 guidelines. This cooperation aims to provide a shared standard for web accessibility that meets the needs of users worldwide.
The WCAG 2.0 is built from WCAG 1.0 standards and is designed to broadly apply to different web technologies in the present and the future. The updated principles are also constructed to be testable with a combination of automated testing and human evaluation.
WCAG 2.0 provides recommendations for making web content more accessible. These guidelines will make content more accessible and correct mistakes to a vast range of people with disabilities, including people with low vision, deafness, hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, sensitivity to photos, or any of the combinations of these disabilities.
In addition, the WCAG 2,0 guidelines are created to make web content more usable for everyone in general.
There are 4 principles of WCAG 2.0, and to remember them quickly, you can think of this acronym, POUR.
The 4 principles are:
Perceivable
This web principle is about processing web content by seeing, heating, or touching it. If there is one sense missing, the information should be perceivable through another sense.
Operable
In general, web content must have the ability to operate with both a keyboard and a mouse. However, it also means the ability to operate and correct mistakes through voice or other alternative input devices like switches or a head-controlled mouse.
Understandable
The principle understandable is where web content is presented in a consistent, predictable, readable form that reduces the chances of making errors and can be understood by different users.
Robust
Robust is a web accessibility principle that adopts standards to function or be understood across a wide range of technologies. It should also allow to continue to function in the future as technologies change and evolve.
For the content to be perceivable, it should be able to perceive through multiple senses.
And while there are so many ways to do this through alternative senses like audio descriptions for visual content for the blind or sign language visual for the deaf, text alternatives are the best choice.
Text form content is made into various forms. For example, text can be read aloud by a screen reading software. The text can also be converted into Braille language for the blind.
You can also translate the text into different languages for users who want to read in a second language. The text can also be magnified without losing the sharp appearance of users with low vision.
The color of the text can also be changed to make it readable for users who are color blind or who need to read in high contrast.
Best practice: We recommend you utilize plain text, which is considered the most flexible format because this can easily be converted into various forms to make the context perceivable across a wide range of accessibility needs.
Operable
Operability in the context of web accessibility means that something is functional using a keyboard. And if functional items are not keyboard operable, they stop being accessible to many users must be able to utilize the keyboard without a problem.
Many developers often create a lot of features that operate with a mouse. However, they often overlook adding good keyboard functionalities.
While many people access the Internet with a mouse, many people do not use one.
Like for example, a blind user will unlikely use a mouse but will more likely interpreted reliably on the keyboard for access.
Power users- these are developers and programmers, also tend to use their keyboards more.
The usability for these user agents is lost when the keyboard users access is not programmed correctly for these users must be able to use them easily.
The ability for web content to be operable also means functional by using one's voice. There are people with severe motor impairments who need to use voice recognition software and special switches to operate their computers and navigate the web.
Also, operability means text alternatives accompanied with graphical buttons so user agents can speak the text alternatives to focus on one user interface element. These user interface components must also be keyword operable, and thus, a switch can be used to activate the element. The way a switch is pressed should be similar to pressing the Enter or Space bar on a keyboard, or pressing should be identical to clicking a mouse.
Best practice: Remember that all functional user interface components in web content should be operable with a mouse and keyboard.
Understandable
Understandable is a web accessibility principle that refers to understanding both the context and features of a website.
When it comes to context with complex or advanced language, it is safe to assume that this is difficult for some user agents, including users with disabilities, users who are only reading in a second language, and old enough and have diminishing cognitive disabilities.
For public websites, the reading level of language used should be minimized by using simple language as much as possible.
Another aspect of the understanding principle is connected to the consistency and ease of use of navigational user interface components on a website. It should reduce the number of navigational features, and that the user interface elements should be presented consistently throughout the website.
The understanding principle can improve the usability of most user agents, especially people who are blind, people with cognitive learning disabilities, and older people.
For example, a blind person who uses a screen reader to navigate the web pages frequently will find themselves exerting effort in mapping to memory the website's navigation structure. This is a similar experience from someone traveling from point A to point B in a city with many streets.
Thus, if the navigation structure changes on a website, it can lead to a lot of confusion. The navigation should stay consistent as it should only be learned once, so the cognitive efforts of the user agents evolve should only focus on understanding the important content of the web pages.
Best practice: Always use simple, easy, consistent, and predictable navigational user interface components throughout the website.
Robust
As we have defined previously, Robust refers to the content across a wide range of web and assistive technologies. This means standardizing the use of technology for users navigate the website.
Web browsers and other input assistance technologies based their development around existing standards such as HTML. Thus, no matter how updated the technology is, it can interpret content in a standard way.
So, when content varies, it could display problems in interpreting content. Of course, not all content should comply with the standards. However, when custom content does not comply, a secondary standardized version should be provided, so the content degrades gracefully.
This means that web content that degrades gracefully is intended to function at its best in updated browsers and other updated assistive technologies. And then, as an older version, less feature-rich technologies view it, with fewer features.
Technical scope to take note of:
WAIR ARIA makes it possible to standardized technology, using HTML in new ways that were not intended initially
ARIA attributes are used to describe the role, stats, and properties of custom elements. For example, an HTML <div> user interface element was not intended to be clickable, but it is possible to add the click function using Javascript. However, the <div> is just a container with no function from an assistive technology perspective. So the <div> is used in a non-standard way in this case.
HTML5, with CSS, scripting, and ARIA to create interactive future user agents interface elements for the web. There are events where non-standard technologies like Flash embedded objects and Java applets might be used. While it is possible to make these elements accessible, it can be challenging to access and operate these effectively with assistive technologies. In such cases, there should be some alternatives. Flash development tools are an option since it generates an HTML version; however, they can be static vs. what you can expect in the Flash. You can use it (whenever possible).
Best practice: Whenever there are non-standardized technologies or standardized technologies are used in non-standardized ways, always provide standardized options to create content that degrades gracefully.
Conclusion
Understanding the POUR or the 4 WCAG principles is just the beginning. We recommend that you study more of these principles to examine each of the guidelines and how you can properly apply these on your website to improve success criteria and usability.
