'

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

Понравилась презентация – покажи это...





Слайд 0

-live aria ood he g t the bad the ugly


Слайд 1

What’s the problem?


Слайд 2

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


Слайд 3

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


Слайд 4

JavaScript provides us with many things including:


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

Many widgets are not accessible for keyboard-only users.


Слайд 10

ARIA to the rescue!


Слайд 11

WAI: Web Accessibility Initiative ARIA: Accessible Rich Internet Applications


Слайд 12

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


Слайд 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.)


Слайд 14

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


Слайд 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?


Слайд 16

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


Слайд 17

An ARIA process?


Слайд 18

Things to avoid


Слайд 19

Don’t use ARIA unless you really need to.


Слайд 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/


Слайд 21

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


Слайд 22

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


Слайд 23

If you must use aria


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

What is aria-live?


Слайд 30

Let’s look at a simple scenario…


Слайд 31

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


Слайд 32

Well done! Your changes have been saved


Слайд 33

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


Слайд 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.


Слайд 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.


Слайд 36

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


Слайд 37

How is aria-live applied?


Слайд 38

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


Слайд 39

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


Слайд 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.


Слайд 41

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


Слайд 42

There are three possible values for aria-live:


Слайд 43

off


Слайд 44

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


Слайд 45

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


Слайд 46

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


Слайд 47

polite


Слайд 48

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


Слайд 49

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


Слайд 50

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


Слайд 51

assertive


Слайд 52

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


Слайд 53

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


Слайд 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.


Слайд 55

Where can we use aria-live?


Слайд 56

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


Слайд 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


Слайд 58

yna D info tock ic s m


Слайд 59

Dyn ami c RS S fe eds


Слайд 60

Dat ers ick ep


Слайд 61

Sorta ble ta b les


Слайд 62

Avoid misuse


Слайд 63

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


Слайд 64

Testing aria-live


Слайд 65

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


Слайд 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.


Слайд 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.


Слайд 68

three tests


Слайд 69

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


Слайд 70

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


Слайд 71

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


Слайд 72

browsers / screen readers


Слайд 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


Слайд 74

OSX Chrome 39 VoiceOver Firefox 34 VoiceOver Safari 7 VoiceOver


Слайд 75

Results


Слайд 76

“off” results


Слайд 77

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


Слайд 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


Слайд 79

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


Слайд 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


Слайд 81

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


Слайд 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


Слайд 83

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


Слайд 84

“polite” results


Слайд 85

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


Слайд 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


Слайд 87

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


Слайд 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.


Слайд 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


Слайд 90

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


Слайд 91

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


Слайд 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


Слайд 93

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


Слайд 94

“assertive” results


Слайд 95

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


Слайд 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


Слайд 97

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


Слайд 98

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


Слайд 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


Слайд 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.


Слайд 101

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


Слайд 102

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


Слайд 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


Слайд 104

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


Слайд 105

Take-aways


Слайд 106

Rather depressingly, aria-live has some support issues.


Слайд 107

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


Слайд 108

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


Слайд 109

Other attributes


Слайд 110

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


Слайд 111

aria-atomic


Слайд 112

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


Слайд 113

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


Слайд 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.


Слайд 115

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


Слайд 116

aria-relevant


Слайд 117

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


Слайд 118

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


Слайд 119

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


Слайд 120

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


Слайд 121

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


Слайд 122

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


Слайд 123

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


Слайд 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.


Слайд 125

aria-busy


Слайд 126

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


Слайд 127

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


Слайд 128

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


Слайд 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.


Слайд 130

role=alert


Слайд 131

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


Слайд 132

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


Слайд 133

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


Слайд 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”.


Слайд 135

role=alertdialog


Слайд 136

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


Слайд 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.


Слайд 138

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


Слайд 139

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


Слайд 140

Conclusion


Слайд 141

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


Слайд 142

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


Слайд 143

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


Слайд 144

@brotherca ke ussm @r sign xde a


Слайд 145


×

HTML:





Ссылка: