An A-Z of Accessibility

Tim BeadleIS Developer, IOP Publishing BarCamp Bristol12/13 October 2007

tim.beadle@iop.org, www.iop.org

<img

src=“http://example.com/image.gif”

width=“200”

height=“40”

alt=“Does the user care, or is

this just decoration?”

/>

alt text

Braille display

http://www.flickr.com/photos/cobalt/432163020/

“Guideline 2.2 of the Web Content Accessibility

Guidelines 1.0 requires that foreground and

background colour combinations provide

sufficient contrast when viewed by someone

having colour deficits, or when viewed on a

black and white screen. Two colours provide

good colour visibility if the brightness difference

and the colour difference between the two

colours are greater than a set range.”

Colour Contrast

http://juicystudio.com/services/colourcontrast.php

Deuteranopiahttp://colorfilter.wickline.org/

Elastic layout

http://www.flickr.com/photos/roger_g1/365989097/

http://www.flickr.com/photos/jess2712/285848050/

Fixed vs Liquid

http://www.flickr.com/photos/lightmatter/95598067/

The Gay Vegan,Joe Clark

http://www.flickr.com/photos/redux/20995455/

IBM Home Page Reader

“When using iframes, you should ensure that the

alternative content (the content between the

iframe tags) is useful. In most cases, you should

provide a link to the content that is presented

within the iframe so that the user can access it

directly. The iframe tag can be given the title

and longdesc attributes (though longdesc is not

yet supported) to provide additional descriptions

and details of the iframe contents.”

<iframe>

http://www.webaim.org/techniques/frames/#iframe

Keith, Jeremy

http://www.flickr.com/photos/goingtocalifornia/1544755898/

Text inputs, selects etc...

<label for=”username”>Username</label>

<input type=”text” id=”username” />

Checkboxes & radio buttons...

<label for=”allergy”>

<input type=”checkbox” id=”allergy” />

Do you have a nut allergy?

</label>

<label for=”everyone”>

Voiceover

Mac OS X

Organisations

Progressive Enhancement

Quality Assurance

Roger Johansson

http://www.flickr.com/photos/chrisjennings/169033140/

SEO & Accessibility

Text transcoders

http://www.bbc.co.uk/cgi-bin/education/betsie/parser.pl/www.bbc.co.uk/home/today/

User testing

Validation

World of pain...

W3C/WAI/WCAG

eXtremely fine balancing act!

YMMV

http://www.flickr.com/photos/stinkypeter/396706013/

Zealots