The Case for Having a Role
Custom Element’s Best Friend
I have been designing and building web components for the Bolt Design System and I found myself using this a lot: the
What is a role?
According to W3C,
the Role Attribute defined in this specification allows the author to annotate markup languages with machine-extractable semantic information about the purpose of an element. In other words, a
role defines the semantic meaning of a particular element.
For example, I can assign a
role attribute to a
And that will indicate the same semantic meaning as this:
I am building out web components, which means I am creating custom elements. More often than not, I don’t have the luxury to always use the proper HTML elements and that could lead to poor accessibility. Take a list for example, in plain HTML, I would write this:
But as a web component, the markup becomes this:
<ds-list-item> do not carry any semantic meaning and screen readers would not be able to read the information as a list. This is where the
role attribute comes to the rescue!
I fixed it by adding a few
That’s it! It’s so simple. This method can apply to all kinds of elements, for a list of available roles, reference the MDN docs. Now go and build your own accessible web components.