Bug 144804 – AX: Don't expose elements as data tables just because they use display: table

• Status: RESOLVED
• Resolution: FIXED
• Component: Accessibility

[chris fleizach]

A layout table can be coded using a <div> element styled with display:table, and children <div> elements with display:table-cell (plus other table-* rules to define the table’s rows and column).

The expectation is that since the tabular structure is defined with the styling and not with structural markup (e.g. html <table> element or WAI-ARIA role=“table), the content should not be exposed by VO as an actual table. This irrespectively of other style applied to the elements (e.g. borders).

In particular, if the table consists of only one row, it should be treated by VO as a layout table and therefore not exposed as a table.  If the border is not present, the markup is no longer exposed as a table.

It’s common practice to visually hide the content using the Clip Method, for example with the following CSS class:

.a11y {  
	position: absolute !important;
	height: 1px;
	width: 1px; 
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

If a border is applied to any of the <div> elements of the faux table VO exposes a table. However, the first time the page is visited, VO does not allow to enter the table. The table can be reached with VO (e.g. with VO+right keys), but its not possible to enter inside the table and visit its cells. It’s not even possible to get past the table. Although it’s possible to go back using VO+left.

But after reloading the page VO still exposes the table but now does allow to enter the table.

This can be tested using the following markup:

<div class="layout-table">
	<div class="first-cell a11y">Visually hidden div</div>
	<div class="second-cell">Left div</div>
	<div class="third-cell">Right div</div>
</div>

and using only the following CSS:

.layout-table { display:table; }
.layout-table .second-cell, .layout-table .third-cell, .layout-table .third-cell-no-border { display: table-cell; }
.layout-table .third-cell { border-left: 5px solid #f00; }



<rdar://problem/19745053>

[chris fleizach]

Created attachment 252751 [details]
patch

[WebKit Commit Bot]

Comment on attachment 252751 [details]
patch

Clearing flags on attachment: 252751

Committed r184046: <http://trac.webkit.org/changeset/184046>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[James Craig]

*** Bug 144424 has been marked as a duplicate of this bug. ***