What is the alternative to using a "summary" attribute of an HTML table for screen readers?

Question

Refer to the table attribute summary in MDN

Usage Note: Do not use this attribute, as it has been deprecated. Instead, choose one of these methods to add a description of a table:

• Use prose around the table (this method is less semantic).
• Add a description in the table's element.
• Add a description in a element, inside the table's element.
• Include the element in a element and add the description in prose next to it.
• Include the element in a element and add the description in prose inside a element.
• Adjust the table so that a description is not needed (e.g. use and elements).

A summary attribute will work for screen readers, but not show on screen. Since it is deprecated, What else I can use?

Answer 1

I would recommend using the <caption> element. It serves a very similar purpose to the summary attribute.

<caption> is visible by default, but you can position it off screen using CSS to make it visible only to screen readers.