This week in WordPress Accessibility, August 14th, 2017

Transcript of the meeting

Handbook

The work for rewriting and reorganising the Handbook is in progress: @samikeijonen, @travel_girl and @rianrietveld are writing the first topics, @joedolson is reviewing them. We plan to write at least one topic per week. And the deadline for the first iteration of handbook is March 1, 2018. We enjoy the discussions on Slack: writing everything down makes us really think about what the best practices are.

SelectWoo

We send the SelectWoo demo pages to the testers for assistive technology testing and hope to get feedback this week. The testers will add their findings to the Github issue Review SelectWoo accessibility.

Codemirror for WP 4.9

Because the addition of Codemirror is planned for WP 4.9, we started the discussion with ticket #12423 again. On GitHub it’s available as a plugin, so we’ve opened an issue with our concerns of a code highlighter as default text editor. It’s not accessible for screen reader users. The plugin is also installed on our test server at wpaccess.org/codemirror/ for user testing if needed.

Gutenberg

We installed Gutenberg, from Git Master, on our test server and asked testers to test again, the first test we did was a few months ago and a lot has changed in the meantime. The results are collected and published by @karmatosed on GitHub, labeled feedback.

The next test should be a review of the output of all blocks on the frontend.

Next meeting

  • The next meeting will be at August 28, because too many people are on holiday the 21st.
  • On every Thursday we will informally discuss the handbook during the day.

Thanks @samikeijonen @travel_girl @joedolson @arush @nicbertino @zakkath @karmatosed @sergeybiryukov for joining the discussions.

#weekly-meetings

This week in WPA11y, July 31, 2017

Transcript of the meeting

Handbook and Documentation

@samikeijonen , @travel_girl and @rianrietveld will work together to look at the current documentation on WordPress.org about accessibility and see how they can improve and extend that.
Rian will setup meetings for this.

Test output Gutenberg in the frontend

@afercia set up a page on our test server with all blocks from Gutenberg version 0.5.0. We need to test if this code is valid and accessible, as this will end up on all WP websites eventually. There was a discussion about the usefulness of testing now, as G. is moving and changing so fast at the moment. Also G. 0.6 is already out: Andrea will set up a page for that too. Especially galleries and other complex HTML constructions are imported to test.

We still need more developers who can work on the accessibility of Gutenberg.

Manage a11y tickets

We should be more vigorous about blocking implementation chatter during bug scrubs and keep the discussion about solving the issue with the ticket itself. This way we have more time to also look at the Gutenberg issues on Github.

Open floor

#weekly-meetings

This week in WPA11y – July 24, 2017

Transcript of meeting.

The discussion of the handbook was punted to the July 31st, 2017 meeting, as @samikeijonen was unable to attend this week’s meeting. As this discussion was originally intended as the primary focus of this week’s meeting, the entire meeting was open floor, with no agenda.

Topics discussed

Gutenberg: block output

@afercia recommended we set up a test to review the output of all Gutenberg content blocks, as many of the new block types generate different output than the equivalent in the existing editor, such as the image gallery block.

@rianrietveld requested that @afercia create a post for testing that contains all relevant options.

We determined that we need to first perform an expert review of the general issues, request modifications as necessary, then gather user feedback once any major errors have been worked through.

The team briefly discussed the reasoning behind creating content blocks that generate features that exist in the current WordPress ecosystem using different output HTML; further conversation on this topic should probably land in relevant Gutenberg issues.

Gutenberg: user testing

@nicbertino volunteered to manage moderated user testing for Gutenberg, to start with general user testing, then proceed to specific testing with users requiring assistive technology.

#weekly-meetings

This Week in WPA11y – 7/17/17

0 Gutenberg

There has been some progress on minor issues.
Major issues still need to be addressed but those will require discussion and decisions.

One of the main issues reported in the first testing round is that there are too many tab stops.
Currently, navigation through all the interface works with tabs meaning ALL the controls are tabbable.

Considering how some of the Gutenberg UI parts are actually ARIA widgets, ideally, they should implement focus as recommended by the ARIA spec and the ARIA Authoring Practices. For example, toolbars and menus should be navigated with arrows only.

There’s definitely a need for more people to do testing and give feedback but we also need help with coding solutions.

The code can be confusing for those who are new to react. In light of this, it was proposed that we add an additional label to help React devs understand the expected outcome and make sure they know the end goal. Some possibilities are `[Type] A11y Task`, `needs React dev` or `has-a11y-feedback-needs-implementation`

