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

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

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

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 This is a heading Blah blah blah A sub- section Blah blah blah A sub- section Blah blah blah

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

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

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

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

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

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

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

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

What is accessibility? “making sure our website works 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

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 and co. “world's largest disabled user”

Web Content Accessibility Guidelines 2.0 ● Freely available ● Define 4 principles sites should adhere to

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

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

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

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

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

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

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

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

WCAG 2.0 — Robust 4.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) 1995 Provision 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

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 information Designing with web standards

Further information Web Accessibility Web Standards and Regulatory Compliance

Further information ● Opera Web Standards Curriculum ● W3C Web Accessibility Initiative ● Accessify ● Accessifyforum ● WebAIM: Web Accessibility In Mind

Thanks Patrick H. Lauke