SlideShare a Scribd company logo
1 of 35
Download to read offline
Accessible Javascript
 with and without
    WAI ARIA
    GeekUp Leeds 15 April 2009
          Dirk Ginader

         http://ginader.com
     http://twitter.com/ginader
What makes Javascript
   “Accessible”?
• the content of the page is at least as
  accessible with Javascript as without
• nothing is being withheld from users
  without Javascript
• users of assistive technologies are able to
  use the page too
Without accessible
 Markup there’s no
accessible Javascript
• first and foremost a Website needs to
  works without Javascript

• do we use the best matching HTML
  Elements for each Part of the Page?

• is the Page perfectly logic, understandable
  and usable without CSS?
CSS does not always
 make just beautiful
• badly used CSS is able to make a page
  inaccessible long before Javascript can

• display:none and visibility:hidden are not
  generally evil but sadly quite often

• hidden elements will be revealed when
  you :hover over them - nice! But what
  happens if you don’t use a mouse?

• CSS is for design - not for interaction!
Interaction is handled
    on the Server
• anything you wanna achieve using Javascript
  you need to solve without first

• a reload may not be cool anymore but it’s
  exactly as necessary as it was 10 years ago

• if that is taken care of we can add some
  magic
Javascript is the icing
     on the cake
• Javascript is another layer above HTML and
  CSS

• existing interaction elements like links or
  buttons get hijacked and changed to do
  their job in the Browser instead on the
  server

• new interaction elements, that offer
  functionality only available with Javascript,
  need to be created by Javascript (use
  tabable elements only!)
another layer:
   different CSS if
Javascript is available
• YAY! We got Javascript! Let’s dig up the
    DOM completely!

• we better leave the changes to someone
    that does that job better and faster than
    we can: CSS

• a simple 1 liner in the head does the+= ” js”;
                                        trick:
  document.documentElement.className

•   by adding .js in front of existing selectors you can
    now define Javascript aware CSS
Screenreaders don’t
understand Javascript
     anyway...
• is there still someone believing that?
• most Screenreaders actually handle
  Javascript very well!

• they just don’t know all the time
• inform Screenreaders about what’s
  happening

• a logic and understandable workflow is the
  easiest thing to test without a Screenreader

• focus() the right element
• when updating the DOM it might be
  necessary to force the Screenreader’s
  virtual buffer to refresh by updating a
  hidden Form field
Accessibility
     !=
Screenreader
• is the website usable without a mouse?
• the tab key is one of the most important
  navigation tools

• do elements react on :hover and :focus?
• what happens if a page gets scaled up or
  down?

• screen magnifiers only show a very small
  part of the screen

• does really everyone understand what
  happens on the page right now?
And another Layer:
   WAI-ARIA
• mapping existing and well known concepts
  from the operating systems to custom
  elements in the Browser

• adding meaning to meaningless Markup
• instant updates to the user
Roles
• alert
• banner
• button
• menuitem
• slider
Document Landmark
     Roles
• application
• banner
• complementary
• contentinfo
• main
• navigation
• search
States and Properties
• aria-valuemin
• aria-valuemax
• aria-valuenow
• aria-valuetext
• aria-labelledby
Live Regions
informing about
     changes
• off
• polite
• assertive
• (rude)
You can use it today
• it does no validate
• you can simply add the properties using
  Javascript as it depends on it anyway
• everybody can add Landmark roles now
• aria-required=”true” makes a dream come
  true
Don’t rely on it
• There are no stats but we know that still a
  lot of Screenreader users are stuck on old
  versions without ARIA support

• Progressive Enhancement all over again...
more

• http://cli.gs/wai-aria
• http://cli.gs/accessible-tabs
• http://cli.gs/accessibilitytips
• http://cli.gs/wai-aria-video
http://ginader.com
http://twitter.com/ginader

More Related Content

What's hot

Building Responsible Wordpress Sites
Building Responsible Wordpress SitesBuilding Responsible Wordpress Sites
Building Responsible Wordpress SitesBrian Goldstein
 
All the small things… - Awwwards 2016
All the small things… - Awwwards 2016All the small things… - Awwwards 2016
All the small things… - Awwwards 2016Christian Heilmann
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applicationsVittorio Vittori
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupChristian Heilmann
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizrbrooky-yen
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascriptLee Jordan
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
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
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React지수 윤
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal languageRonald Harmsen
 
