The output element

Published:

Last Updated:

Note: the output element allows for only phrasing content as child elements. The following tests will inject a text string and a single link into each test case's output element.

An additional test file has been created to test injecting text strings only into output elements that have accessible names.

Note: Firefox MSAA accRole="output", IA2 role="section".

Chrome MSAA and IA2 report as "status bar".

Important note concerning TalkBack:

If output elements are given an accessible name, or contain content by default, TalkBack paired with Chrome will auto-announce the accessible name, any default content, and role (status) of at least one, if not all, instances of outputs on initial document load or refresh.

Add content to an empty output

results

Expectation: should announce flattened text string.

  • macOS 10.14.5 VoiceOver with Safari 12.1.1:
    Live announcement of injected content. No role is announced when navigating to output content.
  • macOS 10.14.5 VoiceOver with Chrome 75:
    Live announcement of injected content. No role is announced when navigating to output content.
  • JAWS 2019 (june) with IE11:
    No live announcement made. Navigating to element after pressing update button will announce content, but no role.
  • JAWS 2019 (june) with Edge 77 dev:
    Live announcement of injected content. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Chrome 75:
    Live announcement of injected content. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, but no role.
  • NVDA 2019.1.1 with IE11:
    No live announcement made. Navigating to content, no role announced.
  • NVDA 2019.1.1 with Edge 77 dev:
    Live announcement of injected content. No role is announced when navigating to output content.
  • NVDA 2019.1.1 with Chrome 75:
    Live announcement of injected content. No role is announced when navigating to output content.
  • NVDA 2019.1.1 with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, but no role.
  • Android 8.1 TalkBack 7.3 with Firefox 68.0 (preview):
    No live announcement made. Navigating to element after pressing update button will announce content, but no role. Element cannot be discovered prior to content injection.
  • Android 8.1 TalkBack 7.3 with Chrome 75:
    Live announcement of content, "status" role, and then repeats non-link content.
  • iOS 12.3.1 VoiceOver with Safari:
    Live announcement of injected content. No role is announced when navigating to output content.

Add content to an empty output with aria-label

results

Expectation: should announce flattened text string and accessible name.

  • macOS 10.14.5 VoiceOver with Safari 12.1.1:
    Live announcement of accessible name, followed by content. Navigating to element announces "'accessible name', output".
  • macOS 10.14.5 VoiceOver with Chrome 75:
    Live announcement of accessible name, followed by content. Navigating to element announces "'accessible name', status".
  • JAWS 2019 (june) with IE11:
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or no role.
  • JAWS 2019 (june) with Edge 77 dev:
    Live announcement of accessible name and injected content. Cannot navigate to element with virtual cursor prior to content injection. Accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Chrome 75:
    Live announcement of accessible name and injected content. Cannot navigate to element with virtual cursor prior to content injection. Accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Navigating to element prior to injecting content will announce accessible name, but no role.
  • NVDA 2019.1.1 with IE11:
    No live announcement made. Navigating to content, no role announced, but announces "edit" prior to visible content.
  • NVDA 2019.1.1 with Edge 77 dev:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to injecting content announces its accessible name, but no role. Navigating after announces no accessible name.
  • NVDA 2019.1.1 with Chrome 75:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to injecting content announces its accessible name, but no role. Navigating after announces no accessible name.
  • NVDA 2019.1.1 with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Element cannot be navigated to without injected content.
  • Android 8.1 TalkBack 7.3 with Firefox 68.0 (preview):
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Element cannot be discovered prior to content injection.
  • Android 8.1 TalkBack 7.3 with Chrome 75:
    Live announcement of content, accessible name, "status" role, and then repeats non-link content. If update button not pressed, TalkBack can focus output and will announce accessible name and status role. After injecting content, TalkBack will only navigate to injected content and not announce role.
  • iOS 12.3.1 VoiceOver with Safari:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content.

Add content to an empty output with label association

results

