The WAI Forward

The WAI Forward

• By Heydon Pickering


• July 9th, 2014


• AccessibilityResponsive Web DesignSmashing eBooks


• 0 Comments

It’s one thing to emanate a web concentration and utterly another to keep it permitted — independent of a device that a user is regulating and a capabilities. That’s since Heydon Pickering, now a accessibility editor on Smashing Magazine, wrote an eBook Apps For All: Coding Accessible Web Applications³³¹, surveying a roadmap for well-designed, permitted applications.

This essay is an mention of a territory in a eBook that introduces many of a ideas and techniques presented. Reviewed by Steve Faulkner², it’s an eBook we unequivocally shouldn’t skip if you’re a developer who cares about well-structured calm and thorough interface design. – Ed.

Because a W3C’s goal from a opening has been to make a web accessible, accessibility facilities are built into a specifications. As obliged designers, we have a pursuit of formulating constrained web use nonetheless disrupting a thorough facilities of a easier design.

As Scott Jehl said³:

“Accessibility is not something we supplement to a website, nonetheless something we start with and risk losing with any enhancement. It is to be retained.”

Unfortunately, not all websites are unfailing to be as elementary as a provocative declaration that is “This Is a Mother****ing Website⁴” and, as web interfaces evolve, complying with a Web Content Accessibility Guidelines⁵ (WCAG 2.0) has turn increasingly difficult. As we together welcome a advancements of a web and a newfound energy to erect hitherto unfit web-based software, we need to tackle a accessibility of new idioms. We need to find a approach to adopt new collection and techniques to keep a personification margin level.

It’s time to welcome change.

ARIA: A Passion For Parity

The Web Accessibility Initiative’s (WAI) selection for Accessible Rich Internet Applications⁶ (WAI-ARIA) is an accessibility apparatus like WCAG 2.0, with certain critical differences. If it helps, we could consider of a dual resources as siblings: Both have been brought adult in a same sourroundings and have been instilled with a same elementary values, nonetheless they differ in personality. WCAG 2.0 is a discreet homebody who keeps a home fires burning, while a some-more jovial WAI-ARIA has ambitions to take accessibility to new territories.

Unlike WCAG 2.0, ARIA is not customarily a set of recommendations nonetheless a apartment of attributes to be enclosed in your HTML. Its collection capacitate we to change and boost a volume of information common about your HTML with users of assistive technologies. This is intensely useful when you’re creation web apps since a roles, properties, states and relations of elements in a web app are probable to be a lot some-more formidable and dynamic. One approach of looking during it is that ARIA gives we a collection to accommodate a WCAG’s mandate in web apps.

⁷

The Two Purposes Of ARIA

ARIA gives we a ability to reclassify and differently enlarge a viewed clarification (or semantics) of your HTML. That’s flattering powerful, nonetheless what is a purpose of it? ARIA has dual categorical applications.

Remedy

ARIA can be used as a pill to urge a information supposing to assistive record by feeble coded, unsemantic markup.

⁸

For example, a developer competence use a div and some JavaScript to obey a type="checkbox". They shouldn’t, nonetheless they might. To make this div indeed distinct as a checkbox, a ARIA purpose of checkbox⁹ can be combined as an attribute, creation shade readers consider it is, in fact, a customary checkbox. In addition, a developer contingency use a aria-checked charge to prove possibly a checkbox is indeed checked.

div class="toggle-thingy" role="checkbox" aria-checked="false" tabindex="0"Yes?/div

Using a correct input element, type charge and checked charge to promulgate this information would be softened — they are softened upheld than ARIA (which is comparatively modern), and a input component would be automatically focusable, like a semantic button (so, no need for a tabindex). Nonetheless, we can occupy ARIA in this approach to make discerning fixes to markup, mostly nonetheless unfortunate a pattern of a application.

Enhancement

As we’ve established, web applications are some-more formidable than elementary web documents, and a use of HTML elements tends to surpass a elementary semantics means to them. ARIA’s torpedo underline is a ability to assistance authors like we and me promulgate many of these some-more desirous uses in an permitted way.

Take ARIA’s aria-haspopup attribute¹⁰. It represents a ability of certain elements that have a dark submenu. The owners of this ability is approaching to be an a or button component and, nonetheless this special attribute, that’s all it would be to a user of a shade reader: No idea would be given that a submenu exists.

li
 a href="#submenu" aria-haspopup="true" aria-controls="submenu1"Main link/a
 ul id="submenu"
 lia href="/somewhere/"Submenu link/a/li
 lia href="/somewhere/else/"Another link/a/li
 /ul
