How do different types and implementations of form elements behave in HTML5 forms.
Setup:
On wpaccess.org/forms we set up a vanilla HTML5 form with different constructions of input and select fields. Also we took a code example of the settings page as is now in WordPress core Core is the set of software required to run WordPress. The Core Development Team builds WordPress., that has a combination of input fields put into a sentence. Especially we are interested in how an implicit and an explicit label with an input field works.
We asked our test team and volunteers from Twitter to fill out the form elements and report how their assistive 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 gives them feedback.
Conclusion is at the end of this post.
Explicit label:
<label for="text-ext">First name</label>
<input type="text" id="text-ext" name="first">
Implicit label:
<label>Middle name
<input type="text" name="middle">
</label>
Implicit label with for/id relation:
<label for="text-int">Last name
<input type="text" id="text-int" name="last">
</label>
Testers:
- Amanda Rush: Windows , FireFox 50.1.0, NVDA 2016:4
- Mallory van Achterberg: Firefox 50 and IE 11 on Windows 7 (64-bit) with Dragon Pro 13.
- Léonie Watson: Windows 10 desktop, Firefox 50.1 IE11 and Chrome 55, Jaws 18
- Eric Wright: Windows laptop running Windows 10, Dragon 15 Professional, Chrome 55
- Jeff Collis: Jaws 17, IE 11, Windows 7 desktop
- John Sexton: Windows 7 (64bit) Desktop, Supernova 14 & NVDA 2016.4, IE 11
- Gabriela Nino de Rivera: Macbook Pro, Safari 10.0.2 , VoiceOver
- Shaun Everiss: NVDA 2016.4 firefox 50.2 win7 x86 sp1 pro toshiba sat pro c850 laptop.
- Orlando Metcalf: keyboard testing on Windows 10
- Priyanka Behera: keyboard testing on Chrome and FireFox
- Sirisha Gubba: keyboard testing on FireFox and IE
Legend
Supernova didn’t associate the forms grouping text with the form fields.
NVDA did not read out the group label (legend) “5: I like the following movies”, when tabbing from the previous checkbox “I hate beer”. Where as it does read out the group label (legend) “4: I like the following beers”, when tabbing from the previous radio “Cycling”. However, NVDA does read out all labels when using the cursor keys.
Also NVDA reads both the group label and first field label in one cursor down or tab action.
Another difference is when tabbing Supernova reads all radio button items from each group where as NVDA only reads the first radio button from each group.
Test 1: Input type=text with implicit and explicit label
First: explicit label and input field linked with for/id relation
Middle: implicit label
Last: implicit label linked with for/id relation
Dragon 13 Pro
The first set of text boxes: saying “click edit” or “click type text” highlights all three text inputs. Saying “click first” moves focus to the First Name box. Saying “click last” moves focus to the Last Name box. Saying “click middle” moves focus to the Middle Name box.
Dragon 15 Pro
Role exposed to all three fields. For the “Middle” field, the word “middle” was the only part of the accessible name exposed to Dragon. For the other three fields, I could set focus by saying “click Name” or “click First” “click Last.” However saying “click name” only offers First Name and Last Name as options to choose from.
NVDA and VoiceOver
All input fields work and are pronounced well
Supernova
Supernova repeated form field labels on many of the fields, where NVDA doesn’t. For example Supernova reads out “Last name”, twice when tabbing from the previous field “Middle name”. Where Supernova only reads out “Middle name” once after tabbing from the previous field “First name”.
Radio buttons:
Favourite type of donut: explicit label and input field linked with for/id relation
Favourite sport: implicit label
Dragon 13 Pro
Radios: saying “click radio” offers all radio buttons. Saying “click”plus the label name of the first 3 radios moves radio selection to that control. However saying “click” plus the label name of the second set (running/walking/cycling) does nothing; Dragon asks you to please say
that again (meaning it does not recognise the command as valid).
Dragon 15 Pro
Could not set focus by speaking the name of the button, but could set focus and select a button by saying “click radio.”
The other screenreader have no problems
Checkboxes:
I like the following beers: explicit label and input field linked with for/id relation
I like the following movies: implicit label
Dragon 13 Pro
Checkboxes: saying “click checkbox” offers all checkboxes. Saying “click” plus the label names of the beer options work as expected. It does not work with the Sound of Music/Zombie Apocalypse/Spongebob options.
Dragon 15 Pro
Could not set focus by speaking the name of the checkbox, but could set focus and select a button by saying “click checkbox.”
Combined input fields in a sentence:
Jaws
The labels for the questions that consist of two fields (like “Remove content older than…” and “Break comments into pages with…”” do not read well because of the split over two fields. Perhaps a different field pattern would be more user-friendly?
Usability remark
Some elements appear to be conditional based on the selection criteria ( i.e. [ ] Remove content older than [30 ] days ).
My initial reaction was the days value could not be changed with the checkbox not selected. This is not the case.
Other screen readers
Supernova, VoiceOver and NVDA are able to check, edit and select all fields within this section.
Input field type=number
Dragon 13 Pro
None of the inputs type=numbers were focusable/available, except by using the “press tab” command to manually move keyboard focus to them. Once inside an input type=number, Dragon
did not consider it an edit/dicatable field; the only way to get it to add anything is to preface my number with “Type” like “type 5”. I could also get it to “type T” and some other letters however not all letters worked. It seemed confused by the input type.
This was both on IE and Firefox. I know Firefox understands input type=number. I can’t remember if IE 11 does, older versions did not and treated them as plain text inputs.
Dragon 15 Pro
Input 1: “Close comments for old post”.
- Could set focus by saying “click remove” or “click checkbox.”
- Couldn’t find a name or role to call to move focus from checkbox to the number input, but was able to move focus by saying “press tab.” On focus, commands for adjusting increments (press up or down arrow) were apparent.
- After clearing the field, entering a number was difficult. I couldn’t say, “numeral 12” to enter a number, but I could enter a two digit number by sending keypresses. “Press 1” followed by “press 2.” This was non-intuitive, but quickly adjusting the increment was possible by saying “move up N” or “move down N.”
NVDA
According to NVDA feedback the selects for “remove content older than” and “break comments into pages”, NVDA reports these as “edit spin button”, (which I don’t think there’s anything that can be done about without a change to NVDA itself), and I can only arrow up and down through the selections.
Using home/end to navigate to either the lowest or highest options in the selections does not work, and paging up and down through groups of options does not work either. This is probably not a big deal for most things, although it could probably get out of hand and cause some serious frustration if there are a lot of options to go through and the one you want is near the end. Maybe these should be comboboxes instead?
Keyboard testing
Different browsers have different ways of adding a visible focus, some like in IE are hard to see.
Videos
By John Sexton: abc4accessibility.com/form-test Video screen capture of the test using both Supernova and NVDA, each showing the output with just cursor down, tabbing and then filling out the form. The video starts with Supernova using just the cursor down key starting from the heading “The test form” and then just the tab key, again from the same start point then lastly filling out the form via the keyboard only. It then repeats this in the same way for NVDA.
Conclusion
- All form elements work with keyboard only, although the visibility of focus differed with each browser.
- Explicit label with label/id relation works always
- Implicit label works for Supernova, VoiceOver, JAWS and NVDA, but fields can’t be selected by name by Dragon (13 Pro and the latest version 15 Pro)
- Implicit label with label/id relation works also for Dragon
- Combining input fields in a sentence can confuse less savvy screen reader users
- Input type=number does not work for Dragon (13 Pro and the latest version 15 Pro) and may be hard for NVDA.
Follow up
