SlideShare una empresa de Scribd logo
1 de 32
Accessibility with WordPress
Limitations and benefits.
Who am I?
- A WordPress plug-in developer
- An advocate and consultant on web accessibility
- A writer on practical accessibility
- Read more at http://www.joedolson.com
Why WordPress?
WordPress is a free, open source CMS
WordPress has many active users – 65% of the most popular 1
million sites are built on WordPress
Many of the accessibility limitations in WordPress can be
easily overcome, with a little knowledge.
WordPress Accessibility: the problems
650,000 top sites – that's a lot of visitors!
- Inaccessible themes – affects your users
- Inaccessible plug-ins – affects the plug-in's users
- Core problems in WordPress – affect everybody
- Writing Accessible Content – created by everybody
What's a Theme?
- Themes control the structure and appearance of a site
- Almost all of the public experience of a WordPress site
comes from the theme.
- For most sites, most accessibility problems come from the
theme.
Finding Accessible Themes
- Most themes are not accessible.
- Finding accessible themes is very, very difficult.
- Building custom themes is expensive.
- Customizing themes for accessibility is not cheaper.
- Most accessible themes are actually frameworks.
What's a framework?
- Basic structure and layout
- minimal color or ornamentation.
- Easy for a developer to modify.
What's a framework?
- Basic structure and layout
- minimal color or ornamentation.
- Easy for a developer to modify.
- Not so easy for a casual user.
Some (reportedly) accessible themes:
- Blaskan: http://blaskan.net/
- Skeleton: http://www.badeyes.com/services/
- Ambrosia: http://wordpress.org/extend/themes/ambrosia
- Scrapbook: http://wordpress.org/extend/themes/scrapbook
- Genesis Child Theme:
http://wp-accessible.org/2012/11/release-version-0-2-of-the-acces
- Twenty-Eleven Child theme:
https://github.com/RRWD/accessible-twenty-eleven-theme
- Twenty-Twelve Child theme:
http://daniemon.com/blog/accessible-wp-theme-twenty-twelve/
In the WordPress Core
Some fundamental problems.
Most of the base HTML and functionality generated by
WordPress is great
A couple things don't quite meet specs:
- Empty searches do not return an error
- Default values for “more” links are not specific.
- Tons of redundant title attributes
- Contact forms with un-associated text
These are mostly fixable in themes
Front-end Accessibility with
WordPress?
- Without the theme, there's no web site.
- Themes and plug-ins are the primary sources of
problems using WordPress accessibly.
WordPress 3.5 was big for the admin:
- Removed tabindex
- Added skiplinks
- Fixed tabbing order in many contexts
- Now possible to log out by keyboard (but not by voice
command)
- Numerous form fields now properly labeled
- Keyboard navigation has clearly visible focus
- Screen Options now much more easily found and used,
giving better access to screen customizations and accessibility
modes
WordPress 3.6 is still moving forward:
- Improves the Add Media Panel
- Adds screen reader and keyboard support for Custom
Menu interface
- Improvements in usability and accessibility for version
comparison
What about those plug-ins?
- WordPress plug-ins are all over the map
- There is little to no quality checking in the plug-in repository.
- Even if there was, checking for accessibility would be almost
impossible to do.
- Yikes.
What do you use plug-ins for?
- Contact forms
- Calendars
- eCommerce
- Social Media widgets
- Newsletter sign-ups
- Thousands of other tasks
Plug-in Guide
- Contact forms
- Calendars
- eCommerce
- Social Media widgets
- Newsletter sign-ups
- Thousands of other tasks
Using Plug-ins
• There are over 20,000 plug-ins in the repository. You
cannot assume that most of them are accessible.
• Due to the nature of the WordPress.org plug-in search
engine, most of the results for 'accessible' do not
relate to accessibility.
• Most plug-ins must be vetted independently.
What is available now?
Install and configure my plugin WP Accessibility:
http://wordpress.org/extend/plugins/wp-accessibility/
What can the WP-Accessibility plug-in do?
• Remove redundant title attributes
• Enable skip links with WebKit
• Add skip links with user-defined targets.
• Add language and text direction attributes
• Remove the target attribute from links.
• Force a search page error on an empty search
• Remove tabindex from elements that are focusable.
• Strip title attributes from images in content.
• Add post titles to "read more" links.
• Add an outline to the :focus state for focusable elements.
• Improve accessibility of admin styles
What can't this plug-in do?
• Fix color contrast issues.
• Correct forms to add labels or give meaningful errors.
• Fix heading structures for screen reader navigation.
• Give appropriate alt attributes to images
• Correct for many possible unknowns...
What about creating accessible
content?
P.O.U.R. Principles
•Perceivable
•Operable
•Understandable
•Robust
Example:
https://sites.google.com/site/antarcticaclassproject/
What does this example do wrong?
What does it do right?
Hint: you can see everything that's on the page.
Imagining Accessibility
• What is missing if you can't see the page?
• What is missing if you can't hear audio?
• What can't be operated if you can't use a
mouse?
• What is lost if you are using a tablet or mobile
device?
Web Readers Skim
• Everybody skims on the web
• Everybody wants to skim on the web
• How does assistive technology allow
skimming?
Is that all?
For now, yes. There are undoubtedly other accessible
WordPress themes: but no easy way to find them.
Searching for accessible themes requires critical judgement.
Audited accessibility tag is coming to the WordPress theme
repository – but it's not there yet.
WP Accessibility can fix some problems, but not all.
The Cities Project is working on building accessible WordPress
themes: http://accessiblejoe.com/cities/
What's the summary?
• On the public side, WordPress makes very few
mistakes, and these can be corrected by a theme or
plug-in. BUT: WordPress only controls a small
percentage of the presentation of a web site.
• Currently available themes are generally lacking a
focus on accessibility; and there isn't a good way to
find accessible themes.
• Extending WordPress via plug-ins is hazardous, and
requires careful vetting.
• The admin, though not perfect, is improving.
Accessibility Resources.
- WCAG Recommended Techniques: highly technical, though
simpler than the WCAG itself.
http://www.w3.org/TR/WCAG-TECHS/
- WebAIM: Simplified summaries, recommendations.
Extensive documentation on almost every accessibility
topic: http://webaim.org
- University of Minnesota, Duluth Web Design References:
Extensive curated catalog of accessibility articles on the
web: http://bit.ly/t3tPZC
Questions?

