Team Chat Summary August 31, 2015

Headings

More work is being done on headings in admin. Jeffrey de Wit created some tickets some of which are already patched and committed. Follow the headings discussion in #accessibility on Slack.

Handbook

Devised a strategy for building out the Make WordPress Accessible Handbook. Page leaders will help others build out the handbook.

Twenty Sixteen

Twenty Sixteen is on Github. Twenty Sixteen is also available in the theme directory. It’s not in trunk yet. According to David Kennedy ” I did a accessibility-ready review before it went on Github and the directory to make sure nothing was way off accessibility-wise. It’s solid. Takashi knows the drill.” We will ask the testers to test it. David Kennedy did an #accessibility-ready audit of Twenty Sixteen.

Select2

We continued a discussion about Select2 as an alternative to the autocomplete/tagging input field types. There are two main accessibility issues: it doesn’t do a good job of providing feedback to screen readers and it requires the ‘enter’ key to begin typing for autocomplete, a non-standard interaction. The testers have tested Select2 and it is not very accessible. Rian Rietveld will collect all the data and report next week.

WordCamp US

Several of us are submitting proposals for talks at WordCamp US and depending on funding assistance some of us will be attending. Today is the last day for submitting proposals.

#accesibility, #accessibility-team-meetup, #team-reps

Congratulations to Andrea Fercia on gaining guest committer…

Congratulations to Andrea Fercia on gaining guest committer privileges for the WordPress 4.4 release cycle! This is great news for WordPress and accessibility!

Team Chat Summary August 10, 2015

New Structure Proposed

Rian Rietveld wrote a proposal on how to structure our work better and plan ahead longer and we discussed it. What follows is examples from the proposal.

Goals and Issues

This will be a separate page on make/accessibility and also a main menu item. It gives an overview of our goals for the accessibility of WordPress, the work we (want to) do, how this is organized, how we test, a roadmap for the next year and how we track the progress of issues we are working on. An example of the roadmap for release 4.4:

Release 4.4 (December 2015, Scott Taylor)
  • Finish still open issues focus from 4.3
  • Semantic heading structure Admin
  • The customizer
  • Handbook
  • Twenty Sixteen (?)

Central Ideas

Some central ideas also included in the proposal are keyboard focus, work on the handbook, color contrast, system to better follow tickets including splitting up tickets among team members on which to concentrate, and continue to develop code pattern library. Much more is included in the proposal and for now we will continue to work on the proposal to make it a more formal document to cover our activities over the next year.

We also talked about the fact that having a planning document to refer to does not obviate the need to address all new features since there is a tight turn around towards the end of a cycle because that’s when the features going into the release are announced. If we don’t follow all new features we might miss one or more that advance to release at the very end.

When we have it shaped up we will add the planning documentation to this blog in the form of pages and sub-pages to make it a community resource.

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

Accessibility Usertest: Export XML file

We wondered if people, using assistive technology, could understand the structure of selecting a range of posts or page in the export option with Tools/Export in the Admin.
Related ticket: #33046

Tests done on WordPress 4.3 beta 4 Nightly build from Juli 23 up to July 30 2015

We asked the testers:

Log into the test WordPress install and go to: Dashboard / Tools / Export
Or directly to [..]/wp-admin/export.php
Here you can download an export file with the content of the website.

Export XML screen with options

Select posts with:

  • Category “Uncategorized”
  • Authors: mwa
  • Start date: April 2013
  • End date: Januari 2020
  • Status: Publish

And download the Export file.

We want to know:

  • Can you do it? Or did you get stuck somewhere?
  • Did you understand how to select the posts and how to access the selection fields?
  • If there was anything you didn’t understand, please share.

The testers who joined:
Stephanie Watts, Heather Migliorisi, Daniel Montalvo Charameli, Cyncy Otty, Ruth Nisenbaum, John Sexton, Geof Collis, Shaun Everiss, Tobias Clemens Häcker, Michelle DeYoung

Results

No assistive technoloy

Ruth: No problems at all

Keyboard only

Heather:

  • Chrome/Mac: worked well
  • Chrome/Mac: worked well
  • Safari/mac: worked well
  • FireFox/Mac: it is impossible to see what the focus is (the highlighting I see in the main menu in Chrome is not visible in FF)

