Accessible Design. Raj Lal. Nokia Inc.

Transcription

1 Accessible Design Raj Lal Nokia Inc.

2 Agenda About Target Users Color & Text How Access. Web Works Website

3 About Accessibility Nokia Internal Use Only

4 Accessibility is about making things Easy to Use by Everyone

5 About Accessible = Clear Accessible = Usable Accessible = Unobtrusive Accessible = Multiple Ways to Interact

6 Who are the Users? Nokia Internal Use Only

7 User with special needs Hearing Mobility Cognitive Visual

8

9 Not so Tech Savvy users Parents Seniors Citizens Low literacy level Using Old Computers/ Browsers Limited Bandwidth

10

11 Tech Savvy users Prefer Keyboard only Temporary Disabled Mobile User, Tablets, e-readers In extenuating circumstances - Limited attention, sound, light

12

13 Users Tech Savvy Users Disabled Not so Tech-Savvy

14 Users = All of Us 20% of user 80% of Time 80% of the user 20% of the Time

15 Accessible Color & Text Nokia Internal Use Only

16 Color Blue-Green Green Yellow Orange Light Blue Red Dark Violet Nokia Internal Use Only Purple

17 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

18 Visual Accessibility Accessible Not Accessible

19 3 Rules for Visual Accessibility Nokia Internal Use Only

20 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

21 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

22 How Accessible Web Works? Nokia Internal Use Only

23 3 Elements of Accessible Web Assistive Technology(AT) ARIA & Accessibility API W3C s POUR Principle

24 1. Assistive Technology Nokia Internal Use Only

25 Assistive Technology Users Visually Impaired Blind Cognitive, Learning Disability Deaf Hearing Impaired Mobility, Physically handicapped

26 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

27 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

28 2. ARIA & Accessibility APIs Nokia Internal Use Only

29 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

30 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

31 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

32 ARIA Roles Landmark Roles Where Am I Structural Roles What s This Interface Widget Roles

33 ARIA Roles Role type Role name Role name Landmark roles application banner complementary contentinfo form main navigation search

34 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

35 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

36 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

37 ARIA States Dynamic Properties Global States Widget States

38 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

39 ARIA Properties Relatively Static Properties

40 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

41 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

42 3. W3C s POUR Principle Nokia Internal Use Only

43 The POUR Principal Perceivable Operable Understanda ble Robust

44 Perceivable Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language

45 Operable Function accessible from keyboard alone No auto refresh, allow time based contents Proper use of Headings & Anchors Joysticks, Voice recognition or audio feedback

46 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

47 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

48 Developing an Accessible Website using HTML5

49 Accessible Website Progressive Enhancement with ARIA Developing an Accessible Website - Homepage - About Page - Contact Form

50 Progressive Enhancement Good Design Is Unobtrusive - Dieter Rams

51 Progressive Enhancement HTML HTML CSS HTML CSS JavaScript

52 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

53 Accessible Website with HTML5 Home Contact About

54 Accessible HTML5 Home page <header role="banner"> <nav role="navigation"> <section role= main > <footer role= contentinfo > HTML5 Accessible HTML5

55 Accessible HTML5 Contact Form Nokia Internal Use Only

56 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= , url, text Use fieldset and legend to group form elements

57 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

58 Accessible About Page Accessible Image Accessible Text and Links Accessible Media

59 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

60 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

61 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

62 Reference W3C ARIA Accessible Design Dieter Rams 10 good design Principals

63 thank you Raj irajlal Nokia Inc. Nokia Internal Use Only