Accessibility Note

This presentation uses an out-of-the box HTML slideshow script which by itself is unaccessible. Keybindings exist to traverse forward and backward with arrow keys, but focus never shifts as the slides advance. The slides themselves are well structured, so you can use a read all command to listen to everything linearly. My good buddy Karl Groves also added a live region which should work well for screen readers that support live regions. As you traverse through the slides using arrow keys, the slide's content will be added to the live region. If all else fails, you can also access the slideshow content by turning off CSS and JavaScript.

Use ARIA Now!

With Billy Gregory, The Paciello Group
@TheBillyGregory

Use ARIA Now!

With Billy Gregory, The Paciello Group
@TheBillyGregory

First things first.

Let's get a few things cleared up.

I can't do everything.

I am not a "Go to" resource.

I don't have all the answers.

But I can do a few things really well.

Just like ARIA.

What is ARIA?

What is ARIA?

Name, State, Role, Value

It's been called lipstick on a pig.

Pig inspiration c/o Jared @ WebAIM's' "Accessibility Lipstick on a Usability Pig".

The background image is a pig wearing lipstick.

It's been called a bandaid solution

The background image is the word ARIA spelled out with bandaids. Too many developers use ARIA as an excuse for otherwise bad code that should instead just be written right.

And you should never use bandaids for surgery.

  • If you can use a native HTML element to do the same job, do it.
  • If you need ARIA to fix complex UX issues, then there is an issue with the UI

I like to think of it as a super serum

The background image is Steve Rogers before he is injected with the Super Soldier serum in Captain America.

Captain ARIA

The background image is Captain America edited to read Captain ARIA.

So...
When do I use ARIA?

If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Using WAI-ARIA in HTML
W3C Working Draft 03 October 2013

When do I use ARIA?

Know your role.

Dwayne "The Rock" Johnson
(and countless qualified accessibility professionals)

role="accessible"

(Does not exist. Sorry.)

Landmark Roles

What do they do?

The landmarks

Landmark Roles

					
						<nav role="navigation">
  							<ul>
    						</ul>
						</nav>

						<main role="main">
  							<h2 id="mainhead"> Home </h2>
						</main>

Landmark Roles

Leonie Watson demonstrates how WAI-ARIA landmark roles help screen reader users understand the purpose of different areas of a web page, such as search, navigation or main content.

Element Roles

					
						<span role="button" onclick="..."">
							Click me!
							</span>
							
						<button onclick="..."">
						Click me!
						</button>
							
						<span role="button" tabindex="0" onclick="...">
						Click me!
						</span>

ARIA lies.

The background is a movie poster for the film Liar Liar edited to say Aria Liar

Truth or consequences

And now, for my next trick...

(Aria is magic!)

I'll make this table disappear!

role="presentation"

(This one does exist.)

Presentation Role

Presentation Role

					
						<table role="presentation">
						//required child elements inherit role=presentation
						<tr>
						<td>
						//non required children do not inherit role=presentation
						<h2> heading text </h2>
						<p> textcontent in a paragraph </p> 
						</td>
						</tr>
						</table>

Roles

					
						<div>
							<table>
								<tr>
									<td>1</td>
									<td>This is the first step</td>
								</tr>
								... //continued ...
							</table>
						<div>

Roles

					
						<div role="group">
							<table role="list">
								<tr role="listitem">
									<td>1</td>
									<td>This is the first step</td>
								</tr>
								... //continued ...
							</table>
						<div>

Additional Instructions?

What is this?


The correct format for the date is DD/MM/YYYY 


					
						<label for="date">Date:</label>
						<input type="text" id="date">
						<span>The correct format for the date is DD/MM/YYYY</span>

What is this?


The correct format for the date is DD/MM/YYYY 


					
						<label for="date">Date:</label>
						<input type="text" id="date" aria-describedby="date-format">
						<span id="date-format" tabindex="-1">The correct...</span>

NOTE: In IE if you use aria-labelledby with multiple id references or aria-describedby with single or multiple id references, the referenced elements must be what Microsoft terms as accessible HTML elements. The tabindex="-1" was added to make this an "accessible element".

What is this?


The correct format for the date is DD/MM/YYYY 


					
						<label for="date">Date:*</label>
						<input type="text" id="date" aria-describedby="date-format" 
						aria-required="true">
						<span id="date-format" tabindex="-1">The correct...</span>

Mistakes,
I've made a few.

Invalid form fields

Use aria-invalid to indicate a field is invalid


an exmaple of an form with an error message
Values for aria-invalid
Value Description
false No errors (default).
grammar A grammatical error is detected.
spelling A spelling error is detected.
true An invalid entry has been provided.