Cache Money Business
Cache Money BusinessCache Money Business
Cache Money BusinessMark Jaquith
 
Javascript(2)
Javascript(2)Javascript(2)
Javascript(2)tomcoh
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilPerformance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilFresh Tilled Soil
 
The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015Christian Heilmann
 
Career on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPressCareer on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPressEunus Hosen
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013dmethvin
 

What's hot (20)

Blazor - C# for the web
Blazor - C# for the webBlazor - C# for the web
Blazor - C# for the web
 
Building Responsible Wordpress Sites
Building Responsible Wordpress SitesBuilding Responsible Wordpress Sites
Building Responsible Wordpress Sites
 
All the small things… - Awwwards 2016
All the small things… - Awwwards 2016All the small things… - Awwwards 2016
All the small things… - Awwwards 2016
 
Test-proof CSS
Test-proof CSSTest-proof CSS
Test-proof CSS
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetupThe State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizr
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascript
 
Asynchrony on the web
Asynchrony on the webAsynchrony on the web
Asynchrony on the web
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
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…
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React
 
Javascript as universal language
Javascript as universal languageJavascript as universal language
Javascript as universal language
 
Cache Money Business
Cache Money BusinessCache Money Business
Cache Money Business
 
Javascript(2)
Javascript(2)Javascript(2)
Javascript(2)
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilPerformance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled Soil
 
The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015
 
Career on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPressCareer on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPress
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 

Viewers also liked

Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
 
Javascript done right
Javascript done rightJavascript done right
Javascript done rightDirk Ginader
 
Five Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social NetworksFive Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social NetworksAltoros
 
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesFive Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesAltoros
 
Five Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers PerformanceFive Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers PerformanceAltoros
 
Soergel oa week-2014-lightning
Soergel oa week-2014-lightningSoergel oa week-2014-lightning
Soergel oa week-2014-lightningDavid Soergel
 
Ejemplos WAI-ARIA con HTML, CSS y JavaScript
Ejemplos WAI-ARIA con HTML, CSS y JavaScriptEjemplos WAI-ARIA con HTML, CSS y JavaScript
Ejemplos WAI-ARIA con HTML, CSS y JavaScriptJose R. Hilera
 
1.9. el uso de can y can't, oraciones y preguntas con este verbo
1.9.  el uso de can y can't, oraciones y preguntas con este verbo1.9.  el uso de can y can't, oraciones y preguntas con este verbo
1.9. el uso de can y can't, oraciones y preguntas con este verboAlberto Carranza Garcia
 
Ubuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security FeaturesUbuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security FeaturesDustin Kirkland
 
Garbage Collection en el JVM
Garbage Collection en el JVMGarbage Collection en el JVM
Garbage Collection en el JVMsuperserch
 
ParisDataGeek - L amour est dans le graphe
ParisDataGeek - L amour est dans le grapheParisDataGeek - L amour est dans le graphe
ParisDataGeek - L amour est dans le grapheDjamel Zouaoui
 
designing innovation, insitutions for social transformation D1s3 gupta anil i...
designing innovation, insitutions for social transformation D1s3 gupta anil i...designing innovation, insitutions for social transformation D1s3 gupta anil i...
designing innovation, insitutions for social transformation D1s3 gupta anil i...Dr Anil Gupta
 
開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會
開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會
開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會Jason Cheng
 
Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013
Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013
Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013Cain Ransbottyn
 
Shall we play a game?
Shall we play a game?Shall we play a game?
Shall we play a game?Maciej Lasyk
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsLinkedIn
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerLuminary Labs
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging ChallengesAaron Irizarry
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 

Viewers also liked (20)

Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
Five Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social NetworksFive Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social Networks
 
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesFive Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
 
Five Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers PerformanceFive Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers Performance
 
Soergel oa week-2014-lightning
Soergel oa week-2014-lightningSoergel oa week-2014-lightning
Soergel oa week-2014-lightning
 
