Hackathon automated accessibility testing with Deque on the WCUS contributor day

At WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US in Nashville, Deque Systems will join the 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) team for a hackathon to set up automated accessibility testing for WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., on Sunday, December 9th.

The goal is to include accessibility checks for core, together with the current tests, like Unit and e2e tests and the checks for PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. coding standards we have now.

Deque develops tools like aXe core that can be used for automated testing and they will be sending one or two of their lead developers to work on this with the WordPress core developers.

From the WordPress side we would like to invite core developers to join in and help find solutions to set this up.

Do you know your way around the automated testing system of WordPress core, do you attend the 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/. and do you have time to help?
Please contact the accessibility team in WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. in the #accessibility channel.

#hackathon

Team meetings September 3 and 10, 2018

Transcript meeting in Slack

Meeting topics

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/ 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) work update by @afrecia

There is a new feature (despite of the feature freeze) “Spotlight Mode”: Andrea addressed some a11yAccessibility 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) concerns here.

Request from Andrea: please test Spotlight Mode and Full Screen mode for accessibility (keyboard use, screen reader feedback, voice recognition control). They are both merged into the latest Gutenberg releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software..

At this moment there are still 99 open accessibility issues, 12 of them are labeled Milestone Merge Proposal, so have priority.

Gutenberg AT Manual

@abrightclearweb is working on a Gutenberg manual for assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology (AT). And while writing she also finds new issues which she reports on the Gutenberg GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo. Draft version manual.

It’s a lot of work, help with this is very much appreciated. @Wingo5315 is already helping out.

WP a11y handbook

At the 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/. in WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Nijmegen attendees reviewed the handbook. We a Google doc and have now 6 pages of comments; @lucp checked for 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./CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. errors, @ireneyoast fixed typos , translation and code errors and @jaapwiering did a huge amount of work reorganising and trying to give more structure to the pages. @rianrietveld will process this in the next few weeks.

A11y review codex/develop

We need to review the code examples in the codex (develop) section of wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. They contain a11y mistakes, and as this code will be copy/pasted a lot, we need to fix them.
Rian talked with Pieter Daalder (@wizzard_) from the docs team. The proper workflow for this is add a comment on the page with the error and pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” in the doc channel that you need this fixed.

Drupal and Gutenberg

Drupal shows interest in using Gutenberg. At the request of Per Andre Rønsen, Rian posted in the Drupal #accessibility channel info about where to find the issues in Github and what the status is. Let’s see what happens.

Project management tool

We are going to research a good project management tool for the a11y team. Other teams use TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing., but maybe that’s not accessible enough for our use. An alternative could be GitHub projects.

What we did on a contributor day

Proposal: if you led a team on a contributor day, white a summary about what you did, so we can post it on our blog.

To-do list

  • Test Gutenberg new features Spotlight Mode and Full Screen mode for accessibility
  • Find an accessible project management tool
  • Gutenberg AT Manual: Ask for help from marketing team and users of AT
  • Handbook: Process feedback at WordCamp Nijmegen
  • Codex/Develop: Set up a review of the example code in those sections
  • Write blogpost about impact new recommendation 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 AA for WordPress

Next meetings

  • Gutenberg bug scrub: September 17, 14:00 UTC
  • Team meeting: September 17, 15:00 UTC

Accessibility team meeting, April 9, 2018

Agenda

  1. 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) statement
  2. Handbook
  3. 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/, priorities for WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. London
  4. Contributor drives
  5. Open floor

Meeting notes

Accessibility statement

The WordPress project now has an accessibility statement. We still need to add an ATAG (Authoring Tool Accessibility Guidelines) statement to add to that page. @joedolson will write that, sometime in the near future.

Accessibility Handbook

At the moment @rianrietveld and @samikeijonen are writing pages about how to test for accessibility to add to the handbook best practices chapter, for developers, designers and content managers. This at the request of the Gutenberg team. The pages are in draft now, to be published this or next week.

Gutenberg, priorities for WordCamp London

