SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
WordCampUK 2010 Building for Accessibility and Getting Ready for HTML 5 Benjamin Ellis @benjaminellis |  http://benjaminellis.org http://redcatco.com  |  http://socialoptic.com http://milestoneplanner.com/
Accessibility WHY? Be a good web citizen. Legal compliance. Bigger Audience. Better design. SEO benefit.
You  Really  Should   Disability Discrimination Act 1995
NOTE: I'm Being Pragmatic 90/10 beats 100/0 every time > do something that makes a difference <
Not Just, But Also... Sight Hearing Cognitive & Learning Motor  & Mobility And degrees of severity ...there is no one answer
Even More Complexity A Huge Range of Assistive Technologies: Screen Readers Magnification Input Devices - Speech / Switch OS Built in and 3 rd  party
<em> don't Err > the world isn't one size fits all < make your design flexible > the world
Black on  Black  was cool in Hitch Hiker's Guide to the Galaxy. Not on your web site (ps search spiders hate it too) This isn't clever either...
(um... no...) Do place decorative images in the stylesheet But for many of us the visual cues are important I'VE GOT TEXT ONLY I'M GOOD TO GO, RIGHT?
Flash is evil right? Only if you are Steve Jobs Abode have some great features and guidelines, but it does take time and effort!
Running the Race Twice Or run it once. Well.
Guidelines   Web Content Accessibility Guidelines  WCAG 1.0 http://www.w3.org/TR/WCAG20/ but start with:  http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Or maybe try:  http://www.w3.org/WAI/WCAG20/quickref/ Disability Rights Commission (DRC):  Pas 78   Don't lose the will to live!
when the cat comes out the play LWOAM
when the cat comes out the play LWOAM (life without a mouse) Tab index Hovers Access keys
Vague Heuristics look at: your lowest screen resolution black and white without CSS At the source Do you lose the will to live?
Web 2.0 AJAX and all that stuff...
Web 2.0 AJAX and all that stuff... invisible /confusing to screen readers Practice graceful degradation  (Progressive enhancement)
Web 2.0 HTML 5 http://slides.html5rocks.com/
HTML You're doing it already (mostly) Video/Audio (WebM) Page Structure Lots of CSS shiny shiny
WordCampUK 2010 Building for Accessibility and Getting Ready for HTML 5 Benjamin Ellis @benjaminellis |  http://benjaminellis.org http://redcatco.com  |  http://socialoptic.com http://milestoneplanner.com/

Weitere ähnliche Inhalte

Was ist angesagt?

Senior Exhibition Demo
Senior Exhibition DemoSenior Exhibition Demo
Senior Exhibition Demodalep35
 
How you can become an Accessibility Superhero
How you can become an Accessibility SuperheroHow you can become an Accessibility Superhero
How you can become an Accessibility Superherorobzonenet
 
New Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT'sNew Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT'sOllie Bray
 
Computers of the future
Computers of the futureComputers of the future
Computers of the futurehector082894
 
Ei ux through usability testing
Ei ux through usability testingEi ux through usability testing
Ei ux through usability testingKrista Godfrey
 
2017 smartphones scratchconf Budapest
2017 smartphones scratchconf Budapest2017 smartphones scratchconf Budapest
2017 smartphones scratchconf BudapestBalazs Koren
 
Using Technology to Work Collboratively
Using Technology to Work CollborativelyUsing Technology to Work Collboratively
Using Technology to Work CollborativelySarah Glassmeyer
 
GoCoding.Today For Rails - Episode1
GoCoding.Today For Rails - Episode1GoCoding.Today For Rails - Episode1
GoCoding.Today For Rails - Episode1Brian Hu
 
Unit 9 lesson a
Unit 9  lesson aUnit 9  lesson a
Unit 9 lesson awatler
 
Will iPads Replace Laptops?
Will iPads Replace Laptops?Will iPads Replace Laptops?
Will iPads Replace Laptops?Bethany Smith
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Christian Heilmann
 
Introduction to Video for Nonprofits
Introduction to Video for NonprofitsIntroduction to Video for Nonprofits
Introduction to Video for NonprofitsSee3 Communications
 
