ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progress bar.

ARIA is implemented in most popular browsers and screen readers. However, implementations vary and older technologies don't support it well (if at all). Use either "safe" ARIA that degrades gracefully, or ask users to upgrade to newer technology.

Accessible Rich Internet Applications (ARIA)

Working Draft

Mozilla

Using ARIA

These documents are loaded with information but not a lot of it is directly usable.

ARIA Examples

Some examples of how I have used ARIA follow.

Always use proper semantic HTML.

role="main"

<main class="content" role="main">

role="banner"

<header class="site-header" role="banner">

role="form"

<form id="js--submit" role="form" action="" method="post">

role="checkbox"

<input id="remember" name="remember" type="checkbox" role="checkbox" checked aria-checked="true"> Remember Me

role="navigation"

<nav role="navigation">

role="article"

<div class="js--article-item" role="article">

role="complementary"

<div class="bs-sidebar hidden-print" id="menu" role="complementary">

role="search"

<button class="js--search-item" role="search">Search</button>

role="presentation"

<div class="header-logo" role="presentation">

<footer role="presentation">

role="button"

<a class="left carousel-control" href="#carousel-media" role="button" data-slide="prev">
<a class="right carousel-control" href="#carousel-media" role="button" data-slide="next">

<div class="item active">
    <div class="container">
        <div class="carousel-caption">
            <h1>WELCOME TO URBANIC</h1>
            <p>CHOOSE THE ONE SUITABLE FOR YOU</p>
            <p><a class="btn btn-lg btn-green" href="#" role="button" style="margin: 20px;">View Demo</a> 
            	<a class="btn btn-lg btn-orange" href="#" role="button">Free Download</a></p>
        </div>
    </div>
</div>

role="menu" and role="menuitem"

<ul class="dropdown-menu" role="menu">
<li role="menuitem"><a href="#"><img src="img/flags/us.png" alt="United States"> US</a></li>
<li role="menuitem"><a href="#"><img src="img/flags/de.png" alt="Germany"> DE</a></li>
<li role="menuitem"><a href="#"><img src="img/flags/es.png" alt="Spain"> ES</a></li>

 
<div class="js--nav-inner" role="menu"></div>

role="group"

<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropdown
  <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
  <li><a href="#">Dropdown link</a></li>
  <li><a href="#">Dropdown link</a></li>
</ul>
</div>

role="dialog"

<div class="modal fade" tabindex="-1" role="dialog" id="results-container">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

role="tabpanel" and role="tabpanel"

<div class="col-md-6 col-sm-12">
	<h3 class="bold">DIGITAL TEAM</h3>
	<h1 class="heading bold">Best Design Agency from California</h1>
	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li class="active"><a href="#design" aria-controls="design" role="tab" data-toggle="tab">DESIGN</a></li>
		<li><a href="#mobile" aria-controls="mobile" role="tab" data-toggle="tab">MOBILE</a></li>
		<li><a href="#social" aria-controls="social" role="tab" data-toggle="tab">SOCIAL</a></li>
	</ul>
	<!-- tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="design">
			<p>Duis aute irure dolor in <a href="#">reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed id est tincidunt, iaculis nulla vel, sodales metus. Morbi interdum accumsan augue, in accumsan neque lacinia sed. Fusce cursus eu ligula ut gravida.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
		</div>
		<div role="tabpanel" class="tab-pane" id="mobile">
			<p>Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
			<p><a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
		</div>
		<div role="tabpanel" class="tab-pane" id="social">
			<p>Pellentesque elementum, lacus sit amet <a href="#">hendrerit</a> posuere, quam quam tristique nisi, nec ornare ligula magna id nisl. Donec blandit enim ac semper facilisis. Curabitur eu laoreet mauris, eget fermentum velit.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
		</div>

	</div>
</div>

role="separator"

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

role="toolbar"

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
  </div>
</div>

role="listbox"

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
    </div>
    <div class="item">
      <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
    </div>
    <div class="item">
      <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

aria-labelledby=

<figure aria-labelledby="duck-trio" role="group">
    <img height="250px" src="http://www.hdwallpapersfreedownload.com/uploads/large/cartoons/mickey-mouse-donald-duck-hd-wall-paper.jpg" alt="Sally and Friends Singing Trio">
    <figcaption id="duck-trio">
        Sally and Friends Singing Trio singing <cite>Duck Soup</cite>
    </figcaption>
</figure>

aria-hidden="true"

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

aria-expanded="false"

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

aria-label="Close"

<div class="modal fade" id="searchResults">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Search results</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>