DEV Community

Antonin J. (they/them)
Antonin J. (they/them)

Posted on

Accessibility labels for content loading in React

I've really been enjoying learning about how to make applications and websites more accessible and recently wondered about how to appropriately label a loader for a side project React app I'm writing. After scouring Stackoverflow answers, and looking at what Bootstrap's solution is, I came across an article by some company called Dockyard. They all conflict in different ways. Finally, I followed an SO link to Fundamental UI. And came up with this idea:

const Loader = () => <div aria-label="Loading">loading...</div>;

const LoadContent = ({ isLoading, children }) => {
  return (
    <div aria-busy={isLoading} aria-live="polite">
      {isLoading && <Loader />}
      {!isLoading && children}
Enter fullscreen mode Exit fullscreen mode

Here's what it does (as I understand it):

  • aria-busy lets us indicate that the container is in the process of updating.
  • aria-live lets us indicate that the element is going to updated. The polite property indicates a background change (this might be a good place to add a prop to indicate if the content is main content, or background content)
  • aria-label lets us indicate the label for the element.

I made a Sandbox where you can check this out in action.

I'm still getting started with accessibility so I welcome any input on this.

Top comments (0)