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?


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.

  • Can´t you just set it to visibility:hidden? You can also put it on <div style="display:none" – The Student Jun 14 at 10:58
  • 1
    Both visibility:hidden and display:none will remove the element from the accessibility tree and hide the content from all visitors. These items will not be available to assistive technology or sighted visitors. – Josh Jun 14 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy