Close up photo of a concrete wall.

8-minute read time.

This guide is meant to help instructors, designers, and anyone creating digital learning materials.

Digital accessibility is not just a compliance checklist – it is a commitment. When we design content that works for everyone, regardless of ability or context, then we can build learning environments where all students can participate fully.

For a student with low vision, accessibility might mean readable contrast. For someone using a screen reader, it means clear structure and properly formatted alt text. For many learners, it’s the difference between engaging with course materials independently or not at all.

One of the most common areas where accessibility breaks down is with images, whether you’re embedding a simple diagram or a complex chart like the periodic table, choosing the right type of description: alt text, caption, or long description, matters.

This post walks through the differences. To make these differences easier to understand, we’ll use an image of the periodic table (see Figure 1.1) as our example.

“Periodic table showing all chemical elements arranged by atomic number. A complete long description is linked in the caption.
Figure 1.1 The periodic table of the elements. The periodic table shows elements arranged by atomic number, symbol, and atomic weight. OpenStax Chemistry 2e by Paul Flowers, Klaus Theopold, Richard Langley, and William R. Robinson, PhD. Licensed under CC BY 4.0. [Read the full long description of the periodic table.]

WCAG 2.1 at a Glance

What is WCAG?

WCAG (Web Content Accessibility Guidelines) is an international standard created by the World Wide Web Consortium (W3C). These guidelines tell designers, developers, and content creators how to make digital content usable by as many people as possible. They cover things like text alternatives for images, colour contrast, keyboard navigation, captions, and clear structure.

Why Does It Exist?

More than 1.3 billion people worldwide live with a disability, which is about 16% of the global population. Digital accessibility ensures they can participate fully in online life, from reading course materials to booking appointments.

WCAG helps make that possible by providing a common standard to follow.

What Does WCAG Cover?

WCAG is built around four principles that are the foundation for all the specific rules. Accessible content must be:

  • Perceivable: People must be able to sense the content (e.g., text alternatives for images).
  • Operable: People must be able to use the interface (e.g., keyboard navigation).
  • Understandable: Content must be clear and predictable.
  • Robust: Content must work with current and future assistive technologies.

The Levels: A, AA, AAA

WCAG has three levels of conformance: A, AA, and AAA. Understanding the levels helps clarify why different types of image descriptions exist.

  • Level A (Minimum Accessibility) removes basic barriers but isn’t sufficient for most institutions. Includes: alt text for images, keyboard access.
  • Level AA (Standard Accessibility) is the level most schools and governments aim for and often legally require. Includes: sufficient colour contrast, video captions, and clear focus indicators.
  • Level AAA (Enhanced Accessibility) supports users with more complex needs and, though not required, is ideal. Includes sign language interpretation, extended audio descriptions, and clear, concise language.

Alt text, captions, and long descriptions all play a role in meeting these standards, especially for visual content.


Alt Text vs. Captions vs. Long Descriptions

Three tools, three different purposes.

When you add an image, diagram, or chart (like the periodic table), you’re adding information, not just a visual. Each type of description communicates that information differently.

Here’s how each type of description works, and when to use it.

Instructions: Use the three (3) tabs below to open and close each section. Keyboard users can use the Up/Down arrow keys and press Space to toggle a tab.

Alt text

Purpose: Provide a brief, functional description for screen reader users and for situations where the image fails to load.

Where it lives: Hidden in the HTML or media settings.

Length: Very short; typically under 125 characters. Why? Alt text works best when it’s short. Screen readers don’t pause or break it up; they read the whole thing in one go. If a user accidentally navigates past the image and returns to it, the alt text starts over from the beginning, making long descriptions frustrating and difficult to re‑listen to.

What it should do:

  • Convey what the image is
  • Explain why it matters in the current context
  • Avoid unnecessary detail (save that for a long description)

Example (Periodic Table):

Alt=”Periodic table showing all chemical elements arranged by atomic number. A complete long description is linked in the caption.

Captions

Purpose: Provide visible context for all users.

Where it lives: Directly below the image.

Length: A sentence or two.

What it should include:

  • Figure number
  • Image title
  • Brief visual summary
  • Citation and license

Example (Periodic Table):

