Segment 2: Web Standards & Accessibility

Ted Drake, Yahoo Accessibility LabSlideshare.net/7mary4

What does an Accessible Site Designed with Web Standards

Look Like?

Topics

• Features of an accessible site designed with Web Standards?

• Beyond the blind• When web standards is not enough• Mobile Users

Is your standards-based web site accessible?

Maybe

Web Standards Foundation

• Solid• Versatile• Semantic Data• Device Independent

Static

Dynamic

New Visual & Auditory Concerns

• Expandable content• Editable text• Drag and Drop• Gestures• Closed Captions• Regularly updated content• Dialogue boxes• Keyboard focus control

Drag and Drop

Provide non-mouse alternative

Expandable Content

• Button for expand/contract• Place focus into expanded area• Tell user the container can be

expanded

Video Accessibility

Live Regions

• Define regions of the page that update automatically.

• Should the screen reader user get a notification every time it changes?

Cognitive and Physical Concerns

• Memory loss• Different cognitive levels of understanding

content.• What helps some will distract others• Dyslexia• Keyboard navigation• Voice recognition

Voice Recognition

• Dragon Naturally Speaking• Images with text must have matching alt text.• Don’t autofocus form elements• Avoid multiple links to different URLs with the

same text.

Keyboard Navigation

• Avoid long sentences• Avoid large blocks of text• Avoid justified alignment• Give the user white space

• Dyslexie: font designed for dyslexia

Mobile Browsers and Accessibility

New DeviceSame Accessibility Concerns

iPhone and iPad• Full featured VoiceOver• Safari browser supports HTML5, CSS3,

JavaScript• Custom gestures will

conflict with VoiceOver.

• No Flash support

Android, Blackberry, Nokia

• Screen reader is available, but not as sophisticated as VoiceOver

• Use clean, structural markup for better performance

• Android’s browser is full featured. Blackberry and Nokia are not as robust.

Questions?

Question mark in EsbjergSome rights reserved by alexanderdrachmann