SlideShare a Scribd company logo
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 standards
2. accessibility
3. why bother?
1. web standards
2. accessibility
3. why bother?

Recommended for you

Hoe ontwerp je een effectief leernetwerk?
Hoe ontwerp je een effectief leernetwerk?Hoe ontwerp je een effectief leernetwerk?
Hoe ontwerp je een effectief leernetwerk?

Hoe ontwerp je een effectief leernetwerk? dr. Hendrik Drachsler & dr. Wendy Kicken On 14 October 2011 three workshops took place in the study centre of the Open Universiteit in Eindhoven on learning in and with help of social networks. Reason for organizing the workshops is the publication of the book Learning Networks. Participants received a complimentary copy of the book.

organisational innovationhealth2.0informel learning
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010

HTML5 provides new semantic elements, forms, and multimedia capabilities without plugins. While support is still evolving, HTML5 can be used today with feature detection and polyfills for older browsers. Key features include <video>, <audio>, <canvas>, geolocation, and application cache APIs. HTML5 aims to unify browser support for emerging web standards, but support varies - it is best to use progressive enhancement and have fallback options. Overall HTML5 enhances the web platform, but may not completely replace other technologies like Flash in the near future.

audiohtmlweb standards
From Headphones to Microphones: Co-creating the soundtracks to culture
From Headphones to Microphones: Co-creating the soundtracks to cultureFrom Headphones to Microphones: Co-creating the soundtracks to culture
From Headphones to Microphones: Co-creating the soundtracks to culture

Keynote presentation at symposium on mobile technologies for museums at Rijksmuseum 31 May 2016 http://www.lkca.nl/agenda/bijeenkomsten-lkca/mobiele-apps-rijksmuseum co-organized with Landelijk Kennisinstituut Cultuureducatie en Amateurkunst.

mobileappsmuseums
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” 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
● <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...

Recommended for you

Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...

This document provides an overview of techniques for improving website accessibility using WAI-ARIA and HTML5. It begins by noting the large numbers of people with disabilities who have visual or hearing impairments. It then discusses WAI-ARIA roles, states, and properties for semantics and interaction. Screen readers and examples of companies with dedicated accessibility teams are also mentioned. The document concludes with references to books and links for further accessibility resources and training.

usabilityhtml5accessibility
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...

This document provides an introduction to web accessibility. It begins by addressing some common misconceptions about accessibility, noting that it aims to accommodate people with a wide range of disabilities, not just visual impairments. The document emphasizes that accessibility is important for both ethical and legal reasons, and that inclusive design benefits all users. It then outlines key web accessibility guidelines from the W3C, providing examples of how to make content more accessible through proper semantic markup and alternative text. The conclusion stresses that accessibility is an essential consideration for web development.

accessibilityusabilitywcag
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility

Web Accessibility is an important issue, and must be practiced by everyone. I hope this presentation is useful!!

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>
Sbs Best Practices Intro 30.11.2009
Sbs Best Practices Intro 30.11.2009
“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)

Recommended for you

Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources

Being tasked with an accessibility evaluation is can be daunting. How can you measure accessibility? What disabilities are the most important? What tools do you need? How long will it take? Where do I start? What does "accessible" even mean? These are all questions I asked myself last year when I performed my first accessibility eval. This session will share everything I learned since then in performing three accessibility evaluations.

evaluationaccessibilityux
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit

This workshop was presented on May 30, 2018 at the Web Accessibility Summit on the University of Missouri campus in Columbia, Missouri.

accessibilityhigher educationweb design and development
Accessibility Part 1
Accessibility Part 1Accessibility Part 1
Accessibility Part 1

This document provides an overview of accessibility and user-centered design. It discusses putting the user at the center of the design process to create accessible technologies. User-centered design is highlighted as an iterative process that uncovers problems early. Guidelines for accessibility like WCAG are also summarized, which include principles like content being perceivable, operable, understandable and robust. Assistive technologies that can be used to test accessibility are briefly described.

ux; accessibility; usability
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
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
Sbs Best Practices Intro 30.11.2009

Recommended for you

The power of accessibility (November, 2018)
The power of accessibility (November, 2018)The power of accessibility (November, 2018)
The power of accessibility (November, 2018)

An introduction to accessibility: definition, concepts, some requirements from WCAG, checking the accessibility conformance, recommendations and curiosities.

a11yaccessibilitywai
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12

Transcript and extra notes available at http://www.mardahl.dk/2012/11/02/getting-down-and-dirty-with-accessibility-usability-tcuk12-workshop/ Workshop at Technical Communication UK 2012 conference, Newcastle, UK.

