Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cities: Making Accessible WordPress Themes

Cities: Making Accessible WordPress Themes

Site owners are looking for accessible WordPress themes. There is a spectacular lack of accessible WordPress themes. Accessibility practitioners around the world are creating free accessible WordPress themes.


Joseph Karr O'Connor

April 28, 2013

Other Decks in Education


  1. Cities Making Free Accessible WordPress Themes

  2. Cities There are 1,747 themes in the WordPress Theme Directoy,

    four of them are accessible.
  3. Cities Cities directed by Joseph Karr O’Connor accessiblejoe.com

  4. Agenda What is Cities? Accessibility WP Accessibility Accessibility Plugins Accessibility

    Widgets WP Accessibility Group Accessible Content
  5. Cities: Los Angeles Theme project managed by Natalie MacLees

  6. What is Cities? Site owners are looking for accessible WordPress

    themes. There is a spectacular lack of accessible WordPress themes. Accessibility pactitioners around the world are creating free accessible WordPress themes.
  7. Cities: Mumbai Shilpi Kapoor @Shilpi_Kapoor of BarrierBreak is developing the

    Mumbai theme.
  8. Accessibility “Accessibility is the degree to which a product, device,

    sevice, or environment is available to as many people as possible.” Cynthia Waddell
  9. Accessibility Cities themes standards: Section 508 Compliant WCAG 2.0 Level

    AA Compliant HTML5 W3C Validation
  10. Cities: Canbera Government theme By Simon Pascal Klein @klepas a

    freelance web designer with a passion for good typogaphy.
  11. Accessibility Constructing a POUR website: •Perceivable •Opeable •Understandable •Robust

  12. Cities: Copenhagen by Karen Mardhal @kmdk driven by the idea

    of inclusion and universal design - we're all in this together!
  13. Accessibility •Enable skip links •Headings in order •Alternate text for

    pictures •Captioning for video/audio •Don’t use color for navigation •Reading order is correct •Data tables and forms properly coded •Avoid timeouts in forms
  14. Accessibility •No-script elements for scripts •Keyboard navigable •Applications don’t override

    AT •Visual focus indicator •Don’t override user agent controls •Sufficient color contast •No quick motion
  15. Cities: Sydney Theme by Lisa Herrod @scenariogirl will be a

    business theme.
  16. WP Accessibility WordPress accessibility group –dedicated to improving accessibility in

    core. Join at Make WordPress Accessible. Tweeting at @WPAccessibility.
  17. Cities: D.C. Team managed by David Kennedy @DavidAKennedy - theme

    for non-profits and government.
  18. WP Accessibility WordPress theme review guidelines for accessibility are in

    daft mode. Internet relay chat, Wednesdays, 19:00 UTC, #wordpress-ui, sever irc.freenode.net or via freenode web chat.
  19. Cities: Toronto Theme project managed by Jennison Asuncion @Jennison

  20. Accessibility Plugins WP Accessibility by Joe Dolson •Remove redundant title

    attributes from page lists, categoy lists, and archive menus. •Enable skip links with WebKit suppot by enqueuing JavaScript suppot for moving keyboard focus. •Add skip links with user-defined targets. (Customizable targets and appeaance.)
  21. Accessibility Plugins WP Accessibility •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. (If your theme has a search.php template.) •Remove tabindex from elements that are focusable.
  22. Cities: Nashville By Anna Belle Leiserson @happywebdiva for congregations (churches,

    temples, mosques etc.)
  23. Accessibility Plugins WP Accessibility •Strip title attributes from images inseted

    into content. •Add post titles to standard "read more" links. •Add an outline to the keyboard focus state for focusable elements.
  24. Accessibility Plugins WP Accessibility •Add a toolbar toggling between high

    contast, large print, and desatuated (gayscale) views of your theme. •Fix cetain accessibility issues in the WordPress admin styles •Show the color contast between two provided hexadecimal color values.
  25. Accessibility Plugins Accessibility plugins by Joe Dolson: •My Calendar •WP

    to Twitter •WP Accessibility
  26. Cities: Boston Theme project managed by Char James-Tanny @CharJTF -

    a restauant theme.
  27. Accessibility Widgets wpacc-accessible-twitter-feed by Rian Rietveld "Plugin and theme developers

    should be required to show their work to their mother or gandmother, maybe then they'd discover, for example, that a grey site with grey chaacters is pretty hard to read when you're older."
  28. Accessibility Widgets wpacc-accessible-twitter-feed by Rian Rietveld •Stand alone widget •Included

    function genesis_tweet_linkify, renamed it wp_accessible_tweet_linkify •Removed target is _blank for links, so they don't open in a new window
  29. Cities: Ottawa Theme project by Simply Accessible managed by Elle

    McPherson @nethermind an education theme.
  30. Accessibility Widgets wpacc-accessible-twitter-feed by Rian Rietveld •Removed title attribute in

    links (messes up screen reader output) •Removed links on hashtags to prevent a overload of links for a tweet •Removed the timestamp/link to prevent an overload of links for a tweet
  31. Accessibility Widgets wpacc-accessible-twitter-feed by Rian Rietveld •Removed inline style for

    font-size •Included a .pot file and dutch .po/.mo files
  32. Cities: New York Theme project managed by Patik Patel @ppatel

    of EZFire will be a business theme.
  33. WP Accessibility Group •Mel Pedley •Gaham Armfield •Cyndy Otty •Joe

    Dolson •Amanda Rush @cswordpress •Amy Newcombe @_Redd •Joseph Karr O'Connor
  34. Cities: Twin Cities Theme project managed by Joe Dolson @joedolson

    - Joe is a driving force for WordPress accessibility.
  35. Accessible Content •Use "Alternate Text" field when uploading images, describe

    the image. •Don't use "Read More" links, describe destination: Read More about Cities. •Links: don't use "Open link in new window/tab" check box.
  36. Accessible Content •Use headings to sum up paagaphs and give

    structure. •Use lists if content is a list. •Adding video? Don't autostat! Make sure video is Closed Captioned and provide a tanscript for audio.
  37. Cities: Rio De Janeiro Theme project managed by Ana Isabel

    Paaguay @projetoinclusiv
  38. Cities: São Paulo Theme project managed by Ana Isabel Paaguay

  39. Cities: Montreal Theme project managed by Rocio Alvaado @symetris

  40. Cities: Augusta GA Theme by Amanda Rush @cswordpress

  41. Credits Free Blurred Backgrounds by Timothy Whalin @TimothyWhalin Images from

    Flickr via HaikuDeck for iPad Font in Keynote preso: Facit by Just Another Foundy Slides composed in Keynote and posted to Slideshare for text tanscription to make the information accessible. HTML slides: accessiblejoe.com/presentations/