Navigable 2.4
Focus Visible 2.4.7
Acceptance Criteria
- Use user interface components that are highlighted by the user agent when they receive focus
- Use CSS to change the presentation of a user interface component when it receives focus
- Highlight a link or control when the mouse hovers over it
- Provide a highly visible highlighting mechanism for links or controls when they receive keyboard focus
Notes
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Bypass Blocks 2.4.1
Example
Skip to Content
<a href="#mainContent" class="skip">Skip to Content</a>
Acceptance Criteria
- Create links to skip blocks of repeated material:
- Add a link at the top of each page that goes directly to the main content area, or
- Add a link at the beginning of a block of repeated content to go to the end of the block.
Notes
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Use ARIA Landmarks to Identify Regions of a Page
Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark.
ARIA Landmark Role Values
- banner: A region that contains the prime heading or internal title of a page.
- complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
- contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
- form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
- main: Main content in a document. In almost all cases a page will have only one role="main".
- navigation: A collection of links suitable for use when navigating the document or related documents.
- search: The search tool of a Web document.
- application: A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)
Use heading elements at the beginning of each section of content to convey the structure
- Heading markup can be used for the following:
- To indicate start of main content
- To mark up section headings within the main content area
- To demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation
- To mark up images of text that are used as headings
- To allow users the ability to navigate a page by sections or skip repeated blocks of information
- Make the h1, h2, h3 etc be meaningful
- When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.
Page Titled 2.4.2
Example
<title>4imprint Promotional Products</title>
Acceptance Criteria
- The descriptive title of an HTML Web page is marked up with the <title> element so that it will be displayed in the title bar.
Notes
Web pages have titles that describe topic or purpose.
Focus Order 2.4.3
Examples
Interactive Controls
On a web page that contains a tree of interactive controls, the user can use the up and down arrow keys to move from tree node to tree node. Pressing the right arrow key expands a node, then using the down arrow key moves into the newly expanded nodes.
Modal Dialogs via Scripting
- A web page implements modal dialogs via scripting.
- When the trigger button is activated, a dialog opens and focus is set to the first interactive element in the dialog.
- As long as the dialog is open, focus is limited to the elements of the dialog.
- When the dialog is dismissed, focus returns to the button or the element following the button.
Acceptance Criteria
- Place the interactive elements in an order that follows sequences and relationships within the content
- Give focus to elements in an order that follows sequences and relationships within the content by:
- Creating a logical tab order through links, form controls, and objects
- Making the DOM order match the visual order
Notes
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.
Link Purpose 2.4.4
Examples
Link Text (correct)
For more information on how these customer testimonials and product reviews are collected, please click here to read more.
Link Text (incorrect)
Acceptance Criteria
- Provide link text that describes the purpose of a link.
- Provide a supplemental description of the purpose of a link using one of the following techniques:
- Supplementing link text with the title attribute.
- Using CSS to hide a portion of the link text. (can use class visually-hidden)
- Identify the purpose of a link using link text combined with programmatically determined link context using one of the following techniques:
- Identifying the purpose of a link using link text combined with its enclosing list item.
- Identifying the purpose of a link using link text combined with its enclosing paragraph.
- Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested.
- DO NOT use a null alt on an image where the image is the only content in a link.
Notes
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.
Multiple Ways 2.4.5
Acceptance Criteria
- Provide links to navigate to related Web pages
- Provide a search function to help users find content
- Provide a list of links to all other Web pages
Notes
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.
Headings and Labels 2.4.6
Examples
Descriptive Heading (correct)
<h1>Disaster preparation</h1>
<h2>Flood preparation</h2>
<h2>Fire preparation</h2>
Descriptive Heading (incorrect)
<h1>Preparation for Disasters</h1>
<h2>Preparation for Floods</h2>
<h2>Preparation for Fires</h2>
Form Labels & Inputs
<div>
<label for="firstName">First Name</label>
<input id="firstName" type="text">
</div>
<div>
<label for="lastName">Last Name</labe>
<input id="lastName" type="text">
</div>
Descriptive Labels
- A Web application presents maps of a city. Users can "zoom in" to view part of the map in greater detail, and can "zoom out" to make it show a larger part of the city. The controls can be operated using either a mouse or a keyboard. The controls are labeled "Zoom in (Ctrl + Shift + L)" And "Zoom out (Ctrl + Shift + R)."
- A form asks the name of the user. It consists of two input fields to ask for the first and last name. The first field is labeled "First name", the second is labeled "Last name".
- A purchasing form includes several fields that are required. In addition to identifying the field, the label for each required field includes the word "required" in parentheses.
Acceptance Criteria
- Providing descriptive headings opens in new window.
- Providing descriptive labels opens in new window.
- Use required form control. View examples opens in new window of required form controls.
Notes
Headings and labels describe topic or purpose.
Descriptive Headings
An HTML page that describes the range of tasks for disaster preparation may have the following headings: Note that the level 2 headings have the distinguishing information at the beginning (ie, instead of "Preparation for floods", "Preparation for fires", etc).
Focus Not Obscured (Minimum) 2.4.11
Acceptance Criteria
- When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.
Notes
Where content in a configurable interface can be repositioned by the user, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.
Content opened by the user may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered hidden due to author-created content.