Cities: HTML5 Meetup 13 August 2013
Upcoming SlideShare
Loading in...5

Cities: HTML5 Meetup 13 August 2013






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Cities: HTML5 Meetup 13 August 2013 Presentation Transcript

  • 1. Cities Making Free Accessible WordPress Themes
  • 2. Cities There are 1,941 themes in the WordPress Theme Directoy Five of them are accessible
  • 3. What is Cities? Site owners are looking for accessible WordPress themes There is a spectacular lack of accessible WordPress themes A world-wide group of accessibility pactitioners are creating free accessible WordPress themes
  • 4. Joseph Karr O’Connor Invited expet W3C HTML5 Accessibility Taskforce 13 years accessibility experience WordPress Accessibility Group Cities: Making Free Accessible WordPress Themes
  • 5. Montreal Theme project managed by Rocio Alvaado @AccessibiliteWb - bilingual small business theme.
  • 6. Montreal Will include the Quebec government standard SGQRI 008-01. Issues that need specific attention for the back-end: ✓ Proper headings ✓ Form field associations ✓ Fieldsets and legends ✓ Logical order of content
  • 7. Montreal Front-end: ✓ Sufficient colour contast ✓ Proper headings ✓ Logical order of content ✓ WAI-ARIA for dynamic content ✓ Using elements semantically ✓ Making non-textual content textual ✓ Navigating with TAB key with a visible outline
  • 8. Montreal Front-end: ✓ Making links understandable out of context ✓ Making sure that blog widgets like archives, categories and recent posts are accessible when implemented ✓ Educate (commenting code to inform the developer of specific accessibility element)
  • 9. Mumbai Shilpi Kapoor @Shilpi_Kapoor of BarrierBreak is developing the Mumbai theme.
  • 10. Accessibility “Accessibility is the degree to which a product, device, sevice, or environment is available to as many people as possible.” Cynthia Waddell
  • 11. Accessibility Cities themes standards: Section 508 Compliant WCAG 2.0 Level AA Compliant HTML5 W3C Validation Commented code
  • 12. Canbera Government theme By Simon Pascal Klein @klepas a freelance web designer with a passion for good typogaphy.
  • 13. Accessibility Moving Beyond Technical Accessibility Constructing a POUR website: ✓ Perceivable in multiple ways ✓ Opeable using various input methods ✓ Understandable by your readers ✓ Robust across opeating systems and platforms
  • 14. Copenhagen by Karen Mardhal @kmdk driven by the idea of inclusion and universal design - we're all in this together!
  • 15. Accessibility ✓ Enable skip links ✓ Alternate text for pictures ✓ Captioning for video/audio ✓ Don’t use color for navigation ✓ Reading order is correct ✓ Avoid timeouts in forms ✓ Data tables and forms properly coded
  • 16. 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
  • 17. Sydney Theme by Lisa Herrod @scenariogirl building a business theme.
  • 18. WP Accessibility WordPress accessibility group – dedicated to improving accessibility in core Join at Make WordPress Accessible Tweeting at @WPAccessibility
  • 19. D.C. Team managed by David Kennedy @DavidAKennedy - theme for non- profits and government.
  • 20. WP Accessibility ✓ Mel Pedley ✓ Gaham Armfield ✓ Cyndy Otty ✓ Joe Dolson ✓ Amanda Rush @cswordpress ✓ Sharon Austin @_Redd ✓ Amy Hendrix @sabreuse ✓ Karl Groves @karlgroves ✓ Joseph Karr O'Connor
  • 21. WP Accessibility WordPress theme review guidelines for accessibility are in daft mode. Internet relay chat, Wednesdays, 19:00 UTC, #wordpress-ui, sever or via freenode web chat.
  • 22. Toronto Theme project managed by Jennison Asuncion @Jennison.
  • 23. 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.)
  • 24. Accessibility Plugins WP Accessibility by Joe Dolson ✓ Add language and text direction 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.
  • 25. Nashville Theme by Anna Belle Leiserson for congregations (churches, temples, mosques etc.)
  • 26. Accessibility Plugins WP Accessibility by Joe Dolson ✓ Strip title attributes from images inseted into content. ✓ Add an outline to the keyboard focus state for focusable elements. ✓ Add post titles to standard "read more" links. #uxdrinkinggame If someone says all the links should just say, "read more..." drink
  • 27. Accessibility Plugins WP Accessibility by Joe Dolson ✓ 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.
  • 28. Accessibility Plugins Accessibility plugins by Joe Dolson: My Calendar WP to Twitter WP Accessibility BotSmasher
  • 29. Boston Theme project managed by Char James-Tanny @CharJTF - a restauant theme.
  • 30. Ottawa Theme project by Simply Accessible managed by Elle McPherson @nethermind - education theme.
  • 31. 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."
  • 32. 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
  • 33. New York Theme project managed by Patik Patel @ppatel of EZFire will be a business theme.
  • 34. 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 an overload of links for a tweet ✓ Removed the timestamp/link to prevent an overload of links for a tweet
  • 35. Accessibility Widgets wpacc-accessible-twitter-feed by Rian Rietveld ✓ Removed inline style for font-size ✓ Included .pot file and dutch .po/.mo files
  • 36. Twin Cities Theme project managed by Joe Dolson @joedolson - Joe is a driving force for WordPress accessibility.
  • 37. Accessible Content ✓ Use "Alternate Text" field when uploading images, describe the intent of 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.
  • 38. Accessible Content ✓ Use headings to sum up paagaphs and give structure. ✓ Use lists if content is a list. ✓ Adding video/sound? Don't autostat! ✓ Make sure video is Closed Captioned and provide a tanscript for audio.
  • 39. Rio De Janeiro Theme project managed by Ana Isabel Paaguay @projetoinclusiv
  • 40. São Paulo Theme project managed by Ana Isabel Paaguay @projetoinclusiv
  • 41. Augusta Georgia Theme by Amanda Rush @cswordpress
  • 42. Manchester UK Theme by Helen Wallwoth @AccessibleGeeks
  • 43. Los Angeles Theme project managed by Natalie MacLees
  • 44. Credits Free Blurred Backgrounds by Timothy Whalin @TimothyWhalin Images from Flickr via HaikuDeck for iPad Composed in Keynote, posted to Slideshare, available in a tanscript. This presentation: