Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any web developer can use / South By Southwest SXSW / Austin, Texas, 11 March 2007

1. Accessified
Patrick H. Lauke / Ian Lloyd / South by Southwest / Austin, Texas / 11 March 2007
practical accessibility fixes any web developer can use

2. About us
Ian - accessify.com
Patrick - splintered.co.uk (Salford Uni)
Web Standards Project Accessibility Task Force
(AKA WaSP ATF)

3. About the session
What we're not covering:
* Fine details of WCAG 1 or 2
* Expensive tools and services
* Advanced/experimental techniques
Not here to argue complex points...

4. About the session
*What we are covering:
* Simple creation tools/wizards - free
* Evaluation tools in your browser
* Using pre-recorded screencasts

5. Part 1: Setting out on the right foot
“Because prevention is better than a cure”

6. Accessify Tools
*Just a handful to demonstrate
* Accessible table builder
* Accessible form builder
* List-o-matic

7. Accessify Tools
*Accessible table builder
*View video on YouTube

8. Accessify Tools
*Accessible form builder
*View video on YouTube

9. Accessify Tools
*List-o-matic
*View video on YouTube

10. Part 2: Evaluating accessibility
with toolbars
“Don’t be a tool. Use one.”

11. 11
Headings & accessibility
*screen reader users
*keyboard navigation
11

12. 12
Web Dev Toolbar:
Page headings & document outline
*View video on YouTube
12

13. 13
Semantic markup in general
*using right element for the right job
*some AT currently does not support all semantic
markup
*right thing to do, nonetheless
13

14. 14
Web Dev Toolbar:
Highlighting custom elements
*View video on YouTube
14

15. 15
JavaScript
*not necessarily evil
*depending on type of site, may need to have to
work without it
15

16. 16
Web Dev Toolbar:
Disabling JavaScript
*View video on YouTube
16

17. 17
Labels for forms
*labels unequivocally tie text to form element
*usability for all users (even sighted mouse users)
17

18. 18
Web Dev Toolbar:
Form fine points
*View video on YouTube
18

19. 19
Alt text - deceptively simple?
*most basic accessibility requirement
*still “controversial” - many differing opinions on
“good” alt
19

20. 20
Web Dev Toolbar:
Image alts - how they should be
*View video on YouTube
20

21. Part 3: Other useful tools you may
like to try ...

22. 22
Graybit - Test Colour Contrast
*View video on YouTube
22

23. 23
W3C markup validator

24. 24
Gez Lemon’s colour contrast
analyser

25. 25
Gez Lemon’s colour contrast
analyser

26. 26
Functionally accessible?

27. 27
Functionally accessible?

28. 28
Functionally accessible?

29. Part 4: Unobtrusive accessibility
AKA: Doing the right thing, without your boss
noticing...

30. 30
Hidden form labels

31. 31
Hidden skip links

32. 32
Hidden skip links

33. 33
Hidden table head

34. 34
Hidden table head

35. 35
And we’re done ...
35

36. Further learning
*Forums
* www.accessifyforum.com
* www.webaim.org
*These slides (may be *) available at:
*accessify.com/sxsw2007/
** File size permitting!