Cities: Making Free Accessible WordPress Themes

Uploaded on

Site owners are looking for accessible WordPress themes. There is a spectacular lack of accessible WordPress themes. A world-wide group of accessibility practitioners are creating free accessible …

Site owners are looking for accessible WordPress themes. There is a spectacular lack of accessible WordPress themes. A world-wide group of accessibility practitioners are creating free accessible WordPress themes.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. CitiesMaking Free AccessibleWordPress Themes
  • 2. CitiesThere are 1,747 themes in theWordPress Theme Directoy,four of them are accessible.
  • 3. CitiesCities directed byJoseph Karr O’
  • 4. AgendaWhat is Cities?AccessibilityWP AccessibilityAccessibility PluginsAccessibility WidgetsWP Accessibility GroupAccessible Content
  • 5. Cities: Los AngelesTheme project managed byNatalie MacLees
  • 6. What is Cities?Site owners are looking foraccessible WordPress themes.There is a spectacular lack ofaccessible WordPress themes.A world-wide group of accessibilitypactitioners are creating freeaccessible WordPress themes.
  • 7. Cities: MumbaiShilpi Kapoor @Shilpi_Kapoor ofBarrierBreak is developing theMumbai theme.
  • 8. Accessibility“Accessibility is the degree to whicha product, device, sevice, orenvironment is available to as manypeople as possible.” Cynthia Waddell
  • 9. AccessibilityCities themes standards:Section 508 CompliantWCAG 2.0 Level AA CompliantHTML5W3C Validation
  • 10. Cities: CanberaGovernment theme By Simon PascalKlein @klepas a freelance webdesigner with a passion for goodtypogaphy.
  • 11. AccessibilityConstructing a POUR website:•Perceivable•Opeable•Understandable•Robust
  • 12. Cities: Copenhagenby Karen Mardhal @kmdk driven bythe idea of inclusion and universaldesign - were all in this together!
  • 13. Accessibility•Enable skip links•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: SydneyTheme by Lisa Herrod @scenariogirlwill be a business theme.
  • 16. WP AccessibilityWordPress accessibility group –dedicated to improving accessibilityin 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 AccessibilityWordPress theme review guidelinesfor accessibility are in daft mode.Internet relay chat, Wednesdays,20:00 UTC, #wordpress-ui, se or via freenode webchat.
  • 19. Cities: TorontoTheme project managedby Jennison Asuncion @Jennison
  • 20. Accessibility PluginsWP Accessibility by Joe Dolson•Remove redundant title attributes frompage lists, categoy lists, and archivemenus.•Enable skip links with WebKit suppot byenqueuing JavaScript suppot for movingkeyboard focus.•Add skip links with user-defined targets.(Customizable targets and appeaance.)
  • 21. Accessibility PluginsWP Accessibility•Add language and text directionattributes to your HTML attribute•Remove the target attribute from links.•Force a search page error when a searchis made with an empty text string. (If yourtheme has a search.php template.)•Remove tabindex from elements that arefocusable.
  • 22. Cities: NashvilleTheme by Anna Belle Leisersonfor congregations (churches,temples, mosques etc.)
  • 23. Accessibility PluginsWP Accessibility•Strip title attributes from images insetedinto content.•Add post titles to standard "read more"links.•Add an outline to the keyboard focus statefor focusable elements.
  • 24. Accessibility PluginsWP Accessibility•Add a toolbar toggling between highcontast, large print, and desatuated(gayscale) views of your theme.•Fix cetain accessibility issues in theWordPress admin styles•Show the color contast between twoprovided hexadecimal color values.
  • 25. Accessibility PluginsAccessibility plugins by Joe Dolson:•My Calendar•WP to Twitter•WP Accessibility
  • 26. Cities: BostonTheme project managedby Char James-Tanny @CharJTF -a restauant theme.
  • 27. Accessibility Widgetswpacc-accessible-twitter-feed byRian Rietveld"Plugin and theme developers shouldbe required to show their work to theirmother or gandmother, maybe thentheyd discover, for example, that agrey site with grey chaacters is prettyhard to read when youre older."
  • 28. Accessibility Widgetswpacc-accessible-twitter-feed byRian Rietveld•Stand alone widget•Included functiongenesis_tweet_linkify, renamed itwp_accessible_tweet_linkify•Removed target is _blank for links, sothey dont open in a new window
  • 29. Cities: OttawaTheme project by Simply Accessiblemanaged by Elle McPherson@nethermind - education theme.
  • 30. Accessibility Widgetswpacc-accessible-twitter-feed byRian Rietveld•Removed title attribute in links(messes up screen reader output)•Removed links on hashtags to preventa overload of links for a tweet•Removed the timestamp/link toprevent an overload of links for a tweet
  • 31. Accessibility Widgetswpacc-accessible-twitter-feed byRian Rietveld•Removed inline style for font-size•Included a .pot file and dutch .po/.mofiles
  • 32. Cities: New YorkTheme project managedby Patik Patel @ppatel of EZFirewill 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 OConnor
  • 34. Cities: Twin CitiesTheme project managed by JoeDolson @joedolson - Joe is a drivingforce for WordPress accessibility.
  • 35. Accessible Content•Use "Alternate Text" field whenuploading images, describe the image.•Dont use "Read More" links, describedestination: Read More about Cities.•Links: dont use "Open link in newwindow/tab" check box.
  • 36. Accessible Content•Use headings to sum up paagaphsand give structure.•Use lists if content is a list.•Adding video? Dont autostat! Makesure video is Closed Captioned andprovide a tanscript for audio.
  • 37. Cities: Rio De JaneiroTheme project managedby Ana Isabel Paaguay@projectarpaatodos
  • 38. Cities: São PauloTheme project managedby Ana Isabel Paaguay@projectarpaatodos
  • 39. Cities: MontrealTheme project managedby Rocio Alvaado @symetris
  • 40. Cities: Augusta GATheme by Amanda Rush@cswordpress
  • 41. CreditsFree Blurred Backgroundsby Timothy Whalin @TimothyWhalinImages from Flickr via HaikuDeck for iPadFont: Facit by Just Another FoundySlides composed in Keynote and posted toSlideshare for text tanscription to makethe information accessible.