SKIP TO PAGE CONTENT
Menu

Cascade Accessibility

Creating Accessible Content in Cascade

Proper Heading Hierarchy

Why It Matters

Headings allow screen reader users to scan and navigate a page quickly. Missing levels or using headings purely for styling breaks visual and structural organization.

Rules of Heading Hierarchy

  • {H1}: Used strictly for the main page title (automatically set by Cascade in page templates).

  • {H2}: Used for main section headings.

  • {H3} – {H6}: Used for subsections nested directly under an {H2} or previous sub-heading level.

  • Never Skip Levels: Do not jump from an {H2} straight to an {H4}.

Step-by-Step in Cascade CMS

  • In the WYSIWYG Editor, highlight the text you want to make a heading.

  • Click the Format drop-down menu in the editor toolbar.

  • Select the appropriate heading level (Heading 2, Heading 3, etc.).

Do’s and Don’ts

Proper Headings Correct Usage
Incorrect Correct
Bolding text to make it look like a heading Using the Format > Heading dropdown menu
Skipping from <h2> to <h4> because you like the font size Maintaining strict order: <h2> -> <h3> -> <h4>
Using an <h2> just to make text large and bold Using headings only for structural section titles

Adding Alt Text in Cascade

Why It Matters

Alternative text (alt text) provides a visual description of images for users who rely on screen readers or have low-bandwidth connections where images fail to load.

Step-by-Step in Cascade CMS

Option A: Fill out the "TITLE" field when uploading an image

  1. Navigate to Add Content, select Click here to choose asset, then select Upload Image.

  2. Under the fields locate Title and add a title (image description). The title will default as the image alt text when an image is uploaded on the page using a data definition component or WYSIWYG.

Option B: Inserting an Image into a WYSIWYG Content Block

  1. Place your cursor where you want the image and click the Insert/Edit Image icon.

  2. Choose your image asset from Cascade.

  3. In the Image Description field, type a concise description of the image.

  4. If the image is purely decorative (e.g., a background pattern or decorative line divider):

    • Check the Decorative box.

Option C: Image Fields in Data Definitions

  1. Navigate to the page edit mode.

  2. Under fields that ask for an image asset, locate the adjacent Image Description field.

  3. Enter your description directly into that field.

Writing Effective Alt Text

  • Keep it concise: Aim for under 125 characters.

  • Describe the context: Describe what is important about the image in relation to the page content.

  • Avoid redundant words: Do not start with "Image of..." or "Photo of..." (screen readers already announce it as an image).

Examples

  • Incorrect | Alt="Photo of students"

  • Correct | Alt="Three students studying together outside the student center"

Creating Accessible Links in Cascade

Why It Matters

Screen reader users often pull up a list of all links on a page to navigate. Links that say "Click Here" or "Read More" provide zero context when read out of context.

Rules for Accessible Links

  • Self-Explanatory: Link text must describe the destination or action.

  • Unique Text: Avoid having multiple links on the same page with the exact same text if they go to different places.

  • File Types: Always mention if a link opens a file (e.g., PDF, DOCX) so users know what to expect.

Step-by-Step in Cascade CMS

  1. Highlight the descriptive text you wish to hyper-link (e.g., "Download the 2026 Academic Calendar").

  2. Click the Insert/Edit Link icon in the toolbar.

  3. Select the link target:

    • Internal Link: Choose an internal page or asset within Cascade.

  4. Click Ok.

Do’s and Don’ts

  • Incorrect | To view our program requirements, [click here]

  • Incorrect | Read our application guidelines [here]

  • Correct | Review the [Computer Science Program Requirements]

  • Correct | Download the [2026 Financial Aid Application (PDF)]

Accessible Tables in Cascade

Why It Matters

Tables are intended strictly for tabular data (rows and columns of information), not for page layout design. Screen readers rely on proper table markup (headers and captions) to read data systematically.

Step-by-Step in Cascade CMS

Step 1: Insert the Table

  1. Click the Table icon in the WYSIWYG editor.

  2. Choose your grid size (rows and columns).

Step 2: Define Table Headers

  1. Highlight the top row (or first column) meant to serve as headers.

  2. Right-click or use the Table menu to go to Cell -> Cell Properties.

  3. Change the Cell Type from Cell to Header Cell (<th>).

  4. Set the Scope to Column (for top rows) or Row (for left columns).

Step 3: Add a Table Caption

  • Open Table Properties from the Table toolbar menu.

  • Check the box for Caption.

  • Enter a short description above the table explaining what data it contains (e.g., "Table 1: Fall 2026 Tuition and Fees").

Table Accessibility Checklist

  • [ ] Is this table being used only for data (not page layout)?

  • [ ] Does the table have designated Header Cells (<th>)?

  • [ ] Is the Scope set for headers (col or row)?

  • [ ] Is there a concise Caption summarizing the table's contents?

Cascade CMS Built-in Accessibility check

Cascade offers additional content checks during the workflow submission process. Cascade CMS will provide a report on any broken links, misspellings and accessibility issues. The Accessibility content check ensures WYSIWYG content complies with the following accessibility guidelines:

  • Image (IMG) tags must have alternate text describing the graphic. (Section 508 / WCAG 2.1)
  • Table captions should not be empty. (HTML5 recommendation.)

For each issue found, you have the following options:

  • View Non-Compliant Content - View the specific HTML markup flagged during the check.
  • Ignore - Disregard the issue.
  • Fix - Enter a value for the missing or flagged content. For example: alternate text for an image or caption for a table.