Más contenido relacionado

La actualidad más candente

UCSY CS Club Week1
UCSY CS Club Week1UCSY CS Club Week1
UCSY CS Club Week1Ye Linn Wai
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web DevelopmentRobert J. Stein
 
Dayton word press meetup
Dayton word press meetupDayton word press meetup
Dayton word press meetupDustin Hartzler
 
WordPress for Beginners
WordPress for BeginnersWordPress for Beginners
WordPress for BeginnersBrad Williams
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Developmentapnwebdev
 
Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...hanitaha10
 
November 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to MeNovember 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to MeEric Sembrat
 
November 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research WebsiteNovember 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research WebsiteEric Sembrat
 
PEPY Wordpress workshop-01
PEPY Wordpress workshop-01PEPY Wordpress workshop-01
PEPY Wordpress workshop-01Wei Peng
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
Getting the Most out of WordPress.com
Getting the Most out of WordPress.comGetting the Most out of WordPress.com
Getting the Most out of WordPress.comMel Choyce
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web developmentChristian Heilmann
 
Jeteye Powerpoint
Jeteye PowerpointJeteye Powerpoint
Jeteye PowerpointJeteye.Team
 
Wordpress essential training - Wordpress Presentation PPT
Wordpress essential training - Wordpress Presentation PPTWordpress essential training - Wordpress Presentation PPT
Wordpress essential training - Wordpress Presentation PPTAbdulla2410
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3Darren Wood
 
