Aria-live: The Good, The Bad and The Ugly


The Presentation inside:

Slide 0

-live aria ood he g t the bad the ugly


Slide 1

What’s the problem?


Slide 2

Generally speaking, HTML has a very limited set of interface controls and interactions.


Slide 3

As the demand for rich interactions has increased, JavaScript has become our saviour!


Slide 4

JavaScript provides us with many things including:


Slide 5

dynamic interactions: such as drag and drop, resizing, hide and show, open and shut, switch views etc.


Slide 6

widgets and components: such as modals, in-page tabs, date pickers, page loaders, sliders etc.


Slide 7

However, many of dynamic interactions and widgets are problematic for Assistive Technologies.


Slide 8

Assistive Technologies may not be aware of content that has been updated after the initial page has loaded.


Slide 9

Many widgets are not accessible for keyboard-only users.


Slide 10

ARIA to the rescue!


Slide 11

WAI: Web Accessibility Initiative ARIA: Accessible Rich Internet Applications


Slide 12

WAI-ARIA allows us to use HTML attributes to define the role, states and properties of specific HTML elements.


Slide 13

role what is it? Is it a widget (menu, slider, progress bar etc.) or an important type of element (heading, region, table, form etc.)


Slide 14

state what is the current state of the widget? Is it checked, disabled etc.


Slide 15

ies rt e rop p what are the properties of the widget? Does it have live regions, does it have relationships with other elements, etc?


Slide 16

keybo ard na vigati on ARIA also provides keyboard navigation methods for the web objects and events.


Slide 17

An ARIA process?


Slide 18

Things to avoid


Slide 19

Don’t use ARIA unless you really need to.


Slide 20

“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.” Steve Faulkner: http://www.paciellogroup.com/blog/2014/10/aria-in-html-there-goes-theneighborhood/


Slide 21

Where possible, use correct semantic HTML elements. Don’t use ARIA as a quick-fix.


Slide 22

<!-­‐-­‐  avoid  this  if  possible  -­‐-­‐>   <span  role="button">...</span>   <!-­‐-­‐  this  is  preferred  -­‐-­‐>   <button  type="button">...</button>


Slide 23

If you must use aria


Slide 24

1. Alert users to the widget or elements role (button, checkbox etc).


Slide 25

2. Alert users to the properties and relationships of the element (disabled, required, other labels etc).


Slide 26

3. Alert users to the original state of the element (checked, unchecked etc).


Slide 27

4. Alert users to changes in state of the element (now checked etc)


Slide 28

5. Make sure widgets are keyboard accessible (including predictable focus).


Slide 29

What is aria-live?


Slide 30

Let’s look at a simple scenario…


Slide 31

In a web application, you want a simple notification to appear at the top of the page when a user completes a task.


Slide 32

Well done! Your changes have been saved


Slide 33

This dynamically inserted notification can cause two problems for screen readers.


Slide 34

1: lem rob p Screen readers “buffer” pages as they are loaded. Any content that is added after this time many not be picked up by the screen reader.


Slide 35

proble m 2: Screen readers can only focus on one part of the page at a time. If something changes on another area of the page, screen readers may not pick this up.


Slide 36

The aria-live attribute allows us to notify screen readers when content is updated in specific areas of a page.


Slide 37

How is aria-live applied?


Slide 38

We can apply the aria-live attribute to any HTML element.


Slide 39

<div  aria-­‐live="polite">       </div>


Slide 40

If we then use JavaScript to inject/hide/show content within this element screen readers will be made aware of any DOM changes within that element.


Slide 41

<div  aria-­‐live="polite">     <!-­‐-­‐  Dynamic  content  -­‐-­‐>       </div>


Slide 42

There are three possible values for aria-live:


Slide 43

off


Slide 44

<div  aria-­‐live="off">   </div>


Slide 45

off” e=“ -liv aria Assistive technologies should not announce updates unless the assistive technology is currently focused on that region.


Slide 46

off” e=“ -liv aria Can be used for information that is not critical for users to know about immediately.


Slide 47

polite


Slide 48

<div  aria-­‐live="polite">   </div>


Slide 49