usabilityaccessibilitytcuk
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategyBeyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy

The document discusses the importance of mobile-first strategies and addresses common myths and barriers to their adoption. It advocates designing for mobile users first by working backwards from their needs, focusing content over extras, and ensuring solutions are fast across all devices to avoid excluding any users.

mobile firstjoomlaoneweb
Sbs Best Practices Intro 30.11.2009
Sbs Best Practices Intro 30.11.2009
Sbs Best Practices Intro 30.11.2009
Why bother?
Separating content and presentation

Recommended for you

Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry

This document discusses key concepts around usability, accessibility, and professional practices for web development. It defines usability as how easy a website is to use and emphasizes the importance of considering the intended audience. Accessibility involves measures to make websites usable for people with disabilities. Professional practices include following web standards, validating code, testing websites thoroughly, and keeping up-to-date with developments in the field through publications and mailing lists.

usabilityaccessibility
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility

Web accessibility is important because it allows people with disabilities to access websites. Over 285 million people are blind or visually impaired and 275 million are deaf or hearing impaired. Accessible websites follow guidelines like WCAG to address the needs of people with visual, auditory, motor, and cognitive disabilities. W3C leads initiatives to promote web accessibility through standards, guidelines, and resources to help make websites accessible to people with disabilities.

webaccessibilictyhtml5
Checking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths DebunkedChecking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths Debunked

Many of the things accessibility advocates believe are out of date. Yes, the web industry has loads of myths about accessibility which we constantly need to battle. But some of the understanding of accessibility advocates is equally flawed. In this talk to a11yLDN 2012 I challenge some of the accepted assumptions many of us hold that I believe are really not serving us, or the disabled and elderly people we are trying to help, well at all. In their place I detail some more researched, more effective findings from which to continue to grow our influence in the web community. Find the original blog, and join in the discussion at: http://www.hassellinclusion.com/2011/12/accessibility-myths-2011/

wcagaccessibility mythsaccessibility
Sbs Best Practices Intro 30.11.2009
1. web standards
2. accessibility
3. why bother?
What is accessibility?
“making sure our website
works for blind people...”
Wide range of disabilities
● Visual impairments
●
Auditory impairments
● Mobility impairments
●
Cognitive disabilities

Recommended for you

Accessibility myths for a mobile generation
Accessibility myths for a mobile generationAccessibility myths for a mobile generation
Accessibility myths for a mobile generation

Some of our key accessibility ideas are back to front. The most important aspect of the accessibility of images isn't 'alt-text'. The number of disabled people who use assistive technologies is tiny compared with those who don't. And for many people video is more accessible than text, not less accessible. In this CSUN 2014 talk, Professor Jonathan Hassell exposes 16 foundational things that all advocates “know” about accessibility as myths, using real user-research to show how they need to be replaced to properly serve today’s tablet and mobile-obsessed disabled and older users.

accessibility mythsweb accessibilityinclusive design
Web Accessibility - Razvan Rosu
Web Accessibility - Razvan RosuWeb Accessibility - Razvan Rosu
Web Accessibility - Razvan Rosu

Web accessibility aims to make websites usable by the widest range of people, including those with disabilities. It is important for ethical and legal reasons, as disabilities affect a significant portion of the population. Ensuring websites are accessible involves accounting for various disabilities like blindness, deafness, physical impairments, and cognitive disabilities. Key aspects of accessibility include semantic HTML, accessibility standards like WCAG, and tools for different impairments.

accessibilitya11ysemantic markup
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile web

Media queries, server-side or client-side sniffers, how do we determine if the user is a mobile or desktop device? This tech talk will discuss which is the right solution(s) and how to implement it taking into consideration the various mobile user's browser capacity, bandwidth restrictions, as well as user choice. Jenifer Hanen @msjen http://blackphoebe.com/msjen

mobile web designmobile designmobilism
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 2004
www.leeds.ac.uk/disability-studies/archiveuk/DRC/Disability%20Briefing%20Dec%202004.pdf

Recommended for you

Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...

This document summarizes a presentation given by Michael Fienen and Dylan Wilbanks on the topic of accessibility and usability. The presentation argues that accessibility and usability have many similarities and should be considered together from the beginning of a project. It provides recommendations for making templates, forms, and videos accessible. It also discusses testing for accessibility and strategies for getting buy-in for accessibility within an organization, emphasizing an early and iterative approach. The overall message is that accessibility should be a priority from the start of any project to create a better experience for all users.

