WAI-ARIA Awesome for Everyone

View Github Repository Open presentation in a new window

longmatthewh

See all presentation from longmatthewh

WAI-ARIA Awesome for Everyone

0 0

ariaAwesomeForEveryone

A presentation titled, "WAI-ARIA: Awesome for Everyone"

On Github longmatthewh / ariaAwesomeForEveryone

WAI-ARIA Awesome for Everyone

Created by Matt Long / @matt_h_long

About Me

WAI
Web Accessibility Initiative
ARIA
Accessible Rich Internet Applications

Web Accessibility?

WAI-ARIA?

HTML Semantics

Sea of DIVs

<div class="header">
    <div class="title">The DIV Tag</div>
    <div class="intro">The DIV element is the most versatile in HTML.</div>
</div>
<div class="main">
    I love to use DIV tags whenever I can. They are so great! Here's some
    reasons why I love them.
    <div class="list">
        <div>Its name is only 3 letters long.</div>
        <div>They're so flexible—I can style them however I want.</div>
        <div>DIV elements are supported by all browsers.</div>
    </div>
</div>
<div class="footer">
    Copyright 2014 The DIVmeister
</div>
<div class="header">
    <div class="title">The DIV Tag</div>
    <div class="intro">The DIV element is the most versatile in HTML.</div>
</div>
<div class="main">
    I love to use DIV tags whenever I can. They are so great! Here's some
    reasons why I love them.
    <div class="list">
        <div>Its name is only 3 letters long.</div>
        <div>They're so flexible—I can style them however I want.</div>
        <div>DIV elements are supported by all browsers.</div>
    </div>
</div>
<div class="footer">
    Copyright 2014 The DIVmeister
</div>
Bad HTML
<div>
"…has no special meaning at all… Authors are strongly encouraged to view the <div> element as an element of last resort…use of more appropriate elements…leads to better accessibility for readers and easier maintainability for authors."
<span>
"The <span> element doesn't mean anything on its own…"
  • <article>
  • <aside>
  • <button>
  • <code>
  • <dl>
  • <footer>
  • <header>
  • <img>
  • <nav>
  • <ol>
  • <pre>
  • <section>
  • <time>
  • <ul>
<div class="header">
    <div class="title">The DIV Tag</div>
    <div class="intro">The DIV element is the most versatile in HTML.</div>
</div>
<div class="main">
    I love to use DIV tags whenever I can. They are so great! Here's some
    reasons why I love them.
    <div class="list">
        <div>Its name is only 3 letters long.</div>
        <div>They're so flexible—I can style them however I want.</div>
        <div>DIV elements are supported by all browsers.</div>
    </div>
</div>
<div class="footer">
    Copyright 2014 The DIVmeister
</div>
<header>
    <h1>The DIV Tag</h1>
    The DIV element is the most versatile in HTML.
</header>
<main>
    I love to use DIV tags whenever I can. They are so great! Here's some
    reasons why I love them.
    <ul>
        <li>Its name is only 3 letters long.</li>
        <li>They're so flexible—I can style them however I want.</li>
        <li>DIV elements are supported by all browsers.</li>
    </ul>
</main>
<footer>
    Copyright 2014 The DIVmeister
</footer>
<a class="btn" href="#">I’m a Button</a>
<div class="btn">I’m a Button</div>
<span class="btn">I’m a Button</span>
I'm a Button

Navigation

<div><span>
tabindex="0"
<a>

Only in the tab order if an href attribute value is present. If an href attribute value is present then the <a> element should behave like a hyperlink.

Visible Focus

I'm a Button

*:focus not implemented consistently across browsers.

Enter + SPACE

<div><span>

Need both to behave like a button consistently in all browsers

<a href="#">

SPACE keypress/keydown needed to behave like a button consistently in all browsers

Enter + SPACE

Does NOT need to be implemented for <a>, <div>, and <span> when in tab order: Windows Mac Internet Explorer ✓yes Firefox ✓yes Xno Chrome Xno Xno Safari Xno

Assisitive Tech.

<div class="btn">I'm a Button</div>

Will be identified as plain text.

"I’m a button" "I’m a button; clickable"

Assisitive Tech.

<a class="btn" class="#">I'm a Button</a>

Will be identified as a link—not a button.

"I’m a button; internal link." "Link; I’m a button."

