Accessibility Overview

Shortcut

• Restrict single-character shortcuts. Make shortcuts consistent with convention.

Focus

• change the default color of the outline
• change the default color of the element
• remove the box and underline text

Focus order

• Elements must receive focus in an order that preserves meaning and operability (left to right, top to bottom)
• Not jumping around between sections
• No keyboard trap. Focus can be moved away using the keyboard or

tabindex

• -1 indicates the element can't tab to with keyboard, but can set focus programmatically.
• 0 indicates tab to element, focus order determined by the HTML.
• 1+ indicates focus order is the value of the attribute regardless the place of html element.
• Don't fix focus order issues by setting tabindex to positive numbers.
• Use html structure to control focus order
• Set tabindex on elements that would not usually receive keyboard focus

Bypass blocks

• Clear page structure by using html5 structural elements like <main>
• Skip link

.skip-link {
	  display: inline-block;
	  position: absolute;
	  top: 0;
	  left: -100000px;
}

.skip-link:focus {
	  left: 0;
}

 

Forms

Clear labels

• user input must have labels
• labels must be linked to the form control

 <label for="name">Your name</label>

 <input id="name" type="text">

• aria labelling. If label is not seen visually, we can use aria-label or aria-labelledby.

<input id="txtSearch" aria-label="Search" aria-labelledby="butnSearch" type="text" />

<button id="btnSearch">Search</button>

• label placement
• input attribute:  types, readonly, disabled
• disabled value is not submitted to server, readonly value is submitted to server.

Input purposes

• browsers offer to autocomplete info, improves suggestion accuracy
• use autocomplete attribute for input purpose

<input type="text" autocomplete="username" />

Required fields

• required attribute present an in-broweser validation, whereas aria-required doesn't but will be read by screen reader

 <input type="text" required>

 <input type="text" aria-required="true">

Presenting error messages

• covers all form error messages
• identify the input control with the error.
• aria-invalid, aria-describedby="error1"

 <input id="name" type="text" aria-invalid="true" aria-required="true" aria-describedby="error1">

 <span id="error1"> This field is required.</span>

• add validation summary. when user submits the form, it immediately jumps to the validation summary if error occurs. It can be achieved by
• setting keyboard focus to the validation summary
• making the validation summary a live region. It does not change focus. But validation error will be read aloud.

 <div id="validation-summary" role="alert"></div>

• aria-live: The [aria-live=POLITENESS_SETTING] is used to set the priority with which screen reader should treat updates to live regions.