AENJ Conference - Internet Tools Presentation
AENJ Conference - Internet Tools PresentationAENJ Conference - Internet Tools Presentation
AENJ Conference - Internet Tools PresentationUrsula Accumanno
 

La actualidad más candente (20)

UCSY CS Club Week1
UCSY CS Club Week1UCSY CS Club Week1
UCSY CS Club Week1
 
Advanced Web Development
Advanced Web DevelopmentAdvanced Web Development
Advanced Web Development
 
Dayton word press meetup
Dayton word press meetupDayton word press meetup
Dayton word press meetup
 
WordPress for Beginners
WordPress for BeginnersWordPress for Beginners
WordPress for Beginners
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Development
 
Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...
 
Wordpress 101 Training
Wordpress 101 TrainingWordpress 101 Training
Wordpress 101 Training
 
November 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to MeNovember 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to Me
 
November 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research WebsiteNovember 2016 - Georgia Tech - Building a Research Website
November 2016 - Georgia Tech - Building a Research Website
 
Getting Started with Wordpress
Getting Started with WordpressGetting Started with Wordpress
Getting Started with Wordpress
 
PEPY Wordpress workshop-01
PEPY Wordpress workshop-01PEPY Wordpress workshop-01
PEPY Wordpress workshop-01
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Getting the Most out of WordPress.com
Getting the Most out of WordPress.comGetting the Most out of WordPress.com
Getting the Most out of WordPress.com
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
Jeteye Powerpoint
Jeteye PowerpointJeteye Powerpoint
Jeteye Powerpoint
 
Wordpress essential training - Wordpress Presentation PPT
Wordpress essential training - Wordpress Presentation PPTWordpress essential training - Wordpress Presentation PPT
Wordpress essential training - Wordpress Presentation PPT
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
Wcto2014
Wcto2014Wcto2014
Wcto2014
 
AENJ Conference - Internet Tools Presentation
AENJ Conference - Internet Tools PresentationAENJ Conference - Internet Tools Presentation
AENJ Conference - Internet Tools Presentation
 

Destacado

Demystifying Digital Humanities: Winter 2014 session #1
Demystifying Digital Humanities: Winter 2014 session #1Demystifying Digital Humanities: Winter 2014 session #1
Demystifying Digital Humanities: Winter 2014 session #1Paige Morgan
 
Dmdh workshop 5 slides
Dmdh   workshop 5 slidesDmdh   workshop 5 slides
Dmdh workshop 5 slidesPaige Morgan
 
Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...
Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...
Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...Paige Morgan
 
Dmdh session-2-2013-14
Dmdh session-2-2013-14Dmdh session-2-2013-14
Dmdh session-2-2013-14Paige Morgan
 
Facebook Network Analysis using Gephi
Facebook Network Analysis using GephiFacebook Network Analysis using Gephi
Facebook Network Analysis using GephiSarah Joy Murray
 

Destacado (6)

Demystifying Digital Humanities: Winter 2014 session #1
Demystifying Digital Humanities: Winter 2014 session #1Demystifying Digital Humanities: Winter 2014 session #1
Demystifying Digital Humanities: Winter 2014 session #1
 
Dmdh workshop 5 slides
Dmdh   workshop 5 slidesDmdh   workshop 5 slides
Dmdh workshop 5 slides
 
Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...
Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...
Demystifying Digital Humanities: Winter 2014 Workshop #2: Programming on the ...
 
Dmdh session-2-2013-14
Dmdh session-2-2013-14Dmdh session-2-2013-14
Dmdh session-2-2013-14
 
Dmdh workshop #6
Dmdh workshop #6Dmdh workshop #6
Dmdh workshop #6
 
Facebook Network Analysis using Gephi
Facebook Network Analysis using GephiFacebook Network Analysis using Gephi
Facebook Network Analysis using Gephi
 

Similar a Accessibility with WordPress