Expectation: should announce flattened text string and accessible name.

  • macOS 10.14.5 VoiceOver with Safari 12.1.1:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content.
  • macOS 10.14.5 VoiceOver with Chrome 75:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content.
  • JAWS 2019 (june) with IE11:
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or no role.
  • JAWS 2019 (june) with Edge 77 dev:
    Live announcement of accessible name and injected content. Cannot navigate to element with virtual cursor prior to content injection. Accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Chrome 75:
    Live announcement of accessible name and injected content. Cannot navigate to element with virtual cursor prior to content injection. Accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, including the visible label, but no role. Navigating to element prior to injecting content will announce accessible name from label, and then accessible name repeated for the output element itself, but no role announcement.
  • NVDA 2019.1.1 with IE11:
    No live announcement made. Navigating to content, no role announced.
  • NVDA 2019.1.1 with Edge 77 dev:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to injecting content announces its accessible name, but no role. Navigating after announces no accessible name.
  • NVDA 2019.1.1 with Chrome 75:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to injecting content announces its accessible name, but no role. Navigating after announces no accessible name.
  • NVDA 2019.1.1 with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Element cannot be navigated to without injected content.
  • Android 8.1 TalkBack 7.3 with Firefox 68.0 (preview):
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Element cannot be discovered prior to content injection.
  • Android 8.1 TalkBack 7.3 with Chrome 75:
    Live announcement of content, accessible name, "status" role, and then repeats non-link content. If update button not pressed, TalkBack can focus output and will announce accessible name and status role. After injecting content, TalkBack will only navigate to injected content and not announce role.
  • iOS 12.3.1 VoiceOver with Safari:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content.

Add content to an empty output with title attribute

results

Expectation: should announce accessible name and flattened text string.

  • macOS 10.14.5 VoiceOver with Safari 12.1.1:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content after activating the update button. Before activating the update button, the title attribute provides the output with an accessible name, and if navigated to, VO will announce "accessible name, output".
  • macOS 10.14.5 VoiceOver with Chrome 75:
    Live announcement of accessible name, followed by content. Navigating to element announces "'accessible name', status".
  • JAWS 2019 (june) with IE11:
    No live announcement made. Navigating to element before or after pressing update button will announce content, but no accessible name or no role.
  • JAWS 2019 (june) with Edge 77 dev:
    Live announcement of accessible name and injected content. Cannot navigate to element with virtual cursor prior to content injection. Accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Chrome 75:
    Live announcement of accessible name and injected content. Cannot navigate to element with virtual cursor prior to content injection. Accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Navigating to element prior to injecting content will announce accessible name, but no role.
  • NVDA 2019.1.1 with IE11:
    No live announcement made. Navigating to content, no role announced.
  • NVDA 2019.1.1 with Edge 77 dev:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to injecting content announces its accessible name, but no role. Navigating after announces no accessible name.
  • NVDA 2019.1.1 with Chrome 75:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to injecting content announces its accessible name, but no role. Navigating after announces no accessible name.
  • NVDA 2019.1.1 with Firefox 67.0.4:
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Element cannot be navigated to without injected content.
  • Android 8.1 TalkBack 7.3 with Firefox 68.0 (preview):
    No live announcement made. Navigating to element after pressing update button will announce content, but no accessible name or role. Element cannot be discovered prior to content injection.
  • Android 8.1 TalkBack 7.3 with Chrome 75:
    Live announcement of content, accessible name, "status" role, and then repeats non-link content. If update button not pressed, TalkBack can focus output and will announce accessible name and status role. After injecting content, TalkBack will only navigate to injected content and not announce role.
  • iOS 12.3.1 VoiceOver with Safari:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content.

Update content in an output with default text

Test default string
results

