Best Practices by Use


Images

Best Practices for Providing Alternative Text for Images
Method Description
Image Alternatives Overview Making images accessible.
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 APPLET 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
CSS background-image Providing text alternatives for the CSS BACKGROUND-IMAGE style


Forms

Best Practices for Forms
Method Description
Accessible Forms Overview Accessible Forms Overview
HTML LABEL and TITLE Using the HTML LABEL tag or the TITLE attribute to create form labels.
FIELDSET and LEGEND Using FIELDSET and LEGEND to group similiar labeled form fields, RADIOBUTTONS and CHECKBOXES.
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 alert role="alert" see: ARIA role=”alertdialog”
ARIA-DescribedBy: Using aria-describedby to create a long description for an image.
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 LABEL Like: Comparison of aria-label, aria-labelledby, and aria-describedby.
ARIA-Labelled By: Using aria-labelledby to label form fields and buttons.
ARIA-Required: Using aria-required to mark a form field as a required field.
ARIA-Selected: Using aria-selected Not fully supported yet.
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


Links

Best Practices for Links
Method Description
A Element Creating Distinct Link Text.
A Element Creating Meaning Link Text.
onClick When Does onClick Work with the Keyboard Enter Key?
ARIA Link Using role="link" to create a link from HTML Elements other than the Anchor tag.


Navigation

Best Practices for Navigation
Method Description
ARIA Landmark: Using role=”<landmark name>” to provide skip links.
H tag Using the H tag to make pages easy to navigate for screen reader users.
CSS Skip Link Using CSS to create a hidden skip link that surfaces to the visual user when tabbed to.
JavaScript Skip Link Using JavaScript to create a hidden skip link..
TabIndex Using TABINDEX to create Focusable Elements
TabIndex Using TABINDEX to Manage the Tab Order
aria-flowto Using aria-flowto(id) to change the normal reading order


Drag and Drop

Best Practices for Drag and Drop
Method Description
ARIA Drag & Drop: Using aria-grabbed and aria-dropeffect to create an accessible drag and drop experience for the screen reader user.


Video/Multimedia

Best Practices for Video/Multimedia
Method Description
Alt Text How to determine the best way to provide alternate text for images, canvas, etc.
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


Show and Hide

Best Practices for Show and Hide
Method Description
CSS Show and Hide: Using varius aria properties and roles, dynamic HTML, and CSS to create an accessible accordion.
aria-hidden (state) Using aria-hidden to create an accordian


Tables


Best Practices for Providing Accssible Tables
Method Description


User Messages

Best Practices for Providing Accssible Tables
Method 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 alert role="alert" see: ARIA role="alertdialog"
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.

Comments are closed.