WCAG 2.1
Web Content Accessibility Guidelines version 2.1 (WCAG-2.1) is maintained by the W3C who cooperate with individuals and organizations around the world, with a goal of providing a single standard for Web content accessibility that meets all major accessibility needs of most individuals, organizations, and governments. It is an international set of recommendations for making website content more accessible to people with impaired abilities.
The W3C states that “the guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content”.
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to identify and grasp the information being presented (it can't be invisible to all of their senses)
This means that users must be able to use the interface (the interface cannot require interaction that a user cannot perform)
Operable - User interface components and navigation must be operable.
This means that users must be able to comprehend the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
Understandable - Information and the operation of user interface must be understandable.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
You may remember these better if you think of the acronym POUR, or maybe try a sentence like, Picky Ogres Use Rockets or something that helps you remember.
a quick summary of high-level tips one should consider when developing an accessible site:
Be consistent and logical in the DOM and in Navigation
Definition: DOM: According to the W3C, The Document Object Model (DOM) is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
CAPTCHAs are not recommended.
Avoid using flashing images or text.
Don’t use images of text when you can use text. If you do, make sure it’s only for decoration or company logos.
Only use color in conjunction with another element (text or symbol) when identifying errors or important messaging. Color alone is not enough of an identifier.
Avoid scrolling text unless there is a clear way to stop it so the reader can read it.
Avoid background music or sounds that would interfere with audio assistant devices.
Allow the user to turn off any automatically playing video.
Ensure your site, including media player controls, can be used using only a keyboard.
Timed content should allow the user to turn off the time limit altogether, or at the least, have the ability to extend the time to complete an action.
Titles
Web pages have titles that describe topic or purpose.
Every Web page should have a title so it can be easily and quickly identified by all users, sighted or those using assistive technology. Ensure that all title elements are:
Not empty
Describe the page contents appropriately
BOIA BEST PRACTICE: All Web pages should have a properly descriptive TITLE that describes the intent and purpose of the Web page. This allows people to orientate themselves amongst Web pages. Page titles should not all begin with the same text such as 'Joes Plumbing Website - Contact Us', 'Joes Plumbing Website - About our services' etc, so ensure Web pages have unique and meaningful titles.
Headings
Headings not only explain what that section of a Web page is, but it helps organize the page to make the information flow correctly and make sense to all users, not just those using assistive technology.
Headings define sections of content within a web page and they are important for assistive technology to use to organize and prioritize the information for non-visual consumption (screen readers.)
BOIA BEST PRACTICE: You should attempt to make the top heading (<h1>) of a page match the page-title as close as possible as both serve similar purposes; the page Title is for Navigation and Search Engine Comprehension and the actual Page’s H1 title is the content-readable equivalent. HTML Heading tags (H1,H2,H3…H6) were developed to provide information on the structural hierarchy. Use H1 for the title when possible (only ever use one H1 tag), H2 tags for major headings, and H3 tags for major sub-headings. Headings should occur in appropriate sequential order groupings.
Lists
There are several kinds of lists, but the most common are the following:
Ordered List <ol> : Used for outlining steps to accomplishing something, something that is sequential. Ordered Lists are usually prefixed sequentially with progressive numbers or letters or similar. E.g. 1,2…5 or a, b, c…g or i, ii, iii, iv…vii
Unordered list <ul>: a list of things that are related but are not required to prefixed with a sequential indicator such as 1,2….5 or a,b,….f. Usually a bullet or shape of some kind prefixes unordered list items.
Definition list <dl>: a list of terms and definitions involving a DT (definition term) and then a DD (definition description) constituting a term and definition pair as each item in the Definition List.
Nested lists: These are in essence lists within a list. Indexes and navigation menus are good examples of these. It is extremely important that nested lists (any nested html tags for that matter) are properly opened and closed completely within other list items: so they are entirely self-sufficient and encapsulated within a parent tag or list item.
BOIA BEST PRACTICE: When making lists, make sure you’re choosing the right kind of list tag (<OL>ordered, <ul>unordered, <DL> etc.) Ensure complete encapsulation of child tags without overlapping with parent HTML tags.
Alt text
Alternative text (alt text) is used as a description of an element that cannot be comprehended as text. Basically, any significant non-text content must have a text alternative for people using devices like screen readers. Images (media in general) are the most common example of when you need to use alt text.
When there is an image on a page, that image cannot be “deciphered” by assistive technology, so the user has no idea what the image represents (or may not even know the image exists) or, more importantly, have major problems if the image is required to use the site.
When choosing the text that describes an image, make sure to give enough information, but not too much where it becomes cumbersome or redundant. The point here is to apprise users of any pertinent information related to the webpage.
A good example of this is when an image is used to advertise a sale. If there is not appropriate alt text attributed to that image, a blind or low vision user may miss important or pertinent information.
...
It’s important to identify which element on a page has the focus when there are multiple elements on a page. The easiest way to understand what this means, is with a hyperlink. Imagine tabbing through a Web page, and going from link to link. That’s usually because links are one element that are assigned programmatic focus by default. Browsers often identify links by either framing the link with a solid or dotted blue line.
Other elements that receive this default programmatic focus are found in forms. When navigating through a page using the tab function, the focus will automatically go from link and form element through the page.
Each of these tab-able elements needs to have some indicator, indicating to users of screen readers where they are on a page.
Color alone is not the answer.
BOIA BEST PRACTICE: It must be clear where the keyboard focus indicator is on the page. Color can be a good technique as long as it’s in combination with some other indicator. So when using CSS (Cascading Style Sheets), you could use the CSS selector “:focus”.
Forms
When creating forms ensure they are described (summarized) and labelled contextually and always make sure that each label is paired with the proper, distinct form-control and is tabbed in correct and sequential order for filling out the form. Screen Readers offer facility to jump directly to forms, so make sure they have a name and id attribute and also that the form itself has a “tabIndex” so that it can be jumped to with the tab key just as the form, controls within will be tabbed through by a keyboard-only user. If you associate proper labels with form controls, they inherit the “tabIndex” of their corresponding form control so that the label is read prior to the input field of control being used.
Correct Field Tab Order Example
...
First Name: 1
...
Middle Initial: 2
...
Last Name: 3
...
Street Address: 4
...
City: 5
...
State: 6
...
Zip Code: 7
Avoid Keyboard traps! A keyboard trap is when a user tabs into an element, but then cannot get out, which means they can’t move ahead or backward. This tends to occur with Flash. One way to avoid this would be to use JavaScript and using id values to identify the HTML before and after the flash element.
BOIA BEST PRACTICE: Go through the form yourself as you would be filling it out as a user. Does the order make sense, or are you entering an email address in between adding your first and last names? Put your mouse aside and navigate through the page using just your keyboard. It is a good idea to brightly style elements with CSS to visually check that the tabbing order is properly implemented.
...
The tabindex is used to define a sequence that users follow when they use the Tab key to navigate through a page. By default, the natural tabbing order will match the source order in the markup.
The Tabindex attribute has three distinct uses:
Tabinex=”1” (or any number greater than 1) defines an explicit tab order. This is almost always a bad idea.
Tabindex=”0” allows elements besides links and form elements to receive keyboard focus. It allows users to be able to focus the element in the order determined by its location with the DOM.
Tabindex=”-1” allows things besides links and form elements to receive “programmatic” focus, meaning focus can be set to the element through scripting, links, etc. It is handy if you need to be able to move focus onto something that you have updated via scrip or outside of user action.
The tabindex attribute of 1+ explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.
In theory, tabindex should only be used in cases where:
The default tab order is not ideal, AND
The tab order cannot be changed by rearranging items in the content and/or by altering the style sheet to reflect the best visual arrangement.
A positive tabindex value will confuse users, especially those using assistive technology. Anything that has a positive tabindex value will be promoted to the front of the tab priority and has to navigate through all elements with a positive value before it falls back into source order.
BOIA Best Practice: Avoid using a positive tabindex attribute.
Skip Navigation
It’s recommended to give the user a way to skip through the navigation of your site, so they can choose to skip to the main content. This becomes more relevant when you consider going from page to page, unless there is a skip navigation function, the screen reader will read every heading, every logo, branding, social media widgets, and top-of-page navigation prior to the content on each page. This is redundant and unnecessary. It should be noted that, as well as top-page navigation, common content (text and links), which is the same on many or all pages is also a candidate for a skip link. It is also common for skip-links to be made non-visual in the main page area by offsetting them outside of the pages viewport: they will still be discovered by Screen readers but not be visualized by sighted users.
BOIA BEST PRACTICE: Make sure you have this available on every page. It’s recommended that it be placed at the top of the page, and the link destination (main content) has the corresponding element.
Links
WCAG 2.1 states that color cannot be the sole method of conveying content or distinguishing visual elements. But it doesn’t mean that it should not be used, as long as color is accompanied by an additional visual clue. If you are using color, you will have to make sure to follow a few certain requirements having to do with contrast.
A 4.5:1 contrast between non-link text color and the background.
A 4.5:1 contrast between link text color and the background.
A 3:1 contrast between the text color and the surrounding non-link text color.
BOIA BEST PRACTICE: Be concise and descriptive with your links: ensure that links are distinct and purposeful. Avoid wording like ‘click here’ and make sure you use some real words as the link text and not just use the Linked-to-URL as the link text. Because links should be distinct, you should not create multiple links with the same link text: Screen-Reader users will hear multiple identical link descriptions and the link-URLs may or may not actually go to the same URL place.
Color & Color Contrast
It’s never a good idea to use color alone to identify something on a Web page. There needs to be some other indicator. There are color blind users and low and no vision users who may not be able to distinguish colors sufficiently to understand the data you are trying to convey.
It’s important to consider the color limitations of some users when adding something like an input error message alert for unsuccessful form submission. Often, designers will assume that, for example, the user did not fill in a required field on a form that highlighting that field and alerting them to “fill in the highlighted field” would be enough. But, if someone can’t tell that a field is highlighted, then you will need to add more description. Such as:
“Alert! Please enter your zip code.”
If this is not done, the user may abandon the form altogether before encountering the error indicator, thinking that the page simply is not functional.
When input errors have occurred, it can be a good idea to programmatically, force the current focus to the form’s actual error messaging: and even offer link that jumps directly to the first form control that has bad or missing input data; this is where Form-control styling becomes important in addition to the actual input-error messaging.
BOIA BEST PRACTICE: Use a combination of color and symbols when identifying errors. Make it easy, like by using links, for the user to get to the field that has the error and by making sure any acceptable data that was input, stays in the fields to avoid having to fill out the whole form again.
BOIA BEST PRACTICE: It would be important here to note that if your Web page background is light, use dark text and if your background is dark, use light text. If you question whether the contrast is not prevalent enough, then it’s not.
Fonts
An important consideration, when thinking about your entire audience, is if they can read the font you’ve chosen, and the size of which you’ve used it. There are a few rules to follow when choosing how your text will be displayed throughout your site:
Choose an easily-read font.
Do not make your text a graphic.
Be consistent – use limited styles. This goes for font types as well as using emphasizing elements like bold or italics.
In regards to size, make sure to use relative units (percent or ems).
Text must be resizable up to 200%. Using ems to determine font size is beneficial as it makes scalable style sheets.
Tables
Table structure should be as simple as possible, ensuring that you give each a title and use the <th> element for row and column headers. A summary of the table can be read by screen readers by using the summary attribute. But how do you do all of these things?’
You will want to use the <caption> element within the table to describe the table’s overall message. Then when building the table, be as streamlined as possible, using the THEAD, TFOOT, and TBODY elements, so assistive technology can accurately read the data you are portraying. Think of this as a kind of index, where you outline what it is you are illustrating.
Before you add accessibility to your table, it is important to know what kind of data the table represents. Is the information in the table actual column and row data intended to be digested sequentially or is the table there just for laying-out/positioning content. If the table is merely for laying-out or positioning content, then it is a layout-table and not a data-table.
A layout table (mostly frowned upon) does not necessarily need a ‘summary’ attribute or table Headers ‘TH’ or ‘THEAD” or ‘TBODY’ as the information is not really intended to convey several rows of column data.
A data table may contain a great deal of rows and columns and a user will need to know what row and what related column header they are currently reading. Data-tables need more accessibility attention and thought applied. Each table header and each row must be indicated as header and row elements and a caption should be used so the user can decide whether to traverse into the table or not (there is sometimes need for table-skip-links.)
BOIA BEST PRACTICE: Avoid really complex tables when possible, or rework tables to make them easier to understand. Avoid using tables to layout data as there are better and more accessible CSS ways to do so. Following the steps we lay out in this section will be a good guideline for you to follow, when applicable and possible. Evaluate your true need for tables as they are quite difficult to maintain accessibly.
The Principles
Now that we’ve gone over some of the most prevalent non-compliant themes seen in website accessibility, we should look as the guidelines within the four Principles as outlined by the W3C. This part of the training is to provide the exact guidelines as outlined by the W3C, as well as layman’s terms where possible to help make it more relatable.
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to identify and grasp the information being presented (it can't be invisible to all of their senses)
1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.2 Provide alternatives for time-based media.
1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
1.4 Make it easier for users to see and hear content including separating foreground from background.
Operable - User interface components and navigation must be operable.
This means that users must be able to use the interface (the interface cannot require interaction that a user cannot perform)
2.1 Make all functionality available from a keyboard.
2.2 Provide users enough time to read and use content.
2.3 Do not design content in a way that is known to cause seizures.
2.4 Provide ways to help users navigate, find content, and determine where they are.
2.5 Make it easier for users to operate functionality through various inputs beyond keyboard.
Understandable - Information and the operation of user interface must be understandable.
This means that users must be able to comprehend the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
3.1 Make text content readable and understandable.
3.2 Make Web pages appear and operate in predictable ways.
3.3 Help users avoid and correct mistakes.
Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
4.1 Maximize compatibility with current and future user agents, including assistive technologies.
Principle 1: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
People with disabilities access the information on websites in different ways, often utilizing assistive technology, such as text-only browsers or screen readers. It’s a good idea to be familiar with this technology and understand it form the user’s perspective. Some of the most prevalent assistive technology out there today includes:
JAWS (Job Access With Speech), is a software that provides speech and Braille output
Window-Eyes is a free screen reader for Windows PCs
Voice-recognition software that helps the user control the computer by voice command
Lynx, a text browser that strips down a Website to its raw nature, removing graphical elements that may be bothersome to some users
Guideline 1.1: Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
Because some users use the Web with graphical elements stripped down or removed, or they use a screen reader that reads the available text, there need to be text alternatives for all non-text elements such as images or other media. Specifically, the guidelines calls out:
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
BOIA BEST PRACTICE: The objective of this criteria is to make sure to have text descriptions of everything that may not evident to someone using assistive technology such as screen readers. Are elements necessary to use your website fully, like instructions, found in images that may not be readable by a screen reader?
The biggest issue here has been discussed earlier in this training. You must ensure that there is alternate text assigned to elements such as images and media, or better yet, don’t put required information in non-text content where possible.
Guideline 1.2: Time-Based Media
Provide alternatives for time-based media.
Simply put, make sure that your audio-only and video-only components have an alternative way to give users the information it is presenting. There are specific sub-categories to this guideline:
1.2.1 Audio-only and Video-only (Prerecorded) (Level A)
1.2.2 Captions (Prerecorded) (Level A)
1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
1.2.4 Captions (Live) (Level AA)
1.2.5 Audio Description (Prerecorded) (Level AA)
1.2.6 Sign Language (Prerecorded) (Level AAA)
1.2.7 Extended Audio Description (Prerecorded) (Level AAA)
1.2.8 Media Alternative (Prerecorded) (Level AAA)
1.2.9 Audio-only (Live) (Level AAA)
We won’t be getting into depth about each specific example listed above but there are a few themes that one should keep in mind when providing media on a Website:
Pre-recorded: Have an alternative means of expressing the information presented in media.
Video-only: Provide a link to a transcript or an audio track
Audio-only: Provide a link to a transcript
Write and display captions for any videos.
Embed a video of a sign-language interpreter into the video.
To attain Level AAA, you should consider an audio description (alternative version of the video) as well as a transcript.
Use a content management system that allows you to add text live.
Live audio and video can be tricky but use of an audio streamer that can access a transcript can be used, as well as video of people using sign language to translate the information
BOIA BEST PRACTICE: Unless your site requires live streaming audio and video, you may want to consider not making this available at all. This takes a lot of work to maintain and often requires hiring a professional subtitler which can be costly.
Guideline 1.3: Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
The objective of this guideline is to have the information presented in a structured, simple and organized means so the information can be perceived cohesively.
1.3.1 Info and relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
1.3.2 Meaningful sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual, orientation, or sound. (Level A)
1.3.4 Orientation: Orientation is not fixed. (Level AA)
1.3.5 Identify Input Purpose: Input purpose can be easily determined. (AA)
The main objectives here are to ensure Linear Order, to understand how each topic relates to the other, and to ensure you use more than one way to convey information.
As we discussed in the beginning of this training, Headers are vastly important to a Web page. Not only should they be structured in the proper sequence, but they should be relevant and informative so when someone tabs from section to section, the order and information presented is clear.
<h1> This is the most important, all-encompassing header and there should be only one <h1>
There can be multiple <h2> through <h6> headers, depending on the information being presented.
BOIA BEST PRACTICE: In addition to headers, you should separate navigation menus from content and identify which areas on your site are paragraphs, lists and tables, for example. Forms should always clearly identify, with both color and symbol, which fields are required and if a user misses something, error messages should bring that user right to the section of the missing information. Tables should have clearly identified headers for columns and rows, and the data inside each cell should be labelled as data. Content should not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is considered to be essential.
Being able to identify things in more than one way is key. You will want to make sure that you don’t use only one, like color. As discussed earlier, if you only use color to distinguish information, you may be excluding some users from understanding the information. You’ll want to use perhaps a shape as well.
Guideline 1.4: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
There is much to discuss under Guideline 1.4, but there are common threads: Color, Audio, contrast, and text.
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
BOIA BEST PRACTICE: This has already been covered, but there must be a secondary means to identify something on a page. Meaning, you can’t say something like: “fill in the areas that are shaded yellow”. Some people can’t distinguish colors. The better way to identify required areas, would be, before the form itself, clearly instruct the user to “fill in all fields. Yellow highlighted fields marked with an asterisks (*) are required”, or something to that effect.
1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. (Level A)
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1,
Except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
BOIA BEST PRACTICE: You can check it in your browser or by adding a feature to your website that allows the user to change text size. Or utilize the common browser text-scaling features by using Ctrl and the plus or minus sign, or Ctrl and scroll the mouse wheel: some browsers also have a scaling percentage at the bottom-right of the browser that could be used.
1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)
Customizable: The image of text can be visually customized to the user's requirements;
Essential: A particular presentation of text is essential to the information being conveyed.
BOIA BEST PRACTICE: Never represent readable content via an image (any media/non-text method): at least not without an alternative text construct.
1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
1.4.7 Low or No Background Audio: Low or No Background Audio: For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true: (Level AAA)
No Background: The audio does not contain background sounds.
Turn Off: The background sounds can be turned off.
20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.
BOIA BEST PRACTICE: Where possible, it’s recommended not to use background audio, but if there is a need, it must be something that can be controlled by the user. This is not only important for users using a screen reader so the audio isn’t competing with the information being read, but it’s also a nice thing for all users, as often times the noise becomes a nuisance on a page when someone isn’t expecting it or is in a space where automatically playing sound can be distributed. It is highly recommended that movies and audio do not auto-play by themselves (without user interaction and choice.)
1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)
Foreground and background colors can be selected by the user.
Width is no more than 80 characters or glyphs (40 if CJK).
Text is not justified (aligned to both the left and the right margins).
Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
1.4.9 Images of Text (No Exception): Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. (Level AAA)
1.4.10 Reflow: Content can be presented without loss of information or function, and without requiring scrolling in two directions. (Level AA)
People with low vision often need to enlarge text in order to easily read content. Enlargement enables perception of characters and the reflow of content enables tracking. Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.
Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling significantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.
The value of 320 CSS pixels was chosen as a reasonable minimum viewport width that content authors can achieve. This value lines up with the reported viewport width of small displays of many common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%.
1.4.11 Non-Text Contrast: Color of visual UI components and graphics required to read/operate content have sufficient contrast. (Level AA)
Visual details needed to identify graphics and user interface controls (and their various states) need to have a contrast ratio of at least 3:1 contrast with adjacent colors. This includes, but is not limited to: buttons, form fields, menus, tabs and their focus indicators, boundaries and selected states. This requirement is necessary to ensure that identifying features of controls and states (non-text) are distinguishable by people with low vision. Low contrast controls are more difficult to perceive and may be completely missed by people with a visual impairment.
1.4.12 Text Spacing: Text spacing can be customized without loss of content or function. (Level AA)
For user agents that allow customized text style properties, no loss of content or function should occur when setting all of the following (while not changing any other style property):
<strong>Line height (line spacing):</strong> to at least 1.5 times the font size.
<strong>Spacing underneath paragraphs:</strong> to at least 2 times the font size.
<strong>Letter spacing (tracking):</strong> to at least 0.12 times the font size.
<strong>Word spacing: to at least 0.16 times the font size.</strong>.
When the content cannot adapt to these settings, users with low vision, dyslexia, learning and cognitive disabilities may not be able to read or understand content.
Cascading Style Sheet/HTML technologies are quite able to allow for the specified spacing metrics. Plugin technologies would need to have a built in ability to modify styles to the specified metrics.
1.4.13 Content on Hover or Focus: Hover and focus events should not obscure content and should be dismissable. (Level AA)
Content that appears and disappears in coordination with keyboard focus or pointer hover, such as custom tooltips, sub-menus, overlays and other non-modal popups, often lead to accessibility issues. Therefore, content that appears and disappears on hover or focus must be designed in a way that meets the following conditions:
<strong>Dismissible:</strong> A mechanism must be available to dismiss the additional content without moving pointer hover or keyboard focus (such as enabling the Escape key to dismiss the content)
<strong>Hoverable:</strong> If pointer hover triggered the additional content, then the pointer must also be able to move over the additional content (i.e. content must not be obscured)
<strong>Persistent: The additional content must remain visible until the hover or focus trigger is removed, the user dismisses the additional content, or its information is no longer valid (such as a status message that changes status).</strong>
Exceptions include additional content that is controlled by the user agent (such as a tooltip displayed via the HTML title attribute) and is not modified by the author. This guideline also does not apply to custom modal dialogs since they are typically triggered on click events.
Principle 2 - Operable
The interface components and navigation must be operable.
Guideline 2.1: Keyboard Accessible
Make all functionality available from a keyboard.
The main intent of this guideline is to ensure that someone not using a mouse can use a keyboard to easily tab through the page. Someone can’t tab into an area and then not be able to tab out of it. If not, this is what is referred to as a keyboard trap. Again, if you create your headers correctly and have them in order, this should not be an issue, however, if you have multiple H1s, and your headers go from H3 to H5, your information is not sequential or linear and your users will find this at the very least, confusing.
It is not enough to make it appear as though headers are in order by using styles, such as bolding or text size. You need to label them correctly in HTML so assistive technology knows what to read and when.
2.1.1 Keyboard - All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
Note 1: This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not.
Note 2: This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.
What this means is that the functions of the website must be operable through a keyboard.
2.1.2 No Keyboard Trap – If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A)
Note: Since any content that does not meet this success criteria can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criteria. See Conformance Requirement 5: Non-Interference.
BOIA BEST PRACTICE: Try using only a keyboard to navigate to and from media implemented in your web pages (without the use of a pointing device/mouse.) This must include Media players and ensuring the user can tab into them, control them with the keyboard when in the application, then tab out of them.
2.1.3 Keyboard (No Exception) - All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. (Level AAA)
You most likely cannot conform to this guideline if you rely on pointer-controlled content, like gamer sites. Adhering to this guideline is a Level AAA component (the hardest to reach) and there are exceptions that outline how not all can adhere.
2.1.4 Character Key Shortcuts - Character Key Shortcuts can be modified. (Level A)
When a page has shortcuts that can be activated using a single key, such as a letter, number, punctuation, or symbol key without a modifier key, the user should have the option to reconfigure (remap to use a modifier) or deactivate (turn off) the shortcut. This standard is not applicable when the control that has the shortcut is focused. This standard does not apply to access keys, as those shortcuts require a modifier key.
Guideline 2.2: Enough Time
Provide users enough time to read and use content.
2.2.1 Timing Adjustable - For each time limit that is set by the content, at least one of the following is true: (Level A)
Turn off: The user is allowed to turn off the time limit before encountering it; or
Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
Essential Exception: The time limit is essential and extending it would invalidate the activity; or
20 Hour Exception: The time limit is longer than 20 hours.
Note: This success criterion helps ensure that users can complete tasks without unexpected changes in content or context that are a result of a time limit. This success criterion should be considered in conjunction with Success Criterion 3.2.1, which puts limits on changes of content or context as a result of user action.
The exception to this is during live auctions where timing of an event is integral to the site’s function. For example, eBay or some coupon offer that is expiring.
2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)
Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
Note 1: For requirements related to flickering or flashing content, refer to Guideline 2.3.
Note 2: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.
Note 3: Content that is updated periodically by software or that is streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so.
Note 4: An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and if not indicating progress could confuse users or cause them to think that content was frozen or broken.
2.2.3 No Timing: Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events. (Level AAA)
What it means: In essence, this guideline exists to help minimize the instances of content that requires an action from the user within a certain time period.
2.2.4 Interruptions: Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. (Level AAA)
What it means: Except in emergency situations, the user should have the ability to turn off interruptions, such as software update reminders, so users can focus on what they are doing without disruption.
2.2.5 Re-authenticating: When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating. (Level AAA)
What it means: During online transactions, such as checking out of an online shopping cart or taking a survey, if the session times out due to inactivity, the user should be able to re-authenticate and restart where they left off without any loss of data or previous work.
Guideline 2.3: Seizures
Do not design content in a way that is known to cause seizures.
2.3.1 Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)
Note: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.
2.3.2 Three Flashes: Web pages do not contain anything that flashes more than three times in any one second period. (Level AAA)
BOIA BEST PRACTICE: Avoid flashing or blinking content as much as possible. If there must be some sort of pulsation, it should be in the recommended frequency (period of flashing). The frequencies to avoid are in the range of 2Hz to 55Hz :- that’s to say avoid flashing things between 2 and 55 times per second.
Guideline 2.4: Navigable
Provide ways to help users navigate, find content, and determine where they are.
What it means: Users using tools like assistive technology should be able to move throughout a Web page and a Website easily.
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
BOIA BEST PRACTICE: You need to add a way for the user to get right to the content. Use a “skip to content” link at the top left of the page where possible.
2.4.2 Page Titled: Web pages have titles that describe topic or purpose. (Level A)
BOIA BEST PRACTICE: Every page on your site should have a unique title. When possible, use these page titles in the sitemap for easier navigation.
2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)
What it means: The sequence of the elements that are focused in on by using tab or the arrows, should be logical and in order. A keyboard user should be able to access the information as laid out sequentially, for best comprehension.
2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)
BOIA BEST PRACTICE: Be clear and consistent with what you use as link text, the surrounding context or the alt text. There should be no question as to what the link’s purpose and destination is.
BOIA BEST PRACTICE: Be consistent in your description or naming of a link with the same destination.
2.4.5 Multiple Ways: More than one way is available to locate a Web page within a set of Web pages except where the Web page is the result of, or a step in, a process. (Level AA)
BOIA BEST PRACTICE: Add a sitemap after the Skip to Content Function, and if possible, a search function in the header.
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
BOIA BEST PRACTICE: Not only should heading and subheadings be as descriptive but brief as possible, you should also label all expectant elements like tables, forms, buttons, etc.
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
BOIA BEST PRACTICE: Adding or changing a border around the element, in addition to a change in color of the element or of the background, are good ways in which to show focus. Do not use color alone.
2.4.8 Location: Information about the user's location within a set of Web pages is available. (Level AAA)
BOIA BEST PRACTICE: Using breadcrumbs, or adding an HTML sitemap. As discussed earlier in our training:
2.4.9 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA)
BOIA BEST PRACTICE: Make it clear what the link’s purpose is by making sure the link text is descriptive. As in: For details, visit the Cooking with Potatoes website in a new window.
2.4.10 Section Headings: Section headings are used to organize the content. (Level AAA).
Note 1: "Heading" is used in its general sense and includes titles and other ways to add a heading to different types of content.
Note 2: This success criterion covers sections within writing, not user interface components. User Interface components are covered under Success Criterion 4.1.2.
Section headings can be incorporated with the proper use of ARIA attributes which is not covered in this tutorial.
This guideline meets Level AAA, whereas most sites are looking to conform to Level AA. Because this general idea of adding Clear and sequential headings is touched on throughout Principle 1 and 2, there is not too much else to learn in Guideline 2.4.10
Guideline 2.5: Input Modalities
2.5.1 Pointer Gestures: Single point equivalents exist for multi-point or path-based gestures. (Level A)
Authors must ensure that their content can be accessed and operated without complex gestures. Functions need to be operable using a single pointer (such as a single-click/tap, click/tap-and-hold, or double-click/tap). Functions requiring complex multi-point or path-based gestures (such as swiping, dragging, pinching, or drawing) should have equivalent single-point activation methods unless the gesture is considered essential (such as signing your name, or part of the user agent, such as scrolling the screen).
2.5.2 Pointer Cancellation: Users must be able to cancel accidental triggering of functions on down-events. (Level A)
People with motor disabilities can accidentally trigger touch or mouse events with unwanted results. Activation can occur when someone touches a screen (down-event) or when they remove their finger (up-event). In mouse interaction, activation can occur when pressing (down-event) or when releasing the mouse button (up-event). Authors can reduce the problem of users inadvertently triggering an action by making activation on the up-event. This gives users the opportunity to move their finger or other pointer (e.g. mouse) away from the wrong target once they hit it.
2.5.3 Label in Name: For user interface components with labels that include text, the accessible name contains the test that is presented visually. (Level A)
For user interface components with labels that include text or images of text, the accessible name should begin with the exact same text that is presented in the visible label.
2.5.4 Motion Actuation: Functions operated by device motion can be disabled and have an alternative input method. (Level A)
When device motion or user motion (e.g., shaking, tilting, or gestures picked up by the device’s camera) are used for interaction, an alternative input method should be provided to perform an equivalent action unless the motion is essential for the function and doing so would invalidate the activity. When alternatives are not provided, users with motor impairments or users who are unable to perform gestures or actuate sensors on the device will not be able to access the functionality on the page.
Principle 3 - Understandable
Information and the operation of user interface must be understandable.
Guideline 3.1: Readable
Make text content readable and understandable.
3.1.1 Language of Page: The default human language of each Web page can be programmatically determined. (Level A)
BOIA BEST PRACTICE: Embed a language meta tag in the HTML. A brief list of language codes:
English, American EN
Chinese ZH
French FR
Italian IT
Japanese JA
Swedish SV
3.1.2 Language of Parts: The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. (Level AA)
BOIA BEST PRACTICE: When quoting a specific phrase in another language, use the language attribute in the HTML: such as this one in Latin: <q lang = “la”> Et tu, Brute? <q/>
3.1.3 Unusual Words: A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon. (Level AAA)
BOIA BEST PRACTICE: For any unusual or possibly misunderstood words, link the first instance of the word to the definition on a Web page, or the definition at the end of the Web page.
3.1.4 Abbreviations: A mechanism for identifying the expanded form or meaning of abbreviations is available. (Level AAA)
BOIA BEST PRACTICE: Spell the abbreviation inline on the first instance.
Consider the use of the <abbr> (abbreviation) tag.
| Code Block |
|---|
E.g.
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
|
3.1.5 Reading Level: When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available. (Level AAA)
BOIA BEST PRACTICE: Website content should be written for comprehension by someone with 9 years of schooling or less. It’s clear that in some cases this may not be possible, depending upon a website’s content and purpose. When you can’t achieve this, try adding summaries and diagrams, or even an easier to understand version that may be liked from the original.
3.1.6 Pronunciation: A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation. (Level AAA)
BOIA BEST PRACTICE: For any hard to pronounce or possibly misunderstood words, link the first instance of the word to the definition on a Web page, or the definition at the end of the Web page.
Guideline 3.2: Predictable
Make Web pages appear and operate in predictable ways.
Overall, a website should behave the same from page to page. Sudden changes in navigation or layout are confusing.
3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)
BOIA BEST PRACTICE: Nothing should operate automatically when an element received focus (such as being tabbed to). Meaning, the user should still have to submit a form, or click a button to open a link.
3.2.2 On Input: Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. (Level A)
BOIA BEST PRACTICE: Nothing should operate automatically when an element is completed (such as all fields of a form are entered). Meaning, the user should still have to submit a form, or tab to the next field when data is entered.
3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)
BOIA BEST PRACTICE: Keep the navigation consistent. Menu items should be titled the same and located in the same order throughout the site. Group navigation and common links together, in a containing element such as a DIV. Be consistent!
3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently. (Level AA)
BOIA BEST PRACTICE: Be consistent. If you use an element with information on one page, and it’s being used in the same way on another, you should use the same name, label and icon.
3.2.5 Change on Request: Changes of context are initiated only by user request or a mechanism is available to turn off such changes. (Level AAA)
BOIA BEST PRACTICE: Always redirect to a newer Web page in a way that is seamless and undetected by the user, and allow users to disable the automatic update functions when possible. It is highly recommended that this be done on the server level as a 301-redirect.
Help users avoid and correct mistakes.
3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. (Level A)
BOIA BEST PRACTICE: Using a combination of color, symbols, borders and text to identify an error if a user input something incorrectly, or missed a required field.
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
BOIA BEST PRACTICE: Make sure to add clear instructions before the element it’s needed for. Also, label fields clearly and use more than just color to identify required fields. It’s always a best practice to use color in conjunction with text and/or symbols.
3.3.3 Error Suggestion: If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. (Level AA)
Best Practice: Identify user errors clearly, in things like forms, with text explaining why it’s an error and what needs to be done for correction.
3.3.4 Error Prevention (Legal, Financial, Data): For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: (Level AA)
Reversible: Submissions are reversible.
Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.
BOIA BEST PRACTICE: Allowing a few checkpoints for users to confirm and/or change any information they are submitting is a good idea.
3.3.5 Help: Context-sensitive help is available. (Level AAA)
BOIA BEST PRACTICE: Include placeholder text showing how you need the information you’re looking for, (###-###-####), or a Help link next to questions that may not be as intuitive. For example, if there is a test and you need the answer to be in percentiles, not fractions. You can add this level of detail in the Help link.
3.3.6 Error Prevention (All): For Web pages that require the user to submit information, at least one of the following is true: (Level AAA)
Reversible: Submissions are reversible.
Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.
BOIA BEST PRACTICE: Allowing a few checkpoints for users to confirm and/or change any information they are submitting is a good idea.
Principle 4 - Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Guideline 4.1: Compatible
Maximize compatibility with current and future user agents, including assistive technologies.
4.1.1 Parsing: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. (Level A)
Note: Start and end tags that are missing a critical character in their formation, such as a closing angle bracket or a mismatched attribute value quotation mark are not complete.
BOIA BEST PRACTICE: Check your HTML! Make sure that even if a browser compensates for broken code, that the code is correct because that’s relied on with assistive technology. Consider using a HTML validator tool such as https://validator.w3.org/
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)
Note: This success criterion is primarily for Web authors who develop or script their own user interface components. For example, standard HTML controls already meet this success criterion when used according to specification.
BOIA BEST PRACTICE: Again, check your HTML! Make sure that you add author information to code outside the norm. If you are familiar with ARIA utilize the ARIA-roles sparingly and concisely as overzealous usage can cause as much confusion as the absence or ARIA roles.
4.1.3 Status Messages: When new status content is added to a web page without changing the user’s context, users should be made aware of the important changes in content that are not given focus in a way that doesn’t unnecessarily interrupt their work. The messages to the users should be programmatically determinable through a role and / or properties. This is especially beneficial for users who are blind, have low vision, or users with cognitive or learning disabilities that use assistive technology with screen reading capabilities. (Level AA)
Recap
So, doing everything as listed by these guidelines will ensure you have a fully accessible website. However, in reality, not everything is possible on every website, and it certainly can’t be done overnight. A must is making sure you are adhering to at the very least, the guidelines identified as Level A, with a moderate goal of getting to AA, while of course, always striving toward AAA.
The majority of the testing tools out on the market test for Levels A and AA. In the next section, we’ve recapped the Guidelines in Levels A and AA. If you can achieve Level AA, you’re in good shape. But don’t ever stop – don’t forget that there are many reasons to strive for and maintain website accessibility. However, once you’re site is accessible, maintaining it should be the easy part.
LEVEL A
1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
1.2.1 Audio-only and Video-only (Prerecorded): For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such
Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.
1.2.2 Captions (Prerecorded) Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
1.2.3 Audio Description or Media Alternative (Prerecorded): An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
1.3.1 Info and relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
1.3.2 Meaningful sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
Note: For requirements related to color, refer to Guideline 1.4.
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
2.1.1 Keyboard - All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
2.1.2 No Keyboard Trap – If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.
2.1.4 Character Key Shortcuts - Character Key Shortcuts can be modified.
2.2.1 Timing Adjustable - For each time limit that is set by the content, at least one of the following is true:
Turn off: The user is allowed to turn off the time limit before encountering it; or
Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
Essential Exception: The time limit is essential and extending it would invalidate the activity; or
20 Hour Exception: The time limit is longer than 20 hours.
2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true:
Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
2.3.1 Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
2.4.2 Page Titled: Web pages have titles that describe topic or purpose.
2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
2.5.1 Pointer Gestures: Single point equivalents exist for multi-point or path-based gestures.
2.5.2 Pointer Cancellation: Users must be able to cancel accidental triggering of functions on down-events.
2.5.3 Label in Name: For user interface components with labels that include text, the accessible name contains the test that is presented visually.
2.5.4 Motion Activation: Functions operated by device motion can be disabled and have an alternative input method.
3.1.1 Language of Page: The default human language of each Web page can be programmatically determined.
3.2.1 On Focus: When any component receives focus, it does not initiate a change of context.
3.2.2 On Input: Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.
4.1.1 Parsing: In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
LEVEL AA
1.2.4 Captions (Live): Captions are provided for all live audio content in synchronized media.
1.2.5 Audio Description (Prerecorded): Audio description is provided for all prerecorded video content in synchronized media.
1.3.4 Orientation: Orientation is not fixed.
1.3.5 Identify Input Purpose: Check that input fields can be programmatically identified.
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1,
Except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text,
Except for the following:
Customizable: The image of text can be visually customized to the user's requirements;
Essential: A particular presentation of text is essential to the information being conveyed.
1.4.10 Reflow: Content can be presented without loss of information or function, and without requiring scrolling in two directions.
1.4.11 Non-Text Contrast: Visual UI components and graphics required to read/operate content have sufficient contrast.
1.4.12 Text Spacing: Text spacing can be customized without loss of content or function.
1.4.13 Content on Hover or Focus: Hover and focus events should not obscure content and should be dismissable.
2.4.5 Multiple Ways: More than one way is available to locate a Web page within a set of Web pages except where the Web page is the result of, or a step in, a process.
2.4.6 Headings and Labels: Headings and labels describe topic or purpose.
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
3.1.2 Language of Parts: The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.
3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently.
3.3.3 Error Suggestion: If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
3.3.4 Error Prevention (Legal, Financial, Data): For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:
Reversible: Submissions are reversible.
Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.
4.1.3 Status Messages: Status messages and/or system feedback can be determined programmatically.Child Sections
| Child pages (Children Display) |
|---|