@karmatosed suggested the following workflow for this:

  • sit down together at a11yAccessibility 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) table on the 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/. prioritising all a11y issues in a spreadsheet
  • create a solid few weeks plan for accessibility, get everything in milestones, get everything so we all know we’re on track
  • get a ‘hot list’ from that and give easy wins to developers present at  the contributor day
  • leave that clearly knowing what needs to be done for a11y and how help can get there
  • focus on a plan of tasks and that all tasks have enough information to be developed by anyone working on project

Contributor drives

Angela Jin asked us to write up content for their info pages about work that can be done for the different teams during a contributor drive (a bite sized contributor day). @rianrietveld also adjusted the page Getting Started at a Contributor Day for this too.
If a contributor wants to select an a11y task:

  1. Tell the #accessibility channel in WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. that you are hosting a Contributor Drive and request specific projects and direction.
  2. If you need assistance during the Contributor Drive, ask questions in Slack.

To avoid having to maintain a page with a list of tasks in the documentation of the contributor drive.

Open floor

  • @postphotos came with the idea of organising “contributor drives” in regions across the world, focused on a11y. Like the translation days. He will research this further. We agreed this is a fun idea (wpa11y day?)
  • @arush will publish her research on the screen reader accessibility of Gutenberg this week
  • We had a discussion about adding hreflang to links in translatable strings, like e.g. <a href="%s" hreflang="en"> . Adding the hreflang="en" in the translation triggers a warning
  • We discussed setting a new date/time for the meetings. There will be a separate post about this tomorrow.

 

#weekly-meetings

Changed accessibility meeting times!

Because the regular 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) meeting was at the same time as the design meeting, we rescheduled our meetings.

New times, same place (in the SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. #accessibility channel)

WPa11y documentation meeting

Attending: @travel_girl, @samikeijonen, @sergeybiryukov and @rianrietveld

Goal of the meeting:

Kickoff meeting for rewriting and reorganising the documentation on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ regarding web 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).
We want the documentation set up so that it’s complete, without duplicates, easy to find and put it on places where people actually will read it.

What we agreed on:

  • We will start with our own handbook
  • In the topic spreadsheet we gather topics and assign ourself to write about them
  • We will add topics as we go
  • We will write in Google Docs (Sami opened a directory for this)
  • We can organise the topic later in a logical way before publishing them in the accessibility handbook
  • We report and discuss our work every Thursday in the #accessibility SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel
  • The goal is to write one topic a week per person
  • When the topics are added to the handbook, we will review the current documentation on wp.org to see where we can ask the teams to replace/add/modify text to prevent double info and to link to better information.

For the topics we want to keep a template, for example:

  • Topic
  • Short intro with:
    • Good Practice
    • Bad Practice
    • Why
    • Exceptions
  • Examples
  • Resources with links

We don’t want to copy all the info there already is on the web, but point to good info and examples.

If more people want to join in, you are most welcome.

#documention

Accessibility Handbook Update

Today I started to add subsections to the Accessibility Handbooks Contributor Spreadsheet and while I was looking over other Handbooks (Docs in particular) I decided it might be best to streamline content even further to separate Informational content about the team, mission, etc from the actual Resource for Developers.  Documentation has a Docs Handbook for their section as well as links to other Handbooks for Developers.  I’d like to see 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) follow that format and have reached out to @sewmyheadon and @topher1kenobe to get some insight into how they approached the process.

Join us in the meeting today, January 11 @ 18:00 UTC or comment here if you have any thoughts or additional ideas to help us move this project forward!

Thanks to everyone involved for all the help so far!

#accessibility, #accessibility-team-meetup, #f

Accessibility Team Meeting July 6, 2015

H1 in the admin

For 4.3 there will be an H1 in the admin. #31650: Missing H1 heading in the admin. Assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology users look for the H1 for way finding. Though there is the page title, when AT separates out elements such as links, lists, and headings, the info needs to be there too. Two weeks ago we ran this by Mika Epstein @Ipstenu and she helped us understand heading levels and plugins. Mika spot checked some plugins and it showed that they are using H2 and her opinion is that “we can post about that in make/plugins to try and spread the word.” Thanks Mika. More work will be done on the rest of the hierarchy.

Main Open Tickets

