Post on 17-Oct-2014
description
Best practices
Patrick H. Lauke / Salford Business School / 30 November 2009
WHAT YOU NEED TO KNOW ABOUT MODERN WEB DEVELOPMENT AND DESIGN
web evangelist at Opera
1. web standards2. accessibility3. why bother?
1. web standards2. accessibility3. why bother?
Old-school way of making pages● Creating markup based on how things look● Defining colours, widths, etc in your page● Using tables for layout
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>
Modern “web standards” waySeparation of content and presentation
● HTML defines the content● CSS says how the browser should style it
Defining your contentHTML 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...
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>
“Semantic” markupIf 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)
StylesheetsCSS 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; }
Why bother?Separating content and presentation
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
Why bother?Separating content and presentation
1. web standards2. accessibility3. why bother?
What is accessibility?
“making sure our websiteworks for blind people...”
Wide range of disabilities● Visual impairments● Auditory impairments● Mobility impairments● Cognitive disabilities
Who cares?
People with disabilities use the web like anybody else...
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!”
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
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 2004www.leeds.ac.uk/disability-studies/archiveuk/DRC/Disability%20Briefing%20Dec%202004.pdf
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
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”
Search engine optimisation (SEO)?
Google etc.
“world's largest disabled user”
Web Content Accessibility Guidelines 2.0● Freely available
www.w3.org/TR/WCAG20● Define 4 principles sites should adhere to
WCAG 2.0 principles●Perceivable●Operable●Usable●Robust
WCAG 2.0 principlesEach principle broken down into guidelines.
Each guideline has success criteria to test.
WCAG 2.0 — Perceivable1.1 Provide text alternatives for non-text content
WCAG 2.0 — Perceivable1.2 Provide alternatives for time-based media
WCAG 2.0 — Perceivable1.3 Create content that can be presented in different ways
● Separation of content and presentation● Semantic markup
WCAG 2.0 — Perceivable1.4 Make it easier for users to see and hear content including separating foreground from background
WCAG 2.0 — Operable2.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
WCAG 2.0 — Operable2.3 Do not design content in a way that is known to cause seizures
WCAG 2.0 — Robust4.1 Maximize compatibility with current and future user agents, including assistive technologies
● Web standards...
Ethical/moral/financial reasons not enough?Most countries now have legal obligations
● UK: Disability Discrimination Act (DDA) 1995Provision of goods and services
● Australia: Disability Discrimination Act 1992● USA: Americans with Disabilities Act (ADA)● USA: Section 508 of Rehabilitation Act
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
Testing for accessibility● Automated accessibility checkers
● Still require human judgement● False positives, false negatives
● Best way: understand what the issues are
1. web standards2. accessibility3. why bother?
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
Further informationWeb AccessibilityWeb Standards and Regulatory Compliancewww.friendsofed.com/book.html?isbn=1590596382
Further information● Opera Web Standards Curriculum
www.opera.com/wsc
● W3C Web Accessibility Initiativewww.w3.org/WAI
● WebAIM: Web Accessibility In Mindwww.webaim.org