How to Use ARIA in Your WordPress Site’s HTML

As WordPress keeps gaining popularity, more and more people are stepping away from basic HTML (Hypertext Markup Language) WebPages, and finding means to convert HTML to WordPress. This is due to the variety of features offered by the platform, such as WordPress template customization.

ARIA, or Accessible Rich Internet Applications, is an easy way to convey attributes of your HTML site to those visitors who rely on screen readers. It makes your website more accessible to its users and helps enhance user experience.

Making use of ARIA in one's HTML document allows browsers to modify the web pages for screen readers, which is presented in an accessibility tree format. ARIA drives the translation of the original HTML elements into this format.

ARIA is an excellent tool to provide equal accessibility and opportunity for all on the internet, which is a basic human right (as considered by the UN). It works in synergy with SEO (Search Engine Optimization) best practices, to enhance your website's reach, and is often also enforced by the law.

If you want to incorporate ARIA into your HTML code, the following ways would be best to do so:

Apply ARIA to Semantic HTML

Native HTML is not the best option to make accessible web content. However, there are some semantic elements provided by HTML that can help with it. One has to be careful when using ARIA in conjunction with these, as problems might arise otherwise.

Elements like <nav>, <header>, and <figure>, which describe the purpose of the HTML are called semantic elements, and using similar ARIA with them can prove to be redundant. It is not necessary to assign a role to a semantic element that already implies the role, and care should be taken that a new role is not assigned to an element that conflicts with its implied role.

Certain rules must be kept in mind while incorporating ARIA with semantic HTML to prevent discrepancies. The W3C (World Wide Web Consortium) provides such a list for reference of web developers. This prevents using HTML elements and ARIA roles that have the same purpose together and helps avoid redundancy and complications.

Add Roles to HTML Tags

You can add ARIA roles and attributes to pre-existing HTML elements. These help to indicate the purpose of an element and also specify the type of content it is supposed to hold. Be careful while selecting the roles, as only one role can be applied to each element.Some roles that can be used are:
  • Main: labels the main content of the site
  • Banner: indicates site identity
  • Search: used for a search form
  • Navigation: navigational elements
  • Complementary: supporting content
  • Contentinfo: information about the main content
The role of an element is assigned within the HTML tag. A role is actually used to define an element, and a definition cannot be two things. You have to choose the best definition (among the roles) for your element, and assign it that itself.

However, there is an option of nesting elements within each other. You can use this to your benefit, and nest elements with different roles inside each other according to your convenience. This makes it clear that a particular type of element is contained inside another type of element.

Include Attributes to Indicate States and Properties

Attributes are another method to incorporate ARIA into your website, which instead of defining the elements tell the screen reader something particular and important about them. ARIA attributes are of 2 types - States and Properties.

States are used to convey information to the screen readers about those features on the website that might undergo changes, or respond in some way after the user interacts with them. These include elements like radio buttons and checkboxes, which get checked or unchecked as the user selects or deselects them.

Properties are used to indicate those features or elements that remain static and are highly unlikely to change during the entire course of the website visit. These include elements like labels, which are used to provide information about another element. Another example of properties is the hierarchy levels used to indicate the level of an element.

Attributes (both states and properties) have a common notation (syntax) and always begin with aria- followed by the name of the specific state or property in use. For example:
  • Aria-checked (State): used to inform the filled status of a checkbox or a radio button to the screen reader.
  • Aria-labelledby (Property): used to note the labeling of one element by another (can even be applied to an image, to indicate the caption associated with it).


Creating accessible content forms the backbone of good web development. ARIA provides an excellent method for the same, and one can also conveniently convert HTML to WordPress. This helps make your site more user-friendly and accessible to everyone.

Read Also

Post a Comment