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.
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
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)
15. Accessibility
“Accessibility is the degree
to which a product, device,
service, or environment is
available to as many
people as possible.”
Cynthia Waddell
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
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.
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.
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.
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."
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
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.
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.