/li

Some of these ARIA attributes are approaching to be transposed by elementary HTML elements and attributes. As we write, a dialog component is being solemnly adopted¹¹ as a inheritor to a dialog and alertdialog ARIA purpose attributes, for example.

Where possible, superseding ARIA with plain HTML(5) is good since it simplifies a markup and centralizes a W3C’s advice. However, many attributes that promulgate specific contextual information, such as a aria-haspopup and aria-controls¹² properties in a formula above, are doubtful to find as many mainstream support for inclusion as maybe haspopup and controls will have.

As Steve Faulkner points out in “HTML5 and a Myth of WAI-ARIA Redundance¹³”, many of ARIA will continue to exist unbested. The unaccompanied energy of ARIA is to overpass a opening between a use of sighted and unsighted web users.

Role-Playing

A lot of my friends and colleagues are penetrating on tabletop role-playing games, which, in box you’re not sensitive with them, are games in that participants play illusory characters who embark on quests and quarrel battles in fantastical worlds. Although I’m not a large exponent of these games myself, I’ve beheld similarities between a approach characters are role-played in games and a approach HTML elements act within web applications. Accordingly, I’ll use this role-playing embellishment to explain ARIA’s roles, properties and states in larger detail.

Don’t worry, we won’t have to be a large role-playing geek to follow along. I’m not!

Roles

Each actor in a role-playing diversion routinely maintains a “character sheet” that lists a critical characteristics of a impression they are playing. In HTML, a name of a impression competence be a id of an element. Each contingency be unique.

Characters have a lot some-more information than that in a sheet, though. For example, characters home in these anticipation worlds customarily go to one “race” or another. Common standbys are elves, dwarves and trolls. These are like HTML component types: extended groupings of participants with common characteristics.

¹⁴

In ARIA, a role charge overrides a component type, many like a actor in a diversion overrides their workaday existence as a 21st-century tellurian to turn a clever dwarf. In a instance from a final section, an tedious div insincere a purpose of a checkbox by being given role="checkbox".

¹⁵

Roles in ARIA¹⁶, like races in a role-playing game, are a partial of a character’s temperament that we competence be meddlesome in. We competence pattern dwarves to be clever and good during constructing machines, only like we pattern a button to have a characteristics and behaviors already discussed. By putting role="button" on an component that isn’t indeed a button, we are seeking assistive technologies to brand it as a button, evoking those characteristics.

Properties

Character sheets with only names and races would be a bit limited. We’d substantially be a bit worried with so many significance on race, too. The whole indicate of ARIA is that it recognizes elements not only for their generic, reductive classification. Much softened to brand characters and elements by their sold resources and talents.

A standard piece would list a set of characteristics for a impression that, in one approach or another, a diversion identifies as carrying a certain banking and importance. For instance, we competence be an elfin nonetheless one who is special for a ability to expel certain sorcery spells. In many a same way, we looked during an a component that is finished special for carrying a ability of a submenu. This would be identified to a accessibility layer, only like a elementary role, around a aria-haspopup="true" ability attribute.

¹⁷

A outrageous series of properties¹⁸ have been specified and documented. Some are global, clarification that any component competence have them, while others are indifferent for sold contexts and elements. Dwarves are customarily precluded from carrying good longbow accuracy, since a ability is common to elves. The aria-label that we would use to tag a symbol is global, since aria-required, that denotes a compulsory user entry, would routinely be used in form fields or elements with form-field roles, such as listbox and textbox.

States

Perhaps a many critical eminence between a immobile web request and an concentration is that a elements in an concentration tend to change — infrequently dramatically — according to user communication and timed events. Depending on what’s function in an concentration during any one time, a elements therein could be pronounced to be in certain, mostly temporary, states.

In role-playing games, we have to keep tabs on a state of your character: How healthy are you? What equipment have we collected? Who have we befriended? This is all scribbled down, erased and scribbled down some some-more on a impression sheet. Keeping lane of a state of interactive elements is critical for accessibility, too.

In your application, a state of an component is customarily represented visually. In role-playing games and in screen-reader buffers, this is not a case: It has to be imagined. If your dwarf impression has donned their sorcery disguise of invisibility, you’d substantially wish to write this down on a impression piece so that we remember. Similarly, essay a aria-hidden attribute¹⁹ on an component ensures that a permitted state of invisibility is available properly.

²⁰

