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

9. 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)

10. Mumbai
Shilpi Kapoor @Shilpi_Kapoor of
BarrierBreak is developing the
Mumbai theme.

11. Accessibility
“Accessibility is the degree
to which a product, device,
sevice, or environment is
available to as many
people as possible.”
Cynthia Waddell

12. Accessibility
Cities themes standards:
Section 508 Compliant
WCAG 2.0 Level AA Compliant
HTML5
W3C Validation
Commented code

13. Canbera
Government theme By Simon Pascal
Klein @klepas a freelance web
designer with a passion for good
typogaphy.

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

15. Copenhagen
by Karen Mardhal @kmdk driven by
the idea of inclusion and universal
design - we're all in this together!

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

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

18. Sydney
Theme by Lisa Herrod @scenariogirl
building
a business theme.

19. WP Accessibility
WordPress accessibility group –
dedicated to improving accessibility in
core
Join at Make WordPress Accessible
Tweeting at @WPAccessibility

20. D.C.
Team managed by David Kennedy
@DavidAKennedy - theme for non-
profits and government.

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

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

23. Toronto
Theme project managed
by Jennison Asuncion @Jennison.

24. 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.)

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

26. Nashville
Theme by Anna Belle Leiserson
for congregations (churches,
temples, mosques etc.)

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

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

29. Accessibility Plugins
Accessibility plugins by Joe Dolson:
My Calendar
WP to Twitter
WP Accessibility
BotSmasher

30. Boston
Theme project managed
by Char James-Tanny @CharJTF -
a restauant theme.

31. Ottawa
Theme project by Simply Accessible
managed by Elle McPherson
@nethermind - education theme.

32. 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."

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

34. New York
Theme project managed
by Patik Patel @ppatel of EZFire
will be a business theme.

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

36. Accessibility Widgets
wpacc-accessible-twitter-feed by
Rian Rietveld
✓ Removed inline style for font-size
✓ Included .pot file and dutch .po/.mo
files

37. Twin Cities
Theme project managed by Joe
Dolson @joedolson - Joe is a driving
force for WordPress accessibility.

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

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

40. Rio De Janeiro
Theme project managed
by Ana Isabel Paaguay
@projetoinclusiv

41. São Paulo
Theme project managed
by Ana Isabel Paaguay
@projetoinclusiv

42. Augusta Georgia
Theme by Amanda Rush
@cswordpress

43. Manchester UK
Theme by Helen Wallwoth
@AccessibleGeeks

44. Los Angeles
Theme project managed by
Natalie MacLees

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