Dream or nightmare
Dream or nightmareDream or nightmare
Dream or nightmareGenegame1
 

Was ist angesagt? (19)

Senior Exhibition Demo
Senior Exhibition DemoSenior Exhibition Demo
Senior Exhibition Demo
 
How you can become an Accessibility Superhero
How you can become an Accessibility SuperheroHow you can become an Accessibility Superhero
How you can become an Accessibility Superhero
 
New Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT'sNew Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT's
 
Computers of the future
Computers of the futureComputers of the future
Computers of the future
 
C 1
C 1C 1
C 1
 
Ei ux through usability testing
Ei ux through usability testingEi ux through usability testing
Ei ux through usability testing
 
Tech comm video
Tech comm videoTech comm video
Tech comm video
 
2017 smartphones scratchconf Budapest
2017 smartphones scratchconf Budapest2017 smartphones scratchconf Budapest
2017 smartphones scratchconf Budapest
 
Using Technology to Work Collboratively
Using Technology to Work CollborativelyUsing Technology to Work Collboratively
Using Technology to Work Collboratively
 
Take care of your pixel
Take care of your pixelTake care of your pixel
Take care of your pixel
 
GoCoding.Today For Rails - Episode1
GoCoding.Today For Rails - Episode1GoCoding.Today For Rails - Episode1
GoCoding.Today For Rails - Episode1
 
Unit 9 lesson a
Unit 9  lesson aUnit 9  lesson a
Unit 9 lesson a
 
First Presentation
First PresentationFirst Presentation
First Presentation
 
Mac book procedures
Mac book proceduresMac book procedures
Mac book procedures
 
Presentación
PresentaciónPresentación
Presentación
 
Will iPads Replace Laptops?
Will iPads Replace Laptops?Will iPads Replace Laptops?
Will iPads Replace Laptops?
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015
 
Introduction to Video for Nonprofits
Introduction to Video for NonprofitsIntroduction to Video for Nonprofits
Introduction to Video for Nonprofits
 
Dream or nightmare
Dream or nightmareDream or nightmare
Dream or nightmare
 

Andere mochten auch

L'opportunità di un mercato e l'incontro con lo strumento giusto
 L'opportunità di un mercato e l'incontro con lo strumento giusto L'opportunità di un mercato e l'incontro con lo strumento giusto
L'opportunità di un mercato e l'incontro con lo strumento giustoRILEVANT
 
Magazine world is magnifique sept oct 2015
Magazine world is magnifique sept oct 2015Magazine world is magnifique sept oct 2015
Magazine world is magnifique sept oct 2015Realty Gold World
 
Magazine world is magnifique march 2015
Magazine world is magnifique march 2015Magazine world is magnifique march 2015
Magazine world is magnifique march 2015Realty Gold World
 
Magazine world is magnifique dec 2014
Magazine world is magnifique dec 2014Magazine world is magnifique dec 2014
Magazine world is magnifique dec 2014Realty Gold World
 
Accessibility Workshop
Accessibility WorkshopAccessibility Workshop
Accessibility WorkshopLar Veale
 
Accessibility With WordPress: Accessing Higher Ground 2014
Accessibility With WordPress: Accessing Higher Ground 2014Accessibility With WordPress: Accessing Higher Ground 2014
Accessibility With WordPress: Accessing Higher Ground 2014Joseph Dolson
 
Kill Accessibility
Kill AccessibilityKill Accessibility
Kill AccessibilityGary Barber
 
Web Accessibility Workshop
Web Accessibility WorkshopWeb Accessibility Workshop
Web Accessibility Workshopjosodo
 
Applying WAI-ARIA to open-source CMS widgets - practical application and resu...
Applying WAI-ARIA to open-source CMS widgets - practical application and resu...Applying WAI-ARIA to open-source CMS widgets - practical application and resu...
Applying WAI-ARIA to open-source CMS widgets - practical application and resu...AEGIS-ACCESSIBLE Projects
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Eric Eggert
 
