Issue metadata
Sign in to add a comment
|
Elements with display: contents should not be removed from the accessibility tree. |
||||||||||||||||||||||||||
Issue description
Chrome Version: 65.0.3325.146 (Official Build) (64-bit)
OS: Mac OS X
What steps will reproduce the problem?
(1) Add display: contents to any element.
What is the expected result?
The element remains in the accessibility tree.
What happens instead?
The element is marked ignored for accessibility.
This may be problematic for any site using CSS Grid or Flexbox in combination with ARIA. Given the following structure:
<div role=grid>
<div role=row>
<div role=gridcell>
Using `display: contents` on the element marked [role="row"] breaks the semantic structure of the grid, which is now reported as having 0 rows, 0 columns.
Developers are actually encouraged to use display: contents on elements which only exist to add semantic information to the page (https://css-tricks.com/get-ready-for-display-contents/).
jsbin to test - https://jsbin.com/paxavar/1/edit?html,output
inspecting the second <article> element using Chrome Accessibility DevTools shows it marked ignored for accessibility.
,
Mar 10 2018
,
Mar 19 2018
Thanks, this is an interesting one. Perhaps a good argument in favor of building accessibility from the DOM instead of from the layout tree.
,
Jun 18 2018
,
Jun 20 2018
Another example: <ul> <li>first</li> <li style="display: contents;"><span id="s">second</span></li> </ul> If a list element has the attribute display: contents, the corresponding accessibility node will not be a list element. I also noticed on Android that talkback will still read me the text inside the element with display: contents.
,
Nov 27
|
|||||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||||
Comment 1 by robdodson@chromium.org
, Mar 10 2018