This presentation highlights common accessibility issues in modern web applications and how YUI makes it easy to build accessible, dynamic applications. You will learn about ARIA, focus management, and keyboard accessibility. The presentation will show how the Yahoo registration form uses YUI and accessibility best practices to make sure everyone can enjoy Yahoo products. You will learn how YUI's node and focus management makes it easy to build sophisticated, accessible interactions.

1. Accessibility
+ YUI
Sarbbottam | Ted Drake
YUI Conf 2013
This presentation was created for the YUI Conference, November 2013 by Sarbbottam and Ted Drake.
Sample code is available at https://github.com/sarbbottam/a11y/
Bruce Lee toy photos courtesy [CC] images by Shaun Wong on Flickr.
This page: http://www.flickr.com/photos/shaunwong/3227840657/

2. “Mistakes are always
forgivable, if one has the
courage to admit them.”
― Bruce Lee
Inaccessible web sites are usually caused by ignorance rather than bad intentions. This presentation will introduce
what is needed for accessibility and how Sarbbottam used ARIA, JavaScript, Progressive Enhancement, and
semantic HTML to create a truly accessible and dynamic form. This will help you with your projects as well.
http://www.flickr.com/photos/shaunwong/3228685330/

3. Perceivable
Operable
Understandable
Robust
The WCAG 2.0 accessibility specifications focus on the user’s experience. It distills this to 4 key factors.
Essentially, the user needs to know
•what is on the page,
•be able to focus on the content,
•interact with the objects, and
•the product should work with all combinations of browsers, devices, and assistive technology.

4. ARIA Today
•
Labels
•
Roles
•
Descriptions
•
Live Regions
aria-live http://www.w3.org/TR/wai-aria/states_and_properties#aria-live
aria-labelledby http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby
role=”” http://www.w3.org/TR/wai-aria/roles#roletype
aria-describedby http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby
http://www.flickr.com/photos/shaunwong/3122449102/

5. Action
Now that we have the basics for accessibility, let’s look at how Sarbottam created a visually dynamic form that
provides ample feedback for screen reader users.
This form includes:
progressive enhancement (works without javascript).
Everything is keyboard accessible
Works in multi-language/direction/keyboard
Let’s look at how a screen reader interprets our sample form.
http://www.flickr.com/photos/shaunwong/3122450484/

6. Watch for the following elements in this video:
•Each form input has clearly defined label, state, and properties, i.e required.
•The screen reader lets the user know how to interact with dropdown components
•Screen changes are announced to the user.
This video shows the complete form experience.
http://sarbbottam.github.io/a11y/html/accessible-form.html
It is on YouTube: http://youtu.be/etPAG-Ij10o

7. Watch for the following elements in this video:
•Each form input has clearly defined label, state, and properties, i.e required.
•The screen reader lets the user know how to interact with dropdown components
•Screen changes are announced to the user.
This video shows the complete form experience.
http://sarbbottam.github.io/a11y/html/accessible-form.html
It is on YouTube: http://youtu.be/etPAG-Ij10o

8. Drop Down
This dropdown button uses background images for the flag and triangle. The only text node is the country code
value. But is this enough for a user?
This dropdown updates the button’s aria-label to let the user know the button’s intention. Further, after the user
has chosen a country, the aria-label is updated to show it’s selected value.

9. What is this button?
This button includes a flag, a triangle, and the text “+81”.
The flag and triangle are using spans with background images.
What does the +81 mean?
How can the user know exactly what this will do?

10. <a
href="#foo"
role="button"
aria-haspopup="true"
aria-label="Hong Kong (+852) Country Code
for optional recovery phone number">
<span class="flag-hk"></span>&nbsp;
<span class="drop-down-arrow-container">
<span class="drop-down-arrow"></span>
</span>&nbsp;+852
</a>
Many times people assume their background image is providing enough information. However, this is just a blank
span for the screen reader user.
The dropdown button is clearly labeled with the country name, the phone number extension, and the context
(optional phone number).
Further, the user knows this will generate a menu via the aria-haspopup=”true” attribute.
The aria-label attribute is updated when the user selects a new value.

11. This video shows how the dropdown button is announced as a pupup button with the full information.
This interaction uses onkeydown to grab the arrow keys. onkeypress was exact character code of the key pressed.
This was a problem with international keyboards.
Escape key closes the drop down and is announced as the help text. See the aria practices: #focus_tabindex

12. This video shows how the dropdown button is announced as a pupup button with the full information.
This interaction uses onkeydown to grab the arrow keys. onkeypress was exact character code of the key pressed.
This was a problem with international keyboards.
Escape key closes the drop down and is announced as the help text. See the aria practices: #focus_tabindex

