Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrong output of fieldset and legend #233

Open
JAWS-test opened this issue Aug 7, 2019 · 1 comment
Open

Wrong output of fieldset and legend #233

JAWS-test opened this issue Aug 7, 2019 · 1 comment
Labels
triaged Under review

Comments

@JAWS-test
Copy link

JAWS-test commented Aug 7, 2019 •
edited
Loading

Summary

Wrong output of fieldset and legend

  1. save as HTML file:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>fieldset / legend</title>
	</head>
	<body>
		<fieldset>
			<legend>Example 1</legend>
			<label for=1>select</label>
			<select size=2 id=1><option>1<option>2</select>
		</fieldset>
		<ul><li>IE 11: no output at select in form mode (tab navigation)<li>Chrome, Firefox: correct</ul><hr>

		<fieldset>
			<legend>Example 2</legend>
			<h2>heading</h2>
			<label for=2>input</label>
			<input id=2>
		</fieldset>
		<ul><li>IE 11: Heading inside fieldset is output instead of legend<li>Chrome, Firefox: correct</ul><hr>
		
		<h2>Example 3</h2>
		<fieldset>
			<legend>free of charge</legend>
			<input type=checkbox aria-label=1> 1
			<input type=checkbox aria-label=2> 2
		</fieldset>
		<input type=checkbox aria-label=3> 3
		<ul><li>IE 11: correct<li>Chrome, Firefox: End of group not perceptible in form mode</ul><hr>

		<fieldset>
			<legend>Example 4</legend>
			<div id=3>role=textbox</div><div tabindex=0 role=textbox aria-labelledby=3>test</div>
		</fieldset>
		<ul><li>IE 11: no output at ARIA form fields in form mode except for radio buttons and checkboxes<li>Chrome, Firefox: correct</ul><hr>

		<div role=application>
			<fieldset>
				<legend>Example 5</legend>
				<label for=4>application mode</label>
				<input id=4>
			</fieldset>
		</div>
		<ul><li>IE 11: no output in application mode (tab navigation)<li>Chrome, Firefox: correct</ul><hr>

		<div role=form>
			<fieldset>
				<legend>Example 6</legend>
				<label for=5>inside role=form</label>
				<input id=5>
			</fieldset>
		</div>
		<ul><li>IE 11: no output in form mode (tab navigation)<li>Chrome, Firefox: correct</ul><hr>

		<div aria-label=test>
			<fieldset>
				<legend>Example 7</legend>
				<label for=6>fieldset inside div with aria-label</label>
				<input id=6>
			</fieldset>
		</div>
		<ul><li>IE 11: aria-label at div is output instead of legend in form mode<li>Chrome, Firefox: aria-label and legend are output in form mode</ul><hr>
		
		<fieldset>
				<legend>Example 8</legend>
				<div aria-label=test2>
					<label for=7>div with aria-label inside fieldset</label>
					<input id=7>
				</div>
		</fieldset>
		<ul><li>IE 11: aria-label at div is output instead of legend in form mode<li>Chrome, Firefox: aria-label and legend are output in form mode</ul><hr>
		
		<fieldset>
			<legend>Example 9</legend>
			<fieldset>
				<legend>nested fieldset</legend>
				<input type=checkbox aria-label=a> a
				<input type=checkbox aria-label=b> b
			</fieldset>
			<input type=checkbox aria-label=c> c
			<input type=checkbox aria-label=d> d
		</fieldset>

		<ul><li>IE 11: No output of the legend of the outer fieldset in form mode<li>Chrome, Firefox: End of group not perceptible in form mode</ul><hr>	
		
		<fieldset>
			<legend>Example 10</legend>
			<input type=checkbox aria-label=a> a
			<fieldset>
				<legend>nested fieldset</legend>
				<input type=checkbox aria-label=b> b
				<input type=checkbox aria-label=c> c
			</fieldset>
			<input type=checkbox aria-label=d> d
		</fieldset>
		<ul><li>IE 11: In form mode, it is only noticeable when you leave the inner fieldset that they are nested<li>Chrome, Firefox: Not recognizable in form mode that fieldsets are nested</ul><hr>		

		<div lang=de>
			<fieldset>
				<legend>Beispiel 11</legend>
				<label for=8>lang=de</label>
				<input id=8>
			</fieldset>
		<div>
		<ul><li>IE, Firefox, Chrome: correct pronunciation in form mode<li>IE, Firefox, Chrome: incorrect pronunciation when reading with arrow keys (legend is output with English and not with German pronunciation)</ul><hr>
	</body>
</html>
  1. Navigate with Tab key and F

Expected result

  • legend is output correctly for all form fields
  • The beginning and end of the form field groups are perceptible
  • correct pronunciation when changing languages with lang attribute
  • Consistent output with different browsers

Actual result

IE 11: legend is partly not output, e.g.

  • inside role=application or role=form
  • inside nested fieldsets
  • if there is a heading inside fieldset
  • if there are labelled div inside or outside the fieldset
  • at ARIA form fields
  • at select size > 1

Chrome, Firefox: The end of the form field groups is not perceptible

All browsers after language change: no correct pronunciation of the legend when reading with the arrow keys

The output of fieldset and legend is not consistent:

  • IE: output of legend at every element in fieldset; Chrome, Firefox: output at first element only
  • IE: output of legend also for quick navigation (F); Chrome, Firefox: no output for quick navigation

Some of the problems have existed for a long time (see https://developer.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/).

Additional Information

JAWS version and build number

JAWS 2019.1906.10

Operating System and version

Windows 10

Browser and version:

Internet Explorer 11.0.9600.19400
Chrome 75.0.3770.100
Firefox 68.0
@JAWS-test
Copy link
Author

JAWS-test commented Aug 7, 2019 •
edited
Loading

See also: #100 and w3c/html-aam#250 (comment)

@JAWS-test JAWS-test mentioned this issue Aug 18, 2019
Open
This was referenced Sep 18, 2019
Closed
Open
@JAWS-test JAWS-test mentioned this issue Nov 9, 2019
Open
@JAWS-test JAWS-test mentioned this issue Sep 15, 2022
Open
@stevefaulkner stevefaulkner self-assigned this Nov 20, 2023
@stevefaulkner stevefaulkner removed their assignment Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
triaged Under review
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stevefaulkner @JAWS-test