Headings

  • Navigating through the <h1> and <h2> give a user an overview of a page and how its content is structured. The <h3> through <h6> elements provide a quick understanding of the details in each section.
  • Heading tags should be in order. That means an <h1> is followed by an <h2>, an <h2> is followed by a <h2> or <h3> and so on. It is ok to skip heading levels when going up in order (ex. <h4> to <h1>).
  • Keep heading tags consistent. Inconsistently implementing headings can create confusion and frustration for users using assistive technologies.
  • Do not style text to give the visual appearance of headings - use actual heading tags.

WCAG 2.0 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.

I’m writing the code,

but I do not realize,

hours have gone by.

My eyes are bloodshot,

My fingertips are bleeding,
but I carry on.

Tables

  • Tables with one header and simple data are fairly accessible out of the box and may not need additional accessibility updates. Always use the simplest table configuration possible.
  • When your tables get more complex, use the <th> element to identify the header cells by adding a scope attribute. For header rows use <th scope="row">. For header columns use <th scope="col">
  • Add the optional <caption> element before the table content to give users more information on the table contents. Think of it as a headline for your table.

Resources

WCAG 2.0 Guidelines

1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Option #1: Table with one header

Date Event Venue
3 February Surprise Party Party Town USA

Option #2: Table with two headers and caption

Color Names in Multiple Languages
Color French German Italian Portuguese Spanish
Red rouge rot rosso vermelho rojo
Orange orange orange arancione laranja anaranjado
Yellow jaune gelb giallo amarelo amarillo
Green vert grün verde verde verde
Blue bleu blau blu azul azul
Purple pourpre lila porpora roxo morado

Option #3: Complex Table

Kingdom Phylum Class Order
Animalia Chordata Mammalia Carnivora
Animalia Arthropoda Insecta Lepidoptera
Animalia Echinodermata Asteroidea Forcipulatida
Family Genus Species Common
Felidae Panthera Panthera tigris Tiger
Danaidae Dannaus Plexippus Monarch Butterfly
Asteriidae Asterias Asterias amurensis Northern Pacific seastar