1. Best practices
Patrick H. Lauke / Salford Business School / 30 November 2009
WHAT YOU NEED TO KNOW ABOUT MODERN WEB DEVELOPMENT AND DESIGN

2. web evangelist at Opera

3. 1. web standards
2. accessibility
3. why bother?

4. 1. web standards
2. accessibility
3. why bother?

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

6. Old-school way of making pages
<p><font size=“+3” color=”ff0000”><b>This is a
heading</b></font></p>
<p><font color=“555555”>Blah blah blah</font></p>
<p><font size=“+2” color=”00ff00”><b>A sub-
section</b></font></p>
<p><font color=“555555”>Blah blah blah</font></p>
<p><font size=“+2” color=”00ff00”><b>A sub-
section</b></font></p>
<p><font color=“555555”>Blah blah blah</font></p>

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

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

9. Defining your content
<h1>This is a heading</h1>
<p>Blah blah blah</p>
<h2>A sub-section</h2>
<p>Blah blah blah</p>
<h2>A sub-section</h2>
<p>Blah blah blah</p>

12. “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)

13. 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; }

14. Why bother?
Separating content and presentation

15. Why bother?
Separating content and presentation
●
Easy to quickly change look of an entire site without
having to go through each page
● e.g. csszengarden.com

20. Why bother?
Separating content and presentation

22. 1. web standards
2. accessibility
3. why bother?

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

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

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

26. 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!”

27. 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

28. 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

29. 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

30. 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”

31. Search engine optimisation (SEO)?
Google etc.
“world's largest disabled user”

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

33. WCAG 2.0 principles
●
Perceivable
●
Operable
●
Usable
●
Robust

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

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

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

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

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

41. 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

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

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

44. 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

45. 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

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

47. 1. web standards
2. accessibility
3. why bother?

48. 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

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

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

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

52. www.opera.com/developer
patrick.lauke@opera.com