Proper Heading For A Table

A matter of semantics. If I have a HTML page that is basically one big table, what element do I use for a header? Ordinarily, you'd use a h1 for the heading of the page, and a cap

Solution 1:

A table caption can contain free-form content. You could include a description of the table within the caption element, leaving the title for a heading element, and it wouldn't look silly at all.

The spec for the caption element contains an example:

In the abstract, this table is not clear. However, with a caption giving the table's number (for reference in the main prose) and explaining its use, it makes more sense:

<caption><p>Table1.<p>This table shows the total score obtained from rolling two
six-sided dice. The firstrow represents the valueof the first die,
the firstcolumn the valueof the second die. The total is given in
the cell that corresponds to the valuesof the two dice.
</caption>

If the table is self-explanatory, you can leave out the caption, but I still recommend having a document-level heading. Headings are a crucial part of the document outline while caption does not play a role (and, notably, neither does the title element, even though it represents the document title). Even though no real-world implementations of the outline exist anyway, you can't go wrong with having a document-level heading.

Solution 2:

I think one concern should always be how it ends up getting presented to screen-reader users.

It seems that the caption element gets exposed by some platform accessibility APIs in a special way (e.g., in the IAccessible2 API as IA2_ROLE_CAPTION with a IA2_RELATION_LABEL_FOR) but not in all of them (for example, Apple’s AX API doesn’t seem to do anything so special with it).

In comparison, I think h1 and all other headings always get exposed with a heading role. And screen readers consistently expose all headings in a way to facilitate navigation within documents.

So I think maybe for screen-reader users, between caption and h1: In the context the question describes, if a document’s going to have one and not the other, it’s probably best that it be the h1.

Solution 3:

There are not really standards too what to use in a situation like this. You're best off just picking the one that looks better and feels more appropriate for the page. Like you said both look silly so just use the one that fits better. Even then you can always customize in CSS what the h1 or caption look like so it isn't an end-all be-all type deal.

Elements tend to be used for certain things, and some do have certain purposes, but visual things like h1 are not standardized.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element