SlideShare a Scribd company logo

How To Build An Accessible Web Application

•
•
Dennis Lembree
Dennis Lembree

Presentation slides for Accessibility DC Meetup, November 15, 2011.

TechnologyDesign
1 of 42
How to Build an Accessible Web Application (Easy Chirp) Presented by Dennis Lembrée Accessibility DC Meet-up Martin Luther King (MLK) Library November 15, 2011
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Intro ,[object Object],[object Object],[object Object],[object Object],[object Object]
Foundations ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Foundations ,[object Object],[object Object],[object Object],[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML ,[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS & Design ,[object Object],[object Object],[object Object],[object Object]
CSS & Design ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS & Design ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS & Design ,[object Object],[object Object]
CSS & Design ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS & Design ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript
JavaScript
JavaScript ,[object Object],[object Object],[object Object],[object Object]
ARIA ,[object Object],[object Object],[object Object],[object Object]
ARIA - Landmark Roles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ARIA - Landmark Roles role=“banner” role=“navigation” role=“contentinfo” role=“main” role=“complementary” role=“search”
ARIA - States and Properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ARIA - States and Properties ,[object Object],[object Object],[object Object],[object Object]
ARIA – Live Regions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ARIA – Live Regions
ARIA – Live Regions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Writing ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Results ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Results ,[object Object],Konquerer (Linux) IE6 Kindle (first release)
Results ,[object Object],[object Object],[object Object]
Results ,[object Object],[object Object],[object Object],[object Object],[object Object]
Other Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Contact Details ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Questions?

Recommended

Angular JS - UI Development Online Training
Angular JS - UI Development Online TrainingAngular JS - UI Development Online Training
Angular JS - UI Development Online TrainingFront End UI Online Training from India
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web DesignVictor M. Ortiz
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 EditionSt. Petersburg College
 
Web designing course bangalore
Web designing course bangaloreWeb designing course bangalore
Web designing course bangaloreInfocampus Logics Pvt.Ltd.
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationSudhir Yadav
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationSudhir Yadav
 
Web site design
Web site designWeb site design
Web site designKingsport City SChools
 
Web Designing
Web Designing Web Designing
Web Designing BALUJAINSTITUTE
 

Recommended

Angular JS - UI Development Online Training
Angular JS - UI Development Online TrainingAngular JS - UI Development Online Training
Angular JS - UI Development Online TrainingFront End UI Online Training from India
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web DesignVictor M. Ortiz
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 EditionSt. Petersburg College
 
Web designing course bangalore
Web designing course bangaloreWeb designing course bangalore
Web designing course bangaloreInfocampus Logics Pvt.Ltd.
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationSudhir Yadav
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationSudhir Yadav
 
Web site design
Web site designWeb site design
Web site designKingsport City SChools
 
Web Designing
Web Designing Web Designing
Web Designing BALUJAINSTITUTE
 
Structuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom FieldsStructuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom FieldsJamie Schmid
 
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing CourseARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing CourseArcEducation Ambala
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websiteswebsiteunlimited
 
Top web development tools
Top web development toolsTop web development tools
Top web development toolsBusinessDevelopment35
 
Aria Widgets
Aria WidgetsAria Widgets
Aria Widgetstoddkloots
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Ppt on Website Planning
Ppt on Website PlanningPpt on Website Planning
Ppt on Website PlanningOm Prakash
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development ProcessHend Al-Khalifa
 
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienCustomizing the SharePoint 2013 user interface with JavaScript - Chris OBrien
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien
 
Web App Development Technologies You Should Know
Web App Development Technologies You Should KnowWeb App Development Technologies You Should Know
Web App Development Technologies You Should KnowVishal Sinhasan
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
Web Site Design,
Web Site Design,Web Site Design,
Web Site Design,Deepak Singh Rawat
 
How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3Ryan McIntyre
 
website planning and creation for beginners
website planning and creation for beginners website planning and creation for beginners
website planning and creation for beginners Shruti Goel
 
"Generating static web sites with Middleman"
"Generating static web sites with Middleman""Generating static web sites with Middleman"
"Generating static web sites with Middleman"Tony Camaiani
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Kannika Kong
 
Lecture 1 intro to web designing
Lecture 1 intro to web designingLecture 1 intro to web designing
Lecture 1 intro to web designingpalhaftab
 
Amay arodelyn maot
Amay arodelyn maotAmay arodelyn maot
Amay arodelyn maotRodelynRodriguez
 
Style guide for share point 2013 branding
Style guide for share point 2013 brandingStyle guide for share point 2013 branding
Style guide for share point 2013 brandingVinod Dangudubiyyapu
 
Web dev-101
Web dev-101Web dev-101
Web dev-101Andrew Pottenger
 
Kanban Method Change Machine - As a Story Map
Kanban Method Change Machine - As a Story MapKanban Method Change Machine - As a Story Map
Kanban Method Change Machine - As a Story MapYuval Yeret
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript AccessibleDennis Lembree
 

More Related Content

What's hot

Structuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom FieldsStructuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom FieldsJamie Schmid
 
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing CourseARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing CourseArcEducation Ambala
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websiteswebsiteunlimited
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Ppt on Website Planning
Ppt on Website PlanningPpt on Website Planning
Ppt on Website PlanningOm Prakash
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development ProcessHend Al-Khalifa
 
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienCustomizing the SharePoint 2013 user interface with JavaScript - Chris OBrien
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien
 
Web App Development Technologies You Should Know
Web App Development Technologies You Should KnowWeb App Development Technologies You Should Know
Web App Development Technologies You Should KnowVishal Sinhasan
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3Ryan McIntyre
 
website planning and creation for beginners
website planning and creation for beginners website planning and creation for beginners
website planning and creation for beginners Shruti Goel
 
"Generating static web sites with Middleman"
"Generating static web sites with Middleman""Generating static web sites with Middleman"
"Generating static web sites with Middleman"Tony Camaiani
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Kannika Kong
 
Lecture 1 intro to web designing
Lecture 1 intro to web designingLecture 1 intro to web designing
Lecture 1 intro to web designingpalhaftab
 
Style guide for share point 2013 branding
Style guide for share point 2013 brandingStyle guide for share point 2013 branding
Style guide for share point 2013 brandingVinod Dangudubiyyapu
 

What's hot (20)

Structuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom FieldsStructuring Content in WordPress using Advanced Custom Fields
Structuring Content in WordPress using Advanced Custom Fields
 
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing CourseARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websites
 
Top web development tools
Top web development toolsTop web development tools
Top web development tools
 
Aria Widgets
Aria WidgetsAria Widgets
Aria Widgets
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Ppt on Website Planning
Ppt on Website PlanningPpt on Website Planning
Ppt on Website Planning
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development Process
 
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienCustomizing the SharePoint 2013 user interface with JavaScript - Chris OBrien
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrien
 
Web App Development Technologies You Should Know
Web App Development Technologies You Should KnowWeb App Development Technologies You Should Know
Web App Development Technologies You Should Know
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Web Site Design,
Web Site Design,Web Site Design,
Web Site Design,
 
How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3How to Improve the SharePoint UI Using Bootstrap 3
How to Improve the SharePoint UI Using Bootstrap 3
 
website planning and creation for beginners
website planning and creation for beginners website planning and creation for beginners
website planning and creation for beginners
 
"Generating static web sites with Middleman"
"Generating static web sites with Middleman""Generating static web sites with Middleman"
"Generating static web sites with Middleman"
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
 
Lecture 1 intro to web designing
Lecture 1 intro to web designingLecture 1 intro to web designing
Lecture 1 intro to web designing
 
Amay arodelyn maot
Amay arodelyn maotAmay arodelyn maot
Amay arodelyn maot
 
Style guide for share point 2013 branding
Style guide for share point 2013 brandingStyle guide for share point 2013 branding
Style guide for share point 2013 branding
 
Web dev-101
Web dev-101Web dev-101
Web dev-101
 

Viewers also liked

Kanban Method Change Machine - As a Story Map
Kanban Method Change Machine - As a Story MapKanban Method Change Machine - As a Story Map
Kanban Method Change Machine - As a Story MapYuval Yeret
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript AccessibleDennis Lembree
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Karen Mardahl
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & AccessibilityChristopher Schmitt
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Dylan Wilbanks
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Access iQ
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityInnoTech
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise John Foliot
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetDennis Lembree
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosDennis Lembree
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsKaren Mardahl
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?Steven Faulkner
 
Responsible Design: Accountable Accessibility
Responsible Design: Accountable AccessibilityResponsible Design: Accountable Accessibility
Responsible Design: Accountable AccessibilityBilly Gregory
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Aaron Gustafson
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricksDirk Ginader
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics Ted Drake
 
The Power of the Junior
The Power of the JuniorThe Power of the Junior
The Power of the JuniorYves Hanoulle
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
 

Viewers also liked (20)

Kanban Method Change Machine - As a Story Map
Kanban Method Change Machine - As a Story MapKanban Method Change Machine - As a Story Map
Kanban Method Change Machine - As a Story Map
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT Accessibility
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
 
Responsible Design: Accountable Accessibility
Responsible Design: Accountable AccessibilityResponsible Design: Accountable Accessibility
Responsible Design: Accountable Accessibility
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
AccessU 2011 Keynote
AccessU 2011 KeynoteAccessU 2011 Keynote
AccessU 2011 Keynote
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics
 
The Power of the Junior
The Power of the JuniorThe Power of the Junior
The Power of the Junior
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 

Similar to How To Build An Accessible Web Application

LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonMukalele Rogers
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...John Hartley
 
Architecting RIAs with Silverlight
Architecting RIAs with SilverlightArchitecting RIAs with Silverlight
Architecting RIAs with SilverlightJosh Holmes
 
IBM Rational HATS Customized Amazing Features by Royal Cyber
IBM Rational HATS Customized Amazing Features by Royal CyberIBM Rational HATS Customized Amazing Features by Royal Cyber
IBM Rational HATS Customized Amazing Features by Royal CyberRoyal Cyber Inc.
 
Lean And Clean! Building A Site With Web Standards
Lean And Clean! Building A Site With Web StandardsLean And Clean! Building A Site With Web Standards
Lean And Clean! Building A Site With Web Standardsweb.designer.developer
 
Introduction to silver light
Introduction to silver lightIntroduction to silver light
Introduction to silver lightjayc8586
 
App innovationcircles xamarin
App innovationcircles xamarinApp innovationcircles xamarin
App innovationcircles xamarinMohit Chhabra
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developernariyaravi
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev
 
Cross platform mobile app development with Xamarin
Cross platform mobile app development with XamarinCross platform mobile app development with Xamarin
Cross platform mobile app development with XamarinPranav Ainavolu
 

Similar to How To Build An Accessible Web Application (20)

LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
Web Page Design.ppt
Web Page Design.pptWeb Page Design.ppt
Web Page Design.ppt
 
Web Page Design.ppt
Web Page Design.pptWeb Page Design.ppt
Web Page Design.ppt
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
What is Adobe Flex ?
What is Adobe Flex ?What is Adobe Flex ?
What is Adobe Flex ?
 
Adobe® Flex™
Adobe® Flex™Adobe® Flex™
Adobe® Flex™
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
 
Architecting RIAs with Silverlight
Architecting RIAs with SilverlightArchitecting RIAs with Silverlight
Architecting RIAs with Silverlight
 
IBM Rational HATS Customized Amazing Features by Royal Cyber
IBM Rational HATS Customized Amazing Features by Royal CyberIBM Rational HATS Customized Amazing Features by Royal Cyber
IBM Rational HATS Customized Amazing Features by Royal Cyber
 
Lean And Clean! Building A Site With Web Standards
Lean And Clean! Building A Site With Web StandardsLean And Clean! Building A Site With Web Standards
Lean And Clean! Building A Site With Web Standards
 
Lean And Clean! Building A Site With
Lean And Clean! Building A Site WithLean And Clean! Building A Site With
Lean And Clean! Building A Site With
 
Android Deep Dive
Android Deep DiveAndroid Deep Dive
Android Deep Dive
 
Introduction to silver light
Introduction to silver lightIntroduction to silver light
Introduction to silver light
 
App innovationcircles xamarin
App innovationcircles xamarinApp innovationcircles xamarin
App innovationcircles xamarin
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
 
Cross platform mobile app development with Xamarin
Cross platform mobile app development with XamarinCross platform mobile app development with Xamarin
Cross platform mobile app development with Xamarin
 

More from Dennis Lembree

SVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilityDennis Lembree
 
Networking with Twitter, Part 2
Networking with Twitter, Part 2Networking with Twitter, Part 2
Networking with Twitter, Part 2Dennis Lembree
 
Networking with Twitter, Part 1
Networking with Twitter, Part 1Networking with Twitter, Part 1
Networking with Twitter, Part 1Dennis Lembree
 
Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)Dennis Lembree
 
Accessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 TweetupAccessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 TweetupDennis Lembree
 
"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010Dennis Lembree
 
Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010Dennis Lembree
 
EASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web AccessibilityEASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web AccessibilityDennis Lembree
 
Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12Dennis Lembree
 
Accessible Twitter at Open Web Camp
Accessible Twitter at Open Web CampAccessible Twitter at Open Web Camp
Accessible Twitter at Open Web CampDennis Lembree
 
Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Dennis Lembree
 

More from Dennis Lembree (11)

SVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader AccessibilitySVG Icons and Screen Reader Accessibility
SVG Icons and Screen Reader Accessibility
 
Networking with Twitter, Part 2
Networking with Twitter, Part 2Networking with Twitter, Part 2
Networking with Twitter, Part 2
 
Networking with Twitter, Part 1
Networking with Twitter, Part 1Networking with Twitter, Part 1
Networking with Twitter, Part 1
 
Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)
 
Accessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 TweetupAccessible Twitter Update at CSUN11 Tweetup
Accessible Twitter Update at CSUN11 Tweetup
 
"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010"Twitter and Web Accessibility" INDATA Conference 2010
"Twitter and Web Accessibility" INDATA Conference 2010
 
Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010Accessible Twitter CSUN Tweetup 2010
Accessible Twitter CSUN Tweetup 2010
 
EASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web AccessibilityEASI Webinar: Twitter And Web Accessibility
EASI Webinar: Twitter And Web Accessibility
 
Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12Twitter and Web Accessibility AHG 2009 Nov12
Twitter and Web Accessibility AHG 2009 Nov12
 
Accessible Twitter at Open Web Camp
Accessible Twitter at Open Web CampAccessible Twitter at Open Web Camp
Accessible Twitter at Open Web Camp
 
Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0Accessible Twitter : ACCESS-IT@Web 2.0
Accessible Twitter : ACCESS-IT@Web 2.0
 

Recently uploaded

Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 

Recently uploaded (20)

Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 

How To Build An Accessible Web Application

  • 1. How to Build an Accessible Web Application (Easy Chirp) Presented by Dennis Lembrée Accessibility DC Meet-up Martin Luther King (MLK) Library November 15, 2011
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 25.
  • 26.
  • 27.
  • 28. ARIA - Landmark Roles role=“banner” role=“navigation” role=“contentinfo” role=“main” role=“complementary” role=“search”
  • 29.
  • 30.
  • 31.
  • 32. ARIA – Live Regions
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.

Editor's Notes

  1. Thanks to John F Croston III (@jfc3)
  2. http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility
  3. http://www.EasyChirp.com
  4. http://html5accessibility.com/
  5. http://browsershots.org/ http://www.alistapart.com/articles/responsive-web-design/
  6. http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ http://outlinenone.com/
  7. Text links remain. And sufficient text size.
  8. http://contrastrebellion.com/
  9. http://designfestival.com/when-and-how-to-visually-hide-content/
  10. http://yuilibrary.com/ http://zufelt.ca/blog/jquery-ui-accessibility-review-wrapup http://domscripting.com/presentations/xtech2006/
  11. http://www.w3.org/TR/wai-aria/
  12. http://www.html5accessibility.com/tests/landmarks.html
  13. http://www.w3.org/TR/wai-aria/states_and_properties#aria-live
  14. Any browser-based user-agent!
  15. http://sarahebourne.posterous.com/accessible-twitter-on-the-kindle
  16. http://www.webhostingsearch.com/articles/25-ways-to-make-your-site-more-accessible.php