In an attempt to improve the accessibility of a component I’m building at work, I ended up finding an ARIA attribute I’d never seen before: aria-details (MDN).

The component in question contains a cell which can contain a string, or be empty. If it’s empty, a message (nominally, “No reason given”) is displayed to the user, but this could allow for some ambiguity as to whether the reason was actually empty, or if it was set to the string used to indicate no reason was given.

Although now styled (below), those who use screen readers would likely still face the same ambiguity.

.mw-block-nodata {
  color: @color-subtle;
  font-style: italic;
}

(which looks like this, if you’re interested..)

No reason given

The idea..

<template #item-reason="{ item }">
  <div
    v-if="!item"
    class="mw-block-nodata"
    :aria-details="$i18n( 'block-user-no-reason-given-aria-details' ).text()"
  >
    {{ $i18n( 'block-user-no-reason-given' ).text() }}
  </div>
  <span v-else>
    {{ item }}
  </span>
</template>

which generates:

<td>
  <div class="mw-block-nodata" aria-details="No reason was given for this log entry">
    No reason given
  </div>
</td>

..didn’t work

I was expecting the screen reader to read out the aria-details attribute, but it didn’t :-(

Guess I’ll just use aria-label (MDN) then..!