usabilityaccessibilityhighedweb2010
Web Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's importantWeb Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's important

Slides from a presentation I gave to an ISTC group meeting on November 12th 2013. The audience consisted mainly of technical authors - most of whom were not technically orientated. The presentation is an introduction to web accessibility, and as well as a definition for web accessibility I presented some reasons why it's important to take it seriously. I looked at various types of disability and impairment, some examples of assistive technology, and some simple things that content authors can do to help keep their articles and posts accessible.

resourcesa11yweb accessibility
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility

This document provides an introduction to accessibility. It discusses different types of disabilities, understanding accessibility barriers, and the Accessibility for Ontarians with Disabilities Act (AODA). It covers the Web Content Accessibility Guidelines (WCAG) 2.0 and places to start improving accessibility, such as adding text alternatives, using semantic HTML, providing captions, and ensuring sufficient color contrast. Resources for further information on accessibility are also listed.

web design and developmentintroductionwcag 2.0
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

Recommended for you

BarCamp Sd Microformats
BarCamp Sd MicroformatsBarCamp Sd Microformats
BarCamp Sd Microformats

This document provides an overview of microformats, which are simple, open data formats built upon existing web standards like HTML and CSS. Microformats aim to solve specific problems by marking up common types of information like contacts, events, reviews, and tags in a standardized way. This makes the data more accessible for machines and easier to aggregate. The document discusses the benefits of microformats, provides examples of how to mark up contacts and events, and lists tools and sites that implement microformats.

Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...

This document discusses inclusive design and accessibility. It defines inclusive design and disabilities. It outlines tools for making content accessible, including screen readers like NVDA and JAWS. It describes the four main WCAG guidelines of perceivable, operable, understandable and robust. It demonstrates how to use VoiceOver on iOS. It provides four "golden rules" of inclusive design around images, links, markup and color contrast. It recommends a tool for checking color contrast ratios. The overall message is that inclusive design benefits all users and we should aim to understand different user experiences.

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the guidelines' normative text. And, of course, it is not perfect - with some omissions, handwaving, and straight-up loopholes. So where does this leave developers and auditors? In this talk - a reprise of a previous talk, now updated to cover new SCs from WCAG 2.2 - Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

accessibilityauditauditing
WCAG 2.0 principles
●
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
Sbs Best Practices Intro 30.11.2009

Recommended for you

Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke

Update about Pointer Events Level 3 work for the upcoming W3C Technical Plenary and Advisory Committee (TPAC) 2023 in Seville https://www.youtube.com/watch?v=r0spZl1qaa0 https://w3c.github.io/pointerevents/ https://www.w3.org/TR/pointerevents/ https://www.w3.org/2023/09/TPAC/ https://patrickhlauke.github.io/touch/w3c_tpac2023_pewg/ Cross-posted from https://www.w3.org/2023/09/TPAC/group-updates.html#pointer-events

w3cweb standardspointer events
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

accessibilityauditauditing
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

wcagwcag 2.0wcag 2.1
Sbs Best Practices Intro 30.11.2009
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

Recommended for you

Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...

HTML offers many features and attributes that can make your sites more accessible...but only if they're used wisely. Can there really be "too much accessibility"? Audio recording: https://archive.org/details/Psf8August2007.PatrickH.Lauke-TooMuchAccessibilityGoodIntentions

htmlcssaccessibility
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...

Patrick H. Lauke: Styling Your Web Pages with Cascading Style Sheets / EDU course / University of Salford / 13 February 2006

web designweb developmentweb design and development
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...

Patrick H. Lauke: Evaluating web sites for accessibility with Firefox / Manchester Digital Accessibility Working Group (MDAWG) / 1 March 2006

web accessibilityaccessibilitywcag
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

Recommended for you

Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...

Patrick H. Lauke: Managing and educating content editors - experiences and ideas from the trenches / Public Sector Forums / 10 May 2007

web designweb design and developmentweb content management
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...

Patrick H. Lauke - Implementing Web Standards across the institution: trials and tribulations of a redesign / Institutional Web Management Workshop IWMW / Birmingham / 28 July 2004

web standardsweb designweb design and development
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...

Patrick H. Lauke: Geolinking content - experiments in connecting virtual and physical places / Institutional Web Management Workshop IWMW / York / 16 July 2007

web designweb developmentweb design and development
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 standards
2. accessibility
3. 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

Recommended for you

All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...

