Cities: Making Accessible WordPress Themes

Presented by: Joseph Karr O'Connor

@AccessibleJoe, accessiblejoe@icloud.com

Abstract

Challenge: Few accessible WordPress themes are available for free. Solution: Teams of accessibility practitioners around the world create free accessible WordPress themes.

Dedicated to Jennifer Sutton @jsutt who is persistent.

"This slideshow has been developed with jQuery Mobile to create a universally accessible presentation that will work on any accessibility enabled device. PowerPoint & PDF formats are not universally accessible."

Paul J. Adam

Slideshow: Press the Left/Right Arrow Keys or Page Up/Down to navigate through slides. Adjust text size in the Info dialog. Share this presentation on Twitter or Facebook.

URL: http://accessiblejoe.com/cities-csun13/

Introduction to WordPress

WordPress

First released on May 27, 2003, by founders Mike Little @mikelittlezed1 and Matt Mullenweg @photomatt (pictured at left), WordPress is free open-source blogging software.

Themes

WordPress users may install and switch between themes. Themes allow users to change the look and functionality of a WordPress website or installation without altering the information content or structure.

Plugins

WordPress has a rich plugin architecture which allows users and developers to extend its abilities beyond the features that are part of the base install. Plugins enable customizing the functionality of an application.

Introduction to WordPress

Widgets

These small modules can be used to add functionality such as a slideshow, Facebook Like box, small news slider, and more.

Multi-User

WordPress MU allows multiple blogs to exist within one installation that is able to be administered by a centralized maintainer.

Other Features

WordPress also features integrated link management; a search engine-friendly, clean permalink structure; the ability to assign nested, multiple categories to articles; and support for tagging of posts and articles.

Your Help Is Needed!

Now In Development: WordPress 3.6

Help is needed on the accessibility team to guide development of the back-end. Even if you can only spare a few minutes your help is essential.

Plugins and Widgets

Help is needed making accessibility enhancing plugins and widgets.

Themes

Help is needed making accessible themes. Especially important is the fact that very few free accessible themes are available.

How You Can Help

• Join the WordPress Accessibility Group

  Make WordPress Accessible is the official blog for the WordPress accessibility group - dedicated to improving accessibility in core WordPress and related projects . To join in the discussions, just log in using your WordPress.org username and password. Anyone can create a login. You just need to be willing to contribute to accessibility discussions, you don't need any superpowers.

• Comment on Theme Accessibility Audit Draft

  The Theme Accessibility Audit is designed to offer an optional theme review for themes submitted to the wordpress.org Theme Repository. Submitted themes (or theme updates) that contain the tag accessibility-ready will undergo a further, independent, accessibility review after they have been approved for inclusion in the Theme Repository.

• Join the Discussion on Twitter

  Ask questions, make suggestions @WPAccessibility.

Who Is Helping Now?

• WordPress Accessibility Group

  Mel Pedley (opens in new window/tab)

  Pride: "Getting the current Make WordPress Accessible group up & running."

  Graham Armfield (opens in new window/tab)

  Pride: "My presentation at WordCamp UK last July and the warm reception I received."

  Cyndy Otty (opens in new window/tab)

  Pride: "Giving a voice to the reasons why certain features should be accessible."

  Joe Dolson (opens in new window/tab)

  Pride: "I'm proud of my WP Accessibility plug-in, for what it offers."

  Joseph Karr O'Connor

  Pride: "I'm proud of the work the Cities teams are doing to create free accessible WordPress themes."

Plugins

Joe Dolson: WP Accessibility

The current version of the plugin can:

• 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.
• Add language and text direction attributes 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.
• Remove tabindex from elements that are focusable.
• Strip title attributes from images inserted into content.
• Add post titles to standard “read more” links.
• Add a :focus outline to focusable elements.
• Toggle for high-contrast and large font stylesheets.
• Custom admin stylesheet
• Provide color contrast testing tool to compare colors against WCAG contrast standards

More plugins by Joe available at Accessible Web Design.

Plugins

Joe Dolson: Modified Version of the Theme Check plugin

The current version of the plugin can do:

• Accesskey check
• Form check
• Image alt check
• Empty link check
• Tabindex check
• Headings check

Graham Armfield: WordPress Permanently Visible Log Out Link Plugin

The current version of the plugin:

• Adds a permanently visible Log Out link to the top toolbar within the WordPress Admin screens

Widgets

Rian Rietveld (opens in new window/tab)

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

wpacc-accessible-twitter-feed

The current version of the widget:

• 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
• Removed title attribute in links (messes up screen reader output)
• Removed links on hashtags to prevent a overload of links for a tweet
• Removed the timestamp/link to prevent an overload of links for a tweet
• Removed inline style for font-size
• Included a .pot file and dutch .po/.mo files