Ejemplos WAI-ARIA con HTML, CSS y JavaScript
Ejemplos WAI-ARIA con HTML, CSS y JavaScriptEjemplos WAI-ARIA con HTML, CSS y JavaScript
Ejemplos WAI-ARIA con HTML, CSS y JavaScript
 
1.9. el uso de can y can't, oraciones y preguntas con este verbo
1.9.  el uso de can y can't, oraciones y preguntas con este verbo1.9.  el uso de can y can't, oraciones y preguntas con este verbo
1.9. el uso de can y can't, oraciones y preguntas con este verbo
 
Ubuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security FeaturesUbuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security Features
 
Garbage Collection en el JVM
Garbage Collection en el JVMGarbage Collection en el JVM
Garbage Collection en el JVM
 
ParisDataGeek - L amour est dans le graphe
ParisDataGeek - L amour est dans le grapheParisDataGeek - L amour est dans le graphe
ParisDataGeek - L amour est dans le graphe
 
designing innovation, insitutions for social transformation D1s3 gupta anil i...
designing innovation, insitutions for social transformation D1s3 gupta anil i...designing innovation, insitutions for social transformation D1s3 gupta anil i...
designing innovation, insitutions for social transformation D1s3 gupta anil i...
 
開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會
開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會
開源 x 節流:企業導入實例分享 (二) [2016/03/31] 文件自由日研討會
 
Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013
Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013
Privacy is an Illusion and you’re all losers! - Cryptocow - Infosecurity 2013
 
Shall we play a game?
Shall we play a game?Shall we play a game?
Shall we play a game?
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 

Similar to Accessible Javascript with and without WAI ARIA

the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIDirk Ginader
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison
 
Beyond the Standards
Beyond the StandardsBeyond the Standards
Beyond the StandardsPaul Bakaus
 
Progressive Enhancement with JavaScript and Ajax
Progressive Enhancement with JavaScript and AjaxProgressive Enhancement with JavaScript and Ajax
Progressive Enhancement with JavaScript and AjaxChristian Heilmann
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with CanvasJason Harwig
 
Ajax World Oracle Ria
Ajax World Oracle RiaAjax World Oracle Ria
Ajax World Oracle Riarajivmordani
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptChristian Heilmann
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design WorkshopSuseZ
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Print a web page using java script
Print a web page using java scriptPrint a web page using java script
Print a web page using java scriptzulhamsyamhari
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWebDave Bouwman
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web developmentChristian Heilmann
 

Similar to Accessible Javascript with and without WAI ARIA (20)

the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
Beyond the Standards
Beyond the StandardsBeyond the Standards
Beyond the Standards
 
Progressive Enhancement with JavaScript and Ajax
Progressive Enhancement with JavaScript and AjaxProgressive Enhancement with JavaScript and Ajax
Progressive Enhancement with JavaScript and Ajax
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
Ajax World Oracle Ria
Ajax World Oracle RiaAjax World Oracle Ria
Ajax World Oracle Ria
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
 
Web Optimisation
Web OptimisationWeb Optimisation
Web Optimisation
 
JavaScript isn't evil.
JavaScript isn't evil.JavaScript isn't evil.
JavaScript isn't evil.
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Enhance Enhance
Enhance EnhanceEnhance Enhance
Enhance Enhance
 
Print a web page using java script
Print a web page using java scriptPrint a web page using java script
Print a web page using java script
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Ajax World West
Ajax World WestAjax World West
Ajax World West
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
frontend-161011205424.pptx
frontend-161011205424.pptxfrontend-161011205424.pptx
frontend-161011205424.pptx
 

More from Dirk Ginader

Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessibleDirk Ginader
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricksDirk Ginader
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Dirk Ginader
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Dirk Ginader
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev toolsDirk Ginader
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVDirk Ginader
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIDirk Ginader
 
The accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceThe accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceDirk Ginader
 
Das Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDas Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDirk Ginader
 
Die 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDie 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDirk Ginader
 
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Dirk Ginader
 
Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Dirk Ginader
 

More from Dirk Ginader (12)

Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
 
The accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceThe accessibility features of Yahoo! Finance
The accessibility features of Yahoo! Finance
 
Das Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDas Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und Pipes
 
Die 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDie 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web Entwicklung
 
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008
 
Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2
 

Recently uploaded

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Recently uploaded (20)

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