Figure 1.1 The periodic table of the elements. The periodic table shows elements arranged by atomic number, symbol, and atomic weight. OpenStax Chemistry 2e by Paul Flowers, Klaus Theopold, Richard Langley, and William R. Robinson, PhD. Licensed under CC BY 4.0. [Read the full long description of the periodic table.]

Long image descriptions

Purpose: Provide a detailed explanation of complex visuals that cannot be fully conveyed in alt text.

Where it lives:

  • Below the image
  • In a collapsible “Image Description” section
  • Or linked from the caption using an anchor tag

Length: A paragraph or more.

What it should include:

  • Structure and layout
  • Key visual elements
  • Relationships, patterns, or meaning
  • Any information needed to understand the image’s purpose

Example (Periodic Table):

Figure 1.1 image description: The periodic table is arranged in 18 vertical groups and 7 horizontal periods. Elements are colour-coded by category, including metals, nonmetals, and metalloids. Group 1 contains the alkali metals, starting with hydrogen and lithium. Group 18 contains the noble gases, such as helium and neon. Lanthanides and actinides appear in two separate rows below the main table…


How These Three Work Together

Using the periodic table as an example:

  • Alt text identifies the image and its purpose. Alt text is not the place to list every element; its job is to identify the image and point users to more details if needed.
  • The caption provides context, a summary, and attribution. Captions help everyone, not just users with disabilities. Make sure you clearly explain what they’re looking at and why it’s relevant.
  • The long description ensures that students who cannot see the image still have full access to the information it conveys; this is where you can describe the full structure of a visual without worrying about character limits.

Why This Matters

When we format images accessibly, we need to remember that we are designing for real people, not just meeting the WCAG requirements.

  • A student using a screen reader can understand a complex diagram.
  • A learner with low vision can zoom in and still follow the structure.
  • Someone accessing materials on a slow connection can rely on alt text if images don’t load.

Accessibility is the foundation of good digital design and is most effective when planned from the beginning of a project. When we build access into our tools and workflows, we create learning environments that are shaped by intentional inclusion rather than reactive compliance.

I’ll close by sharing one of my favourite quotes from Tolkien’s masterpiece, The Lord of the Rings:

I hope all of us in e-learning and online education choose to spend our time designing for everyone, not just checking off minimum requirements.

Thanks for reading,

Kristy

[Skip long description and go to attribution section.]


Image Description

