CSI:WP - Dem Windows Phone auf der Spur, Internetspecial: Windows Phone 8.1 Vorschau
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal
-
Upload
raj-lal -
Category
Technology
-
view
5.617 -
download
2
description
Transcript of Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal
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