WP a11y docs list

Here’s a collection of all the A11y resources I’ve found at WordPress.org sites (and two Google docs in use for drafting Handbook pages):

Make WordPress Accessible blog
https://make.wordpress.org/accessibility/

Make WordPress Accessible> Accessibility Handbook
https://make.wordpress.org/accessibility/handbook/

(Draft: outline for A11y Handbook) Accessibility Contributor Handbook
https://docs.google.com/spreadsheets/d/1tOYzFn9vc7Ff4yGBmDajelrl7XMDUz4PR5H2lB4exI4/edit?usp=sharing

Make WordPress Accessible> Useful Tools

Useful Tools

WordPress Accessibility> Theme Patterns
https://github.com/wpaccessibility/a11ythemepatterns

Docs Handbook> Handbooks Style and Formatting Guide> Accessibility

Handbooks Style and Formatting Guide

Codex> Accessibility
https://codex.wordpress.org/Accessibility

Theme Handbook> Accessibility

Accessibility

Theme Review Handbook> Accessibility

Accessibility

Theme Review Handbook> Accessibility> #resources

Accessibility

Theme Review Handbook> Accessibility> Resources

Resources

Theme Directory> accessibility-ready tag
https://wordpress.org/themes/tags/accessibility-ready/

Plugin Directory> WP Accessibility

WP Accessibility

Plugin Directory> Access Monitor

Access Monitor

(Draft: guidelines for Plugins) WordPress A11y Code Standards
https://docs.google.com/document/d/1iySvDJ4duHYt6YlnnjnBNbU5LKAn1uRBMH8FKAfmswE/edit

Accessibility code standards for WordPress core (similar to above)

Accessibility code standards for WordPress core

#documention, #handbook

Summary team chat, December 21, 2015

Accessibility standards for core

There where several comments on the post with the accessibility code standards for core.
@joedolson will add the relevant remarks. These standards will be added to the WordPress Coding Standards of the core Handbook.

Documentation

@trishasalas made a Google Doc with an overview of all the documentation that needs to be written for our handbook. More details about how to help her and contribute to the documentation in the blogpost Accessibility Handbook and Docs Update.

Tickets

#34957 #a11y-focus: Standardizing the handling of :focus and :hover
Moving forward, we’ve established that :focus is the primary transition for when a user interacts with a link or button. :hover is an extension of :focus that comes from a direct action, whereas :focus comes from an indirect action. Because :focus lacks a direct action, it needs to be styled in a way that brings clear visual attention to the element. Michael Arestad (@michaelarestad) is working on the visual update and we’ll move forward with implementing it once we have that complete.

#26601: Inappropriate content in headings on admin screens
Consensus is: ‘Add New Button’ === burn it with fire (agreed on by @michaelarestad)
@trishasalas will write a refreshed patch for this.

Next meeting

Next meeting will be in January 4, 2016 at 18:00 UTC

#accessibility-team-meetup, #weekly-meetings

Accessibility Handbook and Docs Update

Since WordCamp US we’ve gotten a lot more people contributing to the wpA11y Documentation team.  Welcome to Robert Jolly (@iamjolly), Barret Golding (@hearvox), Job Thomas (@jobtex) Scott Mann, Rachel Vasquez (@rachievee) and Nancy Thanki (@nancythanki)!

The spreadsheet for contributing the the Accessibility Handbook can be found here https://docs.google.com/spreadsheets/d/1tOYzFn9vc7Ff4yGBmDajelrl7XMDUz4PR5H2lB4exI4/edit#gid=0

The idea is similar to the other handbooks in that you pick a section or even a page within that section and you can be the lead for that part of the handbook.  As you can see some of the sections have very little content (or none at all in some cases!) so we are in need of content creation as well as editing.

I have also started a basecamp that will hopefully help us to stay organized.  If you would like access to that please either comment here with your email address or you can ping me in Slack @trishasalas.

Note that no content has been removed from the Handbook, things have just been rearranged.  If you can’t find something you were working on let me know and we can look together 😉

