Skip to content

Docs: Rules table icon column and icons are inaccessible #13376

@MHLut

Description

@MHLut

The last column of the rules table produced by crates/ruff_dev/src/generate_rules_table.rs is inaccessible:

  • The column has no text in its heading cell.
  • Every column heading cell misses the scope attribute.
  • There is no descriptive text for the icons.

There is a title attribute on a span surrounding each icon, but title attributes do nothing accessibility-wise.

Possible solution

A solution could be to use visually-hidden spans with descriptive text and hide the icons.

This code:

<td style="text-align: right">
  <span title="Rule is stable" style="opacity: 0.6">✔️</span>
  <span title="Automatic fix available">🛠️</span>
</td>

Could become this:

<td style="text-align: right">
  <span class="visually-hidden">Rule is stable</span>
  <span title="Rule is stable" style="opacity: 0.6">✔️</span>
  <span class="visually-hidden">Automatic fix available</span>
  <span title="Automatic fix available">🛠️</span>
</td>

This solution reuses the existing copy and makes a minor change to the table generator.

A bonus to this approach is that tools like Google Translate translate regular text on the page, whereas they ignore attribute contents (like title or aria-label).

Further accessibility concerns

The solution I mentioned above is only helpful for screen reader users, which leaves an accessibility gap:

The title attribute on the icons only works for desktop users who can hover over the icon with a mouse. This leaves out mobile users and anyone who cannot hover or use a mouse (e.g., keyboard or speech recognition software users).

If you want to use tooltips, there should be other ways to trigger them (for example, by acting on keyboard focus, using toggle tips).

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationhelp wantedContributions especially welcome

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions