The success criteria and guidelines are designed around these 4 principles that make up the foundation that is necessary for any individual to access and use any content on the web. Any individual that wants to use the web has to have content that is operable, perceivable, robust, and understandable. This is a new design for organizing the WCAG guidelines into principles. When you execute these groups of guidelines, these principles are accomplished successfully. The overall goal is to succeed in these 4 principles, and if any of these 4 principles does not succeed, then any users with disabilities will unfortunately experience difficulties when trying to use the website.

Each of the principles has a set of guidelines and Success Criteria that aid in addressing these principles for those users with disabilities. There are a number of usability guidelines that will make content more usable by every person, including those who have disabilities.

The 4 Principles of Accessibility

1. The Website Must Be Perceivable

Essentially, user interface components and information has to be presented in a way in which users can perceive it. The information being presented cannot be invisible to any of their senses.

Websites should be able to be visited by individuals that have an array of perceptive preferences and needs, but also should be able to be perceived by robots like translators and search engines. The user interface and information have to address this type of handicap, and are bound to give alternatives if a user is not able to use one of their senses. This would include text alternatives, time-based media, adaptable media, and distinguishable media.

In providing text alternatives, you are providing a way for non-text content to be transformed into other forms of communication that individuals need, like symbols, speech, large print, or braille. It is possible to render text in these oral, visual, or tactile ways so that text information is able to be presented and then manipulated into whatever form will best meet the needs of the user. An example may be that a blind person will be able to understand a picture if their browser is able to read the text alternative out loud. Or a deaf individual will be able to understand an audio file if they are presented with the text alternative on their screen.

What exactly is non-text content and how are alternatives provided? Data charts can be supplemented with a short label along with a description that is a high-level summary. Audio recordings should be provided with a description of the content within the audio link as well as a link to a text transcript. Sound effects can be compensated by text indicating what the sound means. Content images and photographs should be provided with an alternative text that describes the image and its content.

Time-Based media or synchronized media includes only audio, only video, audio and video, and audio and/or video that is combined with interaction. It is recommended that transcripts are provided for an audio-only component, and that there be a link to information text that provides equal information. For clips that have no sound, there should be a note that says something to the effect of “there is no sound used in this clip”, and if there is an audio track in different languages, captions should be provided using Synchronized Multimedia Integration Language, or SMIL.

2. The Website Must Be Operable

In short, the navigation as well as user interface components have to be operable. What does this mean? Users must be able to successfully operate the interface. Failure of this means that the interface requires some interaction that a user cannot perform. How is this successfully completed?

Start by ensuring that a keyboard can control the page through the use of HTML form links and controls, and even provide keyboard-triggered event handlers can use a keyboard or another device, thus making actions on the site keyboard accessible through the use of onclick event using anchors or buttons, or redundant keyboard and mouse event handling. You must also make sure that users are never trapped in content—there should always be a way to exit.

Users must also be provided with enough time to both read and use the content. If a session has a time limit, there should be a way for users to turn off the lime limit or at least ask for a longer session. Also, allow content to be paused and then started from that point. If there is scrip used to scroll content, you should provide a way for it to be paused.

When customizing content, be aware not to use anything that has a type of flashing visual content that will cause seizures. You must make sure that there is no content that flashes any more than 3 times in a 1 second period. If there is content that must flash, keep it in a small area and reduce the contrast. If there is any love material that has flashing content, slow the material down. You could even freeze the image for a moment if there are 3 flashes within the 1 second period.

You are responsible for providing ways that help users to navigate, find content, and determine there they are on the website. To do this, you can limit the number of links that are contained on a page, make the links visually distinct, and provide a way to navigate to various sections of content within a web page. It is recommended that you provide a way for users to skip chunks of material that are repeated by allowing keyboard access to important content and for controls on the site, provide access keys, enhance page navigation by providing skip links, and position the content based on structural markup. It is also good practice to provide a descriptive title for web pages and also provide a title for each web page.

If there is more than a single way to locate a web page, you should be using the link element as well as the navigation tools to their fullest extent, provide a site map, and provide a table of contents. You should also be linking to all of the pages contained on the website from the home page. Descriptive headings and labels are vital. In order for an individual to be able to navigate back to the home page, there should be some type of breadcrumb trail, a link to the home page, an indication of the current location with navigation bars, and/or a site map. 