Assisitive Tech.

<button>I'm a Button</button>

Will be identified as a button.

"I’m a button; button."

<div class="btn">I'm a Button</div>
var $button = $('.btn');
$button.on('click', function() {
    //do something awesome!
});
//add to tab order
$button.attr('tabindex','0');
//add handling of using ENTER or SPACE
$button.on('keydown', function(event) {
    var whichKey = event.which;
    if (whichKey === 13 || whichKey === 32) {
        $button.click();
    }
});
//add ARIA role
$button.attr('role','button');

"I’m a button. Button."

ARIA Roles

Describe the type of widget being displayed or structural landmarks.

Widgets

treeitem, toolbar, button, tabpanel, dialog…

Landmarks

search, banner, navigation, main…

ARIA Roles

Many HTML elements have inherent roles. HTML Element ARIA Role Needs Defined Role <a> link No <button> button No <h1>...<h6> heading No <article> article Yes <progress> progressbar Yes <nav> navigation Yes

You Don't Need to Do This

<h1 role="heading" aria-level="1">Awesome Heading</h1>
<button role="button">Click Me, I’m a Button</button>

You Do Need to Do This

<nav role="navigation">...</nav>
<article role="article">...</article>

ARIA Attributes

Describe the widget and its state.

Properties

aria-controls, aria-level, aria-describedby, aria-labeledby…

States

aria-checked, aria-expanded, aria-hidden, aria-disabled…

Samsung 110-Inch 4K HDTV

Brand Samsung Price $149,999.99 Dimensions 101.4 x 3.5 x 56 in.
Image Aspect Ratio 16:09 Display Technology LED Display Size 110 inches Refresh Rate 120 Hz
Shipping Weight 479.5 pounds Date First Available June 29, 2014 
<h1>Samsung 110-Inch 4K HDTV</h1>
<ul>
    <li>Product Info</li>
    <li>Technical Specs</li>
    <li>Additional Info</li>
</ul>
<div>
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div>
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

"Samsung 110-inch…; heading 1" "List with 3 items" "Product Info; list item" "Product Info; heading 2"

Add Roles

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul>
    <li>Product Info</li>
    <li>Technical Specs</li>
    <li>Additional Info</li>
</ul>
<div>
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div>
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab">Product Info</li>
    <li role="tab">Technical Specs</li>
    <li role="tab">Additional Info</li>
</ul>
<div role="tabpanel">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

Add States

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab">Product Info</li>
    <li role="tab">Technical Specs</li>
    <li role="tab">Additional Info</li>
</ul>
<div role="tabpanel">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab" aria-selected="true">Product Info</li>
    <li role="tab" aria-selected="false">Technical Specs</li>
    <li role="tab" aria-selected="false">Additional Info</li>
</ul>
<div role="tabpanel">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab" aria-selected="true">Product Info</li>
    <li role="tab" aria-selected="false">Technical Specs</li>
    <li role="tab" aria-selected="false">Additional Info</li>
</ul>
<div role="tabpanel" aria-expanded="true">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel" aria-expanded="false">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab" aria-selected="true">Product Info</li>
    <li role="tab" aria-selected="false">Technical Specs</li>
    <li role="tab" aria-selected="false">Additional Info</li>
</ul>
<div role="tabpanel" aria-expanded="true" aria-hidden="false">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel" aria-expanded="false" aria-hidden="true">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

Add Properties With ID References

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab" aria-selected="true">Product Info</li>
    <li role="tab" aria-selected="false">Technical Specs</li>
    <li role="tab" aria-selected="false">Additional Info</li>
</ul>
<div role="tabpanel" aria-expanded="true" aria-hidden="false">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel" aria-expanded="false" aria-hidden="true">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab" aria-selected="true" aria-controls="prod-info">Product Info</li>
    <li role="tab" aria-selected="false" aria-controls="tech-specs">Technical Specs</li>
    <li role="tab" aria-selected="false" aria-controls="add-info">Additional Info</li>
</ul>
<div role="tabpanel" aria-expanded="true" aria-hidden="false" id="prod-info">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel" aria-expanded="false" aria-hidden="true" id="tech-specs">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

