CSS Display table iOS SamC

From Level Access Web Labs
Jump to navigation Jump to search

Test Page Rationale

VoiceOver will announce "table start" and "table end" inside a webview of a hybrid app even though there are no table element markups. The test case here is to test whether VoiceOver will render element with display:table as a table.

div element with CSS display:table property

div container with style="display: table;", role="presentation" on all nodes

Hello world
Goodbye World

HTML table element with style="display: table", role="presentation"

Hello world
Goodbye World

div container with style="display: table-cell"

Hello world
Goodbye World

div container with style="display:table"

Hello world

Goodbye World

div container without style="display:table"

Hello world

Goodbye World

Code snippet:

<syntaxhighlight lang="html4strict">

div container with style="display:table"

Hello world

Goodbye World

div container without style="display:table"

Hello world

Goodbye World

</syntaxhighlight>

Test Result

iOS VoiceOver (OS 11.2.2) is announcing "table start" and "table end" at the beginning and end of the div container. This indicates that the display:table property will result in the styled element to be rendered as a table by VoiceOver. This behavior does not occur for JAWS/Chrome or NVDA/Chrome.