Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
- Adrian Roselli describes – quite late on in his blog post – why he thinks skeletons (placeholder areas to display to the user while content is loading) are a bad idea. But he also describes how he would build one if he had to.
- Some skeletons have
aria-busy="true"
markup, which is designed to be temporarily ignored by screen readers, though few screen readers support it. Adrian recommends pairing it witharia-hidden="true"
for now at least. In practice, this means having two sibling nodes; one for the skeleton and one of the content.- When your content is loading, it should be hidden and have
aria-busy="true"
, and the skeleton node should be visible. When it has loaded, it should be flipped toaria-busy="false"
and the skeleton node should be set toaria-hidden="true"
. - You should have CSS which sets
display: none
onaria-hidden
content, and onaria-busy="true"
content.
- When your content is loading, it should be hidden and have
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.