We also briefly discussed:

  • #31661: Quicktags: Can’t add them using just a keyboard in IE,
  • #26601: Inappropriate content in headings on admin screens,
  • #32152 List table: sortable column headers 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),
  • #26601: Inappropriate content in headings on admin screens, and
  • #31336: 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.: separate navigation from options 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. for better UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. by removing accordion behavior.

#accessibility, #team-reps, #weekly-meetings

Accessibility Team Update: May 1, 2015

Weekly Meeting Change

This week during the Wednesday meeting we decided that the Monday testing meeting is now where the action is so we decided to stop having the Wednesday meeting. On Monday, May 4, we will all meet in the #accessibility channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. at 18:00 UTC. We are also using Slack throughout the week to work on tickets and patches, ask questions, and discuss anything that comes up. First register for the WordPress forums and then follow the steps on the WordPress chat instruction page to get set up. Then find your way to #accessibility. See you there!

#team-reps, #weekly-meetings

Accessibility Team Update: February 11, 2015

Testing

We had a report by Rian Rietveld on testing results. Things are going very well. Rian said: “I’m getting test results back on the tab order of the post table, it seems to work ok, but they found a ton of other problems, I have to check the current tickets and open new if necessary.”

Pattern Library

David Kennedy told us that the repos are set up for contributions to the theme pattern library. See the Accessible Theme Pattern Library Update for February for more info.

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Discussion

Andrea Fercia reported on a discussion he had with the Core team. He asked about menu bar admin focus and non-link links (28599 and 26504). Joe Dolson said “the link/button question really requires specific cases; I’m not sure how we could approach giving any kind of global comments on the topic.” Andrea said that he also updated the Core team about the first testing round on customizer theme switcher.

Theme Checking

Joe Dolson updated us on the state of checking themes requesting the accessible-ready tag.”We’re now up to 29 live themes carrying the 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)-ready tag which have been tested and passed. There’s one outstanding theme live that does not pass (_tk); it’s undergoing the review process now, and will either be suspended or updated soon.I’ve got two pending theme reviews to do, and know of at least 1 theme that’s currently approved and waiting to go live.”
Joe has also trained two of the theme review team admins on reviewing for accessibility. Additionally Joe has shifted support for landmark roles into a required feature for accessibility-ready themes, rather than recommended.

Landmarks

Discussion turned to the over-abundance of landmarks. The current proposed code (#23089) outputs too many landmark roles. A theme may add numerous landmark roles without the ability to control where and how many there are. Andrea noted “currently, _s outputs one aside (mapped to complementary) for each 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., nested inside a general complementary area for widgets.” Jared Smith of WebAim recently said “Easy accessibility check: Search for “role” in source code. If 0 instances, probably bad. If 1-20, probably OK. If greater than 20, definitely awful.”

Other Items

Morten Rand-Hendriksen asked: “What is the best tool for computer voice control (in particular, voice controlled browsing) on both Windows and MacOS? Are there any workable free tools or are we confined to things like Dragon?” There is a demo mode in JAWS and NVDA is free. If there is a free way for developers and designers to experience things using voice control it will help them understand the issues better.Sam Sidler noted that “OS X has voice control built-in, so I’d call that free, but not open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL.-level free.”

We finished off by discussing Shiny Updates (see ticket 29820 now landed in core). According to Andrea Fercia there are two main accessibility issues:

    • focus handling
    • absolutely no feedback for screen reader users when an install/update action starts, ends, fails, etc.

About the latter issue Andrea said “I’d like to propose a solution based on Graham Armfield’s idea (see #28892) but done in a way that it would hopefully be a useful tool for developers.”

The entire conversation from February 11 is available in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. archives for the #accessibility channel.

#accessibility-team-meetup, #team-reps

Accessibility Team Update: August 27, 2014

Weekly Testing Meeting

For the last two weeks we’ve been trying something new, a weekly 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) testing meeting, 17:00 – 19:30 UTC. We meet in the wordpress-ui IRC channel to share our tests. If you want to join in or just see what we are doing just show up in the IRC channel. Read the logs for August 18 and August 25 to get an idea of what we are doing.

#accessibility, #team-reps, #weekly-meetings