Getting Down and Dirty with Accessibility and Usability

Karen Mardahl2 October 2012

#TCUK12

Today’s workshop

1. ToolkitDolev at http://commons.wikimedia.org/wiki/File:Carpentry_hand_tools.jpg CC-BY-SA-3.0

2. Application

3. Enlightenmenthttp://www.flickr.com/photos/kmardahl/4237843259/ CC BY-NC-SA 3.0

BAD Demo

• The Before-and-After Demohttp://www.w3.org/WAI/demos/bad/

Good examples of accessible websites

• http://terrillthompson.com/blog/229

• http://www.accessiweb.org/index.php/galerie.html

<alt>

• http://dev.w3.org/html5/alt-techniques/

• http://webaim.org/techniques/alttext/

• http://www.joedolson.com/articles/2012/06/the-case-missing-alt-attribute/

• Remember <alt=””>

<title>

• http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/

<longdesc>

• Just do it, but...

• http://webaim.org/techniques/images/longdesc

• Tables...

Headings and Structure

• Logical!

• Skip to main content links (blind & keyboard users)

• Sequence and patterns (non-linear navigation - reading order)

• Style guides (for consistency)

• ARIA

Lists:<ol><ul><li>

& CSS styling

Keyboard-only access

• Do it with a keyboard

• http://webaim.org/techniques/keyboard/

• <tabindex>

Color

• Remember that color and color contrast and alternate indicators play together.

• Never use color as your only delimiter.

• http://www.snook.ca/technical/colour_contrast/colour.html

Labels

Source of images: http://www.youtube.com/watch?v=T5OClvFL8I8

Link text

“Click here”“Read more”

• http://www.designtoread.com/

• US: Center for Plain Language http://centerforplainlanguage.org/

• US: Plain Language in the Federal government http://www.plainlanguage.gov/http://www.plainlanguage.gov/howto/quickreference/checklist.cfm

• UK: Plain Language Commission http://www.clearest.co.uk/

Plain Language

• http://ec.europa.eu/ipg/index_en.htm – leads to info about accessibility

• http://ec.europa.eu/translation/index_en.htm – go to the link for “How to write clearly”. It takes you to the EU bookshop

• http://bookshop.europa.eu/is-bin/INTERSHOP.enfinity/WFS/EU-Bookshop-Site/en_GB/-/EUR/ViewPublication-Start?PublicationKey=HC3010536

“How to Write Clearly” in 23 languages

Text Size

• http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

• http://www.zeldman.com/

Tables

• http://webaim.org/techniques/tables/

• Screen readers read tables from left to right, from row to row.

• <summary>, <th>, <scope>

• How-to: http://dev.opera.com/articles/view/creating-accessible-data-tables/  &  http://isolani.co.uk/articles/structuredTables.html  (with a football pools example!)

Captioninghttp://www.slideshare.net/kmardahl/technical-communication-and-inclusion-5347819

Video• Keyboard-accessible YouTube controls: http://

simplyaccessible.com/article/keyboard-accessible-youtube-controls/

• JW Player:  http://wac.osu.edu/

• Easy YouTube Player: http://icant.co.uk/easy-youtube/docs/index.html

• Accessible Media Player: http://www.nomensa.com/services/accessibility-and-inclusive-design/accessible-media-player

• And no <autoplay>!

<autoplay=”autoplay”>

ARIA

• ARIA (application, banner, complementary, contentinfo, form, main, navigation, search)

• http://www.nomensa.com/blog/2010/wai-aria-document-landmark-roles/

• http://www.nomensa.com/blog/2010/screen-readers-and-aria-landmark-roles/

• http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/

• WAVE http://wave.webaim.org/

• Color Contrast and more https://addons.mozilla.org/da/firefox/addon/juicy-studio-accessibility-too/

• Fireeyes http://www.deque.com/products/worldspace-fireeyes/download-worldspace-fireeyes

• Functional Accessibility Evaluator http://fae.cita.uiuc.edu/about/

• Web Developer Extension http://chrispederick.com/work/web-developer/

• Web Accessibility Toolbar for IE http://www.paciellogroup.com/resources/wat-ie-about.html

• W3C WAI Tool List http://www.w3.org/WAI/RC/tools/complete

Testing and Evaluation

