Accessibility Team Meeting Notes for 5 July 2019

Meeting transcript on Slack

Media tickets updates

A few more tickets discussed, but relatively little progress this week.

Success Metrics and framing for 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/ SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.

@sarahmonster raised the concern that we were looking at options without having done prior work to determine what was considered success and how to evaluate that, so we’ve taken a step back to define that.

Secondarily, we want to move away from discussing this in a private conversation and improve transparency as we brainstorm.

Still in progress at defining the path for opening this discussion; summer plans & WCEU have slowed progress.

WCEU Update

@ryokuhi was at the WP 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) theme auditor table, which was very interesting.

@poena commented that the themes table was in a different room from the theme auditor, so they couldn’t work together.

@ryokuhi Would very much like to see more presence from #a11y team members at major WordCamps and contributor days

Discussed the feasibility of that, given the expense for members & size of the team; considered the possibility of having a remote contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. focused on accessibility.

Gutenberg Open Forum

@ryokuhi will add some thoughts about Snackbars

Continuing discussion, by mutual agreement, focused on how we might imagine a remote contributor day for accessibility & other teams.

This week in WordPress Accessibility, May 4th, 2018

Bug scrub

We discussed issues marked for the Gutenberg merge proposal milestone:

Simplify and streamline keyboard navigation through blocks:
First: what if the 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. toolbar had only one tab stop and navigating through its controls would be possible with the arrow keys? Would users be able to get it?
Interaction modal: ARIA toolbar example
Conclusion: we are going to try this and let it test by some advanced keyboard / screen reader / VIM users

Second: the tab order
A good tab order would be for example: insert block, then editable area and then the rest. But should the visual order meet match DOM order? @afercia will try to investigate on the first two things in the next days

Constrain tabbing within popovers and similar components:
Alexander Botteram is working on a modal component that introduces a re-usable “constrain tabbing” feature.

Publishing Flow accessibility:
Nic Bertino did research on this and created a design proposal, that needs following up by the design and develop team.

Weekly meeting

Handbook

We added new pages added about Test for web accessibility to the handbook’s Best Practices chapter. If there are people who want to review what is published, please do.

Sami Keijonen tweeted posts from the handbook in a series on Twitter. Nobody uses Facebook in the team, so we won’t start a Facebook campagne.

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/

Summarised: Minor fixes went in, the bigger issues are still to solve.

We need to write a manual for AT users. We need people who are familiar with Gutenberg to be involved in writing the manual for AT users of Gutenberg. We can start outlining the processes and AT combinations to be documented. Rian will investigate what the best place is to publish this manual. Rian and Sami want to help writing.

We will dedicate our weekly bugscrub now on Gutenberg for now

We need to contact someone from Dragon about issue raised by Eric Wright: Can’t add a post title using speech recognition software.

Open Floor

Nicolas Steenhout has a podcast: A11y Rules. He’d love to speak to people that are NEW to 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), either working full time in it, or developers that are exploring #a11y.


So, if you think that’s you, please contact him, always nice to hear new voices

Action

  • Write ATAG statement: Joe Dolson
  • Write about what WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2.1 means for the WordPress project: Rian
  • Find the best place for the Gutenberg AT handbook: Rian

 

 

#weekly-meetings

WordPress Accessibility Ticket priorities for 4.1 early

WordPress 4.1 development is just started. From an 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) perspective, this means that we know almost nothing about what new features and UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. changes will be taking place, but it gives us a great opportunity to work on resolving older outstanding issues or addressing concerns arising out of version 4.0.

This is a grouping of the tickets currently in the Accessibility Focus report; no new tickets were opened for the purpose of this list.

One general recurring topic in these tickets is the handling of focus in modals. This is something that could stand some global work: all WordPress modals should be initiated and closed in a standardized way: focus should be assigned to the first focusable item in the modal when it’s opened, focus should be restricted to within the modal while it’s open, and the modal should be closable using ‘Esc’. A thorough review of all modals would be valuable.

Group 1:

These tickets have an impact on the front-end use of WordPress. They are very unlikely to be relevant to any new features in development for 4.1, but are longstanding issues and improvements. Because they alter front-end code, they may require more time in trunk to address impact on plugins or themes.

  1. #15926 Add alt attribute support for Custom HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. functionality
  2. #24148 Add aria-labelledby attributes to comment form (fixed)
  3. #21221 Image title and alt attribute content should be texturized.
  4. #27402 Add aria-describedby to image gallery output (fixed)
  5. JS #27645 MediaElement.js player & playlist not keyboard accessible (see Issue 1262 and Pull 1090 on MediaElement for reference)
  6. #16433 Extend function to optionally include commenter name in comment_reply_link
  7. #18650 Make archives and categories widgets dropdown ada compliant (depends on #29699)

