Best Practices by Language


ARIA

5.3.2 Widget Stand Alone Roles:

ARIA Description
ARIA alert Using ARIA’s role="alert" and 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
ARIA alert role="alert" see: ARIA role=”alertdialog”
ARIA gridcell role="gridcell"
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.
ARIA Role Description

5.3.3. Document Structure

The following roles describe structures that organize content in a page.
ARIA Role Description

5.3.4 Landmark Roles

The following roles are regions of the page intended as navigational landmarks.
ARIA Role Description
application 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

The following global states and properties are supported by all roles and by all base markup elements.
ARIA Role Description
ARIA-DescribedBy: Using aria-describedby to create a long description for an image.
aria-dropeffect Creating Draggable Objects
aria-flowto Using aria-flowto(id) to change the normal reading order
aria-grabbed (state) Creating Draggable Objects
aria-hidden (state) Using aria-hidden to create an accordian
ARIA Role="Alert" and ARIA-Invalid: Using ARIA's role="alert" and aria-invalid to create an accessible error message
ARIA-Label: Using aria-label to create a label using a text string.
ARIA-Labelled By: Using aria-labelledby to label form fields and buttons.

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 Role Description
aria-hidden (state) Using aria-hidden to create an accordian
ARIA-Label: Using 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: Using aria-required to mark a form field as a required field.
ARIA-Selected: Using 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.
ARIA Role Description

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 Role Description
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 Role Description
ARIA-DescribedBy: Using aria-describedby to create a long description for an image.
aria-flowto Using aria-flowto(id) to change the normal reading order
ARIA-Labelled By: Using aria-labelledby to label form fields and buttons.


CSS

CSS Best Practices
Style Description
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

HTML Best Practices
Element Description
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.


JavaScript

JavaScript Best Practices
Method Description
JavaScript Skip Link Using JavaScript to create a hidden skip link that visually surfaces when tabbed into.
onClick When Does onClick Work with the Keyboard Enter Key?


Flash

Flash Best Practices
Method Description
Accessible Flash Media Player An example of an accessible media player
Keyboard Accessible JWPlayer Customized by Deque to be keyboard accessible in IE, FF, Chrome and Safari

Comments are closed.