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
Tweet

Other Decks in Education

Transcript

  1. 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.
  2. Accessibility “Accessibility is the degree to which a product, device,

    sevice, or environment is available to as many people as possible.” Cynthia Waddell
  3. Cities: Canbera Government theme By Simon Pascal Klein @klepas a

    freelance web designer with a passion for good typogaphy.
  4. Cities: Copenhagen by Karen Mardhal @kmdk driven by the idea

    of inclusion and universal design - we're all in this together!
  5. 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
  6. 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
  7. WP Accessibility WordPress accessibility group –dedicated to improving accessibility in

    core. Join at Make WordPress Accessible. Tweeting at @WPAccessibility.
  8. 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.
  9. 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.)
  10. 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.
  11. 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.
  12. 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.
  13. 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."
  14. 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
  15. Cities: Ottawa Theme project by Simply Accessible managed by Elle

    McPherson @nethermind an education theme.
  16. 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
  17. WP Accessibility Group •Mel Pedley •Gaham Armfield •Cyndy Otty •Joe

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

    - Joe is a driving force for WordPress accessibility.
  19. 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.
  20. 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.
  21. 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/