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

About

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

About


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


Users = All of Us

• 20% of user 80% of Time

• 80% of the user 20% of the Time


Accessible Color & Text


Color

Dark

Light

Orange

Yellow Green

Blue-Green

Red

Purple Violet

Blue


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

APIs

States Roles Properties

HTML

ARIA

VoiceOver Windows Eye

Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA


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


Structural

roles

article

columnheader

definition

directory

document

group

heading

img

list

listitem

math

note

presentation

region

row

rowheader

separator

toolbar


ARIA Roles


Interface

Widget Roles

standalone widget

alert

alertdialog

button

checkbox

dialog

gridcell

link

log

spinbutton

status

tab

tabpanel

textbox

timer

tooltip

treeitem

composite


ARIA Roles


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 Widget

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

listitem

math

note

presentation

region

row

rowheader

separator

toolbar


ARIA Properties

• Relatively Static Properties


ARIA Properties


ARIA

Properties

aria-atomic

aria-controls

aria-describedby

aria-dropeffect

aria-flowto

aria-haspopup

aria-label

aria-labelledby

aria-

autocomplete

aria-haspopup

aria-label

aria-level

aria-multiline

aria-

multiselectable


ARIA Properties


ARIA

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

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

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 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

Date post:	30-Mar-2018
Category:	Documents
Upload:	votram
View:	216 times
Download:	1 times

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

Documents