Figure 1.1 image description: The Periodic Table of Elements is shown. The 18 columns are labelled “Group”, and the 7 rows are labelled “Period.” Below the table to the right is a box labelled “Colour Code” with different colours for metals, metalloids, and nonmetals, as well as solids, liquids, and gases. To the left of this box is an enlarged picture of the upper-left-most box on the table. The number 1 is in its upper-left-hand corner and is labelled “Atomic number.” The letter “H” is in the middle in red, indicating that it is a gas. It is labelled, “Symbol.” Below that is the number 1.008, which is labelled “Atomic Mass.” Below that is the word hydrogen, which is labelled “name.” The colour of the box indicates that it is a non-metal. Each element will be described in this order: atomic number; name; symbol; whether it is a metal, metalloid, or nonmetal; whether it is a solid, liquid, or gas; and atomic mass. Beginning at the top left of the table, or period 1, group 1, is a box containing “1; hydrogen; H; nonmetal; gas; and 1.008.” There is only one other element box in period 1, group 18, which contains “2; helium; H e; nonmetal; gas; and 4.003.” Period 2, group 1 contains “3; lithium; L i; metal; solid; and 6.94” Group 2 contains “4; beryllium; B e; metal; solid; and 9.012.” Groups 3 through 12 are skipped, and group 13 contains “5; boron; B; metalloid; solid; 10.81.” Group 14 contains “6; carbon; C; nonmetal; solid; and 12.01.” Group 15 contains “7; nitrogen; N; nonmetal; gas; and 14.01.” Group 16 contains “8; oxygen; O; nonmetal; gas; and 16.00.” Group 17 contains “9; fluorine; F; nonmetal; gas; and 19.00.” Group 18 contains “10; neon; N e; nonmetal; gas; and 20.18.” Period 3, group 1 contains “11; sodium; N a; metal; solid; and 22.99.” Group 2 contains “12; magnesium; M g; metal; solid; and 24.31.” Groups 3 through 12 are skipped again in period 3, and group 13 contains “13; aluminum; A l; metal; solid; and 26.98.” Group 14 contains “14; silicon; S i; metalloid; solid; and 28.09.” Group 15 contains “15; phosphorous; P; nonmetal; solid; and 30.97.” Group 16 contains “16; sulphur; S; nonmetal; solid; and 32.06.” Group 17 contains “17; chlorine; C l; nonmetal; gas; and 35.45.” Group 18 contains “18; argon; A r; nonmetal; gas; and 39.95.” Period 4, group 1 contains “19; potassium; K; metal; solid; and 39.10.” Group 2 contains “20; calcium; C a; metal; solid; and 40.08.” Group 3 contains “21; scandium; S c; metal; solid; and 44.96.” Group 4 contains “22; titanium; T i; metal; solid; and 47.87.” Group 5 contains “23; vanadium; V; metal; solid; and 50.94.” Group 6 contains “24; chromium; C r; metal; solid; and 52.00.” Group 7 contains “25; manganese; M n; metal; solid; and 54.94.” Group 8 contains “26; iron; F e; metal; solid; and 55.85.” Group 9 contains “27; cobalt; C o; metal; solid; and 58.93.” Group 10 contains “28; nickel; N i; metal; solid; and 58.69.” Group 11 contains “29; copper; C u; metal; solid; and 63.55.” Group 12 contains “30; zinc; Z n; metal; solid; and 65.38.” Group 13 contains “31; gallium; G a; metal; solid; and 69.72.” Group 14 contains “32; germanium; G e; metalloid; solid; and 72.63.” Group 15 contains “33; arsenic; A s; metalloid; solid; and 74.92.” Group 16 contains “34; selenium; S e; nonmetal; solid; and 78.97.” Group 17 contains “35; bromine; B r; nonmetal; liquid; and 79.90.” Group 18 contains “36; krypton; K r; nonmetal; gas; and 83.80.” Period 5, group 1 contains “37; rubidium; R b; metal; solid; and 85.47.” Group 2 contains “38; strontium; S r; metal; solid; and 87.62.” Group 3 contains “39; yttrium; Y; metal; solid; and 88.91.” Group 4 contains “40; zirconium; Z r; metal; solid; and 91.22.” Group 5 contains “41; niobium; N b; metal; solid; and 92.91.” Group 6 contains “42; molybdenum; M o; metal; solid; and 95.95.” Group 7 contains “43; technetium; T c; metal; solid; and 97.” Group 8 contains “44; ruthenium; R u; metal; solid; and 101.1.” Group 9 contains “45; rhodium; R h; metal; solid; and 102.9.” Group 10 contains “46; palladium; P d; metal; solid; and 106.4.” Group 11 contains “47; silver; A g; metal; solid; and 107.9.” Group 12 contains “48; cadmium; C d; metal; solid; and 112.4.” Group 13 contains “49; indium; I n; metal; solid; and 114.8.” Group 14 contains “50; tin; S n; metal; solid; and 118.7.” Group 15 contains “51; antimony; S b; metalloid; solid; and 121.8.” Group 16 contains “52; tellurium; T e; metalloid; solid; and 127.6.” Group 17 contains “53; iodine; I; nonmetal; solid; and 126.9.” Group 18 contains “54; xenon; X e; nonmetal; gas; and 131.3.” Period 6, group 1 contains “55; cesium; C s; metal; solid; and 132.9.” Group 2 contains “56; barium; B a; metal; solid; and 137.3.” Group 3 breaks the pattern. The box has a large arrow pointing to a row of elements below the table with atomic numbers ranging from 57 to 71. In sequential order by atomic number, the first box in this row contains “57; lanthanum; L a; metal; solid; and 138.9.” To its right, the next is “58; cerium; C e; metal; solid; and 140.1.” Next is “59; praseodymium; P r; metal; solid; and 140.9.” Next is “60; neodymium; N d; metal; solid; and 144.2.” Next is “61; promethium; P m; metal; solid; and 145.” Next is “62; samarium; S m; metal; solid; and 150.4.” Next is “63; europium; E u; metal; solid; and 152.0.” Next is “64; gadolinium; G d; metal; solid; and 157.3.” Next is “65; terbium; T b; metal; solid; and 158.9.” Next is “66; dysprosium; D y; metal; solid; and 162.5.” Next is “67; holmium; H o; metal; solid; and 164.9.” Next is “68; erbium; E r; metal; solid; and 167.3.” Next is “69; thulium; T m; metal; solid; and 168.9.” Next is “70; ytterbium; Y b; metal; solid; and 173.1.” The last in this special row is “71; lutetium; L u; metal; solid; and 175.0.” Continuing in period 6, group 4 contains “72; hafnium; H f; metal; solid; and 178.5.” Group 5 contains “73; tantalum; T a; metal; solid; and 180.9.” Group 6 contains “74; tungsten; W; metal; solid; and 183.8.” Group 7 contains “75; rhenium; R e; metal; solid; and 186.2.” Group 8 contains “76; osmium; O s; metal; solid; and 190.2.” Group 9 contains “77; iridium; I r; metal; solid; and 192.2.” Group 10 contains “78; platinum; P t; metal; solid; and 195.1.” Group 11 contains “79; gold; A u; metal; solid; and 197.0.” Group 12 contains “80; mercury; H g; metal; liquid; and 200.6.” Group 13 contains “81; thallium; T l; metal; solid; and 204.4.” Group 14 contains “82; lead; P b; metal; solid; and 207.2.” Group 15 contains “83; bismuth; B i; metal; solid; and 209.0.” Group 16 contains “84; polonium; P o; metal; solid; and 209.” Group 17 contains “85; astatine; A t; metalloid; solid; and 210.” Group 18 contains “86; radon; R n; nonmetal; gas; and 222.” Period 7, group 1 contains “87; francium; F r; metal; solid; and 223.” Group 2 contains “88; radium; R a; metal; solid; and 226.” Group 3 breaks the pattern much like what occurs in period 6. A large arrow points from the box in period 7, group 3 to a special row containing the elements with atomic numbers ranging from 89-103, just below the row which contains atomic numbers 57-71. In sequential order by atomic number, the first box in this row contains “89; actinium; A c; metal; solid; and 227.” To its right, the next is “90; thorium; T h; metal; solid; and 232.0.” Next is “91; protactinium; P a; metal; solid; and 231.0.” Next is “92; uranium; U; metal; solid; and 238.0.” Next is “93; neptunium; N p; metal; solid; and N p.” Next is “94; plutonium; P u; metal; solid; and 244.” Next is “95; americium; A m; metal; solid; and 243.” Next is “96; curium; C m; metal; solid; and 247.” Next is “97; berkelium; B k; metal; solid; and 247.” Next is “98; californium; C f; metal; solid; and 251.” Next is “99; einsteinium; E s; metal; solid; and 252.” Next is “100; fermium; F m; metal; solid; and 257.” Next is “101; mendelevium; M d; metal; solid; and 258.” Next is “102; nobelium; N o; metal; solid; and 259.” The last in this special row is “103; lawrencium; L r; metal; solid; and 262.” Continuing in period 7, group 4 contains “104; rutherfordium; R f; metal; solid; and 267.” Group 5 contains “105; dubnium; D b; metal; solid; and 270.” Group 6 contains “106; seaborgium; S g; metal; solid; and 271.” Group 7 contains “107; bohrium; B h; metal; solid; and 270.” Group 8 contains “108; hassium; H s; metal; solid; and 277.” Group 9 contains “109; meitnerium; M t; not indicated; solid; and 276.” Group 10 contains “110; darmstadtium; D s; not indicated; solid; and 281.” Group 11 contains “111; roentgenium; R g; not indicated; solid; and 282.” Group 12 contains “112; copernicium; C n; metal; liquid; and 285.” Group 13 contains “113; ununtrium; U u t; not indicated; solid; and 285.” Group 14 contains “114; flerovium; F l; not indicated; solid; and 289.” Group 15 contains “115; ununpentium; U u p; not indicated; solid; and 288.” Group 16 contains “116; livermorium; L v; not indicated; solid; and 293.” Group 17 contains “117; ununseptium; U u s; not indicated; solid; and 294.” Group 18 contains “118; ununoctium; U u o; not indicated; solid; and 294.” [Return to Figure 1.1]


Attribution

The periodic table image and long image description are adapted from OpenStax Chemistry 2e, licensed under CC BY 4.0. Source: https://openstax.org/details/books/chemistry-2e

Portions of this post draw on accessibility training materials I’ve developed for workshops and presentations.

Scroll to Top