Screen reader testing

• Learn: http://www.iheni.com/screen-reader-testing/

• Plan: http://www.spotlessinteractive.com/articles/accessibility/screen-reader-test-plan.php

• More at http://webaxe.blogspot.dk/2011/04/learning-how-to-use-and-test-with.html

StandardsW3C WAI: http://www.w3.org/WAI/ Web Accessibility Code of Practice BS8878 (UK):http://www.access8878.com

• Perceivable

• Provide text alternatives for non-text content.

• Provide captions and other alternatives for multimedia.

• Create content that can be presented in different ways,

• including by assistive technologies, without losing meaning.

• Make it easier for users to see and hear content.

• Operable

• Make all functionality available from a keyboard.

• Give users enough time to read and use content.

• Do not use content that causes seizures.

• Help users navigate and find content.

• Understandable

• Make text readable and understandable.

• Make content appear and operate in predictable ways.

• Help users avoid and correct mistakes.

• Robust

• Maximize compatibility with current and future user tools.WC

AG

2 a

t a

glan

ce

WCAG 2.0

• Understanding WCAG 2.0: A guide to understanding and implementing Web Content Accessibility Guidelines 2.0http://www.w3.org/TR/UNDERSTANDING-WCAG20/

• How to Meet WCAG 2.0: A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques.http://www.w3.org/WAI/WCAG20/quickref/

Learn-more resources

• What is a screen reader? Article from 2005 so some product details are outdated. Read it for what it is and how it works.  http://www.nomensa.com/blog/2005/what-is-a-screen-reader/

• Just Ask: Integrating Accessibility Throughout Design: http://www.uiaccess.com/accessucd/ (+ print)

• Sign up for the discussion list at WebAIM http://webaim.org/community/

Learn-more resources• Opera Web Standards Curriculum in association with

Yahoo! Developer Network: http://www.opera.com/company/education/curriculum/

• Web Standards Project's InterACT (site/book) http://interact.webstandards.org/

• U of MN Newsletter: Typography, information architecture, usability, accessibility, maintained by @laura_carlson http://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html

• Accessibility for Web Writers series at http://www.4syllables.com.au/2010/09/accessibility-web-writers-part-1/

10 Principles

• Be equitable

• Be flexible

• Be simple and intuitive

• Be perceptible

• Be informative

• Be preventative

• Be tolerant

• Be effortless

• Be accommodating

• Be consistent

http://www.sandiwassmer.co.uk/resources/the-ten-principles-of-inclusive-web-design/

When universal design processes fail to include, consult with, and listen to the people we are actually designing for, we also fail to design effectively.

– Lisa Herrodhttp://scenariogirl.com/inclusive-design/the-social-model-of-disability

http

://w

ww

.flic

kr.c

om/p

hoto

s/ot

tom

an42

/502

6107

/

Thank you for listening!Questions?

@kmdk / @stcaccesshttp://www.mardahl.dkhttp://about.me/kmdk

EXTRA

Mobile

• Opera Mobile Emulator http://www.opera.com/developer/tools/mobile

• http://ready.mobi/ (older models)

User diversity

• Test with real people!

• http://www.uiaccess.com/accessucd/involve.html

• http://alistairduggin.co.uk/blog/using-personas-to-teach-accessibility/

I

Web

AIM.or

g

web

aim

.org

/res

ourc

es/d

esig

ners

thro

up.o

rg.u

k/in

fogr

aphi

c

Twitter+ Resources• @RogerJohansson + 456bereastreet.com

• @webaxe + webaxe.org

• @silviapfeiffer (all about <video>)

• @MarcoInEnglish / @MarcoZehe + marcozehe.de (Firefox)

• @jared_w_smith + WebAIM.org (with discussion list, too!)

• @iheni + iheni.com (mobile)

• @stevefaulkner + paciellogroup.com/blog (ARIA, HTML5)

• @dugboticus + alistairduggin.co.uk

• @AccessifyForum + accessifyforum.com

Coding resources

• Yahoo! accessibility code library: http://yaccessibilityblog.com/library/

• Accessibility topics at Web Standards Sherpa: http://webstandardssherpa.com/reviews/by-topic/accessibility

• Mozilla ARIA resources: https://developer.mozilla.org/en/ARIA