States such as aria-expanded²¹ are announced according to a value of true or false. An object with aria-expanded="false" is announced by JAWS and NVDA Windows shade readers as “collapsed.” If — or, rather, when — it is set to aria-expanded="true", afterwards a object will be announced as “expanded.”

Our First ARIA Widget

It’s about time we put all we’ve schooled about roles, properties and states into use and build a initial ARIA widget.

The tenure “widget” is mostly used in JavaScript growth to imply a unaccompanied slot of script-enabled interactive functionality. Mercifully, a ARIA clarification corresponds, and ARIA widgets can be suspicion of as JavaScript widgets that have been finished permitted with suitable ARIA attributes.

Let’s make a elementary toolbar — a organisation of symbol controls that capacitate us to classify some content. In this case, we’ll set adult controls to arrange calm alphabetically and retreat alphabetically. Fortunately, we have entrance to a W3C’s beam on authoring ARIA widgets, “General Steps for Building an Accessible Widget With WAI-ARIA²²,” that covers a identical instance for a toolbar.

The Toolbar Role

There’s no such thing as a toolbar component in HTML, unless we emanate one as a web component²³. In any case, since there’s no standard component for toolbars, we need to embody a toolbar purpose in a toolbar’s primogenitor element. This outlines a range of a widget:

div role="toolbar"
 /* toolbar functionality goes here */
/div

(Note: A menu component takes a type of toolbar, nonetheless it has not been adopted by browser vendors²⁴ so is incompetent to yield a information we need.)

The toolbar’s purpose in a pattern should be apparent from a visible charge to a calm it affects. This won’t promulgate anything aurally, however, so we should yield an permitted name for a toolbar around a now sensitive aria-label property. That’s one purpose and one ability so far.

div role="toolbar" aria-label="sorting options"
 /* toolbar functionality goes here */
/div

Now let’s supplement a buttons that will be a controls.

div role="toolbar" aria-label="sorting options"
 buttonA to Z/button
 buttonZ to A/button
/div

Even nonetheless a additional widget properties and states, we’ve already softened a user’s approval of a toolbar: Using a NVDA shade reader or a JAWS shade reader with Firefox, when a user focuses a initial button, they are sensitive that they’re inside a toolbar and — interjection to a aria-label — told what it is for.

²⁵

The Relationship

So far, we haven’t indeed connected a toolbar to a calm it controls. We need a charge attribute, that is a special kind of ability charge that communicates a charge between elements. Our widget is used to control a content, to manipulate and rearrange it, so we’ll go with aria-controls. We’ll join a dots regulating an id value, only as we did in a progressing instance of a popup menu.

div role="toolbar" aria-label="sorting options" aria-controls="sortable"
 buttonA to Z/button
 buttonZ to A/button
/div

ul id="sortable"
 liFiddler crab/li
 liHermit crab/li
 liRed crab/li
 liRobber crab/li
 liSponge crab/li
 liYeti crab/li
/ul

Note that we’ve combined aria-controls to a toolbar itself, not to any sold button. Both would be acceptable, nonetheless regulating it only a once is some-more succinct, and a buttons should any be deliberate sold components that go to a determining toolbar. If we wish to check that properties and states are upheld for widget roles like toolbar, a selection provides a list of “inherited states and properties²⁶” in any case. Consult this when we build a widget. As we will see²⁷, aria-controls is an hereditary ability of toolbar.

Some shade readers do unequivocally small categorically with this charge of information, while others are utterly outspoken. JAWS indeed announces a keyboard authority to capacitate a user to pierce concentration to a tranquil element: “Use JAWS pivotal + Alt + M to pierce to tranquil element.” Once you’ve influenced it, we competence wish to go and check it, and JAWS is assisting we to do only that here.

²⁸

Pressed and Unpressed

Depending on that classification choice is a stream preference, we could contend that a symbol that commands that choice is in a “selected,” or “pressed,” state. This is where a aria-pressed state charge comes in, holding a value of true for pulpy or false for unpressed. States are energetic and should be toggled with JavaScript. On a page being loaded, only a initial symbol will be set to true.

div role="toolbar" aria-label="sorting options" aria-controls="sortable"
 symbol aria-pressed="true"A to Z/button
 symbol aria-pressed="false"Z to A/button
/div
ul id="sortable"
 liFiddler crab/li
 liHermit crab/li
 liRed crab/li
 liRobber crab/li
 liSponge crab/li
 liYeti crab/li
/ul

Pairing a styles for active (:active) buttons with a styles for aria-pressed buttons is a good practice. Both are buttons that have been “pushed down,” possibly momentarily or semi-permanently.

