Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cities: HTML5 Meetup 13 August 2013

487 views

Published on

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

  • Be the first to like this

Cities: HTML5 Meetup 13 August 2013

  1. 1. Cities Making Free Accessible WordPress Themes
  2. 2. Cities There are 1,941 themes in the WordPress Theme Directoy Five of them are accessible
  3. 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. 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. 5. Montreal Theme project managed by Rocio Alvaado @AccessibiliteWb - bilingual small business theme.
  6. 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. 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. 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. 9. Mumbai Shilpi Kapoor @Shilpi_Kapoor of BarrierBreak is developing the Mumbai theme.
  10. 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. 11. Accessibility Cities themes standards: Section 508 Compliant WCAG 2.0 Level AA Compliant HTML5 W3C Validation Commented code
  12. 12. Canbera Government theme By Simon Pascal Klein @klepas a freelance web designer with a passion for good typogaphy.
  13. 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. 14. Copenhagen by Karen Mardhal @kmdk driven by the idea of inclusion and universal design - we're all in this together!
  15. 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. 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. 17. Sydney Theme by Lisa Herrod @scenariogirl building a business theme.
  18. 18. WP Accessibility WordPress accessibility group – dedicated to improving accessibility in core Join at Make WordPress Accessible Tweeting at @WPAccessibility
  19. 19. D.C. Team managed by David Kennedy @DavidAKennedy - theme for non- profits and government.
  20. 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. 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 irc.freenode.net or via freenode web chat.
  22. 22. Toronto Theme project managed by Jennison Asuncion @Jennison.
  23. 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. 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. 25. Nashville Theme by Anna Belle Leiserson for congregations (churches, temples, mosques etc.)
  26. 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. 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. 28. Accessibility Plugins Accessibility plugins by Joe Dolson: My Calendar WP to Twitter WP Accessibility BotSmasher
  29. 29. Boston Theme project managed by Char James-Tanny @CharJTF - a restauant theme.
  30. 30. Ottawa Theme project by Simply Accessible managed by Elle McPherson @nethermind - education theme.
  31. 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. 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. 33. New York Theme project managed by Patik Patel @ppatel of EZFire will be a business theme.
  34. 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. 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. 36. Twin Cities Theme project managed by Joe Dolson @joedolson - Joe is a driving force for WordPress accessibility.
  37. 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. 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. 39. Rio De Janeiro Theme project managed by Ana Isabel Paaguay @projetoinclusiv
  40. 40. São Paulo Theme project managed by Ana Isabel Paaguay @projetoinclusiv
  41. 41. Augusta Georgia Theme by Amanda Rush @cswordpress
  42. 42. Manchester UK Theme by Helen Wallwoth @AccessibleGeeks
  43. 43. Los Angeles Theme project managed by Natalie MacLees
  44. 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: http://bit.ly/Cities-WordCamp-Montreal-2013

×