Accessible Design Raj Lal Nokia Inc.
Agenda About Target Users Color & Text How Access. Web Works Website
About Accessibility Nokia Internal Use Only
Accessibility is about making things Easy to Use by Everyone
About Accessible = Clear Accessible = Usable Accessible = Unobtrusive Accessible = Multiple Ways to Interact
Who are the Users? Nokia Internal Use Only
User with special needs Hearing Mobility Cognitive Visual
Not so Tech Savvy users Parents Seniors Citizens Low literacy level Using Old Computers/ Browsers Limited Bandwidth
Tech Savvy users Prefer Keyboard only Temporary Disabled Mobile User, Tablets, e-readers In extenuating circumstances - Limited attention, sound, light
Users Tech Savvy Users Disabled Not so Tech-Savvy
Users = All of Us 20% of user 80% of Time 80% of the user 20% of the Time
Accessible Color & Text Nokia Internal Use Only
Color Blue-Green Green Yellow Orange Light Blue Red Dark Violet Nokia Internal Use Only Purple
3 Rules for Visual Accessibility 1. Exaggerate lightness differences between foreground and background colors 2. Choose dark colors with hues from the bottom half against light colors from top 3. Avoid contrasting hues from adjacent parts of the hue circle
Visual Accessibility Accessible Not Accessible
3 Rules for Visual Accessibility Nokia Internal Use Only
8 Guidelines for Accessible Text Highest Possible Contrast for main content Use Color contrasts for Title or highlighted text Use large types, minimum 16 points Minimum 25% Spacing between lines
8 Guidelines for Accessible Text Use Regular Serif/San Serif fonts Cursive, decorative fonts, italic case, use sparingly Use San Serif fonts for small text Avoid close letter spacing
How Accessible Web Works? Nokia Internal Use Only
3 Elements of Accessible Web Assistive Technology(AT) ARIA & Accessibility API W3C s POUR Principle
1. Assistive Technology Nokia Internal Use Only
Assistive Technology Users Visually Impaired Blind Cognitive, Learning Disability Deaf Hearing Impaired Mobility, Physically handicapped
Assistive Technology Hardware User Large Monitors Visual, Cognitive, Mobility Large Print Keyboards Visual, Cognitive, Mobility Anti-glare filter Visual, Cognitive, Mobility Braille Keyboards Blind Refreshable Braille display Blind Color/ Brightness keys Visual, Cognitive Trackballs / D-Pads Mobility Headphones Cognitive, Hearing
Assistive Technology SW Software Text Enlarging sw Text/Audio Browser Screen Readers Braille sw Translator Speech Recognition Virtual Keyboards Captioning Text Show Sound User Visual, Cognitive Visual, Blind Visual, Blind, Cognitive Blind Visual, Blind, Cognitive, Mobility Mobility Cognitive, Hearing, Deaf Cognitive, Hearing, Deaf
2. ARIA & Accessibility APIs Nokia Internal Use Only
Accessible Rich Internet Applications ARIA helps Assistive Technology(AT) ARIA Make Web content Accessible to AT ARIA uses HTML and CSS Tags ARIA is a W3C Initiative & part of HTML5 Most of ARIA is embedded in JS libraries
How ARIA Works VoiceOver Windows Eye Assistive Technology Roles States Properties ARIA Platform Accessibility APIs Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA Nokia Internal Use Only HTML
ARIA Uses a set of Roles, States, and Properties Roles, States & Properties assigned to HTML Exposes web page to Accessibility APIs AT uses Accessibility APIs to access Webpage
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 application banner complementary contentinfo form main navigation search
ARIA Roles Role type Role name Role name Structural roles article columnheader definition directory document group heading img list listitem math note presentation region row rowheader separator toolbar
ARIA Roles Role type Role name Role name Interface Widget Roles standalone widget alert alertdialog button checkbox dialog gridcell link log spinbutton status tab tabpanel textbox timer tooltip treeitem composite
ARIA Roles Role type Role name Role name Interface Widget Roles marquee menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar slider widget combobox grid listbox menu menubar radiogroup tablist Tree / treegrid
ARIA States Dynamic Properties Global States Widget States
ARIA State Attribute type Global ARIA states aria-busy aria-disabled aria-grabbed aria-hidden aria-invalid Widget listitem math note presentation region row rowheader separator toolbar
ARIA Properties Relatively Static Properties
ARIA Properties Attribute type Global ARIA aria-atomic Properties aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labelledby Widget ariaautocomplete aria-haspopup aria-label aria-level aria-multiline ariamultiselectable
ARIA Properties Attribute type Global ARIA aria-live Properties aria-owns aria-relevant Widget aria-orientation aria-readonly aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext
3. W3C s POUR Principle Nokia Internal Use Only
The POUR Principal Perceivable Operable Understanda ble Robust
Perceivable Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language
Operable Function accessible from keyboard alone No auto refresh, allow time based contents Proper use of Headings & Anchors Joysticks, Voice recognition or audio feedback
Understandable High color contrast 4.5:1 Use San serif fonts & allow resize Avoid auto-play of media, animation Avoid auto refresh, or flashy graphics Multiple visual cues, icons, audio for feedback
Robust Broken HTML tag can cause difficulty with AT Follow HTML standard specifications Syntactically correct HTML & validate page Proper lang attributes in the markup Use abbr tag with proper usage
Developing an Accessible Website using HTML5
Accessible Website Progressive Enhancement with ARIA Developing an Accessible Website - Homepage - About Page - Contact Form
Progressive Enhancement Good Design Is Unobtrusive - Dieter Rams
Progressive Enhancement HTML HTML CSS HTML CSS JavaScript
Progressive Enhancement Design in a Progressive enhancement way All content available by HTML alone Use semantically structured HTML All presentation elements in the style sheet Load JavaScript after the page is loaded
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 Nokia Internal Use Only
Accessible HTML5 Form HTML5 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
Accessible HTML5 Form ARIA 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
Accessible About Page Accessible Image Accessible Text and Links Accessible Media
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 of 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
Accessible Media Media player features navigable by keyboard Closed captions with timed text files Switchable sign translation video Transcripts, caption and sign language SVG animation is more accessible than Canvas
Reference W3C ARIA http://dev.w3.org/html5/markup/aria/aria.html Accessible Design http://www.lighthouse.org/accessibility/design Dieter Rams 10 good design Principals http://en.wikipedia.org/wiki/dieter_rams
thank you Raj Lal @ irajlal Nokia Inc. Nokia Internal Use Only