Team meeting summary December 14, 2015

The last month, especially after WordCamp US we’ve got a lot more people contributing to the wpa11y team.
Welcome Robert Jolly, Morten Rand-Hendriksen, Cheo Walker, Sakin Shrestha, Barret Golding, Adam Soucie, Scott Mann and Rachel Vasquez!

We want to keep all the new people involved, not make them feel lost or left out and leave.
Therefore we decided to form working groups, assign one lead and divide the new people in the workgroups, so they know what to do and who to ask for help/work. People can jump in and out of groups as work ebbs and flows.

Working groups

Core

  • Task: Find accessibility issues, write and discuss tickets on core trac and code patches for WordPress core.
  • Lead: Andrea Fercia
  • Contributors: Joe Dolson, Jeffrey de Wit, Sergey Biryukov, Cheo Walker, Trisha Salas, Adam Soucie, Robert Jolly, Rian Rietveld.

Documentation

  • Task: Write documentation about accessibility in our Handbook and on other relevant places on WordPress.org
  • Lead: Trisha Salas
  • Contributors: Joseph O’Connor, Barret Golding, Richard Senior, David Kennedy, Rachel Vasquez.
  • Joe Dolson and Robert Jolly volunteered to review written content.

Theme team

Meta

  • Task: Find accessibility issues, write and discuss tickets on meta trac and code patches for the website WordPress.org and WordPress.tv
  • Lead: Joe Dolson
  • Contributors: Morten Rand-Hendriksen, Barret Golding, Trisha Salas

WordCamp themes

  • Task: Review of the WordCamp themes and help with fixing the accessibility
  • Lead: David Kennedy
  • Contributors: Jeffrey de Wit, Adam Soucie

Test team

  • Task: Test the accessibility of new and exsisting functionallity in and for WordPress core, at the request of the other workgroups and teams
  • Lead: Rian Rietveld
  • Contributors: > 75 volunteers, with different kind of assistive tecnology and/or accessibility expertise

Accessibility code standards for core

During the WCUS community summit in Philadelphia we made a start with accessibility code standards for core.
Joe Dolson put a concept for the a11y code standards together.
Please look at the concept and comment on it.

Documentation

Barret and Trisha are working on a good outine for the documentation, lots of good ideas, work in progress, more next week.

Core

The last #a11y-headings ticket is #26601 Inappropriate content in headings on admin screens.
Joe Dolson will look into this, make a decision on how to solve this issue. On the WCUS contributors day we discussed this and the outcome od this was: First get the link out of the heading, without changing the visual design. And after that is committed, start the discussion of removing it conpletely from the post-new.php / post.php pages.

Next big project for 4.5: Color contrast ratio of the colors used in the WordPress Admin.
The official colors to use are on make.wordpress.org/design/handbook/foundations/colors/
Related ticket: #31234 closed Update wp-admin default colors.

We need to review them and fix contrast ratios for text and background lower than 4.5.
The tickets we file for this will be labeled #a11y-color.

Also related:
#34957 #a11y-focus: Standardizing the handling of :focus and :hover
Any feedback on this ticket for the project is appreciated by Adam Soucie

Meta

Ideas for meta.trac tickets from Barret:
1. the skip-to link needs to be closer to.
2. the skip-to link-text should be visible on focus.
3. the headings hierarchy is far from W3C standard.

Idea from Morten: Start a campaign to get WordCamp speakers to caption their own talks.

To-do for next week

Read and comment on Accessibility code standards for core.

Tickets that needs work/discussion
If you want to work on core, grab one of these tickets and help solving them

  • #31195: Add a user-friendly way to preview site responsiveness in the Customizer
  • #34625: wp-login.php site title link points to wordpress.org
  • #31195: Add a user-friendly way to preview site responsiveness in the Customizer
  • #35029: Remove title attributes: the revisions limit in the Publish box
  • #35050: Remove title attributes: Plugin Cards
  • #35064: Remove title attributes: options-general.php
  • #35076: Remove title attributes: the Featured Image postbox
  • #34957 #a11y-focus: Standardizing the handling of :focus and :hover
  • And every other ticket that focusses accessibility

