Your SlideShare is downloading. ×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cities: Making Free Accessible WordPress Themes


Published 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.

Published in: Education, Technology, Business
  • 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.