<h1>Samsung 110-Inch 4K HDTV</h1>
<ul role="tablist">
    <li role="tab" aria-selected="true" aria-controls="prod-info" id="prod-info-tab">Product Info</li>
    <li role="tab" aria-selected="false" aria-controls="tech-specs" id="tech-specs-tab">Technical Specs</li>
    <li role="tab" aria-selected="false" aria-controls="add-info" id="add-info-tab">Additional Info</li>
</ul>
<div role="tabpanel" aria-expanded="true" aria-hidden="false" id="prod-info" aria-labelledby="prod-info-tab">
    <h2>Product Info</h2>
    <table>
        <tbody><tr>
            <th>Brand Name</th>
            <td>Samsung</td>
        </tr>
        <tr>
            <th>Dimensions</th>
            <td>101.4 x 3.5 x 56 inches</td>
        </tr>
    </tbody></table>
</div>
<div role="tabpanel" aria-expanded="false" aria-hidden="true" id="tech-specs" aria-labelledby="tech-specs-tab">
    <h2>Technical Specs</h2>
    <table>
        <tbody><tr><td>...</td></tr>
    </tbody></table>
</div>

"Samsung 110-inch…; heading 1" "List with 3 items" "Product Info; list item" "Product Info; heading 2"

"Samsung 110-inch…; heading 1" "Product Info; selected tab 1 of 3"

WAI-ARIA Authoring Practices

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

WAI-ARIA Rocks

If Done Right

Guitar Brands

  • Fender
  • Gibson
  • Ibanez

"Samsung 110-inch…; heading 1" "List with 3 items" "Product Info; list item" "Product Info; heading 2"

Guitar Brands

  • Fender
    • Stratocaster
    • Telecaster
  • Gibson
    • Les Paul
    • SG
  • Ibanez
    • RGKP6
    • Destroyer

Guitar Brands

  • Fender
    • Electric
      • Stratocaster
      • Telecaster
  • Gibson
    • Les Paul
    • SG
  • Ibanez
    • RGKP6
    • Destroyer

Guitar Brands

  • Fender
    • Electric
      • Stratocaster
      • Telecaster
      • Jaguar
      • Jazzmaster
      • Mustang
    • Acoustic
      • Dreadnought
      • Folk
      • Mandolin
  • Gibson
    • Electric
      • Les Paul
      • SG
      • Explorer
      • Flying V
      • Firebird
    • Acoustic
      • Super Jumbo
      • Jumbo
      • Square Shoulder
  • Ibanez
    • Electric
      • RGKP6
      • Destroyer
      • Roadcore
    • Acoustic
      • Artwood
      • Resonator
      • Talman

Guitar Brands

  • Fender
    • Electric
      • Stratocaster
      • Telecaster
      • Jaguar
      • Jazzmaster
      • Mustang
    • Acoustic
      • Dreadnought
      • Folk
      • Mandolin
  • Gibson
    • Electric
      • Les Paul
      • SG
      • Explorer
      • Flying V
      • Firebird
    • Acoustic
      • Super Jumbo
      • Jumbo
      • Square Shoulder
  • Ibanez
    • Electric
      • RGKP6
      • Destroyer
      • Roadcore
    • Acoustic
      • Artwood
      • Resonator
      • Talman
<h1>Guitar Brands</h1>
<ul>
    <li>
        <button class="toggle collapsed"></button>
        <h2>Fender</h2>
        <ul>
            <li>
                <button class="toggle collapsed"></button>
                <h3>Electric</h3>
                <ul>
                    <li>Stratocaster</li>
                    <li>Telecaster</li>
                    <li>Jaguar</li>
                </ul>
            </li>
            <li>
                <button class="toggle collapsed"></button>
                <h3>Acoustic</h3>
                <ul>
                    <li>Dreadnought</li>
                    <li>Folk</li>
                    <li>Mandolin</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<h1>Guitar Brands</h1>
<ul role="tree">
    <li role="treeitem">
        <button class="toggle collapsed"></button>
        <h2>Fender</h2>
        <ul role="group">
            <li role="treeitem">
                <button class="toggle collapsed"></button>
                <h3>Electric</h3>
                <ul role="group">
                    <li role="treeitem">Stratocaster</li>
                    <li role="treeitem">Telecaster</li>
                    <li role="treeitem">Jaguar</li>
                </ul>
            </li>
            <li role="treeitem">
                <button class="toggle collapsed"></button>
                <h3>Acoustic</h3>
                <ul role="group">
                    <li role="treeitem">Dreadnought</li>
                    <li role="treeitem">Folk</li>
                    <li role="treeitem">Mandolin</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<h1>Guitar Brands</h1>
