Do our tables / data grids support alt text?

[mma1504]

Hi Paste team,

Wondering if Paste tables & data grids support alt text for cells? I've been running into several instances where we're trying to communicate that a metric in a certain column might not apply to a given row. We're exploring different options - writing N/A, using a dash, etc. - and I want to know what resources I have at my disposal!

For more context, I'm referencing this: http://section5oh8.com/pdf-remediation/how-to-handle-blank-data-cells-in-accessible-tables/

Thanks!

[SiTaggart]

Hi @mma1504

Great question! Firstly, let me just say that those specific guidelines relate to accessible pdf generation, which is slightly different from creating experiences for the web. I've never specifically had a request from an auditor to do the extra work for a web based table, but that's not to say it's not valid. Acronyms and abbreviations are notoriously wonky with assistive technologies.

So there are a couple of tools for this situation.

The abbreviation element

The abbreviation element in HTML is there to help us communicate the full meaning of an abbreviation or acronym. It allows you to display the shortened string, whilst providing the full string programmatically.

<abbr title="not applicable">N/A</abbr>

ARIA label

You can also achieve something similar with just the ARIA label attribute. This will a slightly different outcome where you would only hear the full string placed in the label attribute and the abbreviation wouldn't be available to you.

<Text as="span" aria-label="not applicable">N/A</Text>

Screen reader only text

Lastly, the Screen Reader Only component is available for us to provide extra, non-visual text content to users of assistive technology. We use this most commonly for text alternatives to visual only elements, such as icons.

My personal preference would be the abbr element in this instance, and this list is in order of preference in general.

Hope that helps

[mma1504]

This is so helpful! The abbr element sounds like a good solution to me!