4. What can ARIA do for you?

https://youtu.be/7vz1aakYHtw

The checkbox example demonstarated how ARIA modifies the semantic information of an element on the page.

[x] Receive promotional offers

<!-- custom checkbox -->
<div role="checkbox" aria-checked="true">
    Receive promotional offers
</div>

checkbox

name: "Receive promotional offers"

state: checked

ARIA attributes can be used in a number of ways to augment the existing ways we can express semantics in HTML.11

1. Add Semantics

ARIA can add semantics to an element where no native semantics exist.

<!-- [from] -->
<div class="checkbox checked"> Receive promotional offers
</div>
: Text > value: "Receive promotional offers"

<!-- [to] -->
<div role="checkbox" aria-checked="true"> Receive promotional offers
</div>
: checkbox > name: "Receive promotional offers", state: checked

2. Modify Semantics

ARIA can also modify existing elements semantics within certain bounds.

<!-- from : This is a on/off switch example -->
<button class="toggle" checked> Enable </button>
: button > name: "Enable"

<!-- to -->
<button role="switch" aria-checked="true" class="toggle"> Enable </button>
: switch > name: "Enable", state: checked

3. Express more UI patterns

Accessibility course (treeitem, main) :::::::: li role="treeitem", aria-expanded("true", -)
                                                                     `ul, role="group"`
> Introduction (treeitem, sub) :::::::::::::::::::::::::: li, role="treeitem", aria-expaned("false", >)

> Focus (treeitem, sub) :::::::::::::::::::::::::::::::::::: li, role="treeitem", aria-expaned("false", >)
...

<ul role="tree">
    <li role="treeitem" aria-expanded="true">Accessibility course</li>
    <ul role="group">
        <li role="treeitem" aria-expanded="false">Introduction</li>
        <li role="treeitem" aria-expanded="false">Focus</li>
        ...

4. Extra labels and descriptions

ARIA can add extra label and description text, which is only exposed to assisted techonology APIs.

<!-- from -->
<button class="glyph"> 
    <div class="filter-glyph"></div>
</button>
: button > name: ""

<!-- to -->
<button class="glyph" aria-label="filter"> 
    <div class="menu-glyph"></div>
</button>

: button > name: "filter"

5. Relationships

ARIA can also expressed semantic relationships between elements which go beyond standard DOM parent, child, and sibling relationships.

Advanced settings

[x] Offer to translate content

[x] Send usage statistics and crash reports

<button aria-expanded="false" aria-controls="advanced-settings">
    <h2>Advanced settings</h2>
</button>
<div id="advanced-settings">
    <label><input type="checkbox">Offer to..</label>
    <label><input type="checkbox">Send usage...</label>
</div>

: group
(parent)                            (parent)
button                (control)     group
name:"Advanced.."                   name:""
state:expanded

6. Live updates

ARIA can make part of the page live, that is inform assistive technology right away when they change.

<div role="alert">
    Could not connect!
</div>

ARIA 1.0 spec:https://www.w3.org/TR/wai-aria/

ARIA 1.1 spec:https://www.w3.org/TR/wai-aria-1.1/

04 What can ARIA do for you?