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

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