WP Accessibility


Published on

WordPress and accessibility.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WP Accessibility

  1. 1. @radkitten abergmann@atnetplus.c 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
  2. 2. @radkitten abergmann@atnetplus.c 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.
  3. 3. @radkitten abergmann@atnetplus.c om WCAG 2.0 Guidelines WCAG 2.0 has 12 guidelines that are organized into 4 principles: Perceivable Operable Understandable Robust
  4. 4. @radkitten abergmann@atnetplus.c 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.
  5. 5. @radkitten abergmann@atnetplus.c 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.
  6. 6. @radkitten abergmann@atnetplus.c 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 screenreader shortcuts. 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.
  7. 7. @radkitten abergmann@atnetplus.c om Operable Continued Navigable  Can easily navigate the website pages and links.  Titles for pages  Descriptive navigation links  Skip to content links
  8. 8. @radkitten abergmann@atnetplus.c 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.
  9. 9. @radkitten abergmann@atnetplus.c om Robust Compatible With New Browsers & Assistive Technology  Completed tags  Correctly nested elements  Non-unique attributes  Interface components are described and purpose identified
  10. 10. @radkitten abergmann@atnetplus.c 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.
  11. 11. @radkitten abergmann@atnetplus.c 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/
  12. 12. @radkitten abergmann@atnetplus.c 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
  13. 13. @radkitten abergmann@atnetplus.c 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
  14. 14. @radkitten abergmann@atnetplus.c 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
  15. 15. @radkitten abergmann@atnetplus.c 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.