Building in Accessibility Throughout Your Project Lifecycle
Building in Accessibility Throughout Your Project LifecycleBuilding in Accessibility Throughout Your Project Lifecycle
Building in Accessibility Throughout Your Project LifecycleAngela M. Hooker
 
How to improve SEO & accessibility through your CMS
How to improve SEO & accessibility through your CMSHow to improve SEO & accessibility through your CMS
How to improve SEO & accessibility through your CMSVYRE
 
HTML 5 & Accessibility
HTML 5 & Accessibility HTML 5 & Accessibility
HTML 5 & Accessibility Ted Drake
 
Real World Web Accessibility
Real World Web AccessibilityReal World Web Accessibility
Real World Web AccessibilitySean Yo
 
Designing for Accessibility
Designing for AccessibilityDesigning for Accessibility
Designing for AccessibilityDan Mouyard
 
Best of the web - accessibility & ell - Fall 2013
Best of the web - accessibility & ell - Fall 2013Best of the web - accessibility & ell - Fall 2013
Best of the web - accessibility & ell - Fall 2013Richard Byrne
 
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Ted Drake
 

Andere mochten auch (20)

L'opportunità di un mercato e l'incontro con lo strumento giusto
 L'opportunità di un mercato e l'incontro con lo strumento giusto L'opportunità di un mercato e l'incontro con lo strumento giusto
L'opportunità di un mercato e l'incontro con lo strumento giusto
 
flyer support
flyer supportflyer support
flyer support
 
Plaquetteb2c english
Plaquetteb2c englishPlaquetteb2c english
Plaquetteb2c english
 
Magazine world is magnifique sept oct 2015
Magazine world is magnifique sept oct 2015Magazine world is magnifique sept oct 2015
Magazine world is magnifique sept oct 2015
 
Magazine world is magnifique march 2015
Magazine world is magnifique march 2015Magazine world is magnifique march 2015
Magazine world is magnifique march 2015
 
Magazine world is magnifique dec 2014
Magazine world is magnifique dec 2014Magazine world is magnifique dec 2014
Magazine world is magnifique dec 2014
 
Presentation geneva it
Presentation geneva itPresentation geneva it
Presentation geneva it
 
Accessibility Workshop
Accessibility WorkshopAccessibility Workshop
Accessibility Workshop
 
Accessibility With WordPress: Accessing Higher Ground 2014
Accessibility With WordPress: Accessing Higher Ground 2014Accessibility With WordPress: Accessing Higher Ground 2014
Accessibility With WordPress: Accessing Higher Ground 2014
 
Kill Accessibility
Kill AccessibilityKill Accessibility
Kill Accessibility
 
Web Accessibility Workshop
Web Accessibility WorkshopWeb Accessibility Workshop
Web Accessibility Workshop
 
Applying WAI-ARIA to open-source CMS widgets - practical application and resu...
Applying WAI-ARIA to open-source CMS widgets - practical application and resu...Applying WAI-ARIA to open-source CMS widgets - practical application and resu...
Applying WAI-ARIA to open-source CMS widgets - practical application and resu...
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
 
Building in Accessibility Throughout Your Project Lifecycle
Building in Accessibility Throughout Your Project LifecycleBuilding in Accessibility Throughout Your Project Lifecycle
Building in Accessibility Throughout Your Project Lifecycle
 
How to improve SEO & accessibility through your CMS
How to improve SEO & accessibility through your CMSHow to improve SEO & accessibility through your CMS
How to improve SEO & accessibility through your CMS
 
HTML 5 & Accessibility
HTML 5 & Accessibility HTML 5 & Accessibility
HTML 5 & Accessibility
 
Real World Web Accessibility
Real World Web AccessibilityReal World Web Accessibility
Real World Web Accessibility
 
Designing for Accessibility
Designing for AccessibilityDesigning for Accessibility
Designing for Accessibility
 
Best of the web - accessibility & ell - Fall 2013
Best of the web - accessibility & ell - Fall 2013Best of the web - accessibility & ell - Fall 2013
Best of the web - accessibility & ell - Fall 2013
 
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
 

