Test form elements with assistive technology

[rianrietveld]

Research how well assistive technology handles form elements.
This research will be used to improve the Settings API in WordPress Admin.

Related: https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/

The current forms and part of the forms are translated into plain HTML on
https://wpaccessibility.github.io/test-forms/ for testing.

NB: if you join the tests:

• For NVDA: only test with FireFox
• You don't have to test with ChromeVox

[rianrietveld]

@ewaccess did Dragon testing on http://www.456bereastreet.com/lab/html5-input-types/ with the conclusion: Dragon fails several HTML5 input types. Several require keydown.

[StommePoes]

I'm going to fork the wp page version with some more input variation (just haven't had time, $work is crunching) and see if there are some Dragon differences. Might as well test Orca too :)

[ewaccess]

Here's a quick video of my testing HTML5 <input type="date">.

I found the following on Chrome 55 and Firefox 51:

Supported

• search

• tel

Not Supported

• color

• date

• datetime

• datetime-local

• number

• range

• time

• url

• week

Partially Supported

• email

Supported: I could set focus to the input by voice and dictate text within it.
Not Supported: I could not set focus to the input by voice. Once focused (using the "press tab" command) I could not input text by voice. I could only send keystrokes by voice using the "press [key]" command.
Partially Supported I could set focus to the input by voice, but could only enter text by sending keystrokes.

I also did testing on Edge (Windows 10, version 1607) even though Dragon is not compatible with Edge. Using Edge, <input type="email"> will accept freeform text input using Windows Speech Recognition. The other HTML5 input types all require keyboard interaction.

Hope this helps!

[rianrietveld]

@ewaccess I just send out an additional test to the test team, stole/forked the page you made for this.
If we have more data I'll write an additional post with the results for it after February 11.

[abrightclearweb]

I've tested the Settings > General and Settings > Discussion forms with VoiceOver on Safari. Using a Scottish female voice. :)

Videos of testing

General Settings: https://youtu.be/natQHmHooUw
Discussion Settings: https://youtu.be/LrMeWik7QWY

Most of the time I tabbed through the forms with the keyboard. Here's what I noticed.

General Settings

• Legend is read out after the form control.

• After checking a checkbox control, tabbing to the next control seemed to miss out a control e.g. I went from checked Anyone can register checkbox to Site Language, missing out New User Default Role.

• Site Language menu

1. has 90 items!
2. Installed is not read out
3. VoiceOver doesn't read text it doesn't recognise e.g. Russian or Arabic. Blind users wouldn't know what these options are.

• The text "Universal time (UTC) is 2017-01-16 17:54:13. Local time is 2017-01-16 18:54:13. This timezone is currently in standard time. Daylight saving time begins on: March 26, 2017 1:00 am." is not read out when tabbing through the form.

• Date format - VoiceOver doesn't read out dashes, but does read slashes.

• Custom date format - can tab to this field without selecting an option from the radio buttons above. It shouldn't be selectable unless that option is selected, otherwise it won't be applied.

• No distinction made by VoiceOver between 6:54 pmg:i a (lowercase pm) and 6:54 PMg:i A (uppercase PM). An unsighted user wouldn't know the difference.

• Documentation on date and time formatting link is too far down, after the date and time group selections.

• Text is read differently when typed ("one two") as opposed to stepped through with the arrow keys ("twelve").

Discussion Settings

• Similar issues with checked checkboxes and tabbing to the next - the cursor moves down but the focus does not.

• I didn't hear the form label for the Comments page displayed by default, just the dropdown options (might just have been tabbing too fast).

• The text "An avatar is an image that follows you from weblog to weblog appearing beside your name when you comment on avatar enabled sites. Here you can enable the display of avatars for people who comment on your site." is not read out when tabbing through the controls.

[rianrietveld]

Thanks @abrightclearweb !

[rianrietveld]

Results for testing HTML5 type attributes are on make/accessibility now: https://make.wordpress.org/accessibility/2017/02/13/testing-html5-type-attributes-in-forms-with-different-browsers-and-at/