Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cities: Making Accessible WordPress Themes

Cities: Making Accessible WordPress Themes

Site owners are looking for accessible WordPress themes. There is a spectacular lack of accessible WordPress themes. Accessibility practitioners around the world are creating free accessible WordPress themes.

Joseph Karr O'Connor

April 28, 2013
Tweet

Other Decks in Education

Transcript

  1. Cities
    Making Free Accessible
    WordPress Themes

    View Slide

  2. Cities
    There are 1,747 themes in
    the WordPress Theme Directoy,
    four of them are accessible.

    View Slide

  3. Cities
    Cities directed by
    Joseph Karr O’Connor
    accessiblejoe.com

    View Slide

  4. Agenda
    What is Cities?
    Accessibility
    WP Accessibility
    Accessibility Plugins
    Accessibility Widgets
    WP Accessibility Group
    Accessible Content

    View Slide

  5. Cities: Los Angeles
    Theme project managed by
    Natalie MacLees

    View Slide

  6. What is Cities?
    Site owners are looking for accessible
    WordPress themes.
    There is a spectacular lack of accessible
    WordPress themes.
    Accessibility pactitioners around the world
    are creating free accessible WordPress
    themes.

    View Slide

  7. Cities: Mumbai
    Shilpi Kapoor @Shilpi_Kapoor of BarrierBreak
    is developing the Mumbai theme.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. Accessibility
    Constructing a POUR website:
    •Perceivable
    •Opeable
    •Understandable
    •Robust

    View Slide

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

    View Slide

  13. Accessibility
    •Enable skip links
    •Headings in order
    •Alternate text for pictures
    •Captioning for video/audio
    •Don’t use color for navigation
    •Reading order is correct
    •Data tables and forms properly coded
    •Avoid timeouts in forms

    View Slide

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

    View Slide

  15. Cities: Sydney
    Theme by Lisa Herrod @scenariogirl
    will be a business theme.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. Cities: Toronto
    Theme project managed
    by Jennison Asuncion @Jennison

    View Slide

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

    View Slide

  21. Accessibility Plugins
    WP Accessibility
    •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. (If your theme has a
    search.php template.)
    •Remove tabindex from elements that are focusable.

    View Slide

  22. Cities: Nashville
    By Anna Belle Leiserson @happywebdiva
    for congregations (churches, temples,
    mosques etc.)

    View Slide

  23. Accessibility Plugins
    WP Accessibility
    •Strip title attributes from images inseted into content.
    •Add post titles to standard "read more" links.
    •Add an outline to the keyboard focus state for
    focusable elements.

    View Slide

  24. Accessibility Plugins
    WP Accessibility
    •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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. 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 a overload
    of links for a tweet
    •Removed the timestamp/link to prevent an
    overload of links for a tweet

    View Slide

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

    View Slide

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

    View Slide

  33. WP Accessibility Group
    •Mel Pedley
    •Gaham Armfield
    •Cyndy Otty
    •Joe Dolson
    •Amanda Rush @cswordpress
    •Amy Newcombe @_Redd
    •Joseph Karr O'Connor

    View Slide

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

    View Slide

  35. Accessible Content
    •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.

    View Slide

  36. Accessible Content
    •Use headings to sum up paagaphs and give
    structure.
    •Use lists if content is a list.
    •Adding video? Don't autostat! Make sure video is
    Closed Captioned and provide a tanscript for
    audio.

    View Slide

  37. Cities: Rio De Janeiro
    Theme project managed
    by Ana Isabel Paaguay @projetoinclusiv

    View Slide

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

    View Slide

  39. Cities: Montreal
    Theme project managed
    by Rocio Alvaado @symetris

    View Slide

  40. Cities: Augusta GA
    Theme by Amanda Rush @cswordpress

    View Slide

  41. Credits
    Free Blurred Backgrounds
    by Timothy Whalin @TimothyWhalin
    Images from Flickr via HaikuDeck for iPad
    Font in Keynote preso: Facit by Just Another Foundy
    Slides composed in Keynote and posted to Slideshare
    for text tanscription to make the information
    accessible.
    HTML slides: accessiblejoe.com/presentations/

    View Slide