Sbs Best Practices Intro 30.11.2009
1 like532 views
This document discusses best practices for modern web development and design, focusing on web standards and accessibility. It advocates separating content from presentation by using semantic HTML markup and CSS styling. This approach improves readability, allows flexible styling, and benefits users of assistive technologies. The document also outlines principles from the Web Content Accessibility Guidelines, like making content perceivable, operable, and robust. Following these guidelines benefits people with disabilities but also users in general. Adhering to web standards and creating accessible sites is important not just ethically but can also satisfy legal obligations.
More Related Content
Similar to Sbs Best Practices Intro 30.11.2009 (20)
Sbs Best Practices Intro 30.11.2009
- 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
- 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