The Internet for All

Web Standards HTML is designed for universal access “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, director of the Word Wide Web Consortium and inventor of the World Wide Web. Content “…is really easy to make accessible – but we keep getting too clever and breaking it “ Some bloke from Access1in5

Accessibility – who benefits? Sensory impairment – Deaf, hard of hearing, blind Physical impairment – neurological, paralysis, amputee Cognitive impairment – dyslexia, intellectual Everyone – Universal design encompasses usability We all get old, break a bone, OOS

Understandable – know why/what Robust – multiple platforms Design Principles Perceivable – find it Operable – use it Understandable – know why/what Robust – multiple platforms

What’s Accessible Technology? Screenreaders Magnifiers Colour change Alternate keyboards Alternate pointing device Alternate formats – not AT per se but braille, large-print, plain Language, translations Copyright RNZFB 2013 CC, BY, NC,SA

Contrast, font and size And this is better still  This is too light – although the second part is better Better but still not good This is much better Hard to see? Much easier Probably not the easiest font Good old sans serif Arial STILL NOT SO GOOD – CAPS ARE HARD TO READ And this is better still 

Use of Multiple Sensory Characteristics Use of colour, or sound, alone to convey meaning. John Smith or John Smith FAIL Fred Jones Fred Jones PASS

Use of Multiple Sensory Characteristics Transcripts. Audio Description Text in Graphics ALT text

ALT text What information does the image convey? Purely decorative? Something irrelevant? Something that’s in the text? Something new? https://www.slideshare.net/whitneyq/writing-great-alt-text-38937551 Whitney Quesenbery https://www.w3.org/WAI/eval/preliminary#images

Example All the words – especially in a logo don’t forget the te reo. You don’t need to identify it as a button or link.

Example W3C says “If the image is sufficiently described in the text — for example, a simple diagram illustrating what's written in the web page text — it can have brief alt text such as "Diagram of work flow as describe above."

Example Decorative or important? Your call – but I’d say all the information in the pic is also in the text

Example Believe it or not the important thing isn’t that these are cute dogs! One way to help think about appropriate alt text is: if you were helping someone read and interact with the web page and they cannot see it, what would you say about the image?

Example This time – it’s just a cute dog. W3C again – “Alternative text depends on context. For example, for an image of a dog on a kennel club website, the alt text might include the breed of the dog; however, the same image on a dog park website may be there just to make the page more attractive, and the image might not need any alt text (and should have null alt).”

Adding Alt Text in Word

Visible Indicators Visible Focus – Tab Key – can you see the focus? Skip Links http://www.stuff.co.nz http://accessibleculture.org

Structure Logical Consistent Headings Clear

Magnification: this all I can see in one go. Where do you think the important links need to be?

Great resources webaim.org/resources/designers http://webaim.org/resources/quickref/ Note – text and infographic options http://wave.webaim.org/

Online forms Literacy/Plain Language Is the form accessible? Labelling Feedback What info is vital? Most flexible is the ability to: complete and submit online complete online and print Avoid Captcha – alternatives are available.

What if your form is badly labelled

What if you could see it?

Documents Fonts Images Links Tables Headings

Documents 2 Word 2010 on – Accessibility Checker Create simple pdf from Word In Design – significant improvement