Table of Contents Show
If you have a website, it means you have used HTML for building the site and its elements. HTML is one of the largest languages used online and is very basic. Most websites today use HTML5, which offers great flexibility in terms of designing, but when it comes to accessibility, HTML has its limitations.
If you want to stay ahead of the competition and drive organic traffic to your website, then you need to consider using ARIA for improving your website navigation and accessibility. This way, you can ensure that you are first in line when any new assistive technology or interface hits the market.
Improving Website Accessibility Using ARIA
ARIA is an acronym for accessibility standards called Web Accessibility Initiative – Accessible Rich Internet Applications. Here is why you need ARIA implementation in your websites and how to use ARIA for enhancing homepage elements and overall navigation.
Defining Content
Most of the websites on the internet are built using HTML (around 83% of the websites use HTML). HTML includes a lot of tools for website design and UI elements, but when it comes to accessibility, HTML alone cannot help you. It uses a hierarchical process of relating elements to each other by forming a parent-child relationship. This relationship among the elements if good for defining the web content, but not for defining user interfaces.
For example, most of the websites use buttons to control an area of content. These buttons within the sibling elements have the same parent element. However, in HTML, these elements don’t have a direct relationship, which makes it harder to define UI elements on the website. Thus, when using assistive technologies like speech input, you will face trouble defining which UI element controls which area of content.
Elements and Page Areas
Another reason why ARIA is a necessity for websites is that HTML doesn’t allow you to separate structure (image/ video) from intent. For example, if you want to turn an image into a clickable button by using a link, you can simply use ARIA to define such relationships. HTML, on the other hand, defines images as only images. So, if you want to use such elements in your website and don’t know your way around HTML, consider consulting professional website maintenance company Dubai.
Another limitation posed by HTML is that it doesn’t allow you to define certain areas of a page. For example, by using ARIA, you can define your menu on the main page like navigation and the content of the article as the main content. This makes it easier for the viewers to navigate across your website.
ARIA on Homepage Elements
Now, Let’s look at how you can use ARIA across different attributes and elements of your website to increase accessibility.
Navigation
Let’s start with the navigation of the website. Let’s say your site has a few types of navigations like a drop-down menu and a smaller menu that has several options for users. For enhancing accessibility, you need to mark these as role = “navigation”.
Let’s look at a basic HTML code before ARIA:
<div id=’menus’>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Login</li>
<li>Account</li>
<li>Settings</li>
</ul>
</div>
Now, let’s use ARIA for defining these landmarks to understand the intent behind each menu to make it easier for technologies to interpret. Here is an example of adding ARIA attributes to the above code:
<div id=’navigation-menu’ role=’navigation’ aria-label=’Main Navigation’>
<ul role=’menu’>
<li role=’menuitem’>Home</li>
<li role=’menuitem’>About</li>
<li role=’menuitem’>Services</li>
<li role=’menuitem’>Portfolio</li>
<li role=’menuitem’>Contact Us</li>
</ul>
</div>
<div id=’user-menu’ role=’navigation’ aria-label=’User Menu’>
<ul role=’menu’>
<li role=’menuitem’>Login</li>
<li role=’menuitem’>Account</li>
<li role=’menuitem’>Settings</li>
</ul>
</div>
Sidebar
Let’s look at how we can enhance the accessibility of the sidebar. We are going to assume that the sidebar contains basic information. The following is the basic HTML code without ARIA:
<aside id=’sidebar’>
<div>
<h2>About</h2>
<p>Portfolio</p>
<p>Contact Us</p>
</div>
<div>
<h2>Related Posts</h2>
<ul>
<li>Post</li>
<li>Blog Post</li>
</ul>
</div>
</aside>
Now, to define each content on the sidebar, we will use “complementary” and “navigation” attribute to show the user that the sidebar contains additional information. For example,
<div role=’complementary’>
<h2>About</h2>
<p>Portfolio</p>
<div role=’navigation’ aria-labelledby=’posts-heading’>
<ul role=’menu’>
</div>
After using these two ARIA attributes the final HTML code looks something like this:
<aside id=’sidebar’>
<div role=’complementary’>
<h2>About</h2>
<p>Portfolio</p>
<p>Contact Us</p>
</div>
<div role=’navigation’ aria-labelledby=’posts-heading’>
<h2 id=’posts-heading’>Related Posts</h2>
<ul role=’menu’>
<li role=’menuitem’>Post</li>
<li role=’menuitem’>Blog Post</li>
</ul>
</div>
</aside>
Now, you can see each menu item has been explained in detail using ARIA attributes.
Content
Lastly, lets see how we can use ARIA attributes for dividing content area on our websites. For the main content we will use role=”main”, role=”button” and role=”tooltip” to identify our content area, and using images as a button with link.
The following is the HTML basic code before ARIA:
<div>
<img src=”$” onclick=”$” />
<p> Blue dress
<a href=”$” onclick=”$”>scelerisque</a>
</p>
<form action=”$”>
<input type=”text” placeholder=”Blue Cocktail Dress” name=”search”>
<button type=”submit”>Find It</button>
</form>
</div>
Now, lets add ARIA attributes to this code:
<div role=”main”>
<img src=”$” onclick=”$” role=”button” />
<p> Blue Dress
<a href=”$” onhover=”$” role:’tooltip’>scelerisque</a>
</p>
<div role=’search’>
<form action=”#”>
<input type=”text” placeholder=”Blue Cocktail Dress” role=’textbox’>
<button type=”submit” role=’button’>Find It</button>
</form>
</div>
As you can see, by using ARIA attributes, the role of every element is defined correctly, making it easier for users to access your website. A small mistake in the code can ruin your whole navigation, so do consider approaching Spiral Click’s website designing experts in Dubai to help with your HTML codes.
Making Your Website More Accessible!
These are some of the best practices to use ARIA on your homepage elements to improve overall navigation and accessibility. This is just a small portion of ARIA implementation on your site; you can start from these elements and work your way through to make your website more accessible. By integrating ARIA into your wireframe, you will be well equipped to handle any new technology that may arise like voice search, etc.
It is time you embraced ARIA into your site code to enhance organic website traffic and increase conversion rates.