WCAG 2.0 is the new set of web accessibility guidelines that was released in 2008 as a recommendation by the W3C. It addresses some issues with the previous WCAG 1.0 guidelines by being technology-agnostic, having clearly testable success criteria focused on user outcomes rather than techniques, and removing outdated requirements. WCAG 2.0 provides more freedom for authors while still ensuring accessibility. It includes 4 principles, 12 guidelines and 61 success criteria to evaluate websites. The transition from WCAG 1.0 involves evaluating sites based on the new success criteria and testing areas that may be different.

accessibilityusabilityweb design
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...

Patrick H. Lauke: Doing it in style - creating beautiful sites, the web standards way / WebDD / Reading / 3 February 2007

web designweb developmentweb design and development
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...

The document discusses common misconceptions and pitfalls around using web standards. It argues that web standards are about more than just validation - they are about semantics, separation of concerns, and pragmatism. Some key points include: using the most appropriate HTML elements to convey meaning rather than appearance; applying styles through CSS instead of presentational markup; avoiding non-semantic class names; and recognizing that not all uses of tables or images are invalid. The document advocates for balancing standards with practical concerns like multiple authors and one-off content needs.

web designweb developmentweb design and development
Further information
Designing with web standards
www.zeldman.com/dwws
Further information
Web Accessibility
Web Standards and Regulatory Compliance
www.friendsofed.com/book.html?isbn=1590596382
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
www.opera.com/developer
patrick.lauke@opera.com

Recommended for you

Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...

Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any web developer can use / South By Southwest SXSW / Austin, Texas, 11 March 2007

accessibilityusabilityweb design
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007

One from the archives...presentation about the development of the University of Salford website in 2007

web designweb developmentweb design and development
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...

Patrick H. Lauke: Keyboard accessibility - just because I don't use a mouse doesn't mean I'm second class / Skillswap Bristol / 11 Nobember 2008

accessibilityusabilityweb development

More Related Content

Viewers also liked

Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Patrick Lauke
 
From Headphones to Microphones: Mobile 2.0 and the Museum as Distributed Network
From Headphones to Microphones: Mobile 2.0 and the Museum as Distributed NetworkFrom Headphones to Microphones: Mobile 2.0 and the Museum as Distributed Network
From Headphones to Microphones: Mobile 2.0 and the Museum as Distributed Network
Nancy Proctor
 
Open Access Week | Dag van het onderzoek
Open Access Week | Dag van het onderzoekOpen Access Week | Dag van het onderzoek
Open Access Week | Dag van het onderzoek
Hendrik Drachsler
 
Hoe ontwerp je een effectief leernetwerk?
Hoe ontwerp je een effectief leernetwerk?Hoe ontwerp je een effectief leernetwerk?
Hoe ontwerp je een effectief leernetwerk?
Hendrik Drachsler
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Patrick Lauke
 
From Headphones to Microphones: Co-creating the soundtracks to culture
From Headphones to Microphones: Co-creating the soundtracks to cultureFrom Headphones to Microphones: Co-creating the soundtracks to culture
From Headphones to Microphones: Co-creating the soundtracks to culture
Nancy Proctor
 

Viewers also liked (6)

Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
Catching bugs with Opera Dragonfly - RIT++ 03.04.2012
 
From Headphones to Microphones: Mobile 2.0 and the Museum as Distributed Network
From Headphones to Microphones: Mobile 2.0 and the Museum as Distributed NetworkFrom Headphones to Microphones: Mobile 2.0 and the Museum as Distributed Network
From Headphones to Microphones: Mobile 2.0 and the Museum as Distributed Network
 
Open Access Week | Dag van het onderzoek
Open Access Week | Dag van het onderzoekOpen Access Week | Dag van het onderzoek
Open Access Week | Dag van het onderzoek
 
Hoe ontwerp je een effectief leernetwerk?
Hoe ontwerp je een effectief leernetwerk?Hoe ontwerp je een effectief leernetwerk?
Hoe ontwerp je een effectief leernetwerk?
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
 
From Headphones to Microphones: Co-creating the soundtracks to culture
From Headphones to Microphones: Co-creating the soundtracks to cultureFrom Headphones to Microphones: Co-creating the soundtracks to culture
From Headphones to Microphones: Co-creating the soundtracks to culture
 

Similar to Sbs Best Practices Intro 30.11.2009

Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Rodrigo Castilho
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Patrick Lauke
 
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
Shivani Sachdeva
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
Michael Ryan
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
Rachel Cherry
 
Accessibility Part 1
Accessibility Part 1Accessibility Part 1
Accessibility Part 1
Yongjie Chen 陈永杰
 
The power of accessibility (November, 2018)
The power of accessibility (November, 2018)The power of accessibility (November, 2018)
The power of accessibility (November, 2018)
Rachel M. Carmena
 
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Karen Mardahl
 
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategyBeyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
internet-inspired
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
Sur College of Applied Sciences
 
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility
Domenico Monaco
 
Checking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths DebunkedChecking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths Debunked
Jonathan Hassell
 
Accessibility myths for a mobile generation
Accessibility myths for a mobile generationAccessibility myths for a mobile generation
Accessibility myths for a mobile generation
Jonathan Hassell
 
Web Accessibility - Razvan Rosu
Web Accessibility - Razvan RosuWeb Accessibility - Razvan Rosu
Web Accessibility - Razvan Rosu
Razvan Rosu
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile web
Jenifer Hanen
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Dylan Wilbanks
 
Web Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's importantWeb Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's important
Graham Armfield
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
Joseph McLarty
 
BarCamp Sd Microformats
BarCamp Sd MicroformatsBarCamp Sd Microformats
BarCamp Sd Microformats
Joshua Brewer
 
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
jack_armley
 

Similar to Sbs Best Practices Intro 30.11.2009 (20)

Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility pro...
 
Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...Web Accessibility - an introduction / Salford Business School briefing / Univ...
Web Accessibility - an introduction / Salford Business School briefing / Univ...
 
Web_Accessibility
Web_AccessibilityWeb_Accessibility
Web_Accessibility
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
Accessibility Part 1
Accessibility Part 1Accessibility Part 1
Accessibility Part 1
 
The power of accessibility (November, 2018)
The power of accessibility (November, 2018)The power of accessibility (November, 2018)
The power of accessibility (November, 2018)
 
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
Getting Down and Dirty with Accessibility and Usability workshop at TCUK12
 
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategyBeyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
 
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility
 
Checking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths DebunkedChecking Our Footing: 16 Modern Accessibility Myths Debunked
Checking Our Footing: 16 Modern Accessibility Myths Debunked
 
Accessibility myths for a mobile generation
Accessibility myths for a mobile generationAccessibility myths for a mobile generation
Accessibility myths for a mobile generation
 
Web Accessibility - Razvan Rosu
Web Accessibility - Razvan RosuWeb Accessibility - Razvan Rosu
Web Accessibility - Razvan Rosu
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile web
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
 
Web Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's importantWeb Accessibility: What it is, Why it's important
Web Accessibility: What it is, Why it's important
 
Introduction to accessibility
Introduction to accessibilityIntroduction to accessibility
Introduction to accessibility
 
BarCamp Sd Microformats
BarCamp Sd MicroformatsBarCamp Sd Microformats
BarCamp Sd Microformats
 
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
 

More from Patrick Lauke

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
Patrick Lauke
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Patrick Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
Patrick Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
Patrick Lauke
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...
Patrick Lauke
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Patrick Lauke
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Patrick Lauke
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...
Patrick Lauke
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...
Patrick Lauke
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...
Patrick Lauke
 
All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...
Patrick Lauke
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Patrick Lauke
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...
Patrick Lauke
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Patrick Lauke
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007
Patrick Lauke
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
Patrick Lauke
 
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Patrick Lauke
 

More from Patrick Lauke (20)

These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...
 
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
Pointer Events Working Group update / TPAC 2023 / Patrick H. Lauke
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...
 
Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...Too much accessibility - good intentions, badly implemented / Public Sector F...
Too much accessibility - good intentions, badly implemented / Public Sector F...
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
 
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
Evaluating web sites for accessibility with Firefox / Manchester Digital Acce...
 
Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...Managing and educating content editors - experiences and ideas from the trenc...
Managing and educating content editors - experiences and ideas from the trenc...
 
Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...Implementing Web Standards across the institution: trials and tribulations of...
Implementing Web Standards across the institution: trials and tribulations of...
 
Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...Geolinking content - experiments in connecting virtual and physical places / ...
Geolinking content - experiments in connecting virtual and physical places / ...
 
All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...All change for WCAG 2.0 - what you need to know about the new accessibility g...
All change for WCAG 2.0 - what you need to know about the new accessibility g...
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...Doing it in style - creating beautiful sites, the web standards way / WebDD /...
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
 
Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...Web standards pragmatism - from validation to the real world / Web Developers...
Web standards pragmatism - from validation to the real world / Web Developers...
 
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...
 
The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007The state of the web - www.salford.ac.uk / 2007
The state of the web - www.salford.ac.uk / 2007
 
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
Keyboard accessibility - just because I don't use a mouse doesn't mean I'm se...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...
 

Recently uploaded

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 

Recently uploaded (20)

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 

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