Ähnlich wie WordCamp UK - Accessibility and HTML 5

The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersPeter-Paul Koch
 
Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityChristian Heilmann
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
WebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebWebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebChris Love
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Avenga Germany GmbH
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
Targeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & NativeTargeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & NativeEric Fickes
 
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schillerscottschiller
 
HTML 5 vs. Native Mobile Applications
HTML 5 vs. Native Mobile ApplicationsHTML 5 vs. Native Mobile Applications
HTML 5 vs. Native Mobile Applicationsglenn.kelman
 
Open and Accessible UI
Open and Accessible UIOpen and Accessible UI
Open and Accessible UIMark Meeker
 
Next Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv GohilNext Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv GohilHardik Upadhyay
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web developmentChristian Heilmann
 
Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010Christian Heilmann
 
Closing the gap between Web and Desktop with WinRT
Closing the gap between Web and Desktop with WinRTClosing the gap between Web and Desktop with WinRT
Closing the gap between Web and Desktop with WinRTEinar Ingebrigtsen
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
Fashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience web
Fashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience webFashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience web
Fashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience webAcquia
 
Creating Your Own Personal Learning Network
Creating Your Own Personal Learning NetworkCreating Your Own Personal Learning Network
Creating Your Own Personal Learning NetworkCarl Keller
 

Ähnlich wie WordCamp UK - Accessibility and HTML 5 (20)

The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The Browsers
 
Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
WebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile WebWebMatrix jQuery Mobile Web
WebMatrix jQuery Mobile Web
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
Tech 20 Session 10
Tech 20 Session 10Tech 20 Session 10
Tech 20 Session 10
 
Targeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & NativeTargeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & Native
 
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
 
HTML 5 vs. Native Mobile Applications
HTML 5 vs. Native Mobile ApplicationsHTML 5 vs. Native Mobile Applications
HTML 5 vs. Native Mobile Applications
 
Open and Accessible UI
Open and Accessible UIOpen and Accessible UI
Open and Accessible UI
 
Next Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv GohilNext Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv Gohil
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010Reasons to be cheerful - Fronteers 2010
Reasons to be cheerful - Fronteers 2010
 
Closing the gap between Web and Desktop with WinRT
Closing the gap between Web and Desktop with WinRTClosing the gap between Web and Desktop with WinRT
Closing the gap between Web and Desktop with WinRT
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
Fashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience web
Fashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience webFashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience web
Fashion & Luxury Masterclass 28th Oct 2014 - Acquia: Rise of experience web
 
Creating Your Own Personal Learning Network
Creating Your Own Personal Learning NetworkCreating Your Own Personal Learning Network
Creating Your Own Personal Learning Network
 

