Accessible Code Examples
Discover commonly-used examples of accessible code and semantic HTML markup. Use these examples to guide the development of your own accessible websites and applications.
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:
- WAI-ARIA Authoring Practices 1.1 - Button
- The Anchor Button: Bad for Accessibility, Bad for Usability
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:
- WAI-ARIA Authoring Practices 1.1 - Table
- How-to: Create accessible data tables
- A Responsive Accessible Table
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