aria-current design patterns

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

July 2016
MonTueWedThuFriSatSun
123
45678910
11121314151617
18192021212223
24252627282930
31

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

  1. Do this
  2. Do that
  3. Do the other

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

Screen reader support

Unless otherwise stated, tests were carried out on the latest OS, browser, and screen reader version. Last updated on 3rd February 2018.

Screen reader support for aria-current
=date"="location"="page"="step"="time"="true"Notes
Jaws 18/ChromeYesYesYesYesYesYes
Jaws 2018/EdgeNoNoNoNoNoNoIssue #48
Jaws 18/FirefoxYesYesYesYesYesYes
Jaws 18/IEYesYesYesYesYesYes
Narrator/EdgeNoNoNoNoNoNo
NVDA/ChromeYesYesYesYesYesYes
NVDA/EdgeYesYesYesYesYesYes
NVDA/FirefoxYesYesYesYesYesYes
NVDA/IEYesYesYesYesYesYes
TalkBack/Chrome??????
TalkBack/FirefoxNoNoNoNoNoNo
VoiceOver (iOS)/SafariYesYesYesYesYesYes
VoiceOver (MacOS/SafariYesYesYesYesYesYes

Screen reader demos