Quiz 5.2.13: Speaking form labels
Handling form labels has been on one of my back burners for a long time. This week, both Shannon and Becky found an anomaly based on a suggestion in the WCAG 2.0 CSS guide, item 5.5. There, it shows several examples of coding form labels which are hidden from visual display.
Actually, I think a well done design shouldn’t have to hide labels, but that’s for a different quiz. One of the examples uses display:none. As we know from many tests here, display:none hides material from screen readers as well as from the visual display. Well, hold on to your hats boys and girls. Some current screen readers do speak labels that are hidden with display:none. Gheesh, how inconsistent can we get?
OK. Let’s try a label test case and see what we get. Try it in as many screen readers as you can, and try it in different reading modes. If the screen reader has a forms reading mode, does it behave differently than straight through reading mode?
Sept 1 update - I have updated the test case to include a paragaph that is also treated with display:none. This let’s us more easily see if screen readers ignore some hidden elements but not others.
August 19th, 2005 at 4:14 am
Testing with jaws 6.10 and IE 6.0 on Win XP, the hidden labels are spoken. With Firefox 1.0.4 and fangs, the hidden labels are not displayed.
August 24th, 2005 at 12:33 pm
IBM Home Page Reader 3.04
In item reading mode (straight through) the hidden labels are not spoken. In either link reading mode or control reading mode, the labels are spoken. They are not displayed in HPR’s graphic display for any case.
One thing is puzzling. The hidden labels are “expiration month” and “expiration year.” HPR spells out the second word of each, month and year. I don’t know why.
August 24th, 2005 at 1:48 pm
Jaws 6.1 with IE 6
The hidden form labels are spoken in both straight through reading mode and in forms reading mode.
August 26th, 2005 at 6:18 am
Window Eyes 5.0 and IE 6
The hidden form labels are spoken in straight through mode and in form reading mode. Interestingly, they are read after the control’s value is spoken.
August 29th, 2005 at 11:43 am
Fire Vox 3.0 for Firefox (1.0.6)
The hidden text is not read in straight through reading or when navigating to form fields from the elements list.
August 29th, 2005 at 11:50 am
Opera 8.01 (Windows)
Opera does not read the hidden text in straight through reading. Unlike Fire Vox, it reads all the items (months and years) in the selection lists.
Fire Vox only reads the current value in the box.
September 1st, 2005 at 5:07 am
Communication with the HPR development team confirms that the unexpected spelling out of the last word in the hidden labels is a known bug in version 3.04.
September 1st, 2005 at 2:56 pm
HPR 3.04 and updated version of the test case.
HPR does NOT speak the hidden labels in straight through reading mode.
HPR DOES speak the hidden labels in control reading mode.
HPR does NOT speak the hidden paragraph in either mode. Therefore, we see that display:none is obeyed for some elements and not for others, depending on reading mode.
Listen to a recording of straight through mode.
Lieten to a recording of control reading mode.
September 1st, 2005 at 2:57 pm
Jaws 6.1 and IE 6 with the updated test case.
Jaws DOES speak the hidden labels in all reading modes. Jaws does NOT speak the hidden paragraph. Therefore, we see that display:none is obeyed for some elements and not for others, independent of reading mode.
Listen to a recording.
September 1st, 2005 at 2:59 pm
Window Eyes 5.0 and IE 6 with the updated test case.
Window Eyes DOES speak the hidden labels in any reading mode. It does NOT speak the hidden paragraph in any reading mode. Therfore, we see that display:none is obeyed for some elements and not for others, independent of reading mode.
September 16th, 2005 at 7:24 pm
Not a screen reader, but- Lynx for windows displays both the hidden labels and the hidden paragraph. Both appear as if they were normal in every possible way.
March 2nd, 2006 at 10:16 pm
At the end of the test it says to use the back-button to review the logs collected during the test, but when I return to the previous page the text area has been deleted and all is has is a document.focus.
October 26th, 2006 at 7:13 am
[…] Für mich immer auch wie ein Krimi: die Testanordnungen von Access Matters. Sie entwerfen einfach Beispiele, wie Labels in Formularen, die auf unsichtbar mit CSS (Cascading Style Sheets) (display: none) gesetzt werden, und rufen dazu auf, dieses Beispiel mit verschiedenen Screenreadern und Textbrowsern zu testen. Die Testberichte (Kommentare) lesen sich neben dem hohen Informationsgehalt schlicht sehr spannend. So werden von etlichen Screenreadern die unsichtbaren Labels trotz allem vorgelesen, jedoch scheint es dabei auch eine Hierarchie in den HTML-Elementen zu geben: Unsichtbare Labels werden eher vorgelesen als etwa unsichtbare Absätze (P-Tag), […]
December 5th, 2007 at 5:32 pm
[…] auch wie ein Krimi: die Testanordnungen von Access Matters. Sie entwerfen einfach Beispiele, wie Labels in Formularen, die auf unsichtbar mit CSS (display: none) gesetzt werden, und rufen dazu auf, dieses Beispiel mit […]
May 12th, 2008 at 2:57 am
90fadabba8ef…
90fadabba8ef60da9d38…