summary attribute isn’t intended to be displayed on
the screen (for that, you should probably use a
caption element), but it may be used to provide extra
information about the table’s contents for non-visual web browsers. For
example, a user accessing the web page with a screen reader may find a
summary useful—it lets the user decide at that
point whether or not the table is of any use or interest. He or she can
skip straight to the following content if the answer to that question is
“no.” Of course, for sighted users, a quick glance at the table as a whole
provides an adequate summary.
table provides more information about its
<table summary="Interest rates start at 1.6% for Young Savers accounts and at 2% for Smart accounts"> <tr> <th>Account Type</th> <th>Interest Rate</th> </tr> <tr> <td>Smart</td> <td>From 2%</td> </tr> <tr> <td>Young Saver</td> <td>From 1.6%</td> </tr> </table>
The value for
summary is a brief summary of the table’s structure
This attribute’s compatibility is debatable. No browser renders it on the page, so it’s difficult to say whether or not any browsers have difficulties with it. The biggest question regarding its compatibility is really centered on assistive technology—for example, screen readers—and whether they are capable of retrieving that useful summary information.