Buttons

An example of buttons with good and bad semantics. Note that buttons with good semantics appear in the TAB order and can be activated with the SPACE and ENTER keys.

Source: Matt Long, @longmatthewh

See the Pen HTML Semantics: The Button by Matt Long (@longmatthewh) on CodePen.

Additional References:


Tables

An example of a table with semantic markup. Note that the table is given a Table Caption which acts as its title, and properly marked up table headers with scope attributes help screen reader users make correct associations between table headers and the data within the table.

Source: Franklyn Roth, @franklynroth

See the Pen Accessible Data Tables by Franklyn (@franklynroth) on CodePen.

Additional References:

Are you a Drupal Webmaster?

You may be looking for the Accessibility Examples page, which demonstrates how to correctly use common Drupal elements on your web pages, such as headings, links, images, and tables.

Review Common Accessibility Examples in Drupal