ite” pol =“ live riaa Assistive technologies should announce updates at the next graceful opportunity (eg end of current sentence).


Slide 50

ite” pol =“ live riaa Can be used for warning notifications that users may need to know.


Slide 51

assertive


Slide 52

<div  aria-­‐live="assertive">   </div>


Slide 53

=“a -live aria ive” ert ss Assistive technologies should announce updates immediately.


Slide 54

=“a -live aria ive” ert ss Should only be used if the interruption is imperative for users to know immediately such as error alerts.


Slide 55

Where can we use aria-live?


Slide 56

The aria-live attribute can be used for any page regions that are likely to get updates after the initial page is loaded.


Slide 57

Info alerts! Some info to be aware of Success alerts! Your changes are saved Warning alerts! Something has changed ges ssa e Error alerts! Fix the error and try again rt m Ale


Slide 58

yna D info tock ic s m


Slide 59

Dyn ami c RS S fe eds


Slide 60

Dat ers ick ep


Slide 61

Sorta ble ta b les


Slide 62

Avoid misuse


Slide 63

The aria-live attribute should not be used for dynamic content that is non-critical, or just adds additional “noise” for assistive technologies


Slide 64

Testing aria-live


Slide 65

Working on a recent project with James (Brothercake) Edwards, we needed to test how aria-live performed across different screen readers.


Slide 66

We built different pages for “off”, “polite” and “assertive”. Each page had a message that would automatically be triggered 10 seconds after page load.


Slide 67

This automatic trigger was important as we wanted to observe screen reader behaviour when in the middle of announcing content on a different area of the page.


Slide 68

three tests


Slide 69

t 1: Tes Is the newly inserted message announced immediately when triggered - while screen reader is silent?


Slide 70

Test 2 : Is the newly inserted message announced immediately when triggered - while screen reader is currently announcing other content?


Slide 71

t 3: Tes Is the newly inserted message announced when navigated to?


Slide 72

browsers / screen readers


Slide 73

ws ndo i W IE 11 NVDA 2014.4 and JAWS 16 Chrome 39 NVDA 2014.4 and JAWS 16 Firefox 34 NVDA 2014.4 and JAWS 16


Slide 74

OSX Chrome 39 VoiceOver Firefox 34 VoiceOver Safari 7 VoiceOver


Slide 75

Results


Slide 76

“off” results


Slide 77

st 1 - te ge ” pa “off Newly inserted message should not be announced when screen reader is silent.


Slide 78

results test 1 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 79

st 2 - te ge ” pa “off Newly inserted message should not be announced when screen reader is currently announcing other content.


Slide 80

results test 2 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 81

st 3 - te ge ” pa “off Newly inserted message should be announced when navigated to by screen reader.


Slide 82

results test 3 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 83

issues Chrome/NVDA did not announce the message when navigated to.


Slide 84

“polite” results


Slide 85

- test 1 ” page “polite Newly inserted message should be announced when the screen reader is silent.


Slide 86

results test 1 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 87

issues Chrome/NVDA Chrome/JAWS Firefox/Voiceover did not announce the message when the screen reader was silent.


Slide 88

- test 2 ” page “polite Newly inserted message should not be announced when screen reader is currently announcing other content, but should be announced at the next available pause.


Slide 89

results test 2 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 90

issues Chrome/NVDA Chrome/JAWS Firefox/Voiceover did not announce the message at the next available pause.


Slide 91

- test 3 ” page “polite Newly inserted message should be announced when navigated to by screen reader.


Slide 92

results test 3 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 93

issues Chrome/JAWS did not announce the message when navigated to.


Slide 94

“assertive” results


Slide 95

- test 1 ” page tive “asser Newly inserted message should be announced when screen reader is silent.


Slide 96

results test 1 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 97

issues Chrome/NVDA Chrome/JAWS Firefox/Voiceover did not announce the message when the screen reader was silent.


Slide 98

test 2 page ertive” “ass Newly inserted message should be announced when screen reader is currently announcing other content.


Slide 99

results test 2 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 100

IE11/NVDA IE11/JAWS Firefox/NVDA Firefox/JAWS issue 1 did not announce the message immediately as the message was triggered. They all waited until there was a pause.