<ul role="tree">
    <li role="treeitem" aria-level="1" aria-expanded="false">
        <button class="toggle collapsed"></button>
        <h2>Fender</h2>
        <ul role="group">
            <li role="treeitem" aria-level="2" aria-expanded="false">
                <button class="toggle collapsed"></button>
                <h3>Electric</h3>
                <ul role="group">
                    <li role="treeitem" aria-level="3">Stratocaster</li>
                    <li role="treeitem" aria-level="3">Telecaster</li>
                    <li role="treeitem" aria-level="3">Jaguar</li>
                </ul>
            </li>
            <li role="treeitem" aria-level="2" aria-expanded="false">
                <button class="toggle collapsed"></button>
                <h3>Acoustic</h3>
                <ul role="group">
                    <li role="treeitem" aria-level="3">Dreadnought</li>
                    <li role="treeitem" aria-level="3">Folk</li>
                    <li role="treeitem" aria-level="3">Mandolin</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<h1 id="guitar-brands">Guitar Brands</h1>
<ul role="tree" aria-labeledby="guitar-brands">
    <li role="treeitem" aria-level="1" aria-expanded="false">
        <button class="toggle collapsed"></button>
        <h2 id="fender">Fender</h2>
        <ul role="group" aria-labeledby="fender">
            <li role="treeitem" aria-level="2" aria-expanded="false">
                <button class="toggle collapsed"></button>
                <h3 id="electric">Electric</h3>
                <ul role="group" aria-labeledby="electric">
                    <li role="treeitem" aria-level="3">Stratocaster</li>
                    <li role="treeitem" aria-level="3">Telecaster</li>
                    <li role="treeitem" aria-level="3">Jaguar</li>
                </ul>
            </li>
            <li role="treeitem" aria-level="2" aria-expanded="false">
                <button class="toggle collapsed"></button>
                <h3 id="acoustic">Acoustic</h3>
                <ul role="group" aria-labeledby="acoustic">
                    <li role="treeitem" aria-level="3">Dreadnought</li>
                    <li role="treeitem" aria-level="3">Folk</li>
                    <li role="treeitem" aria-level="3">Mandolin</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Managing Focus

"…the user may navigate through the container by pressing additional keys, such as the arrow keys, to change the currently active descendant. Any additional press of the main navigation key (generally the TAB key) will move out of the container to the next widget…"
Up Arrow and Down Arrow keys move between visible nodes
Left Arrow key on an expanded node closes the node.
Left Arrow key on a closed or end node moves focus to the node's parent.
Right Arrow key expands a closed node, moves to the first child of an open node, or does nothing on an end node.
control
Control + Arrow to an item with the keyboard focuses the item (but does not select it). Previous selections are maintained, provided that the Control key is not released or that some other keyboard function is not performed.
shift
Shift + Up Arrow extends selection up one node.
shift
Shift + Down Arrow extends selection down one node.
enter
Enter key performs the default action on end nodes.
A
 
Z
Typing a letter key moves focus to the next instance of a visible node whose title begins with that letter.
home
Home key moves to the top node in the tree view.
end
End key moves to the last visible node in the tree view.
control
           
Control + Space with focus on an item toggles the selection of the item.
shift
home
Shift + Home extends selection up to the top-most node.
shift
down
Shift + Page Down extends selection down to the last node.
*
Asterisk on keypad expands all nodes. 
<h1 id="guitar-brands">Guitar Brands</h1>
<ul role="tree" aria-labeledby="guitar-brands">
    <li role="treeitem" aria-level="1" aria-expanded="false">
        <button class="toggle collapsed"></button>
        <h2 id="fender">Fender</h2>
        <ul role="group" aria-labeledby="fender">
            <li role="treeitem" aria-level="2" aria-expanded="false">
                <button class="toggle collapsed"></button>
                <h3 id="electric">Electric</h3>
                <ul role="group" aria-labeledby="electric">
                    <li role="treeitem" aria-level="3">Stratocaster</li>
                    <li role="treeitem" aria-level="3">Telecaster</li>
                    <li role="treeitem" aria-level="3">Jaguar</li>
                </ul>
            </li>
            <li role="treeitem" aria-level="2" aria-expanded="false">
                <button class="toggle collapsed"></button>
                <h3 id="acoustic">Acoustic</h3>
                <ul role="group" aria-labeledby="acoustic">
                    <li role="treeitem" aria-level="3">Dreadnought</li>
                    <li role="treeitem" aria-level="3">Folk</li>
                    <li role="treeitem" aria-level="3">Mandolin</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<h1 id="guitar-brands">Guitar Brands</h1>
