Back to home

Role="document" test

Test

Example

Heading

A paragraph of text

Code sample

<div role="application">
	<div role="document">
		<h2>Heading</h2>
		<p>A paragraph of text</p>
	</div>
	<form method="get" action="#">
		<div class="row-form">
			<label class="label" for="a">Name</label>
			<input class="input" id="a" name="a" type="text">
		</div>
		<div class="row-form">
			<button type="submit">Submit</button>
		</div>
	</form>
</div>
Support chart
OS Browser NVDA 2014.4 JAWS 16 VoiceOver
Windows 7 IE 11 Line-by-line mode:
"Application"
Nothing further available in line-by-line mode

Tab mode:
Switches into forms mode. "Heading. A paragraph of text. Name. Submit. Name. Edit. Blank"
All general content associated with form controls - like a legend
Application not announced
Line-by-line mode:
"Entering application region. Application"
"Document"
"Leaving application region. Heading level 2. Heading"
"A paragraph of text"
"Document end"
"Entering application region.Name"
"Edit"
"Submit button"
"Application end"

Tab mode: "Entering application region. Name. Edit. Type in text"
Windows 7 IE 8 X X
Windows 7 Chrome 39 Line-by-line mode:
"Application"
Nothing further available in line-by-line mode

Tab mode:
Switches into forms mode. "Application. Name. Edit. Blank"
Line-by-line mode:
"Entering application region. Application"
"Heading level 2. Heading"
"A paragraph of tex"t
"Name"
"Edit"
"Submit button"
"Application end"

Tab mode: "Entering application region. Name. Edit. Type in text"
Windows 7 Firefox 34 Line-by-line mode:
"Application"
Nothing further available in line-by-line mode

Tab mode:
"Application. Name. Edit. With autocomplete. Blank"
Line-by-line mode:
"Entering application region. Application"
"Document"
"Leaving application region. Heading level 2. Heading"
"A paragraph of text"
"Document end"
"Entering application region. Name"
"Edit"
"Submit button"
"Application end"

Tab mode: "Entering application region. Name. Edit. Type in text"
OSX 10.9 Chrome 39 Line-by-line mode:
"Entering application landmark. Collapsed. Heading level 2. Heading"
"A paragraph of text"
"Name"
"Name. Edit. Text"
"Submit. Collapsed. Button"
"Leaving application landmark"

Tab mode:
"Name. Edit. Text"
Application not announced
OSX 10.9 Firefox 34 Line-by-line mode:
"Frame"
"Name"
"Name. Text"
"Submit. Button"

Tab mode: "Name. Text"
Application not announced
OSX 10.9 Safari 7 Line-by-line mode:
"Entering application landmark. Heading level 2. Heading"
"A paragraph of text"
"Name"
"Name. Edit. Text"
"Submit. Button"
"Leaving application landmark"

Tab mode:
"Name. Edit. Text"
Application not announced

Bottom of page - Back to home