SlideShare a Scribd company logo
1 of 12
Download to read offline
STEPS TO WCAG 2.0
     CSUN2013
     1 mars 2013
                    1
AURELIEN LEVY
  accessibility expert
       Temesis
                         2
EXPERT POINT OF VIEW
  web accessibility expert want to have fun

                                              3
decorative ?

 image
function
    ?
           links ?


   informative ?
                        ?


                     logo ?
                            yes ?
                                    ?           links ?

                                        alternative
                                             ?
                                                              ?
                                                          short ?

                                          longdescription ?
                                                                    ?


                                    ?
       ?                    no ?            ?                 ?

   DEVELOPER POINT OF VIEW
    Web developer want short and simple coding instruction

                                                                        4
THE MOUNT WCAG 2.0
•   errors - first step (81 instructions)
•   risks - second step (49 instructions)
                                            5
FIRST STEP TO WCAG 2.0
•   All non-text content that is presented to the user has a text
    alternative that serves the equivalent purpose, except for the
    situations listed below




•   Use the alt attribute for every img element

•   If the img element is the only child of a button or an a element,
    do not leave its alt attribute empty

                                                                        6
SECOND STEP TO WCAG 2.0
•   The purpose of each link can be determined from the link text
    alone or from the link text together with its programmatically
    determined link context, except where the purpose of the link
    would be ambiguous to users in general.




•   Use with caution the target attribute with a _blank value for an a
    element



                                                                         7
AGILE LEARNING/TEACHING
•   4 hands coding
•   quick review
•   online helpdesk
                              8
OPQUAST DESKTOP
•   Firefox extension available at https://desktop.opquast.com/en/
•   Source code on Github
                                                                     9
OPQUAST FRAMEWORK
•   Opquast Checklist
•   Opquast Reporting
•   Opquast Helpdesk
                            10
HTML5, CSS3, ARIA
                 don’t use autoplay attribut,
use with caution the assertive value for aria-live attribut, etc..
                                                                     11
QUESTIONS ?

                      18, rue Lucien Granet -
                       33150 Cenon - France
                     Tél. : +33 (0)5 56 401 402
                      www.temesis.com
                              @goetsu
                  aurelien.levy@temesis.com




 https://checklists.opquast.com/en/accessibilityfirststep
https://checklists.opquast.com/en/accessibilitysecondstep

                                                            12

More Related Content

Similar to Steps to WCAG 2.0

How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCChristian Heilmann
 
Web components and friends
Web components and friendsWeb components and friends
Web components and friendsSergio Contreras
 
UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!René Winkelmeyer
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesreebalazs
 
4Ward Company Presentation
4Ward Company Presentation4Ward Company Presentation
4Ward Company Presentation4Ward
 
Leaflet-IIIF: Plugins and Extensibility with IIIF
Leaflet-IIIF: Plugins and Extensibility with IIIFLeaflet-IIIF: Plugins and Extensibility with IIIF
Leaflet-IIIF: Plugins and Extensibility with IIIFIIIF_io
 
Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12Christophe Keromen
 
Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...
Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...
Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...Software Park Thailand
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadRuss Fustino
 
Moodle as the central hub of learning with tools plugged in –learning tool in...
Moodle as the central hub of learning with tools plugged in –learning tool in...Moodle as the central hub of learning with tools plugged in –learning tool in...
Moodle as the central hub of learning with tools plugged in –learning tool in...Gavin Henrick
 
#1 - HTML5 Overview
#1 - HTML5 Overview#1 - HTML5 Overview
#1 - HTML5 Overviewiloveigloo
 
Adding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development ProcessAdding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development ProcessNTEN
 
Web技術の現状と将来 (Open Source Conference 2011 Nagoya)
 Web技術の現状と将来 (Open Source Conference 2011 Nagoya) Web技術の現状と将来 (Open Source Conference 2011 Nagoya)
Web技術の現状と将来 (Open Source Conference 2011 Nagoya)Rikkyo University
 
NLLUG 2012 - XPages Extensibility API - going deep!
NLLUG 2012 - XPages Extensibility API - going deep!NLLUG 2012 - XPages Extensibility API - going deep!
NLLUG 2012 - XPages Extensibility API - going deep!René Winkelmeyer
 
Introduction to the azure service bus eai edi features
Introduction to the azure service bus eai edi featuresIntroduction to the azure service bus eai edi features
Introduction to the azure service bus eai edi featuresSandro Pereira
 
FooConf23_Bringing the cloud back down to earth.pptx
FooConf23_Bringing the cloud back down to earth.pptxFooConf23_Bringing the cloud back down to earth.pptx
FooConf23_Bringing the cloud back down to earth.pptxGrace Jansen
 
LibX 2.0
LibX 2.0LibX 2.0
LibX 2.0eby
 
Jfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptxJfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptxGrace Jansen
 

Similar to Steps to WCAG 2.0 (20)

How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDC
 
About 4Ward
About 4WardAbout 4Ward
About 4Ward
 
Web components and friends
Web components and friendsWeb components and friends
Web components and friends
 
UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
 
4Ward Company Presentation
4Ward Company Presentation4Ward Company Presentation
4Ward Company Presentation
 
Leaflet-IIIF: Plugins and Extensibility with IIIF
Leaflet-IIIF: Plugins and Extensibility with IIIFLeaflet-IIIF: Plugins and Extensibility with IIIF
Leaflet-IIIF: Plugins and Extensibility with IIIF
 
Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12
 
Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...
Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...
Thailand SPIN: Series 3: กุญแจสู่ความสำเร็จในการเขียนโปรแกรมให้ตรงกับความต้อง...
 
