WP Accessibility
15
@radkitten [email protected] om Tips & Tricks to Make Sure Your Website is Accessible WCAG Guidelines and simple changes every user and developer can implement to make their website accessible to those with disabilities By: Angela Bergmann
-
Upload
angela-bergmann -
Category
Technology
-
view
2.923 -
download
0
Transcript of WP Accessibility
om
Tips & Tricks to Make Sure Your Website is
AccessibleWCAG Guidelines and simple changes every user and developer
can implement to make their website accessible to those with disabilities
By: Angela Bergmann
om
Web Content Accessibility Guidelines
A wide range of recommendations for making web content more accessible. By following the WCAG you will help in making the content of your website more accessible to those with disabilities such as:
Blindness & Low Vision Deafness & Hearing Loss Learning Disabilities Cognitive Limitations Limited Movement Speech Disabilities Photosensitivity And combinations of these.
om
WCAG 2.0 Guidelines
WCAG 2.0 has 12 guidelines that are organized into 4 principles:
Perceivable
Operable
Understandable
Robust
om
Perceivable
Text Alternative for Non-Text Content IE: Make sure you pictures, video’s etc have appropriate descriptions, titles,
etc.
Time-based Media Provide captions for video/audio.
Text transcripts.
Adaptable Content can be interpreted whether formatting is on or off.
The structure of the website is consistent throughout and not controlled through the stylesheet.
om
Perceivable Continued
Distinguishable Content must have contrast from other portions of the website.
Ability to pause and play video.
If color has meaning (red meaning stop, green meaning go) then additional descriptions should be provided.
om
Operable
Keyboard Accessible No one should get stuck on a webpage because they do not use a mouse.
Ability to browse the website using keyboard shortcuts or screenreadershortcuts.
Enough Time Content with a programmed time limit should allow the user to be able to
change the time restriction.
Seizures Three flashes or less. No flashing 3 times within a 1 second span.
om
Operable Continued
Navigable Can easily navigate the website pages and links.
Titles for pages
Descriptive navigation links
Skip to content links
om
Understandable
Readable The language of a page is identified.
Content should be understandable to someone with roughly 9 years of primary education.
Predictable Pages should behave in expected ways.
om
Robust
Compatible With New Browsers & Assistive Technology Completed tags
Correctly nested elements
Non-unique attributes
Interface components are described and purpose identified
om
Wordpress and accessibility
WordPress on it’s own is decently accessibility friendly. There are a few issues, but most of them can be fixed either by yourself or through a plugin.
The issues are: An empty search does not return an error unless told to by the theme
developer.
“Read More” links are not specific.
Redundant title attributes.
om
Plugins and themes
The vast majority of issues stem from the fact that there is no accessibility check on themes and plugins.
Accessibility friendly themes and plugins are few and far between, but they do exist.
A great resource for themes & plugins is:
http://wp-accessible.org/
om
Theme options
The list cultivated by WP Accessible is by far the best I have found, they have links to the following options through Github:
Accessible default Genesis child theme
Accessibility changes to the Twenty Twelve theme
WordPress Skeleton theme
Child theme for TwentyTenFive
om
Plugins
There are several plugins out there to help in making your website more accessible.
Frontend: WP Accessibility Accessible Twitter feed widget for WordPress Yoast WordPress SEO Plugin Fast Secure Contact Form Captcha by BestWebSoft
Backend: Ozh’ Admin Drop Down Menu MCE Accessible Language Change Faster Image Insert
om
WP Accessibility
Remove redundant title attributes from page lists, category lists, and archive menus.
Enable skip links with WebKit support by enqueuing JavaScript support for moving keyboard focus.
Add skip links with user-defined targets.
Add language and text direction attributes to your HTML attribute
Remove the target attribute from links.
Force a search page error when a search is made with an empty text string.
Remove tabindex from elements that are focusable.
Strip title attributes from images inserted into content.
Add post titles to standard “read more” links.
Add a :focus outline to focusable elements.
Toggle for high-contrast and large font stylesheets
Custom admin stylesheet
Provide color contrast testing tool to compare colors against WCAG contrast standards
om
Resources
http://wp-accessible.org/
http://wordpress.org/plugins/wp-accessibility/
http://www.w3.org/WAI/intro/wcag.php
http://wave.webaim.org/
http://www.w3.org/TR/WCAG/