Accessible Javascript with and without WAI ARIA

  • 1. Accessible Javascript with and without WAI ARIA GeekUp Leeds 15 April 2009 Dirk Ginader http://ginader.com http://twitter.com/ginader
  • 2. What makes Javascript “Accessible”? • the content of the page is at least as accessible with Javascript as without • nothing is being withheld from users without Javascript • users of assistive technologies are able to use the page too
  • 3. Without accessible Markup there’s no accessible Javascript
  • 4. • first and foremost a Website needs to works without Javascript • do we use the best matching HTML Elements for each Part of the Page? • is the Page perfectly logic, understandable and usable without CSS?
  • 5. CSS does not always make just beautiful
  • 6. • badly used CSS is able to make a page inaccessible long before Javascript can • display:none and visibility:hidden are not generally evil but sadly quite often • hidden elements will be revealed when you :hover over them - nice! But what happens if you don’t use a mouse? • CSS is for design - not for interaction!
  • 7. Interaction is handled on the Server
  • 8. • anything you wanna achieve using Javascript you need to solve without first • a reload may not be cool anymore but it’s exactly as necessary as it was 10 years ago • if that is taken care of we can add some magic
  • 9. Javascript is the icing on the cake
  • 10. • Javascript is another layer above HTML and CSS • existing interaction elements like links or buttons get hijacked and changed to do their job in the Browser instead on the server • new interaction elements, that offer functionality only available with Javascript, need to be created by Javascript (use tabable elements only!)
  • 11. another layer: different CSS if Javascript is available
  • 12. • YAY! We got Javascript! Let’s dig up the DOM completely! • we better leave the changes to someone that does that job better and faster than we can: CSS • a simple 1 liner in the head does the+= ” js”; trick: document.documentElement.className • by adding .js in front of existing selectors you can now define Javascript aware CSS
  • 14. • is there still someone believing that? • most Screenreaders actually handle Javascript very well! • they just don’t know all the time
  • 15. • inform Screenreaders about what’s happening • a logic and understandable workflow is the easiest thing to test without a Screenreader • focus() the right element • when updating the DOM it might be necessary to force the Screenreader’s virtual buffer to refresh by updating a hidden Form field
  • 16. Accessibility != Screenreader
  • 17. • is the website usable without a mouse? • the tab key is one of the most important navigation tools • do elements react on :hover and :focus?
  • 18. • what happens if a page gets scaled up or down? • screen magnifiers only show a very small part of the screen • does really everyone understand what happens on the page right now?
  • 19. And another Layer: WAI-ARIA
  • 20. • mapping existing and well known concepts from the operating systems to custom elements in the Browser • adding meaning to meaningless Markup • instant updates to the user
  • 21. Roles
  • 22. • alert • banner • button • menuitem • slider
  • 24. • application • banner • complementary • contentinfo • main • navigation • search
  • 26. • aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby
  • 28. • off • polite • assertive • (rude)
  • 29. You can use it today
  • 30. • it does no validate • you can simply add the properties using Javascript as it depends on it anyway
  • 31. • everybody can add Landmark roles now • aria-required=”true” makes a dream come true
  • 33. • There are no stats but we know that still a lot of Screenreader users are stuck on old versions without ARIA support • Progressive Enhancement all over again...
  • 34. more • http://cli.gs/wai-aria • http://cli.gs/accessible-tabs • http://cli.gs/accessibilitytips • http://cli.gs/wai-aria-video

Editor's Notes

  1. over 90 different roles to map existing OS concepts onto your Markup
  2. article Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on. banner Site-orientated content, such as the title of the page and the logo. complementary Supporting content for the main content, but meaningful in its own right when separated from the main content. For example, the weather listed on a portal. contentinfo Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. main Content that is directly related to or expands on the central content of the document. navigation Content that contains the links to navigate this document and/or related documents. search This section contains a search form to search the site.
  3. aria-valuemin Stores the lowest value a range may have. aria-valuemax Stores the highest value a range may have. aria-valuenow Stores the current value in a range. aria-valuetext Stores readable text to help the user understand the context. For example, \"30 dollars\" . aria-labelledby Stores the id attribute of a text label containing an appropriate prompt for this widget.