This week in WordPress Accessibility, December 11, 2017

Weekly meeting

Transcript meeting in Slack

Handbook

The writing continues steadily, we still hope to finish the best practices mid March.

In the meantime we need to set up a marketing plan for the handbook. @samikeijonen and @postphotos want to work in this, with the help of the Marketing team (@mcdwayne, @gidgey and @anafransilva).

Thoughts and ideas are in the Google doc: Marketing plan for accessibility handbook.
We will continue the discussions in the Slack channel #accessibility-docs.

Gutenberg

The Gutenberg inserter has been tested at the contributors day at WCUS and by @abrightclearweb

The the Gutenberg toolbar roving tabindex is still on the to-do list.

Note from @afercia: The roving tabindex thing is implemented for now just on the Inserter “tabs”. The point is, consider to use the same technique for the toolbar too?
See Toolbar: consider to use a roving tabindex and standardize navigation · Issue #3383

It’s well explained in the ARIA Authoring Practices example. Worth noting there’s now an option to set the toolbar in different positions:

  • docked to the top
  • floating on top of each block

Further more we need urgent frontend testers/reviewers/devs for the issues Sami created om GitHub to prevent inline style going into the frontend code. There have been good conversation about inline styles in Proposal of removing inline styles · Issue #2862.

Items on the To-do list

  • Prevent frontend style getting in Gutenberg
  • Research screen reader performance for code short codes like [ php ] or [ html ] – action Sami, if he has time
  • Write up a summary of things that will change in WCAG 2.1 for core and design – action Rian, next week

Accessibility news / good reads

#weekly-meetings

This week in WordPress Accessibility, November 20, 2017

Weekly meeting

Transcript meeting in Slack

The handbook

Things go well, we are adding new content every week on the handbook – best practices.
@mercime will help with the documentation, starting with forms.

Gutenberg

There are improvements made to the keyboard navigation, specifically the inserter. This is still work in progress. The top toolbar has now arrow navigation too.
@samikeijonen requested a review for his pull requests on GitHub.

Test server

Nimbus hosting sponsors our team with a dedicated server, where we can install trunk and patches using SVN and Git. At the moment we do not use this server much.
The question is: do we still need it and and will we use it in the near future?

After a discussion we concluded: Yes we need it and we will use it more for testing in the future. The team requests test and Rian will do the installs, mail the testers and report the results.

WCAG 2.1 AA

Rian will write a post this week about what is new in WCAG 2.1 AA for the designers and developers.

One of the new requirements is a minimum size for the a link/button.
@afrecia added new a11y keyword target-size on Trac.

Accessibility news / good reads

#weekly-meetings

This week in WordPress Accessibility, October 2, 2017

Transcript in Slack

Labels when multiple same landmark roles in the same page

Related tickets:

  • #42056: Twenty Seventeen: role=”complementary” are missing labels
  • #42057: Add ability to pass a label for the element returned by get_search_form()

This issue applies only to roles that are also landmark regions. They’re reported by screen readers as navigational element and, when there are more then one of them, there’s the need to disambiguate them in the same way we’ve done for navigation menus.
@williampatton will respond to the tickets with the conclusion of our discussion and some examples.

screen-reader-text class check

Recently the screen-reader-text class has been updated, see #40970: Update and audit the screen-reader-text CSS class used in core. We discussed if this was the right CSS as some screen-reader-text is read out in reversed order by Apple VoiceOver. This is depending on the height to the element containing the screen-reader-text class. As this already was the case before we changed the class, we blame Apple and leave the class as is.
As soon as the screen-reader-text page is added to the handbook, we will update all instances of this class in the wp.org documentation, referring to that page.

Gutenberg frontend markup

@samikeijonen tested and reported the frontend markup of the blocks Gutenberg produces.

We discussed the results and saw issues with the semantics, the W3C and WCAG validation. At the request of @karmatosed, @samikeijonen will create an issue for this on the GitHub repo of Gutenberg.

Also the inline CSS that is added to the HTML was discussed.
Sami suggested an option add_theme_support( gutenberg ) to set inline styles to false or replace inline CSS with classes. Inline styles inhibit the ability of users to use their own custom stylesheets and create a barrier to tools that customise the view. Inline CSS is also not good for rendering performance and SEO added @Joostdevalk.
It also would be useful if theme authors could disable blocks or functionality like the adjusting the text and background colours.

Related issues on GitHub:

#weekly-meetings

This week in WordPress Accessibility, September 4th, 2017

Transcript of the meeting

Agenda

  • ARIA roles in Underscores theme.
  • CodeMirror.
  • Automated accessibility testing.
  • Gutenberg
  • Open floor / Go crazy.

ARIA roles in Underscores theme

We removed ARIA roles from Underscores theme couple months ago. But WAI-ARIA 1.1 and HTML 5.1 specifications have been updated. Here is good overview of the ARIA changes in Firefox. This is the biggest change for ARIA roles:

<header> and <footer> elements will now only be exposed as header and footer, and banner and ContentInfo landmarks respectively, if these elements are direct descendants of the body tag, and therefore are scoped for the whole page.

In _s header and footer are not direct descendants of the body tag, they are inside #page wrapper. Discussion about this continue in Underscores repo.

Codemirror

It’s hard to create 100% accessible code editing tool. With Codemirror we are happy with two main points:

  1. Avoid keyboard trap inside code editor.
  2. Easy way to disable Codemirror.

We also looked at how Help text section could be easier to find in the Additional CSS. Help text section is now auto-expanded when first opening the panel, when the CSS is empty or at its placeholder value.

We encourage everybody to test Codemirror, development is still in Github before Core merge.

Automated accessibility testing

Automated accessibility testing is a big topic. @joedolson proposed four ideas where we could start:

  1. How will core builds be mounted so the DOM gets tested.
  2. What method will we use to execute tests.
  3. What tests will we execute.
  4. How much manual testing will we continue to do regardless of passed tests.

Gutenberg

Before the meeting there was Gutenberg bug scrub. In the meeting we mainly discussed about landmark regions.

Open floor / Go crazy

Me and Joe went to sleep, Andrea had something to eat 🙂

#meeting-notes, #weekly-meetings

This week in WordPress Accessibility, August 28th, 2017

Transcript of the meeting

Agenda

  • Handbook, progress so far
  • CodeMirror
  • Gutenberg
  • Open floor

CodeMirror was moved up in the discussion by request of @samikeijonen.

CodeMirror

CodeMirror will be incorporated into WordPress 4.9 in theme and plug-in editing, the HTML text widget, and the customizer CSS editor. Discussed how to provide access to Help for keyboard users who will need some instruction on how this will work from the keyboard. The plugin/theme editors and the CSS editor have logical places to provide information, but HTML widget doesn’t have a place for this information.

Conclusion: WordPress needs an inline help implementation. Lacking that, we’ll use the Help tab to hold the information for now, with the eventual goal to implement inline help and move the information.

Handbook

Report: Work on the Handbook has started. Trying to write at least one topic per week. Discussed how to handle some complex topics, and agreed that where applicable, we’ll refer directly to external examples and recommend the most official example for a given specification. E.g. tab panels.

Progress on Handbook

Gutenberg

Simply Accessible has offered to provide support for developers on Gutenberg. Discussed effectiveness of this and ability to help with solutions. Problems mostly have to do with gathering consensus then finding somebody to implement. Tried to generalize how Simply Accessible can best be leveraged. Suggested they focus on keyboard interactions with blocks.

Discussed labeling some Accessibility issues as high priority to try and focus efforts.

@afercia commented that one core problem is that technical solutions have gotten decided without a preliminary accessibility evaluation which have had significant impacts on accessibility.

Open Floor

@rianrietveld will be on holiday for the next four weeks, and asked for a volunteer to lead meetings during her absence. @samikeijonen volunteered for at least next week’s meeting.

#meeting-notes, #weekly-meetings

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