Expectation: should announce flattened text string.

  • macOS 10.14.5 VoiceOver with Safari 12.1.1:
    Live announcement of injected content. No role is announced when navigating to output content. If quickly navigating to the output after updating, VoiceOver may announce "Default, dimmed" per the original content that was within the output element.
  • macOS 10.14.5 VoiceOver with Chrome 75:
    Live announcement of injected content. No role is announced when navigating to output content.
  • JAWS 2019 (june) with IE11:
    No live announcement made. Navigating to element after pressing update button will announce content, but no role.
  • JAWS 2019 (june) with Edge 77 dev:
    Live announcement of injected content, followed by accessible name. No role is announced when navigating to output content. When navigating to element, accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Chrome 75:
    Live announcement of injected content, followed by accessible name. No role is announced when navigating to output content. When navigating to element, accessible name only announced if using Tab key to focus link, accessible name will then announce twice. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Firefox 67.0.4:
    No live announcement made. Navigating to element before or after pressing update button will announce content, but no role.
  • NVDA 2019.1.1 with IE11:
    No live announcement made. Navigating to content, no role announced.
  • NVDA 2019.1.1 with Edge 77 dev:
    Live announcement of injected content. No role is announced when navigating to output content.
  • NVDA 2019.1.1 with Chrome 75:
    Live announcement of injected content. No role is announced when navigating to output content.
  • NVDA 2019.1.1 with Firefox 67.0.4:
    No live announcement made. Navigating to element will announce content, but no role.
  • Android 8.1 TalkBack 7.3 with Firefox 68.0 (preview):
    No live announcement made. Navigating to element before or after pressing update button will announce content, but no role.
  • Android 8.1 TalkBack 7.3 with Chrome 75:
    Live announcement of content, "status" role, and then repeats non-link content. If update button not pressed, TalkBack can focus output and will announce the initial text string, and then the status role. After injecting content, TalkBack will only navigate to injected content and not announce role.
  • iOS 12.3.1 VoiceOver with Safari:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content.

Update content in an output with default text and accessible name from aria-label

Default text string
results

Expectation: should announce flattened text string and accessible name.

  • macOS 10.14.5 VoiceOver with Safari 12.1.1:
    Live announcement of accessible name, followed by content. VoiceOver can navigate to output and will announce "'accessible name', output". VoiceOver can then navigate into the output to announce the default or injected content.
  • macOS 10.14.5 VoiceOver with Chrome 75:
    Live announcement of accessible name, followed by content. Navigating to element announces "'accessible name', status". VoiceOver can then navigate into the output to announce the default or injected content.
  • JAWS 2019 (june) with IE11:
    No live announcement made. Navigating to element before or after pressing update button will announce content, but no accessible name or no role.
  • JAWS 2019 (june) with Edge 77 dev:
    Live announcement of accessible name and injected content. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Chrome 75:
    Live announcement of accessible name and injected content. No role is announced when navigating to output content.
  • JAWS 2019 (june) with Firefox 67.0.4:
    No live announcement made. Navigating to element before or after pressing update button will announce content, but no accessible name or role.
  • NVDA 2019.1.1 with IE11:
    No live announcement made. Navigating to content, no role announced, but announces "edit" prior to visible content.
  • NVDA 2019.1.1 with Edge 77 dev:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to, or after injecting content does not announce accessible name or role.
  • NVDA 2019.1.1 with Chrome 75:
    Live announcement of injected content, followed by accessible name. Navigating to element prior to, or after injecting content does not announce accessible name or role.
  • NVDA 2019.1.1 with Firefox 67.0.4:
    No live announcement made. Navigating to element will announce content, but no accessible name or role.
  • Android 8.1 TalkBack 7.3 with Firefox 68.0 (preview):
    No live announcement made. Navigating to element before or after pressing update button will announce content, but no accessible name or role.
  • Android 8.1 TalkBack 7.3 with Chrome 75:
    Live announcement of content, "status" role, and then repeats non-link content. If update button not pressed, TalkBack can focus output and will announce the accessible name, and status role, but not the visible content on screen. After injecting content, TalkBack will navigate to injected content and not announce role, or accessible name.
  • iOS 12.3.1 VoiceOver with Safari:
    Live announcement of injected content. No accessible name is announced, nor is a role or accessible name announced when navigating to output content.