Skip to main content

Building Accessible Pages

How to structure headings, write alt text, and use the accessibility options in Pages so your landing pages are easier for everyone to use.

Written by Michael Stephenson

Overview

Pages are often the first thing a prospective student sees, so they need to work for everyone, including people who use screen readers, keyboards, or zoom. Element451 builds core accessibility features into every page automatically, and gives you controls for the parts that depend on your content, such as headings, image descriptions, and button labels.

This guide covers what Pages handles for you, how to set heading levels, which accessibility options are available on each block, and a checklist to run before you publish.

What Pages Handles Automatically

Every page includes these features without any setup:

  • Your Page Title becomes the page's H1 heading. It is visually hidden but read by screen readers, so every page starts with exactly one H1.

  • A Skip to main content link appears when a keyboard user first presses Tab, so they can jump past the navigation.

  • Page content sits inside a main landmark, and navigation menus are labeled for screen readers.

  • Social icons are announced by name (for example, "connect with Instagram"), and video play buttons are announced with the video's title.

  • Buttons show a visible focus outline when reached with a keyboard.

  • Animated background GIFs respect a visitor's reduced-motion setting.

Heading Structure

Screen reader users often move through a page by jumping from heading to heading, so the heading outline needs to make sense on its own. Follow two rules:

  • Don't set any block heading to H1. Your Page Title is already the page's H1, so start your block headings at H2.

  • Don't skip levels. An H2 can be followed by an H3, but not directly by an H4.

Set a Heading Level

  1. Open your page in the editor and select a block.

  2. Open the block's Elements settings.

  3. Next to each text field, use the Heading level dropdown to choose H1 through H6, or Paragraph for text that isn't a heading.

📌 Note: Heading level changes how the text is announced to assistive technology, not how it looks. Text keeps the same size and style no matter which level you choose, so pick the level that fits the page outline rather than the look you want. The text editor no longer has its own heading format button; use Heading level instead.

Default Heading Levels

Each block starts with these levels. You only need to change them when they don't fit your page's outline.

  • Billboard with CTA, Billboard with Form, and Billboard with Form Centered:

    • Headline H2

    • Subheadline H3

  • Billboard App with CTA

    • Headline H2

    • Subheadline H3

    • Sign In Message Paragraph

  • Intro and Text

    • Headline H2

    • Subheadline H3 (Text also has a Description, set to Paragraph)

  • Video:

    • Headline H2

    • Subheadline H3

  • Smart Teaser

    • Headline H2

    • Subheadline Paragraph

    • Teaser Title H3

    • Teaser Description Paragraph

  • Pre-Populated Data:

    • Title H2

    • Subtitle Paragraph

  • CTA

    • Headline H3

    • Subheadline H4

  • Feature Teaser

    • Headline H3

    • Subheadline and Description Paragraph

  • Teaser (block and cards)

    • Title H3

    • Subtitle H4

    • Description Paragraph

  • Quote

    • Author Name and Author Title Paragraph

  • Image

    • Description (caption) Paragraph

  • Footer

    • Contact Info and Copyright Paragraph

✨ Pro Tip: CTA, Feature Teaser, and Teaser start at H3. If one of these blocks starts its own section of the page rather than following an H2 block, change its headline to H2 so the outline doesn't jump.

A few fields have fixed levels that can't be changed: the Map title is always H2, the Discovery title is not a heading, Quote text is marked as a quotation, and Carousel captions are paragraphs.

Existing Pages

Pages created before heading levels were added use the defaults above unless you change them. Most fields kept the same level they had before. A few fields that used to be plain text are now headings or paragraphs, so review the outline of older pages that use these blocks:

  • Billboard with CTA

  • Billboard with Form

  • Billboard with Form Centered (Headline and Subheadline)

  • Billboard App with CTA (Subheadline)

  • Teaser (all fields)

  • Footer (Contact Info)

Example Page Outline

A well-structured page might look like this:

H1  Page Title: "Nursing at Element College" (automatic)
  H2  Billboard Headline: "Start Your Nursing Career"
    H3  Billboard Subheadline
  H2  Intro Headline: "Why Element College?"
    H3  Intro Subheadline
  H2  Smart Teaser Headline: "Programs"
    H3  Each teaser Title
  H2  Video Headline: "A Day in Clinicals"
  H2  CTA Headline: "Ready to Apply?" (changed from H3)

Images and Alt Text

Alt text describes an image for people who can't see it. Add it wherever an image carries meaning.

  • Alt Text is available on the Image, Feature Teaser, Smart Teaser, and Teaser card images, the Billboard with Form Centered image, the Quote avatar, and logos. If the image already has alt text in your media library, the field fills in automatically.

  • Background images use Image Alt Text. Leave it empty when the background is decorative, and screen readers will skip it. Add a description when the background shows something visitors need to know.

  • When you add a link to an image or logo, an Aria Label field appears. Use it to describe where the link goes, such as "Element College home page."

✨ Pro Tip: Describe what the image shows and why it matters, in a sentence or less. Skip phrases like "image of" or "photo of," since screen readers already announce that it's an image.

Buttons and Links

  • Write Button Text that describes the action on its own, such as "Apply for Fall 2027" instead of "Click here."

  • Use Button Aria Label when the visible text needs more context for screen reader users. Include the visible button text in the label, so someone using voice control can still say what they see. For example, a button labeled "Apply" could use the aria label "Apply to the Nursing program."

Page Title and Description

The Page Title and Page Description in page setup are required. The Page Title becomes the page's H1 and the browser tab title, so give every page a unique, descriptive title.

Color and Contrast

Pages doesn't check color contrast for you, so check your brand colors before publishing, especially text placed over background images or colored sections. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text. A free tool such as the WebAIM Contrast Checker can test any color pair.

Video

The Video block plays videos from YouTube or Vimeo, so captions come from the video itself. Turn on accurate captions in YouTube or Vimeo before you add the video URL.

Before You Publish

Check to ensure:

  • The Page Title is unique and describes the page.

  • No block heading is set to H1, and heading levels don't skip.

  • Every meaningful image has alt text, and decorative backgrounds are left empty.

  • Button text makes sense on its own.

  • Text colors pass a contrast check.

  • Videos have captions.

  • You can reach every link, button, and form field with the Tab key, and "Skip to main content" appears first.

Related Articles

Related Articles
Did this answer your question?