To clarify the issue about too many tab stops, consider this example:

This is a Gutenberg “inline toolbar”. They change depending on the block.

All the controls in the toolbar are tabbable.

Instead, according to ARIA, if we want to treat this an ARIA toolbar, there should be just one tab stop on the toolbar and then all the controls should be navigated with arrows only.

That would greatly help to reduce the number of tab stops. The mixed tab/arrows navigation is a solid ARIA pattern borrowed by our operating systems.

1 Handbook

Sami Keijonen asked about the handbook: I actually really like the structure of theme handbook, can or should we use the same kind of format?

Also, the Breathe Theme is broken that we are using for https://make.wordpress.org/accessibility is broken:

  1. On mobile Genericon is missing on “hamburger” menu.
  2. Mobile menu doesn’t open at all.

We would like to do an a11y review on the theme for the theme handbook and fix the theme itself

2 Other a11y documentation in wp.org

We’ll start next week’s meeting with the handbook as well as other wp.org documentation.

3 Open floor

Joe Dolson shared some information about Keyboard Accessibility in Slack. You can find here: https://get.slack.help/hc/en-us/articles/115003340723 (new as of today)

Link to Slack archive of meeting: https://wordpress.slack.com/archives/C02RP4X03/p1500311213351043

#weekly-meetings

This week in WPA11y – July 10, 2017

We talked about five topics in our weekly meeting:

  1. How to process test results for Gutenberg.
  2. New Handbook topics.
  3. Project managing a11y tickets in trac.
  4. Windows High Contrast mode.
  5. Open floor.

We tried Slack Threads for the first time. Each topic was in it’s own thread. It was mostly confusing and you can’t put images or code snippets in the thread. Good thing is that afterwards it’s easier (at least for me) to follow discussions.

It’s worth noting that Devon Persing and Scott Vinkle joined our meeting. They work in a team called Simply Accessible.

Here are short summaries about discussions.

How to process test results for Gutenberg

First Gutenberg test results are full of data. Andrea Fercia have filtered the report and I’ll post issues in Github. We also agreed to follow accessibility label in Github. We should know at least the titles of the accessibility issues. Unfortunately most of the team members doesn’t have enough time to contribute on Gutenberg.

It’s also important to create more specific tests with simple tasks like

  • keyboard navigation.
  • focus management.
  • navigating between different parts.
  • screen reader text issues.

New Handbook topics

We have started gathering topics to new accessibility handbook. The idea is to educate others by writing summaries of different topics and collect good resources of them. For now ideas are in Google Sheet, let me know if you have more topics in mind or want to help out in any other way.

Project managing a11y tickets in trac

Trac can be overwhelming even if looking info from Trac Handbook. Therefore Morten Rand-Hendriksen pulled data from CSV export into Google Sheet. We are exploring would that help

  • to get a quick overview of what’s happening.
  • see what tickets new contributors should focus on.
  • see who is involved and what the status is.

We are not sure yet how to make use of this and Morten will look into it more. For example could it be automated.

 Windows High Contrast mode

High contrast mode benefit users with low vision or people working in dark environments. More information can be found in two places:

  1. Comment in Gutenberg issue.
  2. Focus style and High Contrast Mode Trac ticket.

This is not issue only in Gutenberg but in WordPress admin in general.

Open floor

We talked about food, what else 🙂

#weekly-meetings

This week in WPA11y – June 27, 2017

WordCamp Europe

For discussions and plans see: Takeaways from Paris.

New structure handbook

We agreed on the following new structure: Per topic short explanations, then links to good articles and examples. The resources do not need to be WordPress specific.
We’ll need some method for ensuring the currency and accuracy of resources listed, if we’re going to list specific resources. So probably restrict the resources to the most authoritative ones. And we need to check the resources regularly.

Order of things:

  • make a list of topics
  • add an intro per topic
  • add resources to it

@samikeijonen and @rianrietveld will start with a spreadsheet gathering the topics, everyone can add possible resources to that later, so we can see what we can use for the handbook.

Test Gutenberg

Now Gutenberg is available as plugin we want to install it on our test server and give it to the test team this week. With a clear description on what it does and a link to the issues already reported on GitHub.

@arush already gave her review: Gutenberg With A Screen Reader: Initial Thoughts And Reactions

Adjustments Accessibility Coding Standards

