HTML 5 Accessibility
-
Upload
steven-faulkner -
Category
Technology
-
view
13.343 -
download
1
description
Transcript of HTML 5 Accessibility
![Page 1: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/1.jpg)
Why is HTML5 Accessibility important? Because this child may never know HTML 4.
![Page 3: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/3.jpg)
Importance
![Page 4: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/4.jpg)
Where the action has been
alt required
![Page 5: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/5.jpg)
Potential• Semantic elements– <nav> <article> <footer> etc.• Not implemented in browsers• Not supported by AT• Can be used with ARIA roles
Redesigning with HTML 5 and WAI-ARIA http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
![Page 6: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/6.jpg)
Potential
• Form controls– <input type="date“> <input
type="range"> etc.• Only implemented in Opera 9.5+• Keyboard accessibility• Not exposed to AT
HTML5 forms demohttp://brucelawson.co.uk/tests/html5-forms-demo.html
![Page 7: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/7.jpg)
Potential• Audio & Video– Native accessible controls
– Implemented in Firefox 3.5
– Captioning and annotations
“It has been decided that the first version of HTML5 <video>(and <audio>) will not have an in-built solution for captions, audioannotations and the like, because it is possible to do such withjavascript and external files.“Silvia Pfeiffer
Accessibility of HTML 5 video and audio elements:http://www.brucelawson.co.uk/2009/accessibility-of-html5-video-and-audio-elements/
![Page 8: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/8.jpg)
Potential
• Drag & Drop– native keyboard support - not
mentioned in HTML 5– Pretty much maps on to ARIA drag &
drop except for providing state info about item being dragged.
More on Drag & dropGez lemon article on Opera dev...coming soon
![Page 9: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/9.jpg)
Potential shit fight
• Canvas– Is being used to produce UI’s e.g.
Bespin– Only way to make accessible is to
create a duplicate of what’s created using canvas i.e big dirty bolt on accessibility
![Page 10: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/10.jpg)
ARIA & HTML 5Potential shit fight II
• Integration blocked on waiting for ARIA last call process
• Separate spec – not dependent• Does not really matter– Validation checking is available– Support in AT and Browsers is good
![Page 11: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/11.jpg)
ARIA & HTML 5
• ARIA validates in HTML5– Validator.nu & W3C validator have HTML5+ARIA
checking
![Page 12: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/12.jpg)
ARIA NOW
![Page 13: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/13.jpg)
ARIA NOW
![Page 14: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/14.jpg)
ARIA NOW
![Page 15: HTML 5 Accessibility](https://reader034.fdocuments.net/reader034/viewer/2022051513/545904a8af79592b448b5602/html5/thumbnails/15.jpg)
The many faces of Bruce Lawson(AKA blorsen blorsensen)