One undeniable fact remains that the web trends are rapidly changing and with the advancements in web development, a dramatic improvement in the web usability and better responsiveness can be observed.
Today, web developers prefer a dynamic approach (web apps featuring desktop size) rather than static approach (page-based websites). For this, developers make a great use of AJAX and JavaScript, and designers are deploying JavaScript, HTML and CSS to create intuitive and appealing widgets and controls.
Moreover, with the latest tools and approaches, you can make the dynamic web UI accessible by a gigantic potential user base (including people with disabilities), which was a cumbersome task earlier.
Let’s consider the following example.
Code Snippet:
<ol>
<li id=”ls1Tab”> <a href=”#ls1Panel”>Tab 1</a> </li>
<li id=”ls2Tab”> <a href=”#ls2Panel”>Tab 2</a> </li>
<li id=”contestTab”> <a href=”#contestPanel”>Tab 3</a> </li>
</ol>
<div>
<div id=”ls1Panel”> Here goes the content for Tab 1 </div>
<div id=”ls2Panel”>Here goes the content for Tab 2</div>
<div id=”contestPanel”>Here goes the content for Tab 1</div>
</div>
The aforementioned code snippet represents the markup for a tab widget that is not including ARIA labeling, thus it is not able to precisely describe the form and function of the widget.
WAI-ARIA: A Foreword
The W3C offers WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) suite that facilitates the completion of the missing semantic that is required by assistive technology and it thus helps make the web content accessible to the people with disabilities. It is especially meant for those who are dependent on the screen readers and can’t access the mouse. With ARIA, developers can inject the special attributes to the markup and make their widgets more comprehensible and descriptive. Roles and states offered by the ARIA help ensure a better UI widget with desktop-style controls.
The attributes of ARIA include:
- Roles – It epitomizes the features of widgets, which are not available in HTML 4. This includes, menu bars, sliders, dialogs and tabs.
- States – It defines whether an element is busy, selected, hidden or disabled. It thus, exhibits the current interaction status of an element to the assistive technology.
- Properties – It describes the attributes of the widgets, like whether it can be dragged or not, if it features an associated popup, and so on.
The browser can automatically interpret all the above mentioned features of ARIA and translate that to the native accessibility APIs of the OS. The assistive technologies can recognize the presence of ARIA and interact with the custom controls conveniently. While running a web-based app, the assistive technologies empowers the users to understand the functioning of desktop applications, this approach is capable of delivering consistent and smooth UX (user experience). It thus, makes it superior than the previous web app development approach.
Now, here is a code snippet to represent the markup for the tab widget featuring ARIA attributes.
Code Snippet:
<ol role=”tablist”>
<li id=”ls1Tab” role=”tab”>
<a href=”#ls1Panel”>Lesson 1</a>
</li>
<li id=”ls2Tab” role=”tab”>
<a href=”#ls2Panel”>Lesson 2</a>
</li>
<li id=”contestTab” role=”tab”>
<a href=”#contestPanel”>Contest</a>
</li>
</ol><div>
<div id=”ls1Panel” role=”tabpanel” aria-labelledby=”ls1Tab”>Lesson 1 content goes here</div>
<div id=”ls2Panel” role=”tabpanel” aria-labelledby=”ls2Tab”>Lesson 2 content goes here</div>
<div id=”contestPanel” role=”tabpanel” aria-labelledby=”contestTab”>Contest content goes here</div>
</div>
Due to the amazing benefits of implementing ARIA, today, it has been widely adopted by the latest browsers (including Safari, Chrome, Firefox, Opera and more), numerous assistive technologies (like Orca screen readers). Moreover, you can also witness its usage in the JavaScript widget libraries jQuery UI, Dojo Dijit, Google Closure and a lot more.
For making presentational changes:
Presentation of an app or widget is quite crucial, as it will help you draw the attention of viewers and keep them engaged. Thus, it is imperative to make appropriate strives and ensure a captivating and visually appealing presentation of your web app or widget. By using CSS, you can easily make desired dynamic changes in its presentation. You can dynamically make changes to the look and feel of the web content; for instance, you can change the background color of a checkbox when user checks it, make the green border around the valid data, etc.
ARIA offers a huge list of properties and states, using those attributes directly in the code you can directly retrieve the current state and properties associated with a UI widget.
State Changes in ARIA:
For instance, area-checked represents the current state of a radio button or checkbox.
area-grabbed represents that an object has been selected from the drag and drop function.
There are many more like this, click here for more.
Let’s have a look at the following code snippet that epitomizes the HTML code to create a menu while using the properties of ARIA.
Code Snippet:
<ul id=”fontMenu” role=”menu” aria-hidden=”true”>
<li id=”times-new-roman”
role=”menuitemradio”
tabindex=”-1″
aria-controls=”st1″
aria-checked=”true”>Times-new-roman</li>
<li id=”serif”
class=”menu-item”
role=”menuitemradio”
tabindex=”-1″
aria-controls=”st1″
aria-checked=”false”>Serif</li>
…
The following code snippet offers the CSS code used for enhancing the appearance of the selected items. In this code, no custom class name has been used.
Code Snippet:
li[aria-checked=”true”] {
font-weight: bold;
background-image: url(‘images/abc.png’);
background-repeat: no-repeat;
background-position: 6px 12px;
}
To update the “aria-checked” property in the form, the JavaScript written below is required. Here also, the custom class name has not been added or removed.
Code Snippet:
var processMenuChoice = function(item) {
item.setAttribute(‘aria-checked’, ‘true’);
var sib = item.parentNode.firstChild;
for (; sib; sib = sib.nextSibling ) {
if ( sib.nodeType === 1 && sib !== item ) {
sib.setAttribute(‘aria-checked’, ‘false’);
}
}
};
Visibility Changes in ARIA:
To indicate the visibility change for a UI element, the value for the aria-hidden should be changed, and for visually hiding an element in CSS, you can set display:none. Let’s deep-dive into this simple web form boasting tooltips to describe the instructions corresponding to the entered value. Here is the relevant chunk of code.
Code Snippet:
<div>
<label id=”tp1-label” for=”first”>First Name:</label>
<input type=”text” id=”first” name=”first” size=”19″
aria-labelledby=”tp1-label”
aria-describedby=”tp1″
aria-required=”false” /><div id=”tp1″
role=”tooltip”
aria-hidden=”true”>The first name is not mandatory</div>
</div>
CSS for the aforementioned markup is as follows:
Code Snippet:
div.tooltip[aria-hidden=”true”] {
display: none;
}
And JavaScript to update the aria-hidden attribute in the form will be as.
Code Snippet:
var showTip = function(el) {
el.setAttribute(‘aria-hidden’, ‘false’);
}
Create a ravishing dynamic web apps and widgets and reach out a wider audience base while reaping the amazing benefits of WAI-ARIA. Its blissful attributes make it possible to conveniently target the viewers with disabilities. Follow the latest web trends and ensure an updated and intriguing design to entice and engage your viewers with your interesting web apps.
About The Author
