TechWhirl (TECHWR-L) is a resource for technical writing and technical communications professionals of all experience levels and in all industries to share their experiences and acquire information.
For two decades, technical communicators have turned to TechWhirl to ask and answer questions about the always-changing world of technical communications, such as tools, skills, career paths, methodologies, and emerging industries. The TechWhirl Archives and magazine, created for, by and about technical writers, offer a wealth of knowledge to everyone with an interest in any aspect of technical communications.
Subject:Re: Alt text on HTML tables From:"Sweet, Gregory P (HEALTH)" <gregory -dot- sweet -at- health -dot- ny -dot- gov> To:"dick -at- rlhamilton -dot- net" <dick -at- rlhamilton -dot- net>, "techwr-l -at- lists -dot- techwr-l -dot- com" <techwr-l -at- lists -dot- techwr-l -dot- com> Date:Mon, 12 Jun 2023 12:35:31 +0000
Sorry to be dragging up a stale thread, but as I am catching up on the list, I’ve noticed that you did not get a good semantic reply to your question.
The answer is to use the <caption> element directly after the <table> element to title and describe the table for all users.
<table>
<caption> My example table </caption>
…other stuff…
</table>
If you truly only want the content to be visible to screen readers you can add an ‘sr-only’ class to your stylesheet so that the text is there for screen readers to see but hidden from all others.
<style>
.sr-only {
position: absolute;
top: -30em;
}
</style>
<table>
<caption> My example table<span class=’sr-only’>, This table does not contain real data and can be ignored. It presents information in the following format…</span></caption>
…other stuff…
</table>
Lastly you can apply aria-label, aria-labeledby, or aria-describedby properties to label and describe the table. -label labels the table directly. -labeledby and -describedby reference another element on the page (usually by id) to provide a label or description. -label and -labeledby turn the caption into the default description. Aria cardinal rules prefer the native html method of a <caption> visible to everyone. See: https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/
ATTENTION: This email came from an external source. Do not open attachments or click on links from unknown senders or unexpected emails.
Is there a way to add alt text to a table?
The alt attribute is not allowed on table, and I don’t see a good alternative.
I know that screen readers can read tables, but in this use case, the column and row labels are the only information of interest (the contents of the cells are examples that don’t add any value).
I’d like to able to add alt text that a screen reader would provide first, so the user could choose to skip the table itself. The alt text would identify the rows and columns and then state that the cell data are samples and don’t need to be read.
