Docs: Rules table icon column and icons are inaccessible

[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).

[MHLut]

Suggestions for the CSS portion of this fix are welcome!