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

Amanda’s Thoughts On “Gutenberg and the WordPress of Tomorrow”

Good post by Amanda Rush (@arush), about the need for good documentation and manuals for Gutenberg users.

Thoughts On “Gutenberg and the WordPress of Tomorrow”

#gutenberg

Contributor day at WordCamp US 2017

The accessibility table was divided in two parts as always:

  • people who wanted help understanding a11y and a review of their work
  • people who know a11y and wanted to help testing

Jackie D’Elia (@jdelia) and Katherine White (@katwhite) did a full day a11y review of Gutenberg. They created issues on GitHub and also wrote up extra comments with their opinion. Both ladies are accessibility experts, so that was super useful. All data was sent to Tammie Lister (@karmatosed).

Andrea Fercia (@afercia) worked all morning with Alex Stine (@alexstine), a 16 yr old blind developer that uses NVDA, who came with his father to help the team. Andrea set up SVN on Alex’ computer so he can create patches. He’s a really smart and talented young dev. He wants to write code and test for the team.

Andrea also worked on colour contrast issues in Gutenberg.

Rian explained how to test for accessibility to several devs and designers and reviewed their work. As on every contributor day she gave a 30 minute workshop on keyboard navigation. This time for about 20 people, so that was great. She had a discussion with meta team about the a11y issues of wordpress.org. Rian will do a review of the pages later this and create a ticket on the meta trac with a list of issues that needs to be fixed.

Leo Postovoit (@postphotos) joined us, he wants to work on documentation, especially for the information about deaf and hard of hearing people. Leo also wants to help with marketing of the team and the handbook. He will join the team meetings in Slack.

This was a good contributors day. Leo wants to join the a11y team and has many ideas he wants to work on. It was a joy to see to Jacky and Katherine install Gutenberg via Git on your local install and test, no help needed, working hard. Alex traveled with his father all the way to Nashville to introduce himself and to help out. We now have 3 new awesome testers, this is so much appreciated.

#contr

This week in WordPress Accessibility, November 27, 2017

Weekly meeting

Transcript meeting in Slack

Handbook

Should we  use <pre><code> or <pre> or shortcodes like [ php ] for displaying code examples? The shortcode adds a table, VoiceOver doesn’t announce this well and also jumps unexpectedly out of the code example.
Conclusion discussion: we need to do more research, also with other screen readers and see how they perform.

New articles:

  • Post about forms need a bit of text tweaking
  • Post about archive page needs some addition text with discussion

Gutenberg

Two tests are still open:

  • Test the Gutenberg inserter
  • Test the Gutenberg toolbar roving tabindex

Pause meeting for the holidays

We will skip the meetings on December 25th and January 1st.

Items on the To-do list

  • Research screen reader performance for code short codes like [ php ] or [ html ]
  • Write up a summary of things that will change in WCAG 2.1 for designers and developers
  • Tests Gutenberg

VoiceOver on MacOS High Sierra

VoiceOver can finally read multi-language content. When it detects a different language, it switches to a synthesizer in that language.

Also new to VoiceOver is something equally new to iOS 11: image descriptions. VoiceOver (VO) has been speaking the main objects in pictures since last year, but that was only for photos you’d stored in a Photos library. Now, you can press vo-shift-l while VO is on a picture to get a description, if the current app supports the feature. This even includes text recognition, letting you hear what’s in an image, even if it’s a screenshot or meme. Time will tell just how well this works in practice, but it’s great to see such a powerful feature being introduced, even if the artificial intelligence behind it seems to need more tweaking.

Accessibility news / good reads

#accessibility-team-meetup

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, November 13, 2017

Transcript in Slack

Planning and focus for WP 5.0

  • Gutenberg, testing an fixing
  • Finishing the first version of the handbook
  • Media tickets (if there is time left)

The handbook

The content of what to do on a WP contributors day in the handbook has been updated.

The work on best practices is in progress. Maja Benke, Sami Keijonen, Rian Rietveld and Stefan Brechbühl are writing. Joe Dolson and William Patton are proof reading and reviewing. We have a deadline of mid January for all draft content but we already publish what is ready and reviewed.

Gutenberg

We’ll test during contributor days. Andrea pointed out that he needs more help testing and fixing. There are still a lot of open issues. We discussed how to solve this, it’s hard to get more people involved.

As for the accessibility test team: most gave up on Gutenberg and there is hardly any useful response anymore. Maybe we started testing too soon. There was a discussion if and how we can use the test server we have on wpaccess.org, without a conclusive outcome.

Open floor

The time of the meetings will be one hour later:

  • Bug scrub: 16:00 UTC
  • Team meeting: 17:00 UTC

Accessibility news

#accessibility-team-meetup

This week in WordPress Accessibility, October 24, 2017

Transcript in Slack

Please note: the times of our meetings have changed.

Handbook

Because of work and holidays, the last month not much work was done on the handbook. But as from now we will pick up writing again. The goal still is to have the handbook finished mid March 2018 (with all the text ready for review around mid January).

Tickets/Issues for contributor days

We need a page to refer to on contributor days with a list of tickets and issues to work on. Preferable tickets without a long history of discussion. Like “good-first-bugs” or keyword related tickets or Gutenberg “Good first issue”. @afrecia provided a list and Rian will create the page.

Our focus for 5.0

For the WordPress 5.0 release we will focus on the accessibility of Gutenberg. There are still a lot of Gutenberg a11y tickets open and discussions to be held and testing to be done.

HTML5 landmarks

Marco Zehe published recently: Firefox 57 will be less chatty to screen readers in some situations. FireFox will treat HTML5 landmarks differently. This has implications for the changes just made in the Underscores theme. @samikeijonen is researching this.

Also Apple VoiceOver doesn’t announce the footer if no role="contentinfo" is added. This seems like a bug.

We will wait until FireFox 57 is officially out and will test this with FF/NVDA and Safari/Voiceover.

Good reads

#accessibility-team-meetup

Changed accessibility meeting times!

Because the regular accessibility meeting was at the same time as the design meeting, we rescheduled our meetings.

New times, same place (in the Slack #accessibility channel)

  • Trac ticket discussions: Mondays at 15:00 UTC
  • Regular team meetings: Mondays at 16:00 UTC

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