Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties

Adrian Roselli does some manual testing of the display CSS property – with a particular focus on display: contents – across different browsers, meticulously recording the results here.

For the uninitiated, there’s a CSS Tricks article about display: contents. You can apply this to ‘wrappers’ around content, and it makes the container ‘disappear’, making the child elements appear as siblings. This allows for such elements to appear in the same CSS grid or flexbox together, and prevents the need to forego HTML semantics for the benefit of layout.

However, as the CSS Display draft points out, “this is not implemented correctly in major browsers, so using this feature on the Web must be done with care as it can prevent accessibility tools from accessing the element’s semantics”. Adrian substantiates this, confirming that, for VoiceOver, Safari in particular will fail to correctly parse tables, announce lists or make buttons easily actionable when display: contents is applied.

It’s no wonder developers are calling Safari “the new Internet Explorer”.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.