Think about ARIA roles when choosing a WordPress theme – Updated

ARIA landmark roles are used to improve accessibility and provide useful navigation points that a screen reader recognizes and can find quickly.

The role information is written into the HTML as an attribute of any element that fills a particular role. In the code, they look like this:

<header role="banner">
<nav role="navigation">

The current list of landmark roles includes:

  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

Some WordPress themes come with ARIA landmark roles built in from the start. It’s easy to find out if your theme uses them. One way is to look at your page source and search for “role” to see if or where it appears in the source code.

If you have the Web Developer Toolbar installed in your browser, use the Information menu to look at ARIA roles.

Display ARIA roles
Display ARIA roles in Information menu

This blog uses a slightly modified version of the basic WordPress Twenty Eleven theme. It’s an excellent theme in terms of ARIA information. Using the Display ARIA roles command from the Web Developer Toolbar, this blog looks like this:

Web Teacher ARIA roles
Web Teacher ARIA roles visible above the fold

One of the things you want to do when using ARIA roles is make sure that every section of your page that a screen reader user would want to find quickly has an appropriate landmark role. Twenty eleven has this covered.

I’m using a theme called Oxygen on my new blog Old Ain’t Dead.

Old Ain't Dead ARIA roles
Old Ain’t Dead ARIA roles

The only roles that comes out of the box with this theme identifies the navigation elements. A bit further down the page the social media sharing buttons do have role=”button” but the plugin maker deserves the credit for this, not the theme designer.

It’s easy to go into the theme files and add roles where you want them. For example. in the header.php file, I added role=”banner” like this:

adding a role
Adding a role to the header.php file

This is immediately reflected on the blog when I upload the header.php file.

the new banner role
The blog displays the banner role

I don’t regard this as a perfect solution, however. I am using a child theme. I made the adjustment in the header.php file of the parent theme.

Turns out you can copy theme files such as header.php, footer.php, sidebar.php and others into your child theme folder, add the ARIA role where you want it, and that version of the file is what gets served. Updates to the parent theme don’t cause the ARIA roles to disappear.

aria roles
ARIA Roles displayed on Old Ain’t Dead

Look at the beautiful ARIA roles on my blog now. And I have role=”contentinfo” in the footer, too!

A theme on wordpress.com

The two themes I’ve mentioned are self-hosted blogs, and I have control over the theme files. I also have a blog on wordpress.com – a free blog that I have no control over. I’m using a pretty old theme that I haven’t changed in years. It’s inadequate and I cannot do anything to fix it.

First 50 Words ARIA roles
First 50 Words ARIA roles

The two navigation landmarks you see come from the WordPress header bar, not from the theme.

I can change the theme to a more modern one, but if I stay with this one, there’s nothing. This is the incentive I need to take some time to look for a more current theme with ARIA roles included.

When you choose a WordPress theme, keep accessibility in mind and look for ARIA roles built into the theme by the designer.

For more information, see ARIA Roles 101.

4 thoughts on “Think about ARIA roles when choosing a WordPress theme – Updated”

Leave a Reply