Csun retrofitting anoosha&sathish-2
Csun retrofitting anoosha&sathish-2Csun retrofitting anoosha&sathish-2
Csun retrofitting anoosha&sathish-2Sathish Kumar
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With LoveUp2 Technology
 
Wordpress & accessibility
Wordpress & accessibilityWordpress & accessibility
Wordpress & accessibilityHoward Kramer
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPressJignasa Naik
 
WordPress and Web Accessibility - 2013
WordPress and Web Accessibility - 2013WordPress and Web Accessibility - 2013
WordPress and Web Accessibility - 2013Graham Armfield
 
Kick start your career with wordpress
Kick start your career with wordpressKick start your career with wordpress
Kick start your career with wordpressOpenDev
 
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Graham Armfield
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st CenturyMateusz Kwasniewski
 
Themes, Plugins and Accessibility
Themes, Plugins and AccessibilityThemes, Plugins and Accessibility
Themes, Plugins and AccessibilityGraham Armfield
 
WordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanityWordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanityShelley Keith, MSIQ
 
"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriaraiwebcat
 
Up and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPressUp and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPressSennza Design
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisationJean Michel
 
Part1 learn thelingo
Part1 learn thelingoPart1 learn thelingo
Part1 learn thelingoTaneya Koonce
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPressbtopro
 
BITM3730 11-7.pptx
BITM3730 11-7.pptxBITM3730 11-7.pptx
BITM3730 11-7.pptxMattMarino13
 
EdTechJoker Spring 2020 - Lecture 6 - WordPress
EdTechJoker Spring 2020 - Lecture 6 -   WordPressEdTechJoker Spring 2020 - Lecture 6 -   WordPress
EdTechJoker Spring 2020 - Lecture 6 - WordPressBryan Ollendyke
 

Similar a Accessibility with WordPress (20)

Csun retrofitting anoosha&sathish-2
Csun retrofitting anoosha&sathish-2Csun retrofitting anoosha&sathish-2
Csun retrofitting anoosha&sathish-2
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With Love
 
Wordpress & accessibility
Wordpress & accessibilityWordpress & accessibility
Wordpress & accessibility
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPress
 
WordPress and Web Accessibility - 2013
WordPress and Web Accessibility - 2013WordPress and Web Accessibility - 2013
WordPress and Web Accessibility - 2013
 
Kick start your career with wordpress
Kick start your career with wordpressKick start your career with wordpress
Kick start your career with wordpress
 
WordPress Complete Tutorial
WordPress Complete TutorialWordPress Complete Tutorial
WordPress Complete Tutorial
 
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Can WordPress help make the web more accessible - eaccess15 - Feb 2015
Can WordPress help make the web more accessible - eaccess15 - Feb 2015
 
10 Web Performance Lessons For the 21st Century
10 Web Performance Lessons For the  21st Century10 Web Performance Lessons For the  21st Century
10 Web Performance Lessons For the 21st Century
 
Themes, Plugins and Accessibility
Themes, Plugins and AccessibilityThemes, Plugins and Accessibility
Themes, Plugins and Accessibility
 
WordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanityWordPress 3.x for the sake of your sanity
WordPress 3.x for the sake of your sanity
 
"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai"Wordpress for web designers. What, when, how, where" por @nuriarai
"Wordpress for web designers. What, when, how, where" por @nuriarai
 
Word press 101
Word press 101Word press 101
Word press 101
 
Up and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPressUp and Running in 5 mins with WordPress
Up and Running in 5 mins with WordPress
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisation
 
Part1 learn thelingo
Part1 learn thelingoPart1 learn thelingo
Part1 learn thelingo
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
 
BITM3730 11-7.pptx
BITM3730 11-7.pptxBITM3730 11-7.pptx
BITM3730 11-7.pptx
 
EdTechJoker Spring 2020 - Lecture 6 - WordPress
EdTechJoker Spring 2020 - Lecture 6 -   WordPressEdTechJoker Spring 2020 - Lecture 6 -   WordPress
EdTechJoker Spring 2020 - Lecture 6 - WordPress
 