@joedolson is working on a new draft, work in progress.

New Settings API

The plugin Settings API enhanced is now an almost complete prototype, but still needs refinements and design. It’s a prototype though, many things could change. We would like feedback from more people before moving on.

And what else happend

Next meetings

Next New Setting API meeting: July 3 ,2017 at 16:00 UTC in the Slack #core channel
Next WPa11y meeting: July 3, 2017 at 17:00 UTC in the Slack #accessibility channel.

#weekly-meetings

This week in WPA11y – May 22, 2017

Agenda

  • Tickets for 4.8
  • A11y Tasks tickets
  • Testing Gutenberg (and others?)
  • Tickets for Future Releases
  • WCEU Contributor’s day

In attendance:
Andrea Fercia @afercia
Sami Keijonen @samikeijonen
Joe Dolson @joedolson
Trisha Salas @trishasalas
…and others possibly lurking

Tickets for 4.8

  • tag cloud widget
  • custom logo alt attribute fallback

Both of these tickets are very close to commit.

@flixos90 dropped in during the meeting to say 38768 is done! 🎉

@afercia is currently fixing the tests for the custom logo alt attribute, thanks to @flixos90

A11y-task tickets

@afercia helped to define the a11y-task tickets for us.

To summarize:

  • A11y-task tickets are more related to a11y “topics”. (infinite scrolling, proximity, placeholders, CSS generated content, etc)
  • A11y-task tickets have an educational purpose 😀
  • A11y-task tickets are something we don’t have the resources to address right now, but something we should talk about with other people, to increase awareness.
  • A11y-task tickets are something to point people to when they ask about big a11y pending issues… hey look, there’s this Trac report you can have a look at.
  • A11y-task tickets are something that should be brought to other teams attention (Design Team, for example)
  • A11y-task tickets can be used as tracking tickets for separate smaller tickets.
Current A11y-Task Tickets

https://core.trac.wordpress.org/ticket/40822
https://core.trac.wordpress.org/ticket/40428
https://core.trac.wordpress.org/ticket/40331
https://core.trac.wordpress.org/ticket/40330
https://core.trac.wordpress.org/ticket/37486
https://core.trac.wordpress.org/ticket/31818
https://core.trac.wordpress.org/ticket/26504

Gutenberg

https://github.com/WordPress/gutenberg

Everything needs to be tested, from the most basic text operation to the most complex interactions. For example: navigation in text with the keyboard, select text, select all, etc.

Installing the plugin is very easy if you already use VVV and are familiar with GitHub

See instructions for installing the plugin here: https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md

The plugin is not complete yet, but feedback should be given as soon as possible.

As a reminder: today is May 22nd and the Gutenberg deadline for a first 1.0 version is the end of June, as far as I know.

There are already several issues open on GitHub with the `accessibility` label.
https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3AAccessibility

Discussion about tickets for Future Releases will be put on hold until we are more comfortable with the state of accessibility in Gutenberg.

WCEU Contributor Day

The WCEU Committee has requested that each team come up with a list of goals due by June 9th for contributor day.

@sami.keijonen asked how we should prioritize and organize tasks given that we will have 30-40 people in attendance.

@joedolson mentioned “Training is frequently the most valuable part of contributor days – just trying to get people better educated about a11y. Getting a patch done is nice, but getting 40 people to know a11y better has more long-term value. I’d suggest segmenting the group according to experience, and have different plans for groups with more or less experience.”

The plan is to do both workshops and training along with identifying some simple tickets to have ready.

Homework for the team is

  • Have a list of goals ready for next week (5/29/2017)
  • Identify some ‘good first bug’ accessibility tickets

#weekly-meetings

The Last 3 Weeks in WPa11y!

Accessibility Tickets in 4.8

These are the current accessibility related tickets slated for the 4.8 release:

  • #35566 removes the title attribute in the tag cloud widget
  • #38768 adds the site title as the alt attribute to the custom logo

WordPress 4.8 introduces a few new media widgets as well as the ‘Nearby Events’ widget. Testing should continue to be sure that new accessibility issues aren’t introduced.

Future Releases

If you would like to have an impact on future WordPress releases join us during our bug scrubs! During bug scrubs we go through the “awaiting review” and “future release” reports.
Gutenberg Editor

The Gutenberg Editor is slated for a big reveal at WordCamp Europe.
Let’s keep testing for accessibility related issues as development continues.

