Best Practices by Language
Toggle Incomplete ARIA Practices
5.3.2 Widget Stand Alone Roles:
aria-invalid to create an accessible error message
ARIA alertdialog Using
role="alertdialog" to create a message for the user.
ARIA Button Using ARIA
button to cast an HTML element to act like a button.
ARIA Checkbox Using ARIA to make a DIV work like a native checkbox
role="alert" see: ARIA role=”alertdialog”
ARIA Link Using
role="link" to create a link from HTML Elements other than the Anchor tag.
ARIA Log Using
role=log to create an active region that alerts the user each time a new line is added.
ARIA Marquee The ARIA
role="marquee" provides a live region with
aria-live="polite". Is not supported yet.
5.3.2 Widget Container Roles:
The following roles act as composite user interface widgets. These roles typically act as containers that manage other widgets.
5.3.3. Document Structure
The following roles describe structures that organize content in a page.
5.3.4 Landmark Roles
The following roles are regions of the page intended as navigational landmarks.
A region declared as a web application, as opposed to a web document.
banner An area that contains things such as the logo or identity of the site sponsor, etc.
complementary A supporting section of the document, designed to be complementary to the main content. Example: Sports News and Business News on a typical news page.
contentinfo A region that contains information about the parent document. Example: copyrights and links to privacy statements.
form A region of the document that represents a collection of form elements.
main The main content of the document.
navigation A collection of navigational elements. Example: A left navigation area.
search A region used to create a search widget.
6.4. Global States and Properties
6.5.1. Widget Attributes
This section contains attributes specific to common user interface elements found on GUI systems or in rich internet applications which receive user input and process user actions. These attributes are used to support the widget roles.
aria-hidden (state) Using
aria-hidden to create an accordian
aria-label to create a label using a text string.
ARIA-Pressed (state) Using
aria-pressed to indicate the state of a button.
aria-required to mark a form field as a required field.
aria-selected Not fully supported yet.
6.5.2. Live Region Attributes
This section contains attributes specific to live regions in rich internet applications. These attributes may be applied to any element. The purpose of these attributes is to indicate that content changes may occur without the element having focus, and to provide assistive technologies with information on how to process those content updates. Some roles specify a default value for the aria-live attribute specific to that role. An example of a live region is a ticker section that lists updating stock quotes.
6.5.3 Drag-and-Drop Attributes
This section lists attributes which indicate information about drag-and-drop interface elements, such as draggable elements and their drop targets. Drop target information will be rendered visually by the author and provided to assistive technologies through an alternate modality.
aria-dropeffect Creating Draggable Objects
aria-grabbed (state) Creating Draggable Objects
6.5.4. Relationship Attributes
This section lists attributes that indicate relationships or associations between elements which cannot be readily determined from the document structure.
aria-describedby to create a long description for an image.
aria-flowto(id) to change the normal reading order
ARIA-Labelled By: Using
aria-labelledby to label form fields and buttons.
CSS Best Practices
Using CSS to Hide Stuff Understanding how to use CSS to create accessible pages.
CSS Accordian Using varius
aria properties and roles, dynamic HTML, and CSS to create an accessible accordion.
CSS BACKGROUND-IMAGE Providing text alternatives for the CSS background-image style
CSS Skip Link Using CSS to create a hidden skip link that surfaces to the visual user when tabbed to.
ARIA States Using CSS to style text based on an ARIA State..
HTML Best Practices
Accessible Forms (Overview) Understanding how to create accessible forms
FIELDSET and LEGEND Using FIELDSET and LEGEND to group similiar input fields, radio buttons and checkboxes.
LABEL Using the HTML LABEL tag to create accessible form fields.
Alternative Text for Images (Overview): Understanding how to create alternative text for images.
IMG ALT and TITLE Using alt attributes on img elements.
IMG ALT as Link Text Using alt attributes as link text.
INPUT TYPE=IMAGE Using the ALT attribute of an INPUT TYPE=IMAGE.
BUTTON Using the BUTTON tag.
MAP AREA Providing text alternatives for the
area elements of image maps.
LONGDESC Creating a long description for an image when an ALT attribute will be too long
TABLE Using a Data TABLE to Create Alternative Text for a Complex Image.
OBJECT Creating text alternatives for applets using the OBJECT tag.
APPLET Creating text alternatives for applets using the OBJECT tag.
EMBED Creating text alternatives for EMBED using the NOEMBED tag.
ASCII, PRE Providing text alternatives for ASCII art, emoticons, and leetspeak
HTML5 Canvas Providing text alternatives for the HTML5 CANVAS element
TabIndex Using TABINDEX to create Focusable Elements
TabIndex Using TABINDEX to Manage the Tab Order
H tag Using the H tag to make pages easy to navigate for screen reader users.
A Element Creating Distinct Link Text.
A Element Creating Meaningful Link Text.
onClick When Does onClick Work with the Keyboard Enter Key?