View
139
Download
2
Embed Size (px)
Citation preview
Cities
Making Free AccessibleWordPress Themes
Cities
There are 1,941 themes in the WordPress Theme Directoy
Five of them are accessible
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 pactitioners are creating free accessible WordPress themes
Joseph Karr O’Connor
Invited expet W3C HTML5 Accessibility Taskforce
13 years accessibility experience
WordPress Accessibility Group
Cities: Making Free Accessible WordPress Themes
Montreal
Theme project managed by Rocio Alvaado @AccessibiliteWb -
bilingual small business theme.
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
Montreal
Front-end:✓ Sufficient colour contast ✓ 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
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)
Mumbai
Shilpi Kapoor @Shilpi_Kapoor of BarrierBreak is developing the
Mumbai theme.
Accessibility
“Accessibility is the degree to which a product, device, sevice, or environment is available to as many people as possible.” Cynthia Waddell
AccessibilityCities themes standards:
Section 508 Compliant
WCAG 2.0 Level AA Compliant
HTML5
W3C Validation
Commented code
Canbera
Government theme By Simon Pascal Klein @klepas a freelance web
designer with a passion for good typogaphy.
AccessibilityMoving Beyond Technical AccessibilityConstructing a POUR website:✓ Perceivable in multiple ways
✓ Opeable using various input methods
✓ Understandable by your readers
✓ Robust across opeating systems and platforms
Copenhagen
by Karen Mardhal @kmdk driven by the idea of inclusion and universal design - we're all in this together!
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
Accessibility
✓ No-script elements for scripts
✓ Keyboard navigable
✓ Applications don’t override AT
✓ Visual focus indicator
✓ Don’t override user agent controls
✓ Sufficient color contast
✓ No quick motion
Sydney
Theme by Lisa Herrod @scenariogirl building
a business theme.
WP AccessibilityWordPress accessibility group –dedicated to improving accessibility in core
Join at Make WordPress Accessible
Tweeting at @WPAccessibility
D.C.
Team managed by David Kennedy @DavidAKennedy - theme for non-
profits and government.
WP Accessibility
✓ Mel Pedley
✓ Gaham Armfield
✓ Cyndy Otty
✓ Joe Dolson
✓ Amanda Rush @cswordpress
✓ Sharon Austin @_Redd
✓ Amy Hendrix @sabreuse
✓ Karl Groves@karlgroves
✓ Joseph Karr O'Connor
WP AccessibilityWordPress theme review guidelines for accessibility are in daft mode.
Internet relay chat, Wednesdays, 19:00 UTC, #wordpress-ui, sever irc.freenode.net or via freenode web chat.
Toronto
Theme project managed by Jennison Asuncion @Jennison.
Accessibility Plugins
WP Accessibility by Joe Dolson✓ Remove redundant title attributes from page lists, categoy lists, and archive menus.
✓ Enable skip links with WebKit suppot by enqueuing JavaScript suppot for moving keyboard focus.
✓ Add skip links with user-defined targets. (Customizable targets and appeaance.)
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.
Nashville
Theme by Anna Belle Leiserson for congregations (churches,
temples, mosques etc.)
Accessibility Plugins
WP Accessibility by Joe Dolson✓ Strip title attributes from images inseted 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
Accessibility Plugins
WP Accessibility by Joe Dolson ✓ Add a toolbar toggling between high contast, large print, and desatuated (gayscale) views of your theme.
✓ Fix cetain accessibility issues in the WordPress admin styles
✓ Show the color contast between two provided hexadecimal color values.
Accessibility Plugins
Accessibility plugins by Joe Dolson:My Calendar
WP to Twitter
WP Accessibility
BotSmasher
Boston
Theme project managed by Char James-Tanny @CharJTF -
a restauant theme.
Ottawa
Theme project by Simply Accessible managed by Elle McPherson
@nethermind - education theme.
Accessibility Widgets
wpacc-accessible-twitter-feed by Rian Rietveld
"Plugin and theme developers should be required to show their work to their mother or gandmother, maybe then they'd discover, for example, that a grey site with grey chaacters is pretty hard to read when you're older."
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
New York
Theme project managed by Patik Patel @ppatel of EZFire
will be a business theme.
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
Accessibility Widgets
wpacc-accessible-twitter-feed by Rian Rietveld✓ Removed inline style for font-size
✓ Included .pot file and dutch .po/.mo files
Twin Cities
Theme project managed by Joe Dolson @joedolson - Joe is a driving
force for WordPress accessibility.
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.
Accessible Content
✓ Use headings to sum up paagaphs and give structure.
✓ Use lists if content is a list.
✓ Adding video/sound? Don't autostat!
✓ Make sure video is Closed Captioned and provide a tanscript for audio.
Rio De Janeiro
Theme project managed by Ana Isabel Paaguay
@projetoinclusiv
São Paulo
Theme project managed by Ana Isabel Paaguay
@projetoinclusiv
Augusta Georgia
Theme by Amanda Rush @cswordpress
Manchester UK
Theme by Helen Wallwoth @AccessibleGeeks
Los Angeles
Theme project managed by Natalie MacLees
CreditsFree Blurred Backgrounds by Timothy Whalin @TimothyWhalin
Images from Flickr via HaikuDeck for iPad
Composed in Keynote, posted to Slideshare, available in a tanscript.
This presentation: http://bit.ly/Cities-WordCamp-Montreal-2013