You can find installation instructions here: https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md

Note that it is not a conventional plugin so there are some specific steps to follow.
Accessibility Tasks

There are several ongoing tasks with the goal to improve accessibility in the Admin area.

  • Proximity
  • Add widgets screen
  • Menu screen

Widgets and menu screen

It’s not a secret that there are many issues in the Add Widgets and Menu screens. What to do? @juliemoynat has suggested some improvements in this ticket: https://core.trac.wordpress.org/ticket/40677

Proximity

In web design, the principle of proximity states that related items should be placed close together. By the same token, if things are spaced farther apart they appear to have less relation to one another.

This principle is so powerful, that it overrides similarity of color, shape, and other factors that might differentiate a group of objects.

Proximity is especially critical for users with low vision. It will even be addressed in the next draft of the WCAG guidelines! https://w3c.github.io/low-vision-a11y-tf/requirements.html

An initial ticket has been created, feel free to join in! https://core.trac.wordpress.org/ticket/40822

#weekly-meetings

Week in WPa11y – April 24, 2017

Topics of Discussion

  • Settings API project
  • Gutenberg editor plugin
  • Browser support changes
  • Screen reader text PR
  • Tickets
  • New Widgets to test

Settings API

https://github.com/wpaccessibility/settings-api-enhanced

The current approach involves a redesign of the settings pages that is being discussed with some members of the design team.

The next step is to process the thoughts @helen gave use on the CSS naming conventions. See: https://github.com/wpaccessibility/settings-api-enhanced/issues/6#issuecomment-294011891

Gutenberg Editor Plugin

https://github.com/WordPress/gutenberg

@afercia recommended that we install and test the plugin. Instructions are here: https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md

Note that it is not a conventional plugin so there are some specific steps to follow.

@afercia has submitted a few issues based on the mockups but real (a11y) testing has yet to start.

Changes in Browser support

https://make.wordpress.org/core/2017/04/23/target-browser-coverage/

We discussed how the browser support changes would impact the screen reader text PR. @sami.keijonen said we should not use our time so much of finding things to remove at this point. But test new things like settings API and editor and make changes as needed.

Screen reader text PR

https://github.com/wpaccessibility/a11ythemepatterns/pull/10

@ffood submitted a PR to update the screen reader class in the A11y Theme Patterns repo in Github.

There was some discussion about updating the class in core as well.

We agreed to merge the PR and also open a new issue in core to modernize the class. The changes in core should take into account end of support for IE 8-9-10

Tickets

Two tickets were closed this week.

Widgets

There are 2 new widgets to test

Next meetings in Slack

#weekly-meetings

Week in WPa11y, March 29 – April 4 2017

New keyword a11y-task

@afercia created a new tickets keyword a11y-task. These tickets aim to start a discussion and spread awareness about a11y issues that maybe can’t be resolved so soon. It’s also a way of being able to find accessibility tasks that we aren’t actively working on.

Current work a11y team

Gutenberg: as soon as the featured plugin is released we will test it.

Tag Cloud adjustments (tag-cloud): #35566 #40187 #40186 #40184 #40138
@samikeijonen and @davidakennedy

Settings API plugin: @flixos90
Felix released the plugin on GitHub: https://github.com/wpaccessibility/settings-api-enhanced which at the moment does exactly the same as the latest patches on #39441
We can work on this plugin to iterate to the one-column layout we aim to have for admin forms.
The advantages of developing in GitHub are:

  • Users can easily test the latest changes without us being required to do extra work.
  • Better diffs (because of individual commits) so that we can easier see what has changed over the last “patch”.
  • Easier collaboration (more people are familiar with git).

Once we get to a first version of the one-column layout that is ready for testing, we should consider also adding the plugin to the wordpress.org plugin repo and formally announcing it as a feature project. This will allow us to hopefully get more voices on the honestly quite drastic changes and also to ask for user testing.

Colour contrast in the Admin: @adamsoucie

Required fields @rianrietveld

Non-link links: @cheffheid

Remove title attribute in the Admin: any volunteer

To be worked on later

Test requests (keyword a11y-feedback)

Homework

Test the patches for

  • #35497: List tables: Post format links improvements
  • #31476: Semantic elements for non-link links: /wp-admin/includes/widgets.php

Test the plugin Settings API Enhanced

Interesting reads this week

Next meetings in the Slack #accessibility channel

#weekly-meetings