1. 3
    Use WAI-ARIA Attributes to improve Web Accessibility of your Skeleton Loader
    2m 13s

Use WAI-ARIA Attributes to improve Web Accessibility of your Skeleton Loader

InstructorWill Mendes

Share this video with your friends

Send Tweet

Accessible Rich Internet Applications Suite — WAI-ARIA — defines a way to make Web accessible to people with any type of disabilities and it’s also a good practice for skeleton loaders.

Attributes such as tabindexrole, and aria-* are essential for assistive technologies such as screen readers. So that, users with any type of visual disabilities can understand that the specific state of the fragment of your page is currently loading, having that validated by using different tools, such as Lighthouse integration via Chrome Devtools, as an example.

~ 2 years ago

Are role=progressbar and accompanying aria attributes suited for a skeleton state of a component?

If you have multiple skeleton components then you'll be rendering a large amount of progress indicators to the user which may be read to the user.

You also don't provide a current value of progress to the user, so setting a max and min value doesn't make much sense?

Just my 2 cents, but I think the aria roles and attributes may negatively benefit the accessibility of the page.