Cities presentation for WordCamp Montreal, June 30, 2013. There is a spectacular lack of accessible WordPress themes. Accessibility practitioners from around the world are creating free accessible WordPress themes. The themes will be available in the WordPress.org Themes Directory.

1. Cities
Making Free Accessible
WordPress Themes

2. Cities
There are 1,784 themes in the
WordPress Theme Directory
Four 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 practitioners are
creating free accessible WordPress
themes

4. Joseph Karr O’Connor
Invited expert W3C HTML5
Accessibility Taskforce
13 years accessibility experience
WordPress Accessibility Group
Cities: Making Free Accessible
WordPress Themes

5. Montreal
Theme project managed by
Rocio Alvarado @AccessibiliteWb -
bilingual small business theme.

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

12. Montreal
Front-end:
✓ Sufficient colour contrast
✓ 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

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

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

15. Accessibility
“Accessibility is the degree
to which a product, device,
service, or environment is
available to as many
people as possible.”
Cynthia Waddell

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

17. Canberra
Government theme By Simon Pascal
Klein @klepas a freelance web
designer with a passion for good
typography.

18. Accessibility
Moving Beyond Technical
Accessibility
Constructing a POUR website:
✓ Perceivable in multiple ways
✓ Operable using various input methods
✓ Understandable by your readers
✓ Robust across operating systems and
platforms

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

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

21. Accessibility
✓ No-script elements for scripts
✓ Keyboard navigable
✓ Applications don’t override AT
✓ Visual focus indicator
✓ Don’t override user agent controls
✓ Sufficient color contrast
✓ No quick motion

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

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

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

25. WP Accessibility
✓ Mel Pedley
✓ Graham Armfield
✓ Cyndy Otty
✓ Joe Dolson
✓ Amanda Rush @cswordpress
✓ Amy Newcombe @_Redd
✓ Amy Hendrix @sabreuse
✓ Joseph Karr O'Connor

26. WP Accessibility
WordPress theme review guidelines for
accessibility are in draft mode.
Internet relay chat, Wednesdays, 19:00
UTC, #wordpress-ui, server
irc.freenode.net or via freenode web
chat.

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

28. Accessibility Plugins
WP Accessibility by Joe Dolson
✓ Remove redundant title attributes from
page lists, category lists, and archive
menus.
✓ Enable skip links with WebKit support
by enqueuing JavaScript support for
moving keyboard focus.
✓ Add skip links with user-defined
targets. (Customizable targets and
appearance.)

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

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

31. Accessibility Plugins
WP Accessibility by Joe Dolson
✓ Strip title attributes from images
inserted 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

32. Accessibility Plugins
WP Accessibility by Joe Dolson
✓ Add a toolbar toggling between high
contrast, large print, and desaturated
(grayscale) views of your theme.
✓ Fix certain accessibility issues in the
WordPress admin styles
✓ Show the color contrast between two
provided hexadecimal color values.

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

34. Boston
Theme project managed
by Char James-Tanny @CharJTF -
a restaurant theme.

35. Cities: Ottawa
Theme project by Simply Accessible
managed by Elle McPherson
@nethermind - education theme.

36. Accessibility
wpacc-accessible-twitter-feed by
Rian Rietveld
"Plugin and theme developers
should be required to show their
work to their mother or
grandmother, maybe then they'd
discover, for example, that a grey
site with grey characters is pretty
hard to read when you're older."

37. Accessibility
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

38. New York
Theme project managed
by Pratik Patel @ppatel of EZFire
will be a business theme.

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

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

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

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

43. Accessible Content
✓ Use headings to sum up paragraphs
and give structure.
✓ Use lists if content is a list.
✓ Adding video/sound? Don't
autostart!
✓ Make sure video is Closed Captioned
and provide a transcript for audio.

44. Rio De Janeiro
Theme project managed
by Ana Isabel Paraguay
@projetoinclusiv

45. São Paulo
Theme project managed
by Ana Isabel Paraguay
@projetoinclusiv

46. Augusta Georgia
Theme by Amanda Rush
@cswordpress

47. Manchester UK
Theme by Helen Wallworth
@AccessibleGeeks

48. Los Angeles
Theme project managed by
Natalie MacLees

49. Credits
Free Blurred Backgrounds
by Timothy Whalin @TimothyWhalin
Images from Flickr via HaikuDeck for
iPad
Slides composed in Keynote and
posted to Slideshare to make the
information available in a transcript.