13. Live Regions
ARIA live regions trigger screen readers to announce content when it changes on the screen. This could be when
an object is given display:block, when content is inserted via innerHTML, or similar moments.
Live region documentation: http://www.w3.org/WAI/PF/aria-practices/#liveprops
http://www.flickr.com/photos/shaunwong/3122447886/

14. <p
id="password-validation-message"
aria-live="polite"
aria-atomic="false"
aria-relevant="all"></p>
The password field connects to a paragraph that displays the password’s strength with aria-live=”polite”.
This means the new content will be announced after the user stops typing.
Use assertive to interrupt the user.
Nothing is announced while it is empty.

15. <p
id="password-validation-message"
aria-live="polite"
aria-atomic="false"
aria-relevant="all">
Password must contain 8 characters.
</p>
The paragraph now includes text. This will be announced when the user pauses.
ARIA live regions can be triggered via innerHTML content changes.

16. <p
id="password-validation-message"
aria-live="polite"
aria-atomic="false"
aria-relevant="all">
Not bad, but you can make it better.
</p>
Every time the content changes, the user will be notified.
You are already doing the presentation changes, the aria attributes just surface that content to the assistive
technology.

17. This video shows how the password strength indicator is announced as the user enters their
password.

18. This video shows how the password strength indicator is announced as the user enters their
password.

19. Username
Suggestions
The username suggestions dropdown uses aria to define the label and possible error messages.
The suggestions have the menu role.
Using live regions, a hidden div is used to surface suggested usernames as the user arrows through the choices.
http://www.flickr.com/photos/shaunwong/3122449436/

20. <input
type="text"
id="user-name"
autocomplete="off"
aria-required="true"
aria-describedby="validation"
placeholder="Username"
aria-labelledby="user-name-label">
The username text input turns off HTML5 autocomplete
uses aria-required for required status
aria-describedby points to potential error message
aria-labelledby points to the label.

21. <p
class="clipped"
id="suggestions-read-out-container"
aria-live="polite"
aria-atomic="false"
aria-relevant="all"></p>
the class hides this paragraph visually.
aria-live forces the changes to be announced immediately
aria-atomic announces changed content, not the entire paragraph each time
aria-relevant announces all additions and removals.

22. highlightSuggestion : function(suggestion) {
var readOutText = suggestion.get('innerHTML');
suggestion && suggestion.addClass('suggestions-hovered');
if(this.selectedIndex === this.list.length - 1) {
readOutText += this.endOfsuggestionsMessage;
}
this.suggestionsReadOutContainer.set('innerHTML',
readOutText);
},
This JS snippet shows how the content is inserted into the live region via innerHTML.

23. <p
class="clipped"
id="suggestions-read-out-container"
aria-live="polite"
aria-atomic="false"
aria-relevant="all">
bruce.ninjamaster.lee
</p>
the class hides this paragraph visually.
aria-live forces the changes to be announced immediately
aria-atomic announces changed content, not the entire paragraph each time
aria-relevant announces all additions and removals.

24. This video shows how the username suggestions give the user information on available
options and how to navigate

25. This video shows how the username suggestions give the user information on available
options and how to navigate

26. Validation
This form includes some basic form validation.
When an input has been defined as invalid, we will add the aria-invalid=”true” attribute

27. <input
type="text"
aria-required="true"
aria-describedby="name-message"
placeholder="First name"
aria-labelledby="first-name-label">
<p
id="name-message"
aria-live="polite"
aria-atomic="false"
aria-relevant="all"></p>
The input is connected to the error message container via aria-describedby.
The paragraph container has aria-live=”assertive” to announce the error message when it is
populated.

28. <input
type="text"
aria-required="true"
aria-describedby="name-message"
placeholder="First name"
aria-invalid= "true"
aria-labelledby="first-name-label">
<p
id="name-message"
aria-live="polite"
aria-atomic="false"
aria-relevant="all">
Enter Name
</p>
Add aria-invalid=”true” to the input when it is defined as invalid.
The error message will be announced as soon as it is populated due to the aria-live attribute.
The error message will also be announced when the user places focus in the input.

29. This video shows the First and last name inputs.
The initial focus announces the placeholder, label, and the required state.
It also shows the error state inputs are announced as invalid and the error message is read as the help text.
NVDA and JAWS on windows will announce the error message without the delay.

30. This video shows the First and last name inputs.
The initial focus announces the placeholder, label, and the required state.
It also shows the error state inputs are announced as invalid and the error message is read as the help text.
NVDA and JAWS on windows will announce the error message without the delay.

31. Accessibility is built into
all YUI widgets
All YUI widgets include ARIA, Keyboard accessibility, and HTML best practices.
Use these with confidence. http://yuilibrary.com/
Please note: 3rd party components within the gallery may not be accessible.