module 2-web-a11y-steve lee

The AsTeRICS Academy for cross-cultural education in Assistive Technology

Module 2: Web Accessibility Dynamic AUX, Custom controls, Progressive Enhancement

Steve Lee

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

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.“


• Driving car

• Bright light

• Noisey environment

• Under stress

Situational disability


• Adjustments to UI or additions to content • High contrast theme

• Easy read

• Audio description

• Subtitles

Accessibility


• Transformation of UI• Screen readers and Braille displays

• Magnifier

• Grid systems

• Gaze control

Assistive technology


• Physical AT

• OS Universal Access

• Browser Options

• Web site options

• Web AT

Adaptations to Web access

17

“One size fits One”

GPII


How does AT access Web content?

Accessibility Stack

ASSISTIVE TECHNOLOGY

WEB APP IN BROWSER

ACCESSIBIL ITY API


• Expose UI to AT

• AT can • Navigate

• Observe

• Activate

Platform Accessibility APIs


• Describes UI in terms of• Roles

• States

• Properties

Platform Accessibility APIs


<input type="checkbox" name="option1" value="Cheese“…>

Ö

<input type="checkbox" name="option1" value="Cheese“ checked …>

Role = checkbox Properties State = unchecked

State = checked

Standard controls


<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


Web access to PlatformCapabilities


• 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


• Complex in-browser behaviours• Will fail for some users

• Custom UI components• Often not fully accessible

This ‘toy’ language - Javascript


Web Architecture


Client Server architecture

Browser HTTP Web Site


• 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


• 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


• 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


• Often not accessible

• Requires enlightened developer attention• Better to use accessible libraries / framewoks

• Must provide AT user experience with ARIA

Accessibility


Example: BBC iPlayer

http://www.bbc.co.uk/iplayer

W3C WAI Tutorial for carouselshttp://www.w3.org/WAI/tutorials/carousels/



http://www.w3.org/WAI/tutorials/carousels/

http://www.w3.org/WAI/tutorials/carousels/


Hands on

EasyChirp


• 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

http://www.easychirp.com/


• 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


Hands on

Disclosure button


• 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


• 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


<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


div[data-hidden="true"] { display: none;}

div[data-hidden="false"]{ display: block; ….}

CSS


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


• Use NVDA to explore as described.

• Try with content shown and hidden

• Exit NVDA

AT user experience


• 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


• 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


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


• Now NVDA announces expansion and collapse

• The content is better represented to AT

Outcome


• 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’


• 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

http://www.worldwildlife.org/




• 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


• 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

https://mobile.greyhound.com/

https://mobile.greyhound.com/


It boils down to…


Plethora of devices


Plethora of user preferences


• 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


AUXAccessible

User eXperience

module 2-web-a11y-steve lee

Software

fh technikum wien

web web architecture

access web content

web accessibility dynamic

web apps handson

browser accessibility

static web page browser

platform api accessibility