Daily Accessibility ReviewIcon-only status formatters lack text alternatives (Checked, IconIsDefault)

[github-actions[bot]]

Problem

Two table-cell formatter components use icon elements to convey boolean state (yes/no, enabled/disabled) without providing any text alternative. Screen readers skip or misread these cells.

formatter/IconIsDefault.vue

<template>
  <span v-if="row[col.value]">
    <span><i class="icon icon-checkmark" /></span>
  </span>
  <span v-else>
    <span><i class="icon icon-x" /></span>
  </span>
</template>

The icon-checkmark and icon-x icons carry semantic meaning ("yes" / "no") but are exposed to assistive technology with no text alternative and no aria-label.

formatter/Checked.vue

<template>
  <span v-if="checked">
    <i class="icon icon-checkmark" />
  </span>
  <span v-else class="text-muted">&mdash;</span>
</template>

Again, the checkmark icon has no accessible text. The em-dash fallback (—) will be read literally as "dash" by screen readers rather than conveying a "no" or "false" state.

WCAG 2.2 references

Criterion	Level	Description
[1.1.1 Non-text Content]((www.w3.org/redacted)	A	All non-text content has a text alternative that serves the equivalent purpose.
[4.1.2 Name, Role, Value]((www.w3.org/redacted)	AA	Programmatically determinable name for UI components.

Recommended fix

Hide the decorative icon from assistive technology and add a visually-hidden text alternative:

formatter/IconIsDefault.vue

<template>
  <span v-if="row[col.value]" :aria-label="t('generic.yes')">
    <i class="icon icon-checkmark" aria-hidden="true" />
  </span>
  <span v-else :aria-label="t('generic.no')">
    <i class="icon icon-x" aria-hidden="true" />
  </span>
</template>

formatter/Checked.vue

<template>
  <span v-if="checked" :aria-label="t('generic.yes')">
    <i class="icon icon-checkmark" aria-hidden="true" />
  </span>
  <span v-else class="text-muted" :aria-label="t('generic.no')">&mdash;</span>
</template>

Alternatively a visually-hidden <span class="sr-only"> text could be used.

Generated by Daily Accessibility Review · ● 3.4M · ◷

• expires on Jun 2, 2026, 8:32 AM UTC