CALM Wordpress 102
CALM Wordpress 102CALM Wordpress 102
CALM Wordpress 102
 

Más de Joseph Dolson

WordPress and ATAG Compliance
WordPress and ATAG ComplianceWordPress and ATAG Compliance
WordPress and ATAG ComplianceJoseph Dolson
 
If you build it, they will come.
If you build it,  they will come.If you build it,  they will come.
If you build it, they will come.Joseph Dolson
 
Electronic information and accessible technology
Electronic information and accessible technologyElectronic information and accessible technology
Electronic information and accessible technologyJoseph Dolson
 
JavaScript and Accessibility
JavaScript and AccessibilityJavaScript and Accessibility
JavaScript and AccessibilityJoseph Dolson
 
The WordPress Way: Accessibility and Backwards Compatibility
The WordPress Way: Accessibility and Backwards CompatibilityThe WordPress Way: Accessibility and Backwards Compatibility
The WordPress Way: Accessibility and Backwards CompatibilityJoseph Dolson
 
WordCamp US: ARIA. Roles, States and Properties
WordCamp US: ARIA. Roles, States and PropertiesWordCamp US: ARIA. Roles, States and Properties
WordCamp US: ARIA. Roles, States and PropertiesJoseph Dolson
 
Build a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharingBuild a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharingJoseph Dolson
 
Automating Accessibility: WordCamp Minneapolis 2015
Automating Accessibility: WordCamp Minneapolis 2015Automating Accessibility: WordCamp Minneapolis 2015
Automating Accessibility: WordCamp Minneapolis 2015Joseph Dolson
 
Massively maintained accessibility: WordPress
Massively maintained accessibility: WordPressMassively maintained accessibility: WordPress
Massively maintained accessibility: WordPressJoseph Dolson
 
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014Joseph Dolson
 
The Accessible Web: Improving the Universal Experience
The Accessible Web: Improving the Universal ExperienceThe Accessible Web: Improving the Universal Experience
The Accessible Web: Improving the Universal ExperienceJoseph Dolson
 
Mission: Accessible. Share & Connect Online with Everybody!
Mission: Accessible. Share & Connect Online with Everybody!Mission: Accessible. Share & Connect Online with Everybody!
Mission: Accessible. Share & Connect Online with Everybody!Joseph Dolson
 
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp ChicagoWordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp ChicagoJoseph Dolson
 
Encouraging Accessibility
Encouraging AccessibilityEncouraging Accessibility
Encouraging AccessibilityJoseph Dolson
 
Accessibility & WordPress: Developing for the whole world.
Accessibility & WordPress: Developing for the whole world.Accessibility & WordPress: Developing for the whole world.
Accessibility & WordPress: Developing for the whole world.Joseph Dolson
 
Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Joseph Dolson
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityJoseph Dolson
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonJoseph Dolson
 

Más de Joseph Dolson (19)

Why #A11y?
Why #A11y? Why #A11y?
Why #A11y?
 
WordPress and ATAG Compliance
WordPress and ATAG ComplianceWordPress and ATAG Compliance
WordPress and ATAG Compliance
 
If you build it, they will come.
If you build it,  they will come.If you build it,  they will come.
If you build it, they will come.
 
Electronic information and accessible technology
Electronic information and accessible technologyElectronic information and accessible technology
Electronic information and accessible technology
 
JavaScript and Accessibility
JavaScript and AccessibilityJavaScript and Accessibility
JavaScript and Accessibility
 
The WordPress Way: Accessibility and Backwards Compatibility
The WordPress Way: Accessibility and Backwards CompatibilityThe WordPress Way: Accessibility and Backwards Compatibility
The WordPress Way: Accessibility and Backwards Compatibility
 
WordCamp US: ARIA. Roles, States and Properties
WordCamp US: ARIA. Roles, States and PropertiesWordCamp US: ARIA. Roles, States and Properties
WordCamp US: ARIA. Roles, States and Properties
 
