The output element

Published: June 24, 2019

Last Updated: July 16, 2020

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: MSAA and IA2 expose element with "status bar" role.

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 2020.2006.12 with Firefox 78.0.2:
    Live announcement of injected content. "and link. test content and link." No role is announced when navigating to output content.
  • 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 2020.1 with Firefox 78.0.2
    Live announcement of injected content. Navigating to element after pressing update button will announce content, but no role for output element.
  • Android 10 TalkBack 8.2 with Firefox Beta 79.0.0-beta.5:
    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:
    Live announcement of injected content (see test 1). Can navigate to empty output prior to injected content with virtual cursor. Will announce accessible name and role "status bar". After injecting content, virtual cursor does not stop on/announce accessible name or role of output element.
  • 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 2020.1 with Firefox 78.0.2
    Live announcement of injected content. 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 10 TalkBack 8.2 with Firefox Beta 79.0.0-beta.5:
    Announcement of accessible name ("aria label") but not of injected content. 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 2020.2006.12 with Firefox 78.0.2:
    Live announcement of injected content. Navigating to empty output with virtual cursor announces accessible name from label and "status bar" role. After content is injected no role/accessible name are announced for output when navigated to with virtual cursor. If tabbing to link accessible name of output (but not role) will be announced prior to the link text/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 2020.1 with Firefox 78.0.2
    Live announcement of injected content. 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 10 TalkBack 8.2 with Firefox Beta 79.0.0-beta.5:
    Announcement of accessible name "label", but not injected content. Can navigate to output prior to content being injected and hear accessible name and "status bar" role. Cannot swipe to output and hear name/role after content is injected.
  • 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 2020.2006.12 with Firefox 78.0.2:
    Similar results to test 3, but with the title providing the accessible name.
  • 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 2020.1 with Firefox 78.0.2
    Live announcement of injected content. 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 10 TalkBack 8.2 with Firefox Beta 79.0.0-beta.5:
    Same results as test 3, but with "title attribute" as accessible name.
  • 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 2020.2006.12 with Firefox 78.0.2:
    Live announcement made (see test 1 for how content is announced). 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 2020.1 with Firefox 78.0.2
    Live announcement of injected content. Navigating to element will announce content, but no role.
  • Android 10 TalkBack 8.2 with Firefox Beta 79.0.0-beta.5:
    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 2020.2006.12 with Firefox 78.0.2:
    Live announcement made (see test 1 for how content is announced). Navigating to element before or after pressing update button will announce content, but no accessible name or role. Tabbing to link after updating content will announce accessible name of output prior to announcing text/role of link.
  • 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 2020.1 with Firefox 78.0.2
    Live announcement of injected content. Navigating to element will announce content, but no accessible name or role.
  • Android 10 TalkBack 8.2 with Firefox Beta 79.0.0-beta.5:
    No live announcement made. Navigating to element before injecting content will announce "aria label, status bar" followed by the default content of the output element. After pressing update button, swiping to the output 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.