Accessible Mobile Apps and Web pagesAccessibility on Windows Phone

Rajesh LalSenior Engineer

Agenda

MobileAccessibility

Assistive Technology (AT) Users

How AT Works

Accessible App & Website

Mobile Accessibility

Easy to use at all circumstances and by everyone

Mobile Accessibility

• Limited light• Noisy places• Low connectivity• User is Mobile• Temporary Disabled

Mobile Accessibility: Circumstances

• User with Special Needs• Parents • Senior Citizens• Low Literacy Level

Mobile Accessibility: Everyone

Assistive Technology

4 Key Areas

Hearing

Mobility

Cognitive

Visual

Users of Assistive Technology

• Visually Impaired• Blind• Cognitive, Learning Disability• Deaf• Hearing Impaired• Mobility, Physically handicapped

Assistive Technology MobileHardware/Software UserScreen Readers Visual, Blind, Cognitive

Text Magnifier Visual, Cognitive

Color/ Brightness keys Visual, Cognitive

Headphones Cognitive, Hearing

Text/Audio Browser Visual, Blind

Speech Recognition Visual, Blind, Cognitive, Mobility

Virtual Keyboards Mobility

Captioning Text Cognitive, Hearing, Deaf

How Assistive Technology Works

Assistive Technology

Accessibility APIs

How Assistive Technology Works

APP / WEB

Accessible Apps

Accessible Apps

1. UI Automation 2. Color Contrast 3. Media, Form and Content

1. UI Automation

UI Automation

Accessibility API to help Assistive Technology interact with UI elements of an application

• Automation Properties• Automation Peer

UI Automation

Assistive Technology

Platform Accessibility

APIs

XAML

Automation Properties/Peers

Screen Reader

Microsoft UI Automation

AccessKeyName HelpText

UI Automation

UI Automation Tree

Automation Properties

Automation Properties

These property values are set as attached properties.

For getting or setting the value of instance-level values of automation properties

Automation Properties

Automation PropertiesName Description

AcceleratorKey Keyboard Shortcut “CTRL+C+

AccessKey Accessible Key “ALT+F”

AutomationId Unique identifier to UI automation

HelpText Help description for the element (like tooltip)

IsRequiredForForm Element required on a form

ItemStatus Status of an item in an element

ItemType Type of the specified element (file/folder/etc)

LabeledBy text label for the element

Name Automation name of the element.

Automation Peer

2 methods to raise a change notification

AutomationPeer.RaisePropertyChangedEvent method to signal property changes

AutomationPeer.RaiseAutomationEvent method to signal other types of automation changes

2. Color Contrast

Accessible Apps: Color Contrast

Use 5:1 ratio for Foreground to Background color contrast

3. Accessible Forms, Media, Content

Accessible Apps: Media, Forms, Content

• Use TabIndex, IsTabStop for Tab Order in Forms

• Use LabeledBy for Form Fields

• Use IsRequiredForForm property

• Closed Caption, sub-titles For Media

• Use Full words in content (LiveHelp != Live Help)

Accessible Web Pages

1. ARIA2. HOW ARIA Works3. Using ARIA4. Developing Accessible Mobile Website

Accessible Web Pages

1. ARIA

• ARIA is a W3C Initiative & part of HTML5

• ARIA helps Assistive Technology(AT)

• ARIA Make Web content Accessible to AT

• ARIA uses HTML and CSS Tags

• Most of ARIA is embedded in JS libraries

ARIA (Accessible Rich Internet Application)

2. How ARIA Works

How ARIA Works

Assistive Technology

Platform Accessibility

APIs

StatesRoles Properties

HTML

ARIA

Windows Eye

Windows MSAAUI Automation

3. Using ARIA

ARIA

• Set of Roles, States, and Properties

• Assigned to HTML

• Exposes web page to Accessibility APIs

ARIA Roles

• Landmark Roles – Where Am I

• Structural Roles – What’s This

• Interface Widget Roles

ARIA Roles

Role type Role name Role name

Landmark roles

applicationbannercomplementarycontentinfo

formmainnavigationsearch

ARIA Roles

Role type Role name Role nameStructural roles

articlecolumnheaderdefinitiondirectorydocumentgroupheadingimglist

listitemmathnotepresentationregionrowrowheaderseparatortoolbar

ARIA Roles

Role type Role name Role nameInterface Widget Roles

standalone widgetalertalertdialogbuttoncheckboxdialoggridcelllinklog

spinbuttonstatustabtabpaneltextboxtimertooltiptreeitem composite

ARIA Roles

Role type Role name Role nameInterface Widget Roles

marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioscrollbarslider

widgetcomboboxgridlistboxmenumenubarradiogrouptablistTree / treegrid

ARIA States

• Dynamic Properties

• Global States

• Widget States

ARIA State

Attribute type Global WidgetARIA states aria-busy

aria-disabledaria-grabbedaria-hiddenaria-invalid

listitemmathnotepresentationregionrowrowheaderseparatortoolbar

ARIA Properties

• Relatively Static Properties

ARIA Properties

Attribute type Global WidgetARIA Properties

aria-atomicaria-controlsaria-describedbyaria-dropeffectaria-flowtoaria-haspopuparia-labelaria-labelledby

aria-autocompletearia-haspopuparia-labelaria-levelaria-multilinearia-multiselectable

ARIA Properties

Attribute type Global WidgetARIA Properties

aria-livearia-ownsaria-relevant

aria-orientationaria-readonlyaria-requiredaria-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetext

Accessible Website with HTML5

Home

Contact About

Accessible HTML5 Home page

<header role="banner"><nav role="navigation"><section role=“main”><footer role=“contentinfo”>…

HTML5 Accessible HTML5

Accessible HTML5 Contact Form

Accessible HTML5 Form

• Use label tag for describing form elements

• Associate labels with controls using for attribute

• Create a logical tab order with tabindex

• Use placeholder, type=email, url, text

• Use fieldset and legend to group form elements

HTML5

Accessible HTML5 Form

• Use role=main and keep one form in one page

• Use aria-required for required fields

• Use aria-live=assertive in the form for validation

• Use aria-describedby for adding help to fields

ARIA

Accessible About Page

• Accessible Image

• Accessible Text and Links

Accessible Image

Use alt attribute for alternative text for the image

Use title attribute for tooltip

Use role=presentation to ignore the image

Use blank alt for decorative images

Use meaningful name for src=meaningful.png

Accessible Text and Links

• Font size should always be relative , never fixed

• Links should be underlined and visited different color

• Use Anchor links, easily navigable by screen readers

• Meaningful link text , avoid using “click here” or “more”

• Color in CSS with foreground & background color

• Simple and Machine readable words like “Home page”

Reference

• Automation Properties http://msdn.microsoft.com/en-us/library/ms606856(v=vs.95).aspx

• Automation Peerhttp://msdn.microsoft.com/en-us/library/system.windows.automation.peers.automationpeer(v=vs.95).aspx

• W3C ARIA http://dev.w3.org/html5/markup/aria/aria.html

Thank YouRaj Lal

rajesh.lal@nokia.com

Twitter @ iRajLal