Build a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharingBuild a WordPress Plug-in: Accessible social sharing
Build a WordPress Plug-in: Accessible social sharing
 
Automating Accessibility: WordCamp Minneapolis 2015
Automating Accessibility: WordCamp Minneapolis 2015Automating Accessibility: WordCamp Minneapolis 2015
Automating Accessibility: WordCamp Minneapolis 2015
 
Massively maintained accessibility: WordPress
Massively maintained accessibility: WordPressMassively maintained accessibility: WordPress
Massively maintained accessibility: WordPress
 
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
Good Habits: Coding for Accessibility - WordCamp San Francisco 2014
 
The Accessible Web: Improving the Universal Experience
The Accessible Web: Improving the Universal ExperienceThe Accessible Web: Improving the Universal Experience
The Accessible Web: Improving the Universal Experience
 
Mission: Accessible. Share & Connect Online with Everybody!
Mission: Accessible. Share & Connect Online with Everybody!Mission: Accessible. Share & Connect Online with Everybody!
Mission: Accessible. Share & Connect Online with Everybody!
 
WordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp ChicagoWordPress Accessibility: WordCamp Chicago
WordPress Accessibility: WordCamp Chicago
 
Encouraging Accessibility
Encouraging AccessibilityEncouraging Accessibility
Encouraging Accessibility
 
Accessibility & WordPress: Developing for the whole world.
Accessibility & WordPress: Developing for the whole world.Accessibility & WordPress: Developing for the whole world.
Accessibility & WordPress: Developing for the whole world.
 
Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe Dolson
 

Último

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
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
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
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
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
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
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
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
"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
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
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
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 

Último (20)

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
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
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
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
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?
 
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!
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
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
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
"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
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
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
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 

