Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal...

Nokia Internal Use Only Nokia Internal Use Only

Accessible

Design

Raj Lal

Nokia Inc.

Agenda

Target Users

Color & Text

How Access.

Web Works

Website

About Accessibility

Accessibility is about making things

Easy to Use by Everyone

Accessible = Clear

Accessible = Usable

Accessible = Unobtrusive

Accessible = Multiple Ways to Interact

Who are the Users ?

User with special needs

Hearing

Cognitive

Mobility

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

Disabled

Not so Tech-Savvy

Tech Savvy Users

Users = All of Us

• 20% of user 80% of Time

• 80% of the user 20% of the Time

Accessible Color & Text

Orange

Yellow Green

Blue-Green

Purple Violet

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

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 ?

3 Elements of Accessible Web

• Assistive Technology(AT)

• ARIA & Accessibility API

• W3C’s POUR Principle

1. Assistive Technology

Assistive Technology Users

• Visually Impaired

• Blind

• Cognitive, Learning Disability

• Deaf

• Hearing Impaired

• Mobility, Physically handicapped

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

Software User

Text Enlarging sw Visual, Cognitive

Text/Audio Browser Visual, Blind

Screen Readers Visual, Blind, Cognitive

Braille sw Translator Blind

Speech Recognition Visual, Blind, Cognitive, Mobility

Virtual Keyboards Mobility

Captioning Text Cognitive, Hearing, Deaf

Show Sound Cognitive, Hearing, Deaf

Assistive Technology SW

2. ARIA & Accessibility APIs

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

Assistive Technology

Platform Accessibility

States Roles Properties

VoiceOver Windows Eye

Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA

• 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

application

banner

complementary

contentinfo

navigation

search

ARIA Roles

Structural

article

columnheader

definition

directory

document

heading

listitem

presentation

region

rowheader

separator

toolbar

ARIA Roles

Interface

Widget Roles

standalone widget

alertdialog

button

checkbox

dialog

gridcell

spinbutton

status

tabpanel

textbox

tooltip

treeitem

composite

ARIA Roles

Interface

Widget Roles

marquee

menuitem

menuitemcheckbox

menuitemradio

option

progressbar

scrollbar

slider

widget

combobox

listbox

menubar

radiogroup

tablist

Tree / treegrid

ARIA States

• Dynamic Properties

• Global States

• Widget States

ARIA State

Attribute type Global Widget

ARIA states aria-busy aria-disabled aria-grabbed aria-hidden aria-invalid

listitem

presentation

region

rowheader

separator

toolbar

ARIA Properties

• Relatively Static Properties

ARIA Properties

Properties

aria-atomic

aria-controls

aria-describedby

aria-dropeffect

aria-flowto

aria-haspopup

aria-label

aria-labelledby

autocomplete

aria-haspopup

aria-label

aria-level

aria-multiline

multiselectable

ARIA Properties

Properties

aria-live

aria-owns

aria-relevant

aria-orientation

aria-readonly

aria-required

aria-sort

aria-valuemax

aria-valuemin

aria-valuenow

aria-valuetext

3. W3C’s POUR Principle

The POUR Principal

Perceivable

Operable

Understandable

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

HTML CSS

HTML CSS JavaScript

• 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

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

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

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

Nokia Inc.

@ iRajLal

Accessible Design - etouches · PDF fileAccessible Design Raj Lal Nokia Inc. Nokia Internal...

Documents

etouches Brochure

etouches and Silverpop: Offsetting the Engagement Valley

14 Most Loved Features of etouches

Gebruikershandleiding Nokia E72 - Belsimpelhandleiding.belsimpel.nl/nokia-e72-metal-grey...Nokia, Nokia Connecting People, Eseries, Nokia E72 en Navi zijn handelsmerken of gedeponeerde

[A2DP] [AVRCP]...Nokia 2660 ———— — Nokia 2730 classic — Nokia 3109 classic — — Nokia 3110 classic — — Nokia 3120 classic — Nokia 3500 classic — — Nokia 5130

Gebruikershandleiding Nokia 2330 classichandleiding.belsimpel.nl/Nokia-2230-Black-handleiding-nederlands.pdf · Gebruikershandleiding Nokia 2330 classic Uitgave ... Nokia, Nokia Connecting

Etouches presentslarrypetcovic and how do your speakers score

Fielddrive for etouches

Новинки сервисов Nokia - Nokia Карты

User’s Guide for Nokia 7280 - nds2.webapps.microsoft.comnds2.webapps.microsoft.com/files/support/apac/phones/guides/Nokia… · User’s Guide for Nokia 7280. ... Nokia, Nokia Connecting

Nokia Platform Developmentsmuet.lecture.ub.ac.id/...Nokia-Developer-Platform... · Nokia X7 Nokia E6N N8, C7, Nokia E7, E6, C6-01, X7, Oro Nokia 500 Nokia 700 701 600 Symbian Anna

The Future X Network - etouches · 1 © 2017 Nokia The Future X Network (and its critical role in new value creation) Marcus Weldon President of Bell Labs & CTO of Nokia

Navicore Personal - Marinea erikoisliike ja verkkokauppa · Nokia 3650 Nokia 3660 Nokia N-Gage Nokia N-Gage QD Nokia 6260 Nokia 6600 Nokia 6620 Nokia 6630 Nokia 7610 Siemens SX1 Sendo

etouches Presents "Managing Your Conference Effectively & Efficiently"

List of Qi... · mPhone mPhone 8 NEC NEC Medias NEC Medias Noa Noa FIO Pro Nokia pp N-OID X N-04E Nokia Nokia Nokia Nokia Nokia Nokia Nokia Nokia Nokia Lumia 1520 Lumia 735 Lumia

Etouches presentation

PK301+ · 3.5mm Phone Connection Kit – compatible with Nokia and Samsung mobile phones Nokia 5800 XpressMusic Nokia C6-01 Nokia C7 Smartphone Nokia E6 Smartphone Nokia E7 Smartphone

NOKIA 1998 - UAB Barcelona · Nokia comprises three business groups: Nokia Telecommunications, Nokia Mobile Phones and Nokia Communications Products. In addition, Nokia includes a

User Guide for Nokia 2600 - Specialty Answering Serviceringtones.specialtyansweringservice.net/wp.../nokia... · Nokia tune is a sound mark of Nokia Corporation. Nokia operates a

Buku Petunjuk Nokia 6255 - nds2.webapps.microsoft.comnds2.webapps.microsoft.com/files/support/apac/phones/guides/Nokia... · Nokia, Nokia Connecting People, Nokia 6255, Pop-Port dan