A status message is any bit of information which informs the user about a state change on the page that does not require a page refresh.
A popular example is a results page for a search if filters are applied. If a message saying "1234 results found" automatically updated without refreshing the entire page (i.e. it was implemented with AJAX), then that sort of status message would apply to this criterion.
The expected behavior is that when one of these messages appears or changes, a screen reader user and other assistive technology users must be immediately notified of the change. It could be as disruptive as a Javascript alert, but more commonly, aria-live is utilized to immediately announce the change to the user.
When using a screen reader, if you come across any sort of status message, interact with the functionality on the page to change that status message, and verify that when the message changes, the screen reader immediately reads out the change to the user, regardless of where the user is on the page.
Best Practice. Visually grouped blocks of content should be organized by appropriate landmarks.
WCAG 2 criterion
1.3.1 Info and Relationships (Level A)
Tools and requirements
WAVE
Test procedure
For all pages on the site, observe how content is organized visually. Groupings of content should be organized together in appropriate landmarks. It is not a failure of WCAG if this is not the case.
Landmark elements to focus on include the following
Banner - All of the content which pertains to the site as a whole. (the header content of the site)
Usually includes the site logo, site searches, site navigation.
In HTML5, a <header> tag automatically identifies a banner landmark.
Using ARIA, role="banner" identifies a banner landmark.
Complementary - Any content which supports the main content but is relevant as its own section of content.
Examples include a list of related articles or a section navigation.
In HTML5, an <aside> tag automatically identifies a complementary landmark.
Using ARIA, role="complementary" identifies a complementary landmark.
Contentinfo - All of the content pertaining to the site at the bottom of the page (the footer of the site)
Often includes quick links, copyright statements, accessibility statements, and contact information.
In HTML5, a <footer> tag automatically identifies a contentinfo landmark.
Using ARIA, role="contentinfo" identifies a contentinfo landmark.
Main - The main content of the page.
The main content should include any content exclusive to the page the user is on. It should avoid including content repeated on more than one page (aside content, banner content, footer content etc..). We will not consider it a strict failure if not abided to.
In HTML5, a <main> tag automatically identifies a main landmark
Using ARIA, role="main" identifies a main landmark.
Navigation - Any grouping of links used to navigate to different parts of the page or site.
In HTML5, a <nav> tag automatically identifies a navigation landmark.
Using ARIA role="navigation" identifies a navigation landmark.
Region - A distinct section of the content which is important enough that a user may want to directly navigate to it
Examples include blocks of Upcoming events, Social Media feeds, or Featured Articles
In HTML5, a <section> tag automatically identifies a region landmark.
Using ARIA, role="region" identifies a region landmark.
Search - Any search form
There is no native HTML5 tag to identify a search tag. You must use ARIA
Using ARIA, role="search" identifies a search landmark.
Best Practice. Landmark types which are used more than once on a page should be distinguishable from each other using ARIA.
WCAG 2 criterion
1.3.1 Info and Relationships (Level A)
Tools and requirements
WAVE
Siteimprove
Test procedure
Use WAVE to get a list of all of the landmarks on a specific page. You should repeat this procedure on each unique page type on the site or application.
Landmark types which duplicate more than once should be uniquely labeled. This is generally achieved with aria-label or aria-labelledby. Use the Inspector of your web browser to determine if landmarks have labels.
As a reminder, landmark elements are defined as
Banner - <header> tag or an attribute of role="banner" on a container element.
Complementary - <aside> tag or an attribute of role="complementary" on a container element.
Contentinfo - <footer> tag or an attribute of role="contentinfo" on a container element.
Form - <form> tag with an ARIA label or an attribute of role="form" on a container element.
Main - <main> tag or an attribute of role="main" on a container element.
Navigation - <nav> tag or an attribute of role="navigation" on a container element.
Region - <section> tag with an ARIA label or an attribute of role="region" on a container element with an ARIA label.
Search - An attribute of role="search" on a container element.
