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.

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

Option #4: Responsive Table

House Side House Address Other Other Address Senate Side Senate Address
Rayburn House Office Building 50 Independence Ave, SW Washington, DC 20515 Library of Congress 101 Independence Ave SE, Washington, DC 20540 Russell Senate Office Building 2 Constitution Ave NE, Washington, DC 20002
Longworth House Office Building 15 Independence Ave, SW Washington, DC 20515 Supreme Court 1 First Street, NE Washington, DC 20543 Dirksen Senate Office Building 100 Constitution Ave NE Washington, DC 20002
Cannon House Office Building 25 Independence Ave, SE Washington, DC 20003 Capitol Visitors Center First & East Capitol St SE, Washington, DC 20004 Hart Senate Office Building 150 Constitution Ave NE Washington, DC 20510
Capitol South Metro 307 First Street SE Washington, DC 20003 Federal Center Metro 401 3rd Street SW Washington, DC 20024 Union Station Metro 701 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.

Resources

WCAG 2.0 Guidelines

2.1.1 Keyboard - All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)

Tab 1

The important achievement of Apollo was demonstrating that humanity is not forever chained to this planet and our visions go rather further than that and our opportunities are unlimited.

Back to top