Michelle: Window 8/ FireFox: Works

VoiceOver

Heather:

  • Chrome/Mac – there’s no connection between ”All content” and the description below it (maybe add aria-describedby to link them)
  • Safari/Mac – The selects (categories, authors, ect) do not have labels linked (missing the for=“id”), so you have no idea what the drop downs are for.

Cyndy: Safari – No problems navigating through and downloading the XML.

SuperNova

John: Windows 7 64bit PC using IE11 & Supernova 14.05
I found it easy to use and select the options from the dropdown boxes. I have attached the downloaded file just for reference. You may also be pleased to hear using the same setup I have previously been able to use the import feature again with no difficulty

Jaws

Geof: JAWS 14.9/IE 11
No problems at all, usually when I try to download all content my browser chokes.

NVDA

Shaun: NVDA latest version, Firefox, internet explorer latest builds and windows 7.
Ok I was able to download the file no problem, everything worked.

Michelle: Windows 8.1 /Firefox. I am getting inconsistencies when moving through the radio button and the fields under each other. Coming into the screen initially in virtual mode the radio buttons are announced as unchecked when navigating through them. When using the spacebar to select Pages or Posts, the number of items that unfold under them are announced when arrowing. I am unable to tab to them without being jumped to the Help button. If I tab again after the Help button, the focus is taken to the radio button and I hear a tone that signifies it is now in forms mode and I can then tab to the items in the section.

When I navigate back to the Page or Post radio button it will say that it is selected, however I cannot arrow to the content for that section, but I can tab to the fields (poses a problem if you don’t know those items exist in the section). The arrowing will just take me through the radio button selections.

Chrome Vox

Tobias: Windows 7/ Chrome/Chrome Vox
Worked perfectly, no issues at all.

Window-Eyes

Stephanie: Window-Eyes v. 9.2 screen reader along with ZoomText v. 9.0.
I was able to complete the test.  For Window-Eyes, selecting combo box items requires users to move to the desired selection, press Enter to “activate” the combination (combo) box, use the arrow keys to move to the desired choice, then press Enter on that choice. Once I made my first choice, I tabbbed to the next option and repeated the process through completion of the task.

Although I understood the directions, I am fairly proficient with Window-Eyes and a little less proficient with the NVDA screen reader. That said, I believe a “proficient” screen reader user would approach this task in a different manner than someone less proficient with screen reader applications. The more proficient user, for example, will try different strategies to achieve the goal whereas a novice screen reader user might conclude the WordPress application is not accessible if he/she fails to achieve the goal on the first or second attempt.  Consider creating instructional materials that specify to the screen reader the goal (e.g., select posts, uncategorized, dated from April 1, 2015 through April 30, 2015). Then you can specify that the method for selecting options depends on your specific screen reader application. This will free WordPress from the challenges associated with creating keystrokes specific to a particular screen reader application.

Code reviews

Daniel: In general it is easy to follow but I’ve got concerns regarding the way “Date range” combos are labeled. I think both <select> should have labels (the first being “Start date and the other being “End date”).
Since “Date range” has been utilised as both visual and screen reader label, this is good. This gives a basic understanding of both lists, but I would deep a little bit on this by labelling both lists and hiding the complementary label information via the .screen-reader-text class or whatever is the method of your choice.
I personally would not use “start date” and “end date” as the first selectable options, but as the complementary tags for screen reader users mentioned above.

Summary test results

Most testers had no severe problems.

The issues that where mentioned:

  • FireFox/Mac: it is impossible to see what the focus is (the highlighting I see in the main menu in Chrome is not visible in FF)
  • Missing missing the for=“id” with the label for the select dropdowns
    <label>Categories:</label> <select name=”cat” id=”cat” class=”postform”>[..]</select>
  • One label “Data range” for both select <select name=”post_start_date”> and  <select name=”post_end_date”>
  • Tab order in NVDA is messed up (Michelle)

Recommandations

  • Check the visual focus on the radiobuttons
  • Add a for= to the labels to link them to the select field
  • Find a different label structure for the data rage select fields
  • Try if Michelle’s NDVA navigate issues can be reproduced, and why this happens.

#accessibility-usertest