<ul role="tree" aria-labeledby="guitar-brands" aria-activedescendant="n-0">
    <li role="treeitem" aria-level="1" aria-expanded="false" aria-selected="true" id="n-0">
        <button class="toggle collapsed"></button>
        <h2 id="fender">Fender</h2>
        <ul role="group" aria-labeledby="fender">
            <li role="treeitem" aria-level="2" aria-expanded="false" aria-selected="false" id="n-0-0">
                <button class="toggle collapsed"></button>
                <h3 id="electric">Electric</h3>
                <ul role="group" aria-labeledby="electric">
                    <li role="treeitem" aria-level="3" aria-selected="false" id="n-0-0-0">Stratocaster</li>
                    <li role="treeitem" aria-level="3" aria-selected="false" id="n-0-0-1">Telecaster</li>
                    <li role="treeitem" aria-level="3" aria-selected="false" id="n-0-0-2">Jaguar</li>
                </ul>
            </li>
            <li role="treeitem" aria-level="2" aria-expanded="false" aria-selected="false" id="n-0-1">
                <button class="toggle collapsed"></button>
                <h3 id="acoustic">Acoustic</h3>
                <ul role="group" aria-labeledby="acoustic">
                    <li role="treeitem" aria-level="3" aria-selected="false" id="n-0-1-0">Dreadnought</li>
                    <li role="treeitem" aria-level="3" aria-selected="false" id="n-0-1-1">Folk</li>
                    <li role="treeitem" aria-level="3" aria-selected="false" id="n-0-1-2">Mandolin</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Guitar Brands

  • Fender
    • Electric
      • Stratocaster
      • Telecaster
      • Jaguar
      • Jazzmaster
      • Mustang
    • Acoustic
      • Dreadnought
      • Folk
      • Mandolin
  • Gibson
    • Electric
      • Les Paul
      • SG
      • Explorer
      • Flying V
      • Firebird
    • Acoustic
      • Super Jumbo
      • Jumbo
      • Square Shoulder
  • Ibanez
    • Electric
      • RGKP6
      • Destroyer
      • Roadcore
    • Acoustic
      • Artwood
      • Resonator
      • Talman

Test

Thanks WebAIM!

When using your primary screen reader, which browser do you use most often? Browser # of Respondents % of Respondents Internet Explorer 9+ 556 38.9% Firefox 346 24.2% Internet Explorer 8 180 12.6% Safari 143 10.0% Internet Explorer 6 60 4.2% Internet Explorer 7 43 3.0% Chrome 40 2.8% Others 58 4.1%

Thanks WebAIM!

Less Classes

"…authors could conceivably design their own document language based on elements with almost no associated presentation…and assigning style information through the class attribute. Authors should avoid this practice…the structural elements of [HTML] often have recognized and accepted meanings and author-defined classes may not." 
ul[role="tree"] {
    list-style-type: none;

    &:focus {
        outline: 1px dotted #0000ff;
    }

    li {
        list-style-type: none;

        &[aria-selected="true"]  {
            outline: none;
        }

        &[aria-expanded="false"] > ul {
            display: none;
        }

        &[aria-expanded="true"] > ul {
            display: block;
        }
    }
}
var $button= $('[role="button"]');
    $button.on('click', function() {
    //do something awesome!
});

Take Aways!

Start With the Basics

Don't Do This

<span role="button" tabindex="0">I’m a Button, Really</span>
<div role="heading" aria-level="1">I’m a Heading, Really</div>

Do This

<button>I'm a Button</button>
<h1>I'm a Heading</h1>

ARIA is

NOT Magic

ARIA needs

to be Tested

ARIA is

Awesome

ARIA needs

Awesome Developers

Thanks for your time

Questions?