Django in the Real World
Django in the Real WorldDjango in the Real World
Django in the Real World
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
Moodle as the central hub of learning with tools plugged in –learning tool in...
Moodle as the central hub of learning with tools plugged in –learning tool in...Moodle as the central hub of learning with tools plugged in –learning tool in...
Moodle as the central hub of learning with tools plugged in –learning tool in...
 
#1 - HTML5 Overview
#1 - HTML5 Overview#1 - HTML5 Overview
#1 - HTML5 Overview
 
Adding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development ProcessAdding Guerilla Accessibility Testing to Your Development Process
Adding Guerilla Accessibility Testing to Your Development Process
 
Web技術の現状と将来 (Open Source Conference 2011 Nagoya)
 Web技術の現状と将来 (Open Source Conference 2011 Nagoya) Web技術の現状と将来 (Open Source Conference 2011 Nagoya)
Web技術の現状と将来 (Open Source Conference 2011 Nagoya)
 
NLLUG 2012 - XPages Extensibility API - going deep!
NLLUG 2012 - XPages Extensibility API - going deep!NLLUG 2012 - XPages Extensibility API - going deep!
NLLUG 2012 - XPages Extensibility API - going deep!
 
Introduction to the azure service bus eai edi features
Introduction to the azure service bus eai edi featuresIntroduction to the azure service bus eai edi features
Introduction to the azure service bus eai edi features
 
FooConf23_Bringing the cloud back down to earth.pptx
FooConf23_Bringing the cloud back down to earth.pptxFooConf23_Bringing the cloud back down to earth.pptx
FooConf23_Bringing the cloud back down to earth.pptx
 
LibX 2.0
LibX 2.0LibX 2.0
LibX 2.0
 
Jfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptxJfokus_Bringing the cloud back down to earth.pptx
Jfokus_Bringing the cloud back down to earth.pptx
 

More from levy aurélien

Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessidayVous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessidaylevy aurélien
 
opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31levy aurélien
 
HTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossibleHTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossiblelevy aurélien
 
ARIA et les librairies JS
ARIA et les librairies JSARIA et les librairies JS
ARIA et les librairies JSlevy aurélien
 
Questions Reponses Accessibilite
Questions Reponses AccessibiliteQuestions Reponses Accessibilite
Questions Reponses Accessibilitelevy aurélien
 
atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007levy aurélien
 
RGAA choix initiaux et cadre general deploiement
RGAA choix initiaux et cadre general deploiementRGAA choix initiaux et cadre general deploiement
RGAA choix initiaux et cadre general deploiementlevy aurélien
 

More from levy aurélien (9)

Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessidayVous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
 
Mobile confoo 2013
Mobile confoo 2013Mobile confoo 2013
Mobile confoo 2013
 
opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31opquast tpac w3c 2012-10-31
opquast tpac w3c 2012-10-31
 
A11y pas à pas
A11y pas à pasA11y pas à pas
A11y pas à pas
 
HTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossibleHTML5 et JS accessible mission impossible
HTML5 et JS accessible mission impossible
 
ARIA et les librairies JS
ARIA et les librairies JSARIA et les librairies JS
ARIA et les librairies JS
 
Questions Reponses Accessibilite
Questions Reponses AccessibiliteQuestions Reponses Accessibilite
Questions Reponses Accessibilite
 
atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007atelier RGAA Parisweb 2007
atelier RGAA Parisweb 2007
 
RGAA choix initiaux et cadre general deploiement
RGAA choix initiaux et cadre general deploiementRGAA choix initiaux et cadre general deploiement
RGAA choix initiaux et cadre general deploiement
 

Steps to WCAG 2.0

  • 1. STEPS TO WCAG 2.0 CSUN2013 1 mars 2013 1
  • 2. AURELIEN LEVY accessibility expert Temesis 2
  • 3. EXPERT POINT OF VIEW web accessibility expert want to have fun 3
  • 4. decorative ? image function ? links ? informative ? ? logo ? yes ? ? links ? alternative ? ? short ? longdescription ? ? ? ? no ? ? ? DEVELOPER POINT OF VIEW Web developer want short and simple coding instruction 4
  • 5. THE MOUNT WCAG 2.0 • errors - first step (81 instructions) • risks - second step (49 instructions) 5
  • 6. FIRST STEP TO WCAG 2.0 • All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below • Use the alt attribute for every img element • If the img element is the only child of a button or an a element, do not leave its alt attribute empty 6
  • 7. SECOND STEP TO WCAG 2.0 • The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. • Use with caution the target attribute with a _blank value for an a element 7
  • 8. AGILE LEARNING/TEACHING • 4 hands coding • quick review • online helpdesk 8
  • 9. OPQUAST DESKTOP • Firefox extension available at https://desktop.opquast.com/en/ • Source code on Github 9
  • 10. OPQUAST FRAMEWORK • Opquast Checklist • Opquast Reporting • Opquast Helpdesk 10
  • 11. HTML5, CSS3, ARIA don’t use autoplay attribut, use with caution the assertive value for aria-live attribut, etc.. 11
  • 12. QUESTIONS ? 18, rue Lucien Granet - 33150 Cenon - France Tél. : +33 (0)5 56 401 402 www.temesis.com @goetsu aurelien.levy@temesis.com https://checklists.opquast.com/en/accessibilityfirststep https://checklists.opquast.com/en/accessibilitysecondstep 12