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 16 August 2019.

Screen reader support for aria-current
=date"="location"="page"="step"="time"="true"Notes
Jaws/ChromeYesYesYesYesYesYes
Jaws/Edge 44NoNoNoNoNoNoIssue #48
Jaws/Edge 77YesYesYesYesYesYes
Jaws/FirefoxYesYesYesYesYesYes
Jaws/IEYesYesYesYesYesYes
Narrator/Edge 44NoNoNoNoNoNo
NVDA/ChromeYesYesYesYesYesYes
NVDA/Edge 44YesYesYesYesYesYes
NVDA/Edge 77YesYesYesYesYesYes
NVDA/FirefoxYesYesYesYesYesYes
NVDA/IEYesYesYesYesYesYes
TalkBack/Chrome??????
TalkBack/FirefoxNoNoNoNoNoNo
VoiceOver (iOS)/SafariNoYesYesYesYesYes
VoiceOver (MacOS/SafariYesYesYesYesYesYes

Screen reader demos