Theme Development

Installing WordPress Locally on Your Mac With MAMP

• MAMP stands for Macintosh, Apache, MySQL, and PHP. MAMP is an application you can install on your Mac which allows you to have access to a local PHP server and MySQL server. Essentially, MAMP gives you all of the tools you need to run WordPress on your machine, for development and testing purposes.

Run WordPress Locally on Linux, Solaris, Windows and Mac OS X With XAMPP

• XAMPP is a very easy to install Apache Distribution for Linux, Solaris, Windows and Mac OS X. The package includes the Apache web server, MySQL, PHP, Perl, a FTP server and phpMyAdmin.

Check Your Theme With Theme Check Plugin

• Theme Check is a simple and easy way to test your theme for all the latest WordPress standards and practices. A great theme development tool! Use Theme Check before submitting your theme to WordPress.org Theme Directory for approval.

Accessible Themes

Rian Rietveld @RianRietveld

• accessible-genesis-child-theme
• Accessible Child Theme for the Genesis Framework
• accessible-twenty-eleven-theme
• Some accessibility changes on the WordPress child theme Twenty Eleven

Mel Pedley

• Scrapbook
• A light, graphical, theme designed to informally highlight your images via Image and Gallery post formats. Additional features include enhanced accessibility, customised attachment and thickbox-enabled image templates plus page templates with, and without, comments. Support available on Quirm.net.

Accessible Themes

Per Sandström @persand

Blaskan

• Blaskan @blaskantheme is a forever free high quality theme focused on what WordPress does best: blogging. It's fully responsive and built for smartphones, tablets, netbooks, laptops and desktops. Accessibility is highly prioritized, following the WAI-ARIA specfication as well as possible.
• Some sites using Blaskan:
• Dennis Lembree's "WebAxe"
• Joseph Karr O'Connor's "Blacktelephone"
• Byron Lee's "The World of Byron Lee"
• STC's "STC Accessibility SIG"
• Technical Communication UK (TCUK) conference site
• Sarah Lewthwaite's "Slewth Press"

Special shout out to Sarah Lewthwaite
@slewth who is not at #csun13
due to the birth of her son, Joseph.

And Now A Word About Accessible Content

Some Accessible Content Concerns

• Use "Alternate Text" field when uploading images, describe 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
• Use headings to sum up paragraphs and give structure
• Use lists if content is a list – hint: this content is an unordered list
• Adding video? Don't autostart! Make sure video is Closed Captioned.

Themes in the WordPress.org Themes Directory

Themes available today: 1,701

Accessible themes available today: 4

• Search term: accessibility yields 4 themes
• Search term: WCAG yields zero themes
• Search term: Section508 yields 1 theme (a repeat)

Why You Should Never Search For Free WordPress Themes

• Free themes may contain:
• Malicious code which can run amok on your site
• Hidden off-left unrelated back-links
• Static spam links wrapped in the footer or sidebar

"You can add the dangers of outdated themes, too. stc-access.org had serious spam problems that went undetected for 6 months. We were hit with link-bait stuff for certain "enhancement" products. Took a lot of (volunteer) time to clean out."

Karen Mardahl

How can we change this situation?

Cities

Teams In Cities Around the World Are Making Free Accessible WordPress Themes

The themes will be made available for free in the wordpress.org themes directory.

Teams are now working to make themes available in the next few months.

• Karen Mardahl @kmdk in Denmark is doing Accessible Copenhagen
• Lisa Herrod @scenariogirl is doing Accessible Sydney
• Char James-Tanny @CharJTF is doing Accessible Boston
• Jennison Asuncion @Jennison is doing Accessible Toronto
• Pratik Patel @ppatel is doing Accessible New York
• Shilpi Kapoor @Shilpi_Kapoor is doing Accessible Mumbai
• David Kennedy @DavidAKennedy is doing Accessible DC
• Simon Pascal Klein @klepas is doing Accessible Canberra
• Joe Dolson @joedolson is doing Accessible Twin Cities
• Joseph Karr O'Connor @AccessibleJoe is doing Accessible Los Angeles

Special announcement: Elle Waters @Nethermind and the Simply Accessible team will be doing Accessible Ottowa!

Please consider forming a Cities team, we need more free accessible themes!

@AccessibleJoe

Info

This presentation and slideshow template is always evolving, most ALT text should be added and correct. Please contact me if there are any issues.

You can use the left and right arrow keys or page up/down to navigate between slides. If you're using a screen reader you may need to use the pass through key first then hit arrow keys. Page up/down works with screen readers enabled without the need for a pass through key.

JAWS Pass Key Through, INSERT+3

NVDA NVDA+f2: pass Next Key Through

Close

Share

Twitter Facebook Cancel