aria-current design patterns

Credit: this document was originally created by Léonie Watson and sourced from http://design-patterns.tink.uk/aria-current/.

The aria-current attribute indicates the element that represents the current item within a container or set of related elements. It is an enumerated type attribute that takes one of a number of predefined tokens ("page", "step", "location", "date" or "time"), or which may be set to "true".

aria-current="date"

Screen readers should announce "Current date" to indicate that Saturday 16th is the current date in the month.

Code

<table>
<caption>July 2016</caption>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td aria-current="date">16</td><td>17</td>
</tr>
<tr>
<td>18</td><td>19</td><td>20</td><td>21</td><td>21</td><td>22</td><td>23</td>
</tr>
<tr>
<td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
</tr>
<tr>
<td>31</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

Example

aria-current="location"

Screen readers should announce "Current location" to indicate the last link is the current location in the breadcrumb navigation.

Code

<nav aria-label="Breadcrumb">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/"> Contact us</a></li>
<li><a href="/" aria-current="location"> Phone numbers</a></li>
</ul>
</nav>

Example

aria-current="page"

Screen readers should announce "Current page" to indicate the first link is the current page in the navigation.

Code

<nav>
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Contact</a></li>
</ul>
</nav>

Example

aria-current="step"

Screen readers should announce "Current step" to indicate the first link is the current step in the process.

Code

<ol>
<li><a href="/" aria-current="step">Do this</a></li>
<li><a href="/">Do that</a></li>
<li><a href="/">Do the other</a></li>
</ol>

Example

aria-current="time"

Screen readers should announce "Current time" to indicate the keynote is happening at the current time in the schedule.

Code

<ul>
<li>9am to 10am: Welcome</li>
<li aria-current="time">10am to 11am: Keynote</li>
<li>11am to 11.30pm: Break</li>
<li>11.30am to 1pm: Workshop</li>
<li>1pm to 2pm: Lunch</li>
<li>2pm to 3pm: Lecture</li>
<li>3pm to 3.30pm: Break</li>
<li>3.30pm to 5pm: Workshop</li>
</ul>

Example

aria-current="true"

Screen readers should announce "Current" to indicate the first link is the current link in the set.

Code

<ul>
<li><a href="/" aria-current="true">Apples</a></li>
<li><a href="/">Bananas</a></li>
<li><a href="/">Cherries</a></li>
</ul>

Example