Accessibility with WordPress

  • 2. Who am I? - A WordPress plug-in developer - An advocate and consultant on web accessibility - A writer on practical accessibility - Read more at http://www.joedolson.com
  • 3. Why WordPress? WordPress is a free, open source CMS WordPress has many active users – 65% of the most popular 1 million sites are built on WordPress Many of the accessibility limitations in WordPress can be easily overcome, with a little knowledge.
  • 5. 650,000 top sites – that's a lot of visitors! - Inaccessible themes – affects your users - Inaccessible plug-ins – affects the plug-in's users - Core problems in WordPress – affect everybody - Writing Accessible Content – created by everybody
  • 6. What's a Theme? - Themes control the structure and appearance of a site - Almost all of the public experience of a WordPress site comes from the theme. - For most sites, most accessibility problems come from the theme.
  • 7. Finding Accessible Themes - Most themes are not accessible. - Finding accessible themes is very, very difficult. - Building custom themes is expensive. - Customizing themes for accessibility is not cheaper. - Most accessible themes are actually frameworks.
  • 8. What's a framework? - Basic structure and layout - minimal color or ornamentation. - Easy for a developer to modify.
  • 9. What's a framework? - Basic structure and layout - minimal color or ornamentation. - Easy for a developer to modify. - Not so easy for a casual user.
  • 10. Some (reportedly) accessible themes: - Blaskan: http://blaskan.net/ - Skeleton: http://www.badeyes.com/services/ - Ambrosia: http://wordpress.org/extend/themes/ambrosia - Scrapbook: http://wordpress.org/extend/themes/scrapbook - Genesis Child Theme: http://wp-accessible.org/2012/11/release-version-0-2-of-the-acces - Twenty-Eleven Child theme: https://github.com/RRWD/accessible-twenty-eleven-theme - Twenty-Twelve Child theme: http://daniemon.com/blog/accessible-wp-theme-twenty-twelve/
  • 12. Some fundamental problems. Most of the base HTML and functionality generated by WordPress is great A couple things don't quite meet specs: - Empty searches do not return an error - Default values for “more” links are not specific. - Tons of redundant title attributes - Contact forms with un-associated text These are mostly fixable in themes
  • 13. Front-end Accessibility with WordPress? - Without the theme, there's no web site. - Themes and plug-ins are the primary sources of problems using WordPress accessibly.
  • 14. WordPress 3.5 was big for the admin: - Removed tabindex - Added skiplinks - Fixed tabbing order in many contexts - Now possible to log out by keyboard (but not by voice command) - Numerous form fields now properly labeled - Keyboard navigation has clearly visible focus - Screen Options now much more easily found and used, giving better access to screen customizations and accessibility modes
  • 15. WordPress 3.6 is still moving forward: - Improves the Add Media Panel - Adds screen reader and keyboard support for Custom Menu interface - Improvements in usability and accessibility for version comparison
  • 16. What about those plug-ins? - WordPress plug-ins are all over the map - There is little to no quality checking in the plug-in repository. - Even if there was, checking for accessibility would be almost impossible to do. - Yikes.
  • 17. What do you use plug-ins for? - Contact forms - Calendars - eCommerce - Social Media widgets - Newsletter sign-ups - Thousands of other tasks
  • 18. Plug-in Guide - Contact forms - Calendars - eCommerce - Social Media widgets - Newsletter sign-ups - Thousands of other tasks
  • 19. Using Plug-ins • There are over 20,000 plug-ins in the repository. You cannot assume that most of them are accessible. • Due to the nature of the WordPress.org plug-in search engine, most of the results for 'accessible' do not relate to accessibility. • Most plug-ins must be vetted independently.
  • 20. What is available now? Install and configure my plugin WP Accessibility: http://wordpress.org/extend/plugins/wp-accessibility/
  • 21. What can the WP-Accessibility plug-in do? • Remove redundant title attributes • Enable skip links with WebKit • Add skip links with user-defined targets. • Add language and text direction attributes • Remove the target attribute from links. • Force a search page error on an empty search • Remove tabindex from elements that are focusable. • Strip title attributes from images in content. • Add post titles to "read more" links. • Add an outline to the :focus state for focusable elements. • Improve accessibility of admin styles
  • 22. What can't this plug-in do? • Fix color contrast issues. • Correct forms to add labels or give meaningful errors. • Fix heading structures for screen reader navigation. • Give appropriate alt attributes to images • Correct for many possible unknowns...
  • 23. What about creating accessible content?
  • 25. Example: https://sites.google.com/site/antarcticaclassproject/ What does this example do wrong? What does it do right? Hint: you can see everything that's on the page.
  • 26.
  • 27. Imagining Accessibility • What is missing if you can't see the page? • What is missing if you can't hear audio? • What can't be operated if you can't use a mouse? • What is lost if you are using a tablet or mobile device?
  • 28. Web Readers Skim • Everybody skims on the web • Everybody wants to skim on the web • How does assistive technology allow skimming?
  • 29. Is that all? For now, yes. There are undoubtedly other accessible WordPress themes: but no easy way to find them. Searching for accessible themes requires critical judgement. Audited accessibility tag is coming to the WordPress theme repository – but it's not there yet. WP Accessibility can fix some problems, but not all. The Cities Project is working on building accessible WordPress themes: http://accessiblejoe.com/cities/
  • 30. What's the summary? • On the public side, WordPress makes very few mistakes, and these can be corrected by a theme or plug-in. BUT: WordPress only controls a small percentage of the presentation of a web site. • Currently available themes are generally lacking a focus on accessibility; and there isn't a good way to find accessible themes. • Extending WordPress via plug-ins is hazardous, and requires careful vetting. • The admin, though not perfect, is improving.
  • 31. Accessibility Resources. - WCAG Recommended Techniques: highly technical, though simpler than the WCAG itself. http://www.w3.org/TR/WCAG-TECHS/ - WebAIM: Simplified summaries, recommendations. Extensive documentation on almost every accessibility topic: http://webaim.org - University of Minnesota, Duluth Web Design References: Extensive curated catalog of accessibility articles on the web: http://bit.ly/t3tPZC