Role="application" test
Test
- Application should be announced when entering and leaving application region
- Screen readers should announce content inside the application when in line-by-line mode
Example
Heading
A paragraph of text
Code sample
<div role="application">
<h2>Heading</h2>
<p>A paragraph of text</p>
<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>
| 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" "Heading level 2. Heading" "A paragraph of text" "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" "Heading level 2. Heading" "A paragraph of text" "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: "Heading level 2. Heading" "A paragraph of text" "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 |