#18650 is a particularly long-standing issue which has significant challenges due to the way the front-end HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. would need to change to make the feature accessible. Other features should all be able to be addressed without any major front-end impact.

Group 2:

These are areas that received a lot of attention in 4.0, but have outstanding issues. #26167 doesn’t directly relate to the plug-in work done in 4.0, but would be a good area to get resolved. It should be an easy fix.

  1. JS #28892 CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. – Widgets – Feedback for screen reader users when Moving widgets + other actions
  2. JS #28888 Customizer – Widgets – Screen Readers Don’t Announce WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Names
  3. #20880 Keyboard navigation in Appearance > Header is broken
  4. #26167 PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party activation links need to contain plugin name and the “Plugin” column should be marked as row header
  5. JS #29371 Media Library: Focus keeps jumping to URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field
  6. JS #29455 Plugin Info Modal Close Button Does Not Announce for Screen Readers
  7. JS #29326 Improve accessibility of edit-selection mode

Group 3:

General issues relating to the author experiences, that can impact a user’s ability to author content.

Add Media Experience:

  1. JS #25103 Submit buttons on form fields in the Add Media panel
  2. JS #23562 Using Speech Recognition Software with the Add Media Panel
  3. JS #28864 Cannot access edit menu options with keyboard inside Image Editor

TinyMCE/Editor:

  1. JS #29838 Post editing area: keyboard accessibility, tab order and focus
  2. JS #27642 Keyboard Accessibility for TinyMCE image panel
  3. #27553 Make WP editor toggle focusable
  4. #21414 Use the “Keyboard Shortcuts” checkbox in the user profile to turn on/off all custom shortcuts
  5. #29358 Remove the ‘accesskey` attributes from Quicktags buttons

Other:

  1. JS #27555 Make tag post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box more accessible
  2. #26600 Search installed themes input has no submit button
  3. #26550 Some anchor links should be buttons in media microtemplates

Group 4:

Administrator/Designer experience:

These issues will effect a smaller number of users on fewer occasions because they primarily effect issues related to site set up and configuration. #18801 could really stand some major work; the settings pages in WordPress have a large number of miscellaneous accessibility issues, but I think that the ticket is too all-encompassing as is; we need to open some individual tickets handling specific issues in the settings pages or in the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., so that the issue is more readily addressed.

  1. JS #27592 Screen Reader Users Do Not Know Widgets are Expandable
  2. #27593 Widgets: Toggle arrows on focus need an indicator beside color alone
  3. #18801 Accessibility Enhancements to Settings API

These are issues that make features more difficult to use, but don’t prevent the usage of the feature.

  1. #26758 Edit Tags form on submission does not stay at the same page and gets redirected
  2. #28873 JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. code for adding bookmarklet Press This is hard to access with keyboard only
  3. #25111 Keyboard focus does not stay within Full Screen Editor modal
  4. #26562 Remove title attributes: class-wp-admin-bar.php
  5. CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site./HTML #26504 Semantic elements for non-link links
  6. JS #26601 Inappropriate content in heading on Themes page
  7. #26551 Remove title attributes: link-template.php
  8. #26560 Remove title attributes: rss.php

Group 5:

These are tickets we recommend for closure.

  1. #29475 Adding ARIA roles in wp_nav_menu
  2. #26553 Remove title attributes: comment-template.php

#4-1, #a11y, #tickets

Patches provided for #25459 – Meaningful links in Admin

I’ve added two patches to tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket #25459 which solve the meaningful links issue. They use a new function which employs the aria-hidden attribute to allow meaningful text for screen readers to sit alongside shorter text for sighted users, and allows both strings to be translated with correct grammar/spelling in all languages.

They work for me, but it would be great if someone else could test them on their own environment with a screen reader to double check. Maybe we could get this into 3.8.

#a11y, #accessibility, #aria-hidden, #i18n, #trac-2

Potentially useful accessibility plug in I learned about…

Potentially useful accessibility plug-in I learned about today at WordCamp Chicago: https://wordpress.org/plugins/media-ally/

#a11y, #alt, #images, #media, #plugins-2

Just submitted http core trac wordpress org ticket…

Just submitted: https://core.trac.wordpress.org/ticket/24148. Comments welcome.

#a11y, #comment-form, #patch