Invalid form fields

					
  						<label for="surname">Surname * </label>
  						<input type="text" 
    				    aria-required="true"
        				aria-invalid="spelling"
         				id="surname"
         				name="surname">

Invalid form fields

Associating errors with controls


an exmaple of an form with an error message and a suggestion how to correct

Invalid form fields

Associating errors with controls

					
  						<label for="surname">Surname * </label>
  						<input type="text" 
    				    aria-required="true"
        				aria-invalid="spelling"
        				aria-describedby="surnamecue"
         				id="surname"
         				name="surname">
         				<div id="surnamecue">
    						Your surname must start with a character.
  						</div>

Almost there...

Invalid form fields

Use an error list


an exmaple of a list of errors at the top of a form

Invalid form fields

					
						<div tabindex="-1" id="errorSummary" role="group" 
						aria-labelledby="errorSummaryHeading">
						<h2 id="errorSummaryHeading">Your information contains 2 errors</h2>
						<ul>
						<li>
						<a href="#SecondaryPhone1">Phone Number 2: This field is required</a></li>
						<li><a href="#AlertsText1">I can get information by (select at least one): 
						Please select at least one category</a></li>
						</ul>
						</div>
						...
						<label for="SecondaryPhone1">Phone Number 2:</label> 
						<input name="textfield" id="SecondaryPhone1" aria-invalid="true" 
						aria-required="true" type="text">				
						...

Dialogs

Content Dialogs

an example of a content dialog 
					
						<div role="alertdialog" aria-labelledby="dlgtitle" 
						aria-describedby="instructions">
					  	<h1 id="dlgtitle">Shutdown instructions</h1>
					  	<ol id="instructions">
					    ...
					  	</ol>
					    <input type="button" value="OK">
						</div>

Interactive Dialogs

an example of a interactive dialog 
					
						<div role="dialog" aria-labelledby="dlgtitle">
						<h1 id="dlgtitle">Sign up to Newsletter</h1>
						<ol id="instructions">
						    <li>Enter email address</li>
						    <li>Press the 'Sign up' button</li>
						</ol>
						 <label for="email">Email: </label>
						 <input type="text" id="email" name="email"
						    aria-describedby="instructions">
						    <input type="button" value="Sign up">
						</div>

Ch..Ch..Changes


Live Regions


What are they?

Where do we use them?

  • Chat, error logs, etc
  • Status messages
  • Urgent message req. immediate notice
  • Stock ticker
  • Timer/ Clock
  • Progress indicator

aria-live

Live Regions


How important is the content?

  • Not too important:
    aria-live='polite'
    • Waits for queued output to be read/ paused
    • Default for most roles
  • DO IT NOW!!!!:
    aria-live='assertive'
    • Interrupts output
    • Default for alert role

Assign live region roles

  • Chat, error logs, etc.: role="log"
  • Status messages: role="status"
  • Urgent message req. immediate notice: role="alert"
  • Stock ticker: role="marquee"
  • Timer/ Clock: role="timer"
  • Progress indicator: role="progressbar"
  • None of the above: role="region"

Live Regions

					
						<div id="result2"  role="status" aria-live="polite"> </div>
						<button onclick="update2();">Update result 2</button>
						
						 <script>
						 var result2 = 0;
						 function update2() {
							result2 = result2 + 1;
							document.getElementById("result2").innerHTML=result2;
						  }
						 </script>

What do we announce?

Live Regions


aria-atomic

  • Determines whether the screenreader announces the entire region when changes occur
  • Value can be true or false
  • By default this attribute is set to false

aria-relevant

    <
  • Announce only new content: aria-relevant="additions"
  • Announce only removed content: aria-relevant="removals"
  • Announce changes to content: aria-relevant="text"
  • Announce all changes: aria-relevant="all"

Live Regions

aria-atomic="false"

Score

aria-atomic="true"

Score

Live Regions


<div role="status" aria-live="polite" aria-atomic="false"
>Score <span id="result5">  </span></div>
<button onclick="update5();">Update aria-atomic="false"</button>
 
<script>
 var result5 = 0;
 var result6 = 0;
 function update5() {
	result5 = result5 + 1;
	document.getElementById("result5").innerHTML=result5;
  }
function update6() {
		result6 = result6 + 1;
		document.getElementById("result6").innerHTML=result6;
	}
 </script>

So...

This talk didn't teach you everything.

But now you know a few things

But there's a lot more to ARIA

This talk was very vanilla...

and it's just the tip of the (vanilla) iceberg.

Aria... Not the hero we deserved,
but the one that we needed.


Thanks!

@TheBillyGregory

References

Images