This week in WordPress Accessibility, March 12, 2018

We had four items on the agenda:

1. Handbook.
2. GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) requirements.
3. Visual change on hover for a link.
4. Open floor.

Read the full transcript in Slack.

Handbook

Accessibility handbook is going forward little by little. Here are couple of newest articles:

• Accessibility training and recourses.
• Accessible dialog modal.

Next steps also include marketing plans for the handbook. The idea is that people would actually know about the handbook 🙂

Gutenberg and accessibility requirements

We have been talking about accessibility requirements in Gutenberg. We now have nine items in the list, last three was added todays meeting.

1. Keyboard navigation through blocks needs to be greatly simplified and streamlined. See the experiment with navigation mode / edit mode.
2. For some components, there’s the need to constrain tabbing within the component (i.e. they should behave like “modals”).
3. The publishing flow needs to be simplified, currently its accessibility is terrible.
4. Everything needs to live inside the landmark regions.
5. Text mode: a simple textarea is the only guarantee to enable users to publish content, regardless of the device / technology they use.
6. Write documentation for keyboard and screen reader users.
7. Consider a mechanism to customize shortcuts, e.g. Cmd/Ctrl + backtick, see issue #3218.
8. Use a `role=”textbox”` for all the Editable elements, see issue #3412 and issue #4074.
9. BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. toolbars position counterintuitive for keyboard users, see issue #3976.

We would like to get these implemented before merge proposal.

Update March 13: We also talked about the issue where adding a post title is hard using speech recognition software. There is PR for adding aria-label to post title, which needs testing.

Visual change on hover for a link

We discussed should links have visual change on hover. There were two use cases to investigate.

1. Vanilla link: <a href="#link">This is link</a>
2. Link with image: <a href="#link"><img src="test.png" alt="testing image inside link"></a>

For item one we already have a guideline that main content links needs to be underlined. Without CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. browsers only have cursor pointer on hover. See the screenshot below.

We agreed that there is no need for visual change on hover, as it follows browsers native behaviour. But from a usability point of view extra visual change can be helpful. For example removing the underline.

Item two (image inside a link) use cases are for example gallery or feature image linking to post. We agreed that images don’t need underline or border. But on hover change we recommend same styles as on focus, like outline styles.

There are couple of examples how to deal with feature image linking to post:

1. Put image inside the same link as post title.
2. Ignore some of the links at least for keyboard users.

We were also joking around as usual: Surround the image with marquee text “Click the image”.

Open floor

@postphotos (Leo Postovoit) had his first ticket and patch about what captions means for video. Congrats!

@afercia (Andrea Fercia) made the “Available Widgets” section operable with a keyboard. Also, the link to the “Accessibility mode” is now available to all users.

There should be a game called things you didn’t know about WP admin.

#weekly-meetings