For content to be adaptable, it must be presented in different ways. It is recommended to organize pages using headings, position labels in a way that will maximize the predictability of relationships, provide labels for all of the form controls that do not consist of implicit labels, use CSS to control the visual presentation of text and use it instead of a table for the layout of a page.

In order for content to be distinguishable, the background should be separate from the foreground. To do this, it is suggested to use fonts that can be easily read, text that is in an image should be at least 14 points with good contrast, and controls/links should be highlighted when they are focused on. Regarding color, information should be conveyed in a redundant color, but a component of user interface should change color when it receives focus. Regarding audio, best practice is to have sound that is only played on request, shuts off within 3 seconds, or has a control that is easily found to turn the sound off. For the website to be visually accessible, it would be compulsory to use the defaults of the browser as to not specify and color of text or background. Also, it is a good practice to provide a control that allows users to change the website to a different version of the contrast.

3. The Website Must Be Understandable

Fundamentally, the information as well as the operation of user interface must be able to be understood. The users must be able to comprehend not only the information but also the operation of the user interface.

Best practices for this include using the simplest and clearest language that is appropriate for the content, using illustrations, images, videos, or symbols to clarify meaning, avoid unknown foreign words, clarify content by providing practical examples, and providing sign language interpretations for all content (at the very least the main information). Design the website simply by using left-justified text in languages that are written as such, aim to avoid large chunks of italic text, making links distinct visually, use a pastel background rather than a white background with black text, and provide easy to read versions of the basic information—including how to contact the webmaster. You should also identify what the default language is by using the language attributes on the HTML element.

If there is an unusual word or phrase that has a unique meaning in the web page, you should provide its definition for the first occurrence with a link to a glossary or definition list, or you can provide a definition with each occurrence by linking definitions, or providing a glossary function. If it has different meanings throughout the same web page, definitions should be linked each time. To aid users in recognizing words that have a special meaning by visually formatting them to look different. The same goes for any abbreviations within a web page.

To ensure that the content is understandable by all individuals, you can provide a spoken version of the text content, provide a summary that does not require an advanced reading level, provide illustrations to help explain ideas or processes, and provide a sign language interpretation of the information that should be understood for the individual to use the content. For pronunciations, provide a link to the pronunciation or type it out immediately after the word. Even further, it is possible to provide the pronunciation in a sound file.

The web pages should appear and operate in a way that is predictable. How is this possible? Use and place the labels so that the predictability of relationships is maximized. When triggering changes of context, use the “activate” rather than the “focus” option. Note that this is not for change of content, and users should be given an advanced warning when a new window is opened, and this should only be done when it is seen as best option from the perspective of accessibility. To ensure consistent navigation, use a template across multiple web pages so that they have the same layout, layering, positioning, and alignment. Always use the title to give help that is specific to the context. Finally, ensure that submissions are reversible, data is checked for input errors with opportunity to correct it, and that there is a mechanism for reviewing, confirming, and then correcting information before it has been submitted.

4. The Website Must Be Robust

The content must be robust, in that it can be interpreted confidently by a wide variety of different user agents, including those like assistive technologies. What does this translate to? Users must be able to use the content as there are advancements of technologies—meaning that as user agents and technologies evolve and grow, the content should remain accessible. The code should be as clean as possible and should respect the standards so that browsers will be able to furnish the page.

This is done by validating the web pages, fully conforming to the specifications, using HTML according to the specifications, and making sure that pages can be parsed by ensuring that opening/closing tags are used within specification. In addition to this, you should also be providing labels for all form controls that do not have obvious labels.

For any user interface components, the name as well as role can be determined programmatically, and properties, states, and values that are able to be set by the user can be set programmatically, while the notification of changing these items is available for user agents which includes assistive technology. Though, this is mainly for those webmasters who develop their own user interface components.

Author: Garenne BigbyWebsite: http://garennebigby.com

Founder of DYNO Mapper and Former Advisory Committee Representative at the W3C.