Upload
steve-lee
View
288
Download
0
Tags:
Embed Size (px)
Citation preview
Agenda
• Universal access barriers recap
• Accessibility or Assistive Technology and the web
• Web architecture and web ‚Apps‘
• Hands-On using ARIA to enhance user experiences
• Global Public Inclusive Infrastructure – GPII
• Updated slides: http://opendirective.net/M2SL.pdf
“The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.“
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 12
• Driving car
• Bright light
• Noisey environment
• Under stress
Situational disability
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 13
• Adjustments to UI or additions to content • High contrast theme
• Easy read
• Audio description
• Subtitles
Accessibility
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 14
• Transformation of UI• Screen readers and Braille displays
• Magnifier
• Grid systems
• Gaze control
Assistive technology
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 15
• Physical AT
• OS Universal Access
• Browser Options
• Web site options
• Web AT
Adaptations to Web access
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 20
• Expose UI to AT
• AT can • Navigate
• Observe
• Activate
Platform Accessibility APIs
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 21
• Describes UI in terms of• Roles
• States
• Properties
Platform Accessibility APIs
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 22
<input type="checkbox" name="option1" value="Cheese“…>
Ö
<input type="checkbox" name="option1" value="Cheese“ checked …>
Role = checkbox Properties State = unchecked
State = checked
Standard controls
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 23
<li aria-role=“checkbox ”aria-checked=“true” …> <img src=“checked.png” role=“presentation”…></li>
Custom Controls with ARIA
<li> <img src=“checked.png” …> tabindex="0"</li
Role = checkbox State = checked
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 25
• Gamepad – switch access
• Pointer events – input modes
• Speech recognition
• Text to Speech
• Camera
• Vibration
Platform APIs [new and draft]
Accessibility Stack
ASSISTIVE TECHNOLOGY
WEB APP IN BROWSER
OPERATING SYSTEM
PLATFORM API
ACCESSIBIL ITY API
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 27
• Complex in-browser behaviours• Will fail for some users
• Custom UI components• Often not fully accessible
This ‘toy’ language - Javascript
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 30
Client Server architecture
Browser HTTP Web Site
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 31
• Standard behaviours (eg W3C)
• Server provides static web page
• Browser / page may provide some modification
• Standard controls
• Supports a wide range of devices / browsers / AT
Web as platform Ubiqutous web
Traditional Web
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 32
• Mostly just works
• Needs some attention to detail• Eg. Alt attrib for images
• Improve AT user experience with ARIA
• Standard controls have good accessibility• Eg. full keyboard access
• Solid support by AT vendors
Accessibility
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 33
• Complex non standard behaviours
• Server provides data or UI snippets at any time
• Code creates UI on the fly
• Highly customised UI and controls
• Required latest browsers / AT
Browser as Platform
“Ooh shiny” Web
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 34
• Often not accessible
• Requires enlightened developer attention• Better to use accessible libraries / framewoks
• Must provide AT user experience with ARIA
Accessibility
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 35
Example: BBC iPlayer
http://www.bbc.co.uk/iplayer
W3C WAI Tutorial for carouselshttp://www.w3.org/WAI/tutorials/carousels/
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 37
• Browse to http://www.easychirp.com
• Explore – notice is traditional web with links, some styled• Dark theme option in footer
• Open F12 browser tools and select network
• Notice when click on a link you see a request/response
Hands on – EasyChirp.com
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 38
• Sign in (or pair with someone with a twitter account)
• Click on „Write Tweet‘ and notice no new network activity
• The section is opened with javascript intercepting the click
• We can assume it is accessible
Hands on – EasyChirp.com
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 40
• Open ?:\Modules\Module2-AccessibleWeb\ SteveLee_WebAccessibility\SteveLee-AsTeRICS.zip\ SteveLee-AsTeRICS\
• Install NVDA_2015.2exe• Use CapsLock key• Exit NVDA with CapsLock + Q
• Copy gpii\ to C:\Program Files (x86)\
• Copy to Desktop• aViewer\• DisclosureButton\• GPIIdemo\
Software setup
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 41
• Open file: DisclosureButton.html • let scripts run in IE
• We show/hide with css display: based on data-expanded
• We also change the icon using the same
• The icon is pure eyecandy and follows data-expanded
Notes
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 42
<div id="example"> <button id="button" data-expanded="false">Foo <span id="icon"> </button>
<div id="content" data-hidden="true"> <p>Lorem ipsum dolar sit amet...</p> </div> </div>
HTML
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 43
div[data-hidden="true"] { display: none;}
div[data-hidden="false"]{ display: block; ….}
CSS
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 44
if(…("data-hidden") == "true") { content.setAttribute("data-hidden", "false"); button.setAttribute("data-expanded", "true"); } else { content.setAttribute("data-hidden", "true"); button.setAttribute("data-expanded", "false"); }
Javascript
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 45
• Use NVDA to explore as described.
• Try with content shown and hidden
• Exit NVDA
AT user experience
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 46
• Run the Aviewer tool as described.
• Explore the button and content when open and closed
• Notice there is no clear link between the button and text
Accessibility API
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 47
• The button has good accessibility for free
• NVDA correctly ignores the content when it is hidden
• This is because screen readers ignore display:none
• However the user doesn‘t know the content has changed
• There is no relationship between the button and content
Notes on accessibility
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 48
We can do better with just a little ARIA
• Change data-hidden to aria-hidden
• Change data-expanded to aria-expanded
• These are then passed on to the AT
• Add aria-hidden=„true“ to the icon span to hide it from AT
• Add aria_controls to the button so AT knows the relationship
Improvement
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 49
• Now NVDA announces expansion and collapse
• The content is better represented to AT
Outcome
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 51
• Reach as many people as possible
• Give the best possible User experience (UX) to all
• Support as many devices as possible• Varying capabilities
• Different screen sizes
• Support varying user access preferences
Accessibility with a small ‘a’
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 52
• Layout reflows to different screen sizes (and zoom)
• Resizable images (eg SVG)
• Change structure at size „break-points“• Main navigation: hamburger -> horizontal buttons
• Pretty much mainstream now• http://www.worldwildlife.org/
Responsive design
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 53
• Build up from minimum usable experience
• Add successive layers of enhancement when available
• Add bling when browser supports required features
• HTML -> CSS -> Javascript
Progressive Enhancement
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 54
• Reliance on Javascript in browser means no PE• But PE is not just about javascript
• Need to reduce delays before seeing UI
• No SEO
• Eg. jQueryMobile uses mobile-first PE
• https://mobile.greyhound.com
• PE is back with Javascript on the server• Send HTML page and then use same JS on client
PE in the wild
© 2015 Steve Lee with parts © 2013/14 FH Technikum Wien 61
• Standard controls – baked in a11y
• Custom UI elements – need a11y work
• ARIA enhances AT user experience
• PE and responsive design also enhance experience
Take home