Kürzlich hochgeladen

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Kürzlich hochgeladen (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 

WordCamp UK - Accessibility and HTML 5

  • 1. WordCampUK 2010 Building for Accessibility and Getting Ready for HTML 5 Benjamin Ellis @benjaminellis | http://benjaminellis.org http://redcatco.com | http://socialoptic.com http://milestoneplanner.com/
  • 2. Accessibility WHY? Be a good web citizen. Legal compliance. Bigger Audience. Better design. SEO benefit.
  • 3. You Really Should   Disability Discrimination Act 1995
  • 4. NOTE: I'm Being Pragmatic 90/10 beats 100/0 every time > do something that makes a difference <
  • 5. Not Just, But Also... Sight Hearing Cognitive & Learning Motor & Mobility And degrees of severity ...there is no one answer
  • 6. Even More Complexity A Huge Range of Assistive Technologies: Screen Readers Magnification Input Devices - Speech / Switch OS Built in and 3 rd party
  • 7. <em> don't Err > the world isn't one size fits all < make your design flexible > the world
  • 8. Black on Black was cool in Hitch Hiker's Guide to the Galaxy. Not on your web site (ps search spiders hate it too) This isn't clever either...
  • 9. (um... no...) Do place decorative images in the stylesheet But for many of us the visual cues are important I'VE GOT TEXT ONLY I'M GOOD TO GO, RIGHT?
  • 10. Flash is evil right? Only if you are Steve Jobs Abode have some great features and guidelines, but it does take time and effort!
  • 11. Running the Race Twice Or run it once. Well.
  • 12. Guidelines   Web Content Accessibility Guidelines  WCAG 1.0 http://www.w3.org/TR/WCAG20/ but start with:  http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Or maybe try:  http://www.w3.org/WAI/WCAG20/quickref/ Disability Rights Commission (DRC): Pas 78   Don't lose the will to live!
  • 13. when the cat comes out the play LWOAM
  • 14. when the cat comes out the play LWOAM (life without a mouse) Tab index Hovers Access keys
  • 15. Vague Heuristics look at: your lowest screen resolution black and white without CSS At the source Do you lose the will to live?
  • 16. Web 2.0 AJAX and all that stuff...
  • 17. Web 2.0 AJAX and all that stuff... invisible /confusing to screen readers Practice graceful degradation (Progressive enhancement)
  • 18. Web 2.0 HTML 5 http://slides.html5rocks.com/
  • 19. HTML You're doing it already (mostly) Video/Audio (WebM) Page Structure Lots of CSS shiny shiny
  • 20. WordCampUK 2010 Building for Accessibility and Getting Ready for HTML 5 Benjamin Ellis @benjaminellis | http://benjaminellis.org http://redcatco.com | http://socialoptic.com http://milestoneplanner.com/

Hinweis der Redaktion

  1. Do I need to &apos;do&apos; accessibility? The short answer is yes, you do, and for a number of reasons. Firstly, it&apos;s a basic part of being a good web citizen. You wouldn&apos;t ignore someone who came up to you in the street because they were blind or missing their arms, so why build a web site on the net that they can&apos;t get access to? Accessibility leads to better design The process of thinking through accessibility requirements leads to better design. When most people talk about website design, they tend to talk about visual design - the static appearance of the site. However, websites aren&apos;t a static visual. We interact with them, resize them, view them on different browsers and discover them via search engines that view them as raw text. A basic accessibility check list deals with all of these things, and that means better design (in a broader sense, including interaction design) and also inherently includes search engine optimisation.
  2. The reality for most businesses (including in the UK), is that basic web site accessibility is a legal requirement. That said, the UK law is a bit muddy, although new legislation that comes into force in October does make things clearer. By building your website to make it accessible on a broader range of devices, and via a broader range of tools and presentations, you give yourself a bigger audience. That&apos;s just plain good business sense.
  3. 90/10 Beats 100/0 – Every time There is a danger that in striving for 100% perfection, we end up doing nothing. When it comes to accessibility, I&apos;d rather see people do something, and get it 90% or 80% (or even 10%!) right, that do nothing. That may mean some of what I say here offends the purists, but here&apos;s the thing: When I first started looking at accessibility, those purists were the ones that put me off. The dogmatic demand for 100% perfection can result in people deciding that dealing with accessibility is too hard, or too expensive, and that is tragic. Basic accessibility is quick, easy and very rewarding. 
  4. Many Dimensions - No One Answer Disabilities take many many different forms. From vision impairment encountered in old age, to motor issues from birth. Each has their own unique requirements. Sight, hearing, learning, cognitive, motor and mobility impairments occur with a range of severities, and in different combinations. My own experience is through dyslexia. There are many websites that I simply can&apos;t &amp;quot;get a fix on&amp;quot; - the layout and design makes it challenging for me to read them and hard to understand how I am meant to interact with them.
  5. There are many different assistive tools to help, from screen readers and text magnification tools, to input devices. As well as third party tools, most operating systems include universal access technologies. If you&apos;ve never tested them out, fire up systems preferences or control panel and give them a spin. You&apos;ll find screen magnification, black and white / text inversion settings, contrast controls, speech technologies and keyboard for mouse controls.
  6. Em don&apos;t Err When websites are built, there are a number of different ways of specifying the sizes of fonts and devisions on the page. For many years web designers used pixels, but pixels are fickle things. They vary in size from machine to machine, and while it makes it easy to align text to graphics (which are sized in pixels), it means that you loose the ability to let the user&apos;s view make smart choices about how to display your page. Enter &apos;em&apos;s, which are more flexible and the preferred alternative these days. Building a page with ratios, rather than absolute sizes, enables users to use large fonts without breaking your site. Open up your favourite site and use the browser&apos;s view settings to display it in a larger font. Does it still look ok? Then all&apos;s good and well, but if the text goes off screen, or starts to over lap with graphics on the page, all is not well.
  7. Colour blindness affects a huge portion of the population. Poorly contrasting, over opposing primary colour foreground/background combinations don&apos;t only look poor, they are poor. Choose a sensible palette of colours that are discernible, even in black and white. Then stick to them.
  8. The short answer is: No. While a text-only page can help, it is far from a full solution. In some cases, removing the images can make this worse. Well designed images can make navigation more intuitive, and provide important cues for people with reading difficulties. Good web-design separates decorative and functional images and places them in the style sheets or page HTML as appropriate.
  9. Apple’s Steve Jobs might like you to think so, but while the whizzy Adobe Flash animations slapped onto the front page of many sites have been an accessibility (and usability) nightmare, there is no reason for this to be the case. Adobe provide an excellent set of guidelines and tools to make Flash applications that are very accessible. It’s simply a matter of using them. Please make sure that you, or whoever you hire, does. Apple’s HTML 5 fuelled crusade against Flash is going to do little to improve accessibility – you are still embedding video, and still need to provide accessible controls and alternative content.
  10. There is a camp that argues for building a completely separate instance of your site to deal with accessibility issues. Personally I think that is a dangerous road. Firstly, it instantly doubles the amount of work involved in keeping your site up to date. Your site is completely up to date, right? Secondly, the result almost inevitably ends up with web pages that are trying to cater to Dave, with a reading age of 8, who is passionate about your products, and Sue who has a double first from Oxford and is partially sighted. It’s a result that is inevitably downright insulting to everyone involved.
  11. The initial Web Content Accessibility Guidelines  WCAG 1.0 received a mixed welcome.  The 2.0 contribution is a heavy read:  http://www.w3.org/TR/WCAG20/ , you could start with:  http://www.w3.org/TR/UNDERSTANDING-WCAG20/ , although I read the “understanding WCAG20″ document, and didn’t understand that either the first time! You could also try:  http://www.w3.org/WAI/WCAG20/quickref/ . The documents are a challenging read and feel quite onerous. In the UK we have the Disability Rights Commission (DRC): Pas 78 . It used to be a paid for document, but now you can download it for free via that link. Don’t lose the will to live when you read these things! I’ll come back to some easy first steps that you can take, the guidelines are for when you get serious about accessibility – which I strongly urge you to do!
  12. “ Life without a mouse” – from mobile phones to office workers with RSI, it isn’t just cats that are chasing the mice away. Understanding what it feels like to interact with your site without a mouse is a solid way to improve your site’s layout and navigation structure. Make sure you have access keys set ( Twitter does!), that web forms have tab indexes , and that your site isn’t over reliant on hovers.
  13. As a very basic, minimal set of checks, here is what you can do in less than five minutes for your site or sites that you build: View it at your lowest screen resolution View it in black and white View it without stylesheets turned on View the page source If viewing in any of those modes leaves you perplexed, then you probably need to fix it. Make sure your images have ALT text, and that the fonts on the web page scale sensibly and you’ll be making the web experience. There are some on-line testing tools (for example T.A.W. ), although none of them are perfect or instant magic..
  14. Javascript is invisible to many accessibilty tools. Play nice!
  15. Many advocate graceful degredation. I prefer the progressive enhancement model. Build a simple site that works well, then add on the shiny chrome and AJAX wizardly. That way everyone gets a good experience, rather than lots of people getting a poor undesigned one.
  16. Get set of slides – check these out and run through the new CSS HTML and Javasciprt features.
  17. Most wordPress using are already HTML 5 ready, as it were. For the rest, it is relatively simple changes to the theme. WordPress sites tend to follow the right semantic structures. Thankfully!