Design Template by Anonymous

Semantic Elements & ARIA Roles

Semantic elements and ARIA roles play a similar role in HTML coding. Semantic elements are elements that have a meaning, or a specific purpose, compared to more vague non-semantic elements like <div> or <span>. ARIA roles also provide semantic meaning to HTML content. Usually, a semantic element will have a pre-assigned ARIA role: <input type="radio"> has the radio role. On the other hand, the aforementioned <div> and <span> have no ARIA role by default. An element's ARIA role is determined by the element's role="role" inside the elements declaration.

Semantic Elements

Utilizing semantic elements instead of non-semantic elements is one thing that separates beginner code from code written by a more experienced developer. The primary benefits come in the clarity semantic elements provide in structuring your HTML. Instead of using multiple different <div> elements to structure a page, one could use many different semantic elements. For example: using <nav>, <article>, <header>, and <footer> elements to build the structure of a page, like in the provided image.

Building a page in this way allows your code to be maintained and edited much easier, for both you and anyone else who may have to work on it. It is much easier to tell what is what in HTML code when semantic elements are utilized compared to a non-semantic approach. This is especially relevant in a group/team setting, where many people are working together on a lot of HTML pages. Making sure the team is in agreement on using a semantic approach and using the same element types for the same purposes will make it much easier for everyone to work with each other's code.

ARIA Roles

As mentioned above, ARIA roles play a similar role to semantic elements. However, they are also used by screen readers and similar tools to provide better interaction with the Web on those devices. Many elements have default ARIA roles, especially semantic elements. Also, there are ARIA states and attributes tied to each role. These states and attributes can also be applied to HTML elements on their own without adding a role. For example: <article aria-labelledby="article-title"> or <a href="index.html" aria-current="page">. Utilizing ARIA roles allows your webpage to be more accessible, and therefore provide a better user experience to a wider audience.