The ARIA guidelines have a strong focus on ensuring scripted and dynamic content as well as interactive controls, such as sliders and menus, to be accessible with a keyboard. Most modern browsers and scripting libraries support ARIA, which consists of three main components, namely roles, properties, and states.
ARIA roles are an attribute given to elements to identify what their role or purpose is. Most HTML elements have a default role assigned to them, which can be overwritten to adjust the semantic context of the page structure and the elements that live within. In the following example, the <role="menu">
was given to the <ul>
tag to give context to the list, and ensure that the screen reader knows this is not a normal list of items, but in fact a menu:
<ul role="menu"> <li><a href="index.html">Home</li> <li><a href="delivery-rates.html">Our delivery service</li> <li><a href="contact.html">...