1. Best practices Patrick H. Lauke / Salford Business School / 10 November 2008 WHAT YOU NEED TO KNOW ABOUT MODERN WEB DESIGN

2. Who is this guy? ● Web Editor for Salford ● Web Standards Project (WaSP) ● Author and occasional.net magazine contributor

3. Outline ● What are Web Standards? ● What is Accessibility? ● Why is this relevant to you?

4. Old-school way of making pages ● Creating markup based on how things look ● Defining colours, widths, etc in your page ● Using tables for layout

5. Old-school way of making pages This is a heading Blah blah blah A sub- section Blah blah blah A sub- section Blah blah blah

6. Modern “web standards” way Separation of content and presentation ● HTML defines the content ● CSS says how the browser should style it

7. Defining your content HTML offers us different elements to define the meaning of pieces of content ● … for headings ● paragraphs ● unordered (bulletpoint) lists ● ordered (numbered) lists ● Etc At this stage we don't care what it looks like...

8. Defining your content This is a heading Blah blah blah A sub-section Blah blah blah A sub-section Blah blah blah

11. “Semantic” markup If you mark up your content based on its meaning, rather than what it looks like ● Becomes far easier to read ● You can quickly style things consistently ● Meaning can be interpreted by other programs (assistive technology, automated summaries, etc)

12. Stylesheets CSS use a different language from HTML, but provides powerful ways to simply define look h1 { font-size: 150%; color: #ff0000; } h2 { font-size: 125%; color: #00ff00; } p { color: #555555; }

13. Why bother? Separating content and presentation ● Same stylesheet can be used for multiple pages, even entire site

14. Why bother? Separating content and presentation ● Easy to quickly change look of an entire site without having to go through each page ● For example, see csszengarden.comcsszengarden.com

19. Why bother? Separating content and presentation ● One page, different stylesheets for different situation: on-screen and print

21. What is accessibility? “making sure our website works for blind people...”

22. Wide range of disabilities ● Visual impairments ● Auditory impairments ● Mobility impairments ● Cognitive disabilities

23. Who cares? People with disabilities use the web like anybody else...

24. Surely not... ● “disabled people won't be using my site!” ● “they're a small market, it's not worth catering!” ● “don't have time to make a separate accessible site!”

25. Disabled people won't be using my site! What type of site is it? ● Photographer selling prints ● Art gallery ● Mountain climbing equipment ● Online music store ● Web design resource

26. Small market, not worth catering for! “It is estimated that there are 7 million disabled people in the UK and that around 19% of the working age population has some form of disability.” Source: Disability Rights Commission – Disability briefing January 2004 www.leeds.ac.uk/disability-studies/archiveuk/DRC/Disability%20Briefing%20Dec%202004.pdf www.leeds.ac.uk/disability-studies/archiveuk/DRC/Disability%20Briefing%20Dec%202004.pdf

27. No time for separate accessible site! In most cases, no need for special “disabled access” site ● Inclusive design, not segregation ● Separation of content and presentation, structural markup, web standards ● Accessibility considered at planning stage

28. Access for all ● Accessibility not just for users with disabilities ● Benefits to all users ● Real-world: access ramps – just for wheelchairs? ● “situational/temporary” disabilities ● Alternative browsing devices: PDA, web phone, etc ● “silver surfers”

29. Search engine optimisation (SEO)? Google and co. “world's largest disabled user”

30. Web Content Accessibility Guidelines 2.0 ● Freely available www.w3.org/TR/WCAG20 www.w3.org/TR/WCAG20 ● Define 4 principles sites should adhere to

31. WCAG 2.0 principles A website should be... ● Perceivable ● Operable ● Usable ● Robust

32. WCAG 2.0 principles Each principle broken down into guidelines. Each guideline has success criteria to test.

33. WCAG 2.0 — Perceivable 1.1 Provide text alternatives for non-text content

36. WCAG 2.0 — Perceivable 1.2 Provide alternatives for time-based media

37. WCAG 2.0 — Perceivable 1.3 Create content that can be presented in different ways ● Separation of content and presentation ● Semantic markup

38. WCAG 2.0 — Perceivable 1.4 Make it easier for users to see and hear content including separating foreground from background

39. WCAG 2.0 — Operable 2.1 Make all functionality available from a keyboard ● Not a problem when doing plain HTML ● Be careful when getting fancy with JavaScript, Flash movies, etc

40. WCAG 2.0 — Operable 2.3 Do not design content in a way that is known to cause seizures

41. WCAG 2.0 — Robust 4.1 Maximize compatibility with current and future user agents, including assistive technologies ● Web standards...

42. Ethical/moral/financial reasons not enough? Most countries now have legal obligations ● UK: Disability Discrimination Act (DDA) 1995 Provision of goods and services ● Australia: Disability Discrimination Act 1992 ● USA: Americans with Disabilities Act (ADA) ● USA: Section 508 of Rehabilitation Act

43. Political correctness gone mad? “What next? Blind people suing car manufacturers?” ● UK DDA: “reasonable adjustments” ● Situations where there is no reasonable adjustment ● Case by case, not one size fits all

44. Testing for accessibility ● Automated accessibility checkers ● Still require human judgement ● False positives, false negatives ● Best way: understand what the issues are

45. Not just a “compliance” issue ● Not about ticking boxes ● It's about quality of your work ● Accessibility not always either/or — sliding scale ● Web standards + accessibility are expected skills in today's job market

46. Further information Designing with web standards www.zeldman.com/dwws www.zeldman.com/dwws

47. Further information Web Accessibility Web Standards and Regulatory Compliance www.friendsofed.com/book.html?isbn=1590596382 www.friendsofed.com/book.html?isbn=1590596382

48. Further information ● Opera Web Standards Curriculum www.opera.com/wsc www.opera.com/wsc ● W3C Web Accessibility Initiative www.w3.org/WAI www.w3.org/WAI ● Accessify www.accessify.com www.accessify.com ● Accessifyforum www.accessifyforum.com www.accessifyforum.com ● WebAIM: Web Accessibility In Mind www.webaim.org www.webaim.org

49. Thanks Patrick H. Lauke p.h.lauke@salford.ac.uk http://www.salford.ac.uk http://www.splintered.co.uk