Slide 101

issue 2 Chrome/NVDA Chrome/JAWS Firefox/Voiceover did not announce the message immediately as the message was triggered or after a pause.


Slide 102

test 3 ” page sertive “as Newly inserted message should be announced when navigated to by screen reader.


Slide 103

results test 3 BROWSER IE 11 (Win) Chrome 39 (Win) Firefox 34 (Win) Chrome 39 (OSX) Firefox 34 (OSX) Safari 7 (OSX) NVDA JAWS VOICE


Slide 104

issues Chrome/JAWS did not announce the message when navigated to.


Slide 105

Take-aways


Slide 106

Rather depressingly, aria-live has some support issues.


Slide 107

Currently, “polite” is slightly better supported than “assertive” so it is the preferred option.


Slide 108

<div  aria-­‐live="polite">   </div>


Slide 109

Other attributes


Slide 110

There are also a range of other attributes that can be used associated with live regions, (though their support is sometimes patchy).


Slide 111

aria-atomic


Slide 112

<!-­‐-­‐  true  attribute  -­‐-­‐>   <div     aria-­‐live="off"       aria-­‐atomic="true">   </div>


Slide 113

<!-­‐-­‐  false  attribute  -­‐-­‐>   <div     aria-­‐live="off"       aria-­‐atomic="false">   </div>


Slide 114

mic -ato a ari Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the ariarelevant attribute.


Slide 115

mic -ato a ari true: Present the region as a whole when changes are detected. false: Present only the changed regions. (default)


Slide 116

aria-relevant


Slide 117

<!-­‐-­‐  all  attribute  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐relevant="all">   </div>  


Slide 118

<!-­‐-­‐  additions  attribute  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐relevant="additions">   </div>  


Slide 119

<!-­‐-­‐  removals  attribute  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐relevant="removals">   </div>


Slide 120

<!-­‐-­‐  text  attribute  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐relevant="text">   </div>  


Slide 121

<!-­‐-­‐  all  attribute  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐relevant="all">   </div>  


Slide 122

<!-­‐-­‐  multiple  attributes  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐relevant="text,  removals">   </div>  


Slide 123

ant elev ia-r ar Describe semantically meaningful changes, as opposed to merely presentational ones.


Slide 124

ant elev ia-r ar aria-relevant values of “removals” or “all” should be used sparingly. Assistive technologies only need to be informed of important change.


Slide 125

aria-busy


Slide 126

<!-­‐-­‐  true  attribute  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐busy="true">   </div>


Slide 127

<!-­‐-­‐  false  attribute  -­‐-­‐>   <div       aria-­‐live="off"       aria-­‐busy="false">   </div>


Slide 128

usy ia-b ar Indicates whether an element, and its subtree, are currently being updated.


Slide 129

usy ia-b ar If multiple parts of the same element need to be loaded or modified, they can set aria-busy to “true” during initial load, and then “false” when the last part is loaded.


Slide 130

role=alert


Slide 131

<div  role="alert">   </div>


Slide 132

lert le=a ro Used to define a message with important, and usually timesensitive, information.


Slide 133

lert le=a ro The alert role goes on the node containing the alert message.


Slide 134

lert le=a ro Elements with the role=“alert” have an implicit aria-live value of “assertive”, and an implicit aria-atomic value of “true”.


Slide 135

role=alertdialog


Slide 136

<div  role="alertdialog">   </div>


Slide 137

alog rtdi e =al role A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.


Slide 138

alog rtdi e =al role The “alertdialog” role goes on the node containing both the alert message and the rest of the dialog.


Slide 139

alog rtdi e =al role Unlike alert, “alertdialog” can receive a response from the user - such as a “Confirm” or “Save” button.


Slide 140

Conclusion


Slide 141

The aria-live attribute is a very powerful and effective method of keeping screen readers informed about changes the page.


Slide 142

As with any aria- attributes, you should test heavy before using and use with care!


Slide 143

test Our lts: esu r http://maxdesign.com.au/jobs/ sample-accessibility/10notifications/index.html


Slide 144

@brotherca ke ussm @r sign xde a


Slide 145


×

HTML:





Ссылка: