The global aria-description attribute provides a mechanism for the developer to describe or annotate the current element providing greater context for assistive technology users.
<div role="application"
aria-label="calendar"
aria-description="Game schedule for the Boston Red Sox 2021 Season">
<h1>Red Sox 2021</h1>
<div role="grid">…</div>
</div>The aria-description attribute is similar to aria-label in that both provide a text string to associate with the element, but a label should be short and concise, while the description can be longer as it is intended to provide more context and information.
<button aria-description="Take home a wonderful pooch">Adopt me</button>
Consider this input receives focus first in a popup, because it is the most important in the transaction. Use the aria-description to provide context to its purpose.
:
<label for="amount">Amount</label>:
<input id="amount" aria-description="Filter invoices with a total amount greater than this value" type="text">
<img src="https://live.staticflickr.com/34/68197649_3d367c97c3.jpg" alt="puppy in hand" aria-description="3 day old poodle puppy"/>