button:active, button[aria-pressed="true"] 
 position: relative;
 top: 3px; /* 3px dump */
 box-shadow: 0 1px 0 /* reduction by 3px */

²⁹

When a user focuses a symbol with aria-pressed benefaction regulating possibly NVDA or JAWS with Firefox, a symbol is identified as a “toggle button.” Using a latest chronicle of JAWS and focusing a symbol with aria-pressed="true" will attach a word “pressed” to a proclamation accordingly. In a ChromeVox³⁰ shade reader for a Chrome browser, an aria-pressed="true" symbol is announced as “button pressed” and aria-pressed="false" as “button not pressed.” To a larger or obtuse extent, many complicated browsers and shade readers clear useful information about a state or intensity state of these buttons.

Keyboard Controls

Not utterly there yet. For toolbars — as with many ARIA widgets — a W3C recommends certain keyboard navigation features³¹, mostly to obey a homogeneous in desktop software. Pressing a left and right arrow keys should switch concentration between a buttons, and dire “Tab” should pierce concentration out of a toolbar. We’ll supplement tabindex="-1" to a list and concentration it regulating JavaScript whenever a user presses “Tab.” We do this to concede users to pierce directly to a list once they’ve selected a classification option. In a toolbar with several buttons, this could potentially save them from carrying to add-on by a series of adjacent buttons to get to a list.

div role="toolbar" aria-label="sorting options" aria-controls="sortable"
 symbol aria-pressed="true"A to Z/button
 symbol aria-pressed="false"Z to A/button
 /div
 ul id="sortable" tabindex="-1"
 liFiddler crab/li
 liHermit crab/li
 liRed crab/li
 liRobber crab/li
 liSponge crab/li
 liYeti crab/li
 /ul
 

$(listToSort).focus();

All Done

That concludes a ARIA widget. A live demo³² is prepared for we to play with and test. Remember that it’s not unequivocally about sorting, per se — that’s all finished with JavaScript. The aim is to make pithy a relations and states of a application, so that whatever we are doing to a calm — classification it, modifying it, acid it, formulating it, recreating it — a users on keyboards and shade readers are kept in a loop.

The subsequent territory of a Apps For All: Coding Accessible Web Applications³³¹ eBook puts a concentration functionality to one side and addresses how to indeed find that concentration functionality in a initial place. Mobility is a large partial of accessibility online and off, so it’s critical to demeanour during opposite ways to assistance a users get around.

(al, il)

Footnotes

1. 1 https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html


2. 2 https://twitter.com/stevefaulkner


3. 3 https://twitter.com/scottjehl/status/411237303579721728


4. 4 http://motherfuckingwebsite.com/


5. 5 http://www.w3.org/TR/WCAG20/


6. 6 http://www.w3.org/WAI/intro/aria


7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/07/1-wai-spider-large-opt.jpg


8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-wai-plaster-large-opt.jpg


9. 9 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role


10. 10 http://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup


11. 11 https://twitter.com/stevefaulkner/status/413263499863658496


12. 12 http://msdn.microsoft.com/en-us/library/ie/cc848872%28v=vs.85%29.aspx


13. 13 http://blog.paciellogroup.com/2010/04/html5-and-the-myth-of-wai-aria-redundance/


14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-wai-char-sheet-large-opt.jpg


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-wai-char-sheet-large-opt.jpg


16. 16 http://www.w3.org/TR/wai-aria/roles


17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-wai-char-sheet-large-opt.jpg


18. 18 http://www.w3.org/TR/wai-aria/states_and_properties


19. 19 http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden


20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-wai-char-sheet-large-opt.jpg


21. 21 http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded


22. 22 http://www.w3.org/WAI/PF/aria-practices/#accessiblewidget


23. 23 http://www.techrepublic.com/blog/web-designer/learn-more-about-web-components-with-these-demos/


24. 24 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu


25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/07/7-wai-toolbar-large-opt.jpg


26. 26 http://www.w3.org/WAI/PF/aria/roles#toolbar


27. 27 http://www.w3.org/WAI/PF/aria/roles#toolbar


28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/07/8-wai-toolbar-large-opt.jpg


29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/07/9-wai-toolbar-large-opt.jpg


30. 30 http://www.chromevox.com/


31. 31 http://www.w3.org/WAI/PF/aria-practices/#toolbar


32. 32 http://heydonworks.com/practical_aria_examples/#toolbar-widget


33. 33 https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html

↑ Back to topShare on Twitter

The WAI Forward