The Web Content Accessibility Guidelines (WCAG) 2.1 is drawn up by a working group of the World Wide Web Consortium. It consists of a set of technology-independent guidelines and success criteria to help make web content accessible to, and usable by, persons with disabilities.
As an introduction, the consortium provides a series of sections and supporting documents:
In addition, see:
The guidelines are graded according to three conformance levels: Level A (lowest), Level AA, and Level AAA (highest). Briefly, the levels are defined as follows:
When creating your site, you should determine the overall level to which you would like your site to conform.
The following section presents layers of the WCAG 2.1 Guidelines with related success criteria for Level A and Level AA conformance levels.
In this document, the following is used:
Information on a web page can be provided in many different non-text formats, such as pictures, videos, animations, charts, and graphs. People who are blind or have severe visual impairments are unable to see non-text content. However, they can access text content by having it read to them by a screen reader or presented in tactile form by a Braille display device. So, by providing text alternatives to content in graphical format, people who cannot see that content can access an equivalent version of the information the content provides.
A useful additional benefit is that text alternatives enable non-text content to be indexed by search engine technology.
For static graphics, the basic requirement is to provide an equivalent text alternative for the graphic. This method can be done in the Alternative Text field. For example, see the Core Component Image.
Some out-of-the-box Core Components – such as Carousel – do not provide an Alternative Text field for adding alternate text descriptions to individual images, though there is the Label field (Accessibility tab) for the entire component.
When implementing versions of these for your AEM instance, your development team must configure such components to support the alt
attribute. Doing so ensures that authors can add it to the content (see Adding Support for Additional HTML Elements and Attributes).
AEM requires the Alternative Text field to be filled by default. If the image is purely decorative and alternative text would be unnecessary, the Image is decorative option can be checked.
There are various forms of non-text content, so the value of the text alternative depends on the role the graphic plays in the web page. Some general rules that you may find helpful include the following:
Specific types of non-text content that require text alternatives might include:
Illustrative photos: These are images of people, objects, or places. It is important to think about the role of the photo in the page, and recommended description of the image content, as assistive technology announces the element type (for example, graphic
or image
). It can increase clarity to use screenshot
or illustration
in the alternative text descriptions, but this depends on the context. Consistency is a significant factor, a decision should be made for an entire authoring team and this applied throughout the user experience.
Icons: These are small pictograms (graphics) conveying specific information. They must be consistently used across a page and site. All instances of the icon on a page or site should have the same short and succinct text alternative, unless doing so results in unnecessary duplication of adjacent text.
Charts and graphs: These typically represent numerical data. So one option for providing a text alternative might be to include a brief summary of the main trends shown in the chart or graphic. If necessary, also provide a more detailed description in text using the Description field in the Advanced image properties tab. Also, you could provide the source data in tabular form elsewhere in the page or site.
Maps, diagrams, flowcharts: For graphics providing spatial data (for example, to support describing relationships between objects or a process), ensure that the key message is provided in text format, and that this text information is positioned near each associated data point. For maps, providing a full text equivalent is likely to be impractical, but if the map is provided as a way of helping people find their way to a particular location, then the map image’s alternative text can briefly indicate Map of X, then provide directions to that location in text elsewhere in the page or through the Description field in the Advanced tab of the Image component.
CAPTCHA: A CAPTCHA is a Completely Automated Public Turing test to tell Computers and Humans Apart. It is a security check used on web pages to distinguish humans from malicious software, but which can cause accessibility barriers. They are images that require users to describe what they see to pass a security test. Providing a text alternative for the image is not possible, so instead you must consider alternative non-graphic solutions. The W3C provides several suggestions. Each of these approaches has their own merits and drawbacks.
Background images: These are achieved using Cascading Style Sheets (CSS) rather than in HTML. This means it is not possible to specify an alternative text value. Therefore background images should not provide important textual information - if they do, this information must also be provided in the page’s text. However, it is important that an alternative background is displayed when the image cannot be displayed.
There should be an appropriate level of contrast between the background and the foreground text; this is discussed in more detail in Contrast (Minimum) (1.4.3).
Guideline 1.2 Time-based Media: Provide alternatives for time-based media.
This deals with web content that is time-based. This covers content that the user can play (such as video, audio, and animated content) and may be prerecorded or a live stream.
Accessibility problems for video and audio may be experienced by:
Video or audio may also be unavailable to people using browsers or devices that do not support the playing of content in specific media formats, such as Adobe Flash.
Providing this information in a different format, such as text (or audio for video without audio) can make it accessible for people unable to access the original content.
If the audio or video content is provided as an alternative to content that exists in another format on the same web page, an extra alternative may not be required.
The guidelines, Understanding WCAG 1.2.1, provide further information.
Inserting multimedia into your AEM web pages is similar to inserting an image. However, as multimedia content is much more than a still image, there are various different settings and options for controlling how the multimedia are played.
When you use multimedia with informational content, you must also create links to alternatives. For example, to include a text transcript, create an HTML page to display the transcript and then add a link next to or underneath the audio content.
People who are Deaf or hard of hearing are unable or have great difficulty accessing audio content. Captions are text equivalents for spoken and non-spoken audio, shown on screen at the appropriate time during the video. They allow people who cannot hear the audio to understand what is happening.
Captions can be either:
Use closed captioning wherever possible, as this gives users the choice over whether to view captions.
For closed captions, you must create and provide a synchronized caption file in an appropriate format (such as SMIL) alongside the video file (details on how to do this are beyond the scope of this guide, but there are provided links to some tutorials under More Information - Captions (Prerecorded) (1.2.2). Make sure you provide a note, or enable the caption feature in the video player, to let users know that captions are available for the video.
If you must use open captions, embed the text into the video track. This can be achieved using video editing applications that allow the overlaying of titles onto the video.
c
People who are blind or visually impaired experience accessibility barriers if the information in a video or animation is only provided visually, or if the soundtrack does not provide sufficient information to allow understanding of what is happening visually.
There are two approaches that can be adopted to meet this success criterion. Either is acceptable:
Exact details of how to create audio-described video are beyond the scope of this guide. Creating videos and audio descriptions can be time consuming, but other Adobe products can help achieve these tasks.
This success criterion is identical to Captions (Prerecorded) in that it addresses accessibility barriers experienced by people who are deaf or hearing-impaired, except that this success criterion deals with live presentations such as webcasts.
Follow the guidance provided for Captions (Prerecorded) above. However, due to the live nature of the media, caption provision has to be created as quickly as possible and in response to what is happening. Therefore, you should consider using real-time captioning or speech-to-text tools.
Detailed instructions are beyond the scope of this document, but the following resources provide helpful information:
This success criterion is identical to Audio Description or Media Alternative (Prerecorded), except that authors must provide a much more detailed audio description to conform to Level AA.
Follow the guidance provided for Audio Description or Media Alternative (Prerecorded).
This guideline covers the requirements necessary to support people who:
may not be able to access information as presented by an author in the default presentation of that content (for example, a multi-column layout or a page with heavy use of color and/or images).
may use audio-only, or alternative visual display such as large text or high contrast.
Many assistive technologies used by people with disabilities rely on structural information to effectively display or understand content. This structural information can take the form of page headings, table row and column headings and list types. For example, a screen reader could allow a user to navigate through a page from heading to heading. However, when page content only appears to have structure through visual styling, rather than the underlying HTML, then there is no structural information available to assistive technologies, limiting their ability to support easier browsing.
This success criterion exists to make sure that such structural information is provided programmatically through HTML, or other coding techniques, so that browsers and assistive technologies can access and take advantage of the information.
AEM makes it easy to construct semantically meaningful web content using the appropriate HTML elements. Open your page content in the RTE (a Text component), and use the Paraformat menu (paragraph symbol) to specify the appropriate structural element (for example paragraph, heading, and so on).
You can make sure that your web pages are given the appropriate structure by using the following elements where applicable:
Headings: As long as you have the accessibility features of the RTE enabled, AEM offers three levels of page heading. You can use these to identify sections and subsections of content. Heading 1 is the highest level of heading, Heading 3 the lowest. The system administrator can configure the system to allow the use of more heading levels.
Lists: You can use HTML to specify three different types of lists:
<ul>
element is used for unordered (bulleted) lists. Individual list items are identified using the <li>
element. In the RTE, use the Bullet List icon.<ol>
element is used for numbered lists. Individual list items are identified using the <li>
element. In the RTE, use the Numbered List icon.If you want to change existing content into a specific list type, highlight the appropriate text and select the appropriate list type. As in the earlier example showing how paragraph text is entered, the appropriate list elements are automatically added to your HTML.
In full screen mode, the individual Bullet List and Numbered List icons are visible. When not in full screen mode, the two options are available behind the single Lists icon.
Tables: Tables of data must be identified using HTML table elements:
<table>
element<tr>
element for each row of the table<th>
element for each row and column heading<td>
element for every data cellAlso, accessible tables use the following elements and attributes:
<caption>
element is used to provide a visible caption for the table. Captions by default appear centered above the table, but can be positioned appropriately using CSS. The caption is programmatically associated with the table, thus it is a useful method for providing an introduction to content.<summary>
element assists non-sighted users to more easily understand the information presented within a table, by providing a synopsis of what a sighted user can see. This workflow is useful where complex or unconventional table layouts are used (this attribute is not displayed in the browser, it is only read out to assistive technologies).scope
attribute of the <th>
element is used to indicate whether a cell represents a header for a particular row, or for a particular column. A similar approach is to use the header and id attributes in complex tables, where data cells may be associated with one or more headers.By default, these elements and attributes are not directly available, though it is possible for the system administrator to add support for these values in the Table properties dialog box (see Adding Support for Additional HTML Elements and Attributes).
To open the Table dialog where you can select the Table Properties tab:
You can then use the Cell Properties to choose whether the cell is a data or header cell:
Emphasis: Use the <strong>
or <em>
element to indicate emphasis. Do not use headings to highlight text within paragraphs.
Highlight the text that you want to emphasize;
Click on the B icon (for <strong>
) or the I icon (for <em>
) shown within the Properties panel (make sure that HTML is selected).
RTE in a standard AEM installation is set up to use:
<b>
for <strong>
<i>
for <em>
They are effectively the same, but <strong>
and <em>
are preferable as they are semantically correct html. Your development team can configure the RTE to use <strong>
and <em>
(instead of <b>
and <i>
) when developing your project instance.
Complex Data Tables: Sometimes, where there are complex tables with two or more levels of headers, the basic Table Properties may not be enough to provide all the structural information necessary. For these kinds of complex tables, direct relationships need to be created between the headers and their related cells using the header and id attributes.
The id attribute is not available in an out-of-the-box installation. It can be enabled by configuring HTML rules and the serializer in the RTE.
For example, in the table below headers and ids are matched to make a programmatic association for assistive technology users.
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
To achieve this in AEM, add the markup directly using the source edit mode.
This functionality is not immediately available in a standard installation. It requires configuration of the RTE, HTML rules, and serializer.
The intent of this Success Criterion is to enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning. It is important that it is possible to programmatically determine at least one sequence of the content that makes sense. Content that does not meet this Success Criterion may confuse or disorient users when assistive technology reads the content in the wrong order, or when alternate style sheets or other formatting changes are applied.
Follow the guidelines under How to Meet Success Criteria 1.3.2.
Designers often focus on visual design features, such as color, shape, text style, or a piece of content’s absolute or relative position when presenting information. These can be powerful design techniques in conveying information (and can improve the overall accessibility for sighted users with cognitive accessibility needs), but people who are blind or visually impaired may be unable to access information that requires visual identification of attributes such as position, color or shape.
Similarly, information that requires distinguishing between different sounds (for example, male or female spoken content) presents accessibility barriers to people with hearing impairment, if it is not reflected in any text alternative for the audio content.
For requirements related to alternatives to color, see Use of Color.
Make sure that any information that relies on visual characteristics of page content is also presented in an alternative format.
The use of descriptive terms are acceptable if they are understood to have meaning in a non-visual context. For example, using above and below would generally be acceptable, as they respectively imply content before and after a particular item of content; this would still make sense when the content is spoken aloud.
This success criterion addresses color perception specifically. Other forms of perception are covered in Adaptable (1.3); including programmatic access to color and other visual presentation coding.
Color is an effective way of enhancing the aesthetic appeal of web pages and is also useful in conveying information. However, there is a range of visual impairments, from blindness to color vision deficiency, which means that some people are unable to distinguish between certain colors. This makes color-coding an unreliable way of providing information.
For example, someone with red-green color vision deficiency are unable to distinguish between shades of green and shades of red. They may see both colors as a third color (for example, brown), in which case they are unable to distinguish between red, green, and brown.
Also, color cannot be perceived by people using text-only browsers, monochrome display devices, or viewing a black-and-white printout of the page.
A further consideration is the selected state for an interface element (for example, tabs, toggle buttons, among others), which needs to be conveyed in some way other than just with color and beyond just a visual presentation. For such elements, the additional use of patterns, shapes, and programmatic information are helpful when creating a fully inclusive user experience that does not rely on a specific sense.
Wherever color is used to convey information, make sure that the information is available without the need to see the color.
For example, make sure that information provided by color is also provided explicitly in text.
If color is used as a cue to provide information, you should provide an extra visual cue, such as changing the style (for example, bold, italics) or font. This helps people with low vision or who have color vision deficiency to identify the information. However, it cannot be relied on entirely, as it does not help people who cannot see the page at all. Therefore, it is helpful to provide hidden text or to use programmatic solutions, such as the Accessible Rich Internet Applications (ARIA) suite of web standards, to convey this information to non-sighted users.
Individuals who use screen reading software can find it hard to hear the speech output if there is other audio playing at the same time. This difficulty is exacerbated when the screen reader’s speech output is software-based (as most are today) and is controlled via the same volume control as the sound. Also, some people with cognitive disabilities and people who are neurodivergent may have sound sensitivity. These individuals find any inability to change the volume level on audio content disruptive.
Therefore, it is important that the user can turn off the background sound.
Having control of the volume includes being able to reduce its volume to zero.
Follow the guidelines under How to Meet Success Criteria 1.4.2.
Success Criterion 1.4.3
Level AA
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:
See Understanding Non-text Contrast for further information, to help ensure that content authors understand the additional requirements around non-text elements (including icons, interface elements, among others).
People with certain visual impairments may be unable to distinguish between certain low-contrast color pairs. Accessibility problems may occur for these people if either:
Text used purely for decoration purposes is excluded from this success criterion.
Make sure that the text contrasts sufficiently with its background. Contrast ratios depend on the size and style of the text in question:
Remember that fonts can differ in how they render the equivalent PT/PX/EM sizing.
Use good judgment and err on the side of readability and usability when selecting appropriate fonts and sizing for web content.
Perform a web search on the following phrases to find tools that can help you convert to other units:
To check contrast ratios, use a color contrast tool, such as the Paciello Group Color Contrast Analyzer or the WebAIM color contrast checker. These tools allow you to check pairs of colors and report on any contrast problems.
Alternatively, if you are less concerned about specifying the appearance of your page, you can choose not to specify background and foreground text colors. No contrast checking is required, as the user’s browser determines the colors of the text and background.
If it is not possible to meet the recommended contrast levels, you must provide a link to an alternative, equivalent version of the page (which has no color contrast issues), or allow the user to adjust the contrast of the page color scheme to their own requirements.
The intent of this Success Criterion is to ensure that visually rendered text, including text-based controls (text characters that have been displayed so that they can be seen [vs. text characters that are still in data form such as ASCII]) can be scaled successfully so that it can be read directly by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier. Users may benefit from scaling all content on the Web page, but text is most critical.
Besides following the guidelines under How to Meet Success Criteria 1.4.4, you can encourage content authors to use fluid, flexible widths and heights in their page designs, and font sizes (for example, Responsive Web Design) to allow readers the ability to resize text.
Logotypes (text that is part of a logo or brand name) are considered essential.
Images of text are often used when a particular style of text is preferred; for example, a logotype or if text has been generated from another source (for example, a scan of a paper document). However, compared to text presented in HTML and styled using CSS, images of text lack the flexibility to change size or appearance that might be necessary for people with visual impairments or reading difficulties.
If images of text must be used, use CSS to replace the images of text with equivalent text in HTML so that the text is available in a customizable way. For an example of how this can be achieved, see C30: Using CSS to replace text with images of text and providing user interface controls to switch.
Principle 2: Operable - User interface components and navigation must be operable.
Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
This deals with ensuring that users can access all functionality using a keyboard.
The intent of this Success Criterion is to ensure that, wherever possible, content can be operated through a keyboard or keyboard interface (so an alternate keyboard can be used). When content can be operated through a keyboard or alternate keyboard, it is operable by people with no vision (who cannot use devices such as mice that require eye-hand coordination) and by people who must use alternate keyboards or input devices that act as keyboard emulators. Keyboard emulators include speech input software, sip-and-puff software, on-screen keyboards, scanning software, and various assistive technologies and alternate keyboards. Individuals with low vision may also have trouble tracking a pointer and find the use of software much easier (or only possible) if they can control it from the keyboard.
Follow the guidelines under How to Meet Success Criteria 2.1.1.
The intent of this Success Criterion is to ensure that that content does not trap keyboard focus within subsections of content on a Web page. This is a common problem when multiple formats are combined within a page and rendered using plug-ins or embedded applications.
There may be times when the functionality of the web page restricts the focus to a subsection of the content (for example, a modal dialog). In such cases, you should provide a method for a user to be able to exit from that subsection of content (for example, the ESC key closes the modal dialog, or a Close button closes the modal dialog).
Follow the guidelines under How to Meet Success Criteria 2.1.2.
Guideline 2.2 Enough Time: Provide users enough time to read and use content.
This deals with ensuring that users have enough time to read and take action.
The intent of this Success Criterion is to ensure that users with disabilities are given adequate time to interact with Web content whenever possible. People with disabilities such as blindness, low vision, dexterity impairments, and cognitive limitations may require more time to read content or to perform functions such as filling out on-line forms. If Web functions are time-dependent, it is difficult for some users to perform the required action before a time limit occurs. This may render the service inaccessible to them. Designing functions that are not time-dependent helps people with disabilities succeed at completing these functions. Providing options to disable time limits, customize the length of time limits, or a request for more time before a time limit occurs, helps those users who require more time than expected to successfully complete tasks. These options are listed in the order that are most helpful for the user. Disabling time limits is better than customizing the length of time limits, which is better than requesting more time before a time limit occurs.
Follow the guidelines under How to Meet Success Criteria 2.2.1.
Points to note are:
Certain users may find content that moves is distracting, or even physically painful, making it difficult to concentrate on other parts of the page. Also, such content may prove difficult to read for people who have trouble keeping up with moving text.
Depending on the nature of the content, you can apply one or more of the following suggestions when creating web pages containing moving, flashing, or blinking content:
Because 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.
In certain cases, flashing content can cause photosensitive seizures. This success criterion allows such users to access and experience all content without worrying about flashing content.
Take steps to make sure that the following techniques are applied:
This deals with ensuring that the content is easy and straightforward for users to navigate.
The intent of this Success Criterion is to allow people who navigate sequentially through content more direct access to the primary content of the Web page. Web pages and applications often have content that appears on other pages or screens. Examples of repeated blocks of content include but are not limited to navigation links, header graphics, menus, and advertising frames. Small repeated sections such as individual words, phrases, or single links are not considered blocks for the purposes of this provision.
Follow the guidelines under How to Meet Success Criteria 2.4.1.
This success criterion helps everyone, regardless of any particular impairment, to quickly identify the content of a web page without reading the page in full. This is useful where several web pages are opened in browser tabs, as the page title is shown in the tab and therefore can be located quickly.
When a new HTML page is created in AEM, you can specify the page title. Make sure that the title adequately describes the content and purpose of the page, especially any unique aspects, so that visitors can quickly identify whether the content is relevant to their needs.
You can also edit the page title when editing a page, which is accessible by Page Information - Properties.
The intent of this Success Criterion is to ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard. This reduces confusion by letting users build a consistent mental model of the content. There may be different orders that reflect logical relationships in the content. For example, moving through components in an online form composed of multiple fields and/or steps reflects the logical relationships in the content.
Follow the guidelines under How to Meet Success Criteria 2.4.3.
For all users, regardless of impairment, clearly indicating the direction of a link through appropriate link text is vital. This helps users decide whether they actually want to follow a link. For sighted users, meaningful link text is useful where there are several links on a page (particularly if the page is text heavy), as meaningful link text provides a clearer indication of the functionality of the target page. Users of some assistive technologies, which can generate a list of all the links on a single page, can more easily understand the link text out of context if that link text is both unique and informative. However, sighted individuals with cognitive disabilities may become confused if a link does not provide enough information to accurately describe where the link takes them.
Above all, make sure that the purpose of a link is clearly described within the text of the link.
Links should be phrased consistently across pages, especially for navigation bars. For example, if a link to a specific page is named Publications on one page, use that text on other pages to ensure consistency.
At the time of writing, there are some issues surrounding the use of title attributes to ensure that similar links presented on a page provide unique information about the destination (for example, “read more” often refers to a range of different destinations):
So, while the title attribute can be used to provide extra context to a link, be aware of its limitations and do not use it as an alternative to appropriate link text.
Where the link is made up of an image, make sure that the alternative text for the image describes the destination of the link. For example, if an image of a bookshelf is set as a link to a person’s publications, the alternative text should read John Smith’s publications and not Bookshelf.
Alternatively, if the link anchor contains text that describes the purpose of the link in addition to the image element (and thus the text appears alongside the image), use an empty alt attribute for the image:
<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith's publications
</a>
The above snippet is an illustration, it is recommended to use the Image component.
While it is recommended that you provide link text that identifies the purpose of the link without needing additional context, it is recognized that this is not always possible. Context-free links can be used in the following cases, HTML examples of which can be found in How to Meet Success Criterion 2.4.4.
Sometimes, where there are several links on a page (each of which provides the direction of a link in complex, but necessary detail), it can be appropriate to provide an alternative version of the web page that displays the exact same content but where the link text is not as detailed.
Alternatively, scripts can be used so that a minimal amount of text is provided within the link itself, but on activating an appropriate control positioned towards the top of the page, the link text is expanded into further detail. A similar approach is to use CSS to hide the full link from sighted users, but still output it in full to screen reader users. This falls outside the scope of this document, but more information on how this can be achieved can be found in the More Information - Link Purpose (In Context) (2.4.4) section.
The intent of this Success Criterion is to make it possible for users to locate content in a manner that best meets their needs. Users may find one technique easier or more comprehensible to use than another.
Even small sites should provide users some means of orientation. For a three or four page site, with all pages linked from the home page, it may be sufficient simply to provide links from and to the home page where the links on the home page can also serve as a site map.
Follow the guidelines under How to Meet Success Criteria 2.4.5.
The intent of this Success Criterion is to help users understand what information is contained in Web pages and how that information is organized. When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily. Descriptive labels help users identify specific components within the content.
Follow the guidelines under How to Meet Success Criteria 2.4.6.
The purpose of this success criterion is to help a person know which element has the keyboard focus.
It must be possible for a person to know which element among multiple elements has the keyboard focus. If there is only one keyboard-actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard-actionable item.
Where the success criterion says “mode of operation”, this is to account for platforms which may not always show a focus indicator. Usually there is only one mode of operation so this success criteria applies.
Follow the guidelines under How to Meet Success Criteria 2.4.7.
Guideline 3.1 Readable: Make text content readable and understandable.
The purpose of this success criterion is to make sure that text and other linguistic content is rendered correctly. For screen reader users, this ensures that the content is pronounced correctly, while visual browsers are more likely to display certain character sets correctly.
To meet this success criterion, the default language of a web page can be identified using the lang
attribute within the <html>
element at the top of the page. For example:
If a page is written in English, the <html>
element should read:
<html lang = "en">
Whereas a page to be rendered in Spanish should adopt the following standard:
<html lang = "es">
In AEM, the default language of your page is set when creating the page, but may also be changed when editing Page Properties.
AEM provides further fine-tuning for variations of a root language; for example, American English - en-us, British English - en-gb, and Canadian English - en-ca. This level of detail is often superfluous for assistive technology, though can be used for regional variations in page content.
The purpose of this success criterion is similar to the success criterion Language of Page, except that it applies to web pages containing content in multiple languages on a single page (for example, because of quotations or uncommon loan words).
Pages applying this success criterion allow:
The lang
attribute can be used to identify changes in the language of content. For example, a quotation in German (ISO 639-1 code “de”) can be shown as follows:
<blockquote cite = "John F. Kennedy" lang = "de">
<p>Ich bin ein Berliner</p>
</blockquote>
Blockquotes are not supported in an out-of-the-box instance. A custom component could be developed to support the feature.
Similarly, the browser can render an uncommon loan word or phrase correctly if the span
element is used as follows:
<p>The only French phrase I know is <span lang = "fr">je ne sais quoi</code>.</p>
It is not necessary to follow this success criterion when including names or cities in different languages, or when using loan words or phrases that have become commonplace in the default language (such as schadenfreude in English).
To add the span element, with an appropriate language, you can manually edit your HTML markup in the source edit mode of the RTE so that it reads as above. Alternatively the lang
attribute can be included in the RTE by a system administrator (see Adding Support for Additional HTML Elements and Attributes).
Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways.
This deals with ensuring the web pages are consistent in how they look and operate.
The intent of this Success Criterion is to ensure that functionality is predictable as visitors navigate their way through a document. Any component that is able to trigger an event when it receives focus must not change the context. Examples of changing context when a component receives focus include, but are not limited to:
Focus may be moved to a control either via the keyboard (for example, tabbing to a control) or the mouse (for example, selecting a text field). Moving the mouse over a control does not move the focus unless scripting implements this behavior. For some types of controls, selecting a control may also activate the control (for example, button), which may, in turn, initiate a change in context.
Follow the guidelines under How to Meet Success Criteria 3.2.1.
The intent of this Success Criterion is to ensure that entering data or selecting a form control has predictable effects. Changing the setting of any user interface component is changing some aspect in the control that persists when the user is no longer interacting with it. So checking a checkbox, entering text into a text field, or changing the selected option in a list control changes its setting, but activating a link or a button does not. Changes in context can confuse users who do not easily perceive the change or are easily distracted by changes. Changes of context are appropriate only when it is clear that such a change happens in response to the user’s action.
Follow the guidelines under How to Meet Success Criteria 3.2.2.
The intent of this Success Criterion is to encourage the use of consistent presentation and layout for users who interact with repeated content within a set of Web pages and need to locate specific information or functionality more than once. Individuals with low vision who use screen magnification to display a small portion of the screen at a time often use visual cues and page boundaries to quickly locate repeated content. Presenting repeated content in the same order is also important for visual users who use spatial memory or visual cues within the design to locate repeated content.
It is important to note that the use of the phrase “same order” in this section is not meant to imply that subnavigation menus cannot be used or that blocks of secondary navigation or page structure cannot be used. Instead, this Success Criterion is intended to assist users who interact with repeated content across Web pages to be able to predict the location of the content they are looking for and find it more quickly when they encounter it again.
Users may initiate a change in the order by using adaptive user agents or by setting preferences so that the information is presented in a way that is most useful to them.
Follow the guidelines under How to Meet Success Criteria 3.2.3.
The intent of this Success Criterion is to ensure consistent identification of functional components that appear repeatedly within a set of Web pages. A strategy that people who use screen readers use when operating a Web site is to rely heavily on their familiarity with functions that may appear on different Web pages. If identical functions have different labels (or, more generally, a different accessible name) on different Web pages, the site is considerably more difficult to use. It may also be confusing and increase the cognitive load for people with cognitive limitations. Therefore, consistent labeling helps.
This consistency extends to the text alternatives. If icons or other non-text items have the same functionality, then their text alternatives should be consistent as well.
If there are two components on a web page that both have the same functionality as a component on another page in a set of web pages, then all 3 must be consistent. Hence the two on the same page is consistent.
While it is desirable and best practice always to be consistent within a single web page, 3.2.4 only addresses consistency within a set of web pages where something is repeated on more than one page in the set.
Follow the guidelines under How to Meet Success Criteria 3.2.4.
Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.
The intent of this Success Criterion is to ensure that users know that an error occurred and can determine what is wrong. The error message should be as specific as possible. If an unsuccessful form submission occurs, redisplaying the form and indicating the fields in error is insufficient for some users to perceive that an error has occurred. Screen reader users, for example, do not know that there was an error until they encounter one of the indicators. They may abandon the form altogether before encountering the error indicator, thinking that the page simply is not functional. Per the definition in WCAG, an input error is information provided by the user that is not accepted. This includes:
information that is required by the web page but omitted by the user, or information that is provided by the user but that falls outside the required data format or allowed values.
For example:
Follow the guidelines under How to Meet Success Criteria 3.3.1.
Providing instructions to help people complete forms is a fundamental part of good practice in interface usability. Doing this is helpful for people with visual or cognitive impairments who might otherwise have difficulty understanding the layout of a form and the sort of data to be provided in a particular form field.
In the AEM WKND demo project, a default label is added when you add a form component, such as a Text Field, to the page. This default title depends on the component type. You can add your own title in the Title and Text tab of the edit dialog for that field. It is important to ensure that labels help users to understand the data associated with each form component.
This Title field must be used for field elements as it provides a label that is available to assistive technology. Simply writing a label in text beside the field is not sufficient.
For some form components, it is also possible to visually hide labels using the Hide Title checkbox. Labels hidden in this way are still available to assistive technology, but not displayed on the screen. While this can be a good approach in some situations it is best to include a visual label wherever possible, as some users may be looking at a small section of the screen (one field at a time) and need the labels to identify the field correctly.
Where image buttons are used (for example, the Image Button component of the WKND project) the Title field in the Title and Text tab of the edit dialog actually provides the alt text for the image, rather than the label. So, in the example below, the image with the text Submit
has alt text of Submit
, added using the Title field in the edit dialog.
In the WKND project, where there is a group of related controls, such as Radio Group, a title may be needed for the group, and individual controls. When adding a set of radio buttons in AEM, the Title field provides this group title, while individual titles are specified as the radio buttons (Items) are created.
However, there is no programmatic association between the group title and the radio buttons themselves. Template editors would need to wrap the title in the necessary fieldset
and legend
tags to create this association and this can only be done by editing the page source code. Alternatively, a system administrator can add support for these elements so that they appear in the Field Properties dialog (see Adding Support for Additional HTML Elements and Attributes).
If data is to be entered in a specific format, make this clear in the label text. For example, if a date has to be entered in the DD-MM-YYYY
format, specifically indicate this as part of the label. This means that when screen reader users encounter the field, the label is automatically announced, along with the additional information about format.
If input for a form field is mandatory, make this clear by using the word required as part of the label. AEM adds an asterisk when a field is required, but it would be ideal to include the word required
in the label itself (in the Title field in the edit dialog).
The positioning of labels is also important as it helps them to locate appropriate fields. This is of particular importance when the user is faced with a complex form. Follow the convention below:
In simple forms with limited functionality, appropriately labelling a Submit
button can act as a label for the adjacent field (for example Search
). This is useful in situations when finding space for the label text might be difficult.
The intent of this Success Criterion is to ensure that users receive appropriate suggestions for correction of an input error if it is possible. The WCAG definition of input error says that it is “information provided by the user that is not accepted” by the system. Some examples of information that is not accepted include information that is required but omitted by the user and information that is provided by the user but that falls outside the required data format or allowed values.
Success Criterion 3.3.1 provides for notification of errors. However, persons with cognitive limitations may find it difficult to understand how to correct the errors. People with visual disabilities may not be able to figure out exactly how to correct the error. If an unsuccessful form submission occurs, users may abandon the form because they may be unsure of how to correct the error even though they know it has occurred.
The content author may provide the description of the error, or the user agent may provide the description of the error based on technology-specific, programmatically determined information.
Follow the guidelines under How to Meet Success Criteria 3.3.3.
Success Criterion 3.3.4
Level AA
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:
The intent of this Success Criterion is to help users with disabilities avoid serious consequences as the result of a mistake when performing an action that cannot be reversed. For example, purchasing non-refundable airline tickets or submitting an order to purchase stock in a brokerage account are financial transactions with serious consequences. If a user has made a mistake on the date of air travel, they could end up with a ticket for the wrong day that cannot be exchanged. If the user made a mistake on the number of stock shares to be purchased, they could end up purchasing more stock than intended. Both of these types of mistakes involve transactions that take place immediately and cannot be altered afterwards, and can be costly. Likewise, it may be an unrecoverable error if users unintentionally modify or delete data stored in a database that they later need to access, such as their entire travel profile in a travel services web site. When referring to modification or deletion of ‘user controllable’ data, the intent is to prevent mass loss of data such as deleting a file or record. It is not the intent to require a confirmation for each save command or the simple creation or editing of documents, records or other data.
Users with disabilities may be more likely to make mistakes. People with reading disabilities may transpose numbers and letters, and those with motor disabilities may hit keys by mistake. Being able to reverse actions allows users to correct a mistake that could result in serious consequences. The ability to review and correct information lets users detect a mistake before taking an action with serious consequences.
User-controllable data is user-viewable data that the user can change and/or delete through an intentional action. Examples of the user controlling such data would be updating the phone number and address for the user’s account, or deleting a record of past invoices from a website. It does not refer such things as internet logs and search-engine-monitoring data that the user can’t view or interact with directly.
Follow the guidelines under How to Meet Success Criteria 3.3.4.
Maximize compatibility with current and future user agents, including assistive technologies.
The intent of this Success Criterion is to ensure that user agents, including assistive technologies, can accurately interpret and parse content. If the content cannot be parsed into a data structure, then different user agents may present it differently or be unable to parse it. Some user agents use “repair techniques” to render poorly coded content.
Because repair techniques vary among user agents, authors cannot assume that content is accurately parsed into a data structure or that it is rendered correctly by specialized user agents, including assistive technologies, unless the content is created according to the rules defined in the formal grammar for that technology. In markup languages, errors in element and attribute syntax and failure to provide properly nested start/end tags lead to errors that prevent user agents from parsing the content reliably. Therefore, the Success Criterion requires that the content can be parsed using only the rules of the formal grammar.
Follow the guidelines under How to Meet Success Criteria 4.1.1.
The intent of this Success Criterion is to ensure that Assistive Technologies (AT) can gather information about, activate(or set) and keep up to date on the status of user interface controls in the content.
When standard controls from accessible technologies are used, this process is straightforward. If the user interface elements are used according to specification, the conditions of this provision are met. (See examples of Success Criterion 4.1.2 below)
If custom controls are created, however, or interface elements are programmed (in code or script) to have a different role and/or function than usual, then additional measures need to be taken to ensure that the controls provide important information to assistive technologies and allow themselves to be controlled by assistive technologies.
An important state of a user interface control is whether it has focus. The focus state of a control can be programmatically determined, and notifications about change of focus are sent to user agents and assistive technology. Other examples of user interface control state are whether a checkbox or radio button has been selected, or whether a collapsible tree or list node is expanded or collapsed.
Follow the guidelines under How to Meet Success Criteria 4.1.2.