#accessibility-team-meetup, #team-reps, #weekly-meetings

Accessibility code standards for WordPress core

During the WCUS community summit 2015 in Philadelphia we made a start with accessibility code standards for WordPress core. Joe Dolson put a concept for the a11y code standards together (see below or as Google Doc).
These are the standards expected from new code (like feature plugins) at the time it’s to be merged into core. Our target for released code is WCAG2.0 AA.
Proposed place to put them is the Core Handbook: WordPress Coding Standards, we aim for a short list of very basic things with references to the Accessibility Handbook.

Feedback (in the comment section below) is very welcome.

Concept Accessibility code standards for core:

This document is a list of standards that a WordPress feature plug-in should meet for accessibility in order to be merged into core. These standards are focused on best practices and easily testable concerns.

The expectations for all code released in WordPress is conformance with WCAG 2.0 at the AA level.

  • HTML Semantics
  • Headings Hierarchy
  • Definition of HTML for Controls
  • Usage of ARIA
  • Color Contrast
  • Keyboard Accessibility
  • Images and Icons
  • Labeling

HTML Semantics

Take a pragmatic approach to HTML semantics. Don’t add semantics purely for the sake of semantics; but if there is an HTML structure that clearly matches the content, use that element. For example, if you have a group of links, it should most likely use a list element.

Heading structure

The H1 is the main heading representing the page title on every core page. For sub sections, use a reasonable HTML heading structure — including the use of heading elements for page sub-sections. Heading markup should not be used for presentational purposes.

  • Use H2 through H6 to give internal structure to the page.
  • Don’t skip heading levels.
  • Don’t add extra functionality inside a heading, like links or buttons.

Semantics for Controls

Controls with a native keyboard interaction (buttons or links) are always preferred. If there is a valid target link for the control, either an in-page reference or a link, then the control should use an <a href=”url”>. If there isn’t, it should use a <button>

Related ticket: #26504 Semantic elements for non-link links

Dynamic Content

When there are dynamic changes within a page without a page reload you must provide audible feedback with ARIA for important changes, like a successful saving for example.

[Provide documentation and links for aria-live, wp.speak, etc.]

Color Contrast

In most cases, feature plug-ins are not expected to add or modify colors in core. However, if a feature plug-in needs to add new color combinations, those combinations must meet minimum contrast requirements. Minimum contrast requirements are 4.5:1 for font sizes rendering smaller than 24px or smaller and 3.0:1 for font sizes larger than 24px or 19px and bold.

[in detailed reference, comment on why we’re referencing as pixels]

Keyboard Accessibility

Users must be able to reach and successfully interact with all elements on the page that are actionable, including all form inputs, buttons and links by using the keyboard. They must be able to see a visual indicator of keyboard focus. You should be aware that keyboard events may operate differently when a screen reader is running.

Images and Icons

Any image resource must include an accessible name. An image can be represented by an actual element, an icon font, or an svg element; but any graphical representation is considered an image for these purposes. Different types of elements use different types of accessible names.

For <img> elements, the accessible name should be in the alt attribute. If the img is ornamental, the alt attribute should still be included, but left empty.

For icon fonts, the font icon itself should be aria-hidden, with screen-reader-text in a neighbor element. e.g.

<a href=’this.html’>
<span class=’dashicons dashicon-something’ aria-hidden=’true’></span>
<span class=’screen-reader-text’>Something</span>
</a>

Something

For SVG, the SVG should be inline, so that accessible information isn’t hidden from assistive technology. SVG elements should contain aelement with the accessible name of the image. For cross-technology support, the title element should be associated with the svg element via aria-labelledby. For more information, see http://www.sitepoint.com/tips-accessible-svg/

Labeling

All form inputs must include an explicitly associated <label>