* This is because when you use either landmark roles or HTML5, you are setting up the expectation that your pages can be consistently navigated using this structure.
Additionally, there are some rules to landmark use. See documentation for landmark roles. The same principles that apply to landmark roles apply by and large to HTML5 elements.
To learn how to communicate any errors you find to your developers, see "More Info" below.
Any content that was presented side-by-side in the original window is now stacked.
Content may be hidden in the new window, but the web page should still provide access to this content. A typical example is a long menu that is hidden in the new page, but available by clicking on a button.
Common Exceptions
These elements are exempt from this success criteria because their very nature depends on them not being amenable to stacking or flowing:
Videos
Complex infographics
Tables
More Info
Reporting this issue
Report reflow issues as a violation of WCAG 1.4.10 Reflow
Check: The navigation order of focusable elements is logical and intuitive
Tests
Manual
Load the page.
Use the Tab key to move through the page's elements.
Does the order make sense (top to bottom, left to right)?
If the language of the page uses a different direction (right to left with Hebrew and Arabic, for example), does the focus order follow the language’s conventions?
Proper Implementation
Focusable elements include links, form inputs and controls, buttons and the like.
Check: A mechanism is available to bypass blocks of content that are repeated on multiple views
Tests
Manual
Load the page.
Use the Tab key to move through the page's elements.
Are you given a link to skip to the main content?
Does operating the skip link (using the spacebar or Enter keys) send the focus to the main content?
After activating the skip link (if it exists), tab one more time. Did this move the focus (a visible ring around a content element) inside the main content?
Proper Implementation
If there are a lot of navigational items between the top of the page and the main content, the page needs a skip link. (See "More Info" below.)
Must clearly describe where the user will be taken.
"Click here" or "this article" are not clear enough.
Cannot be repeated, as this introduces ambiguity.
Several links simply saying "More info" would be unhelpful.
Is especially important in lists and tables.
A table containing "Edit" and "Delete" links in each row might visually make sense, but the position alone doesn't clarify each link's function to a screen reader user.
Check: The page title accurately and clearly describes the page’s contents
Tests
Manual
Visually examine the browser tab. If you can read the entire title, compare it to the Proper Implementation criteria.
If the title is truncated in the browser tab, you can view the full text via Chrome's Developer Tools:
How to view the full title text
Go to the View menu and select Developer > Developer tools.
In the Developer Tools pane, select the Elements tab.
Click the disclosure (right-facing) triangle next to the <head> tag at the top of the code.
In the code that opens, find the <title> tag. The text between <title> and </title> is the page’s title. (You might need to click another disclosure triangle to see the text.)
Click the x at the top right of the Developer Tools pane to close it.
Proper Implementation
The page title should:
accurately summarize what the page is about
be succinct
present the important information at the beginning
For example:
A page containing a comparison of local pizza places:
Bad titles:
"Places Compared"
"Hungry? You Came to the Right Place"
Good titles:
"Anytown Pizza Options"
"Pizza Places of Anytown Compared"
More Info
Reporting this issue
Report page title issues as a violation of WCAG 2.4.2 Page Titled
Check: The page provides name/role/value for all elements
Tests
Use the ARIA bookmarklet. If you see a lot of yellow flags, you are dealing with a highly complex page and you can request assistance by using our accessibility contact form.
Proper Implementation
The purpose of your view’s elements needs to be programmatically identifiable by assistive technology such as screen readers.
More Info
Reporting this issue
Report name, role, value issues as a violation of WCAG 4.1.2 Name, Role, Value
Check: Navigation is represented consistently across views
Tests
Manual
Visually compare the navigation between two pages on the site:
Open two different pages of the website in separate windows and position them side-by-side.
Compare the navigation of the two pages to ensure all elements remain consistent:
Wording of navigation items
Location of navigation items
Order of navigation items
Proper Implementation
Navigation elements should be consistently placed and labeled so that users who interact with repeated content across web pages can predict the location of the content they are looking for.
Check: Status messages are programmatically perceivable
Tests
Manual
If you know of a page where a status message appears when you perform an operation, run this test on that page.
Load the page and write down the web address.
Perform the operation that results in the status message.
Now compare the web address in the page to the address you wrote down in step 1.
If the web address changed, all is fine.
If the address did not change, perform the test below.
Right-click on the message container and select Inspect.
In the Developer Tools pane that appears, look at the code in the element selected. You should see one or more of the following attributes in the message container:
aria-live=”assertive”
aria-live=”polite”
role=”status”
role=”alert”
If any of these attributes are present, all is fine. Otherwise, this is an error to report to your developers.
When a user performs an operation, it is important that any responses from the page are logically perceivable (via code) as well as visually perceivable.
(This condition is only crucial when it is the page itself that provides the status message. In this case, the page web address will not change when the status message is generated; this is why we had you check the addresses.)
More Info
Reporting this issue
Report status message issues as a violation of WCAG 4.1.3 Status Messages