Jump to main content

A11Y Style Guide

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.

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.

Lists

  • Creating accessible lists is fairly straight-forward and easy if you use the correct mark-up.
  • Use ol markup to group ordered lists; use ul markup to group unordered lists; and use dl markup to group terms with their definitions.
  • Simple comma-separated lists may not need list markup, but longer lists or groups of links should have it.

Ordered List

Best Nikola Tesla Quotes

  1. "Our virtues and our failings are inseparable, like force and matter. When they separate, man is no more."
  2. "The scientists of today think deeply instead of clearly. One must be sane to think clearly, but one can think deeply and be quite insane."
  3. "It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most gratifying results of intellectual evolution is the continuous opening up of new and greater prospects."

Unordered List

List of Unusual Dog Breeds

  • Beauceron
  • Belgian Malinois
  • Entlebucher Mountain Dog
  • Keeshond
  • Kooikerhondje
  • Mudi
  • Petit Basset Griffon Vendéen
  • Portuguese Podengo Pequeno
  • Schipperke
  • Xoloitzcuintli

Definition List

Vegetables That Are Technically Fruits
Avocados
Bell Peppers
Cucumbers
Eggplants
Pumpkins
Tomatoes
Zucchinis

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.

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

Option #4: Responsive Table

House Side House Address Other Other Address Senate Side Senate Address
House SideRayburn House Office Building House Address50 Independence Ave, SW Washington, DC 20515 OtherLibrary of Congress Other Address101 Independence Ave SE, Washington, DC 20540 Senate SideRussell Senate Office Building Senate Address2 Constitution Ave NE, Washington, DC 20002
House SideLongworth House Office Building House Address15 Independence Ave, SW Washington, DC 20515 OtherSupreme Court Other Address1 First Street, NE Washington, DC 20543 Senate SideDirksen Senate Office Building Senate Address100 Constitution Ave NE Washington, DC 20002
House SideCannon House Office Building House Address25 Independence Ave, SE Washington, DC 20003 OtherCapitol Visitors Center Other AddressFirst & East Capitol St SE, Washington, DC 20004 Senate SideHart Senate Office Building Senate Address150 Constitution Ave NE Washington, DC 20510
House SideCapitol South Metro House Address307 First Street SE Washington, DC 20003 OtherFederal Center Metro Other Address401 3rd Street SW Washington, DC 20024 Senate SideUnion Station Metro Senate Address701 First St. NE Washington, DC 20002

Tabs - draft

  • Be mindful of using tabs, as they are less discoverable by design.
  • Once a tab button is focused, other tabs can be selected with the arrow keys.
  • A tab's contents can be accessed via Tab (if there are focusable elements in the tab well) or PgDn (if there are no focusable elements in the tab well).
  • Be sure to update the values of the aria-posinset and aria-setsize attributes if you have more than three tabs.

Back to top