Purpose:

If your site presents accessibility issues for screen reader users, you must clearly inform the potential users that your site has known issues that may affect the user’s experience.

Placement:

Generally, if you are informing a user that your site has some accessibility barriers or compatibility issues with assistive technology, you want that information to be presented early on the page, so that a user does not attempt to navigate the page only to find it inaccessible.  Although there is no set standard for placement, best practice dictates that your statement should be encountered after the main page heading and prior to the skip to main content link.

How best to accomplish:

Absolutely positioning content off-screen (information obtained from WebAIM’s page, “CSS in Action: Invisible Content Just for Screen Reader Users”)

Using CSS to move hidden elements to a position off-screen is generally accepted as the most useful and accessible method of hiding content visually.

Positioning content off-screen

The following are the recommended styles for visually hiding content that will be read by a screen reader:

.hidden

{position:absolute;

left:-10000px;

top:auto;

width:1px;

height:1px;

overflow:hidden;}

The .hidden CSS class should then be referenced from within the tag of the element being hidden, as shown:

This text is hidden.

Sighted users will not see the hidden content at all. It will be out of their viewing range - hidden well to the left of the visible browser window. Screen reader users will have access to the content as if it were not hidden at all. Screen readers read the content normally, completely ignoring the styles used in this technique.

For other techniques that can be used to assist with screen reader content, please view the following information from WebAIM’s page, “CSS in Action: Invisible Content Just for Screen Reader Users.”