Testing the button element's semantics when paired with different CSS properties/values

Note: Talkback has been renamed to Android Accessibility Suite and is referred to as "AAS" in these test results.

Review the test page on codePen.

all: unset

Visual Style

Re-styled to resemble body text, however still retains inline-block. Continues to receive keyboard focus and default or author set focused styles.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Note: unsupported CSS for IE, so no visual change

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

Note: unsupported CSS for Edge, so no visual change

appearance: none

Visual Style

Styling is not actually removed, but rather reverts to a more utilitarian button style (in the browsers that support the property). Each browser treats this style with some variation, but they all continue to look like buttons.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: contents

Visual Style

Mostly re-styled to resemble and flow like body text, but retains default button font styling. (more on display: contents)Loses the ability to be focused by Tab key.

macOS Safari 12

Exposed as "text".

VoiceOver announces element as "text content".

macOS Firefox 62.0.3

Exposed as "text leaf".

macOS Chrome (latest)

No accessibility node exposed.

iOS 11.4.1 Safari

Exposed as a "Static Text"

VoiceOver announces no role.

Android Chrome

AAS announces no role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "editable text"

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Note: display: contents is unsupported in IE.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "text"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

Note: display: contents is unsupported in Edge.

display: block

Visual Style

No change to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: inline

Visual Style

No change to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: flex

Visual Style

No change to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: table

Visual Style

Aside from Edge alone adding a slightly thicker border to the button, no other changes to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: inline-flex

Visual Style

No change to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: inline-grid

Visual Style

No change to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: grid

Visual Style

No change to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".

display: list-item

Visual Style

With the exception of Firefox macOS (where a bullet was added inside the border of the button), no change to the styling of the button.

macOS Safari 12

Exposed as a "button"

VoiceOver announces button role.

macOS Firefox 62.0.3

Exposed as "pushbutton".

macOS Chrome (latest)

Exposed as a "button".

iOS 11.4.1 Safari

Exposed as a "button"

VoiceOver announces button role.

Android Chrome

AAS announces button role.

Windows 10 Firefox 64.0a1

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 IE11

Exposed as MSAA "push button"

JAWS 2018 announces button role.

Windows 10 Chrome (latest)

Exposed as MSAA/IA2 "push button"

NVDA 2018.2.1 + JAWS 2018 announce button role.

Windows 10 Edge (latest)

Exposed as a "button".