Iowa Technology & Education Connection

Understandable: Making Content Clear and Predictable

The third pillar of the POUR acronym is Understandable. While the first two pillars focus on perceiving the content and operating the controls, this principle ensures that the information and the operation of the user interface are clear and predictable.

Why these topics fit under Understandable

Readability and Cognitive Load

This category is about comprehension. Accessibility isn’t just about the ability to see words; it’s about the ability to process them. By using plain language and proper language tagging, you ensure that both the human mind and the screen reader’s “voice” can interpret the information without a struggle.

By prioritizing Readability and Cognitive Load, we ensure that our digital content is easy to translate for technology and easy to digest for the human mind.

Consistent Navigation and Layout

This category focuses on predictability. For many users, especially those with cognitive disabilities or low vision, navigating a website is a learned pattern. If the “controls” of the site stay in the same place, the user can focus their energy on the content rather than constantly trying to figure out how to “drive” the interface.

Clear Instructions and Input Assistance

This category is about communication and error-proofing. Users need to know exactly what is expected of them when they interact with the site. By providing clear labels and helpful error messages, you ensure the user understands the outcome of their actions and can fix mistakes without feeling “stuck” or discouraged.

Readability and Cognitive Load

Readability on a screen

Readability

  • The Goal: To ensure that content is presented in a way that can be accurately identified and “read” by both humans and assistive software.
  • Why it Matters: Assistive technologies (like screen readers or Braille displays) need to know which “rules” of language to follow. If a page’s language isn’t defined, a screen reader might use a French pronunciation for English words, making the site unusable. For humans, clear fonts and simple vocabulary make information accessible to everyone, including those with learning disabilities or non-native speakers.
  • Best Practice:
    • Set the Document Language: Always include the lang attribute in your HTML (e.g., <html lang="en">).

    • Define Jargon: For technical ITEC terms (like “API” or “Bandwidth”), provide an initial definition or a link to a glossary.

    • Avoid All-Caps: Using ALL CAPS can be difficult to read for people with dyslexia and can be misinterpreted by screen readers as individual letters (acronyms).

    • Use Clear Typography: Stick to sans-serif fonts with adequate line spacing (usually 1.5).

Cogs inside the outline of a head with the webpage behind representing cognitive load

Reducing Cognitive Load

  • The Goal: To minimize the mental effort required to navigate, process, and interact with the website.

  • Why it Matters: Everyone has a “mental budget” for how much information they can process at once. Users with ADHD, anxiety, or cognitive impairments can become overwhelmed by “cluttered” designs or walls of text. By reducing the noise, you ensure the user’s energy is spent on learning the content rather than decoding the layout.

  • Best Practice: 

    • Chunk Information: Use short paragraphs (3-4 sentences max) and frequent subheadings to break up long technical documents.

    • Use White Space: Give elements “room to breathe.” Overcrowded pages lead to visual fatigue and confusion.

    • Bullet Points: Use lists for any series of three or more items to make them scannable.

    • Clear Hierarchy: Use bolding and different font sizes to signal what is most important on the page.

Consistent Navigation and Layout

Icon representing a consistent website page layout

Structural Consistency

  • The Goal: To keep global elements (the “furniture” of the site) in the exact same physical location across all pages.

  • Why it Matters: Users with low vision, who may use screen magnifiers, only see a small portion of the screen at once. If the “Search” bar moves from the top-right to the sidebar on a different page, they have to “hunt” for it all over again. Consistency allows users to navigate by muscle memory.

  • Best Practice: 

    • Persistent Header/Footer: Ensure the main menu, logo, and contact info are identical in placement on every sub-page.

    • Standardized Search: Keep the search input in the same relative position (e.g., top right).

    • Consistent Sidebars: If a department page uses a left-hand navigation menu, it should appear on every page within that section.

Icon representing predictable website functionality

Functional Consistency

  • The Goal: To ensure that elements that look the same, act the same.

  • Why it Matters: Predictability reduces the “cognitive load” or mental effort needed to use the site. If a student learns that a “Blue Button” always submits a form, but on the next page a “Blue Button” deletes their work, it creates a high risk of error and frustration.

  • Best Practice: 

    • Unified Component Library: Use a single CSS style for primary actions (Submit), secondary actions (Cancel), and destructive actions (Delete).

    • Icon Standardization: If a “pencil” icon means “Edit” in the student portal, don’t use it to mean “Write a Review” elsewhere.

    • Predictable Link Behavior: Don’t trigger a download or a new window without a text warning (e.g., “Syllabus – PDF”) so the user knows what to expect when they click.

Icon representing a logical hierarchy of information

Logical Visual Hierarchy

  • The Goal: To use visual cues (size, color, and spacing) to signal the importance and relationship of content.

  • Why it Matters: A clear hierarchy helps users “skim” a page to find what they need. For users with cognitive disabilities like ADHD or dyslexia, a logical flow prevents them from becoming overwhelmed by a “wall of data.”

  • Best Practice:
    • Heading Patterns: Use consistent styling for <h1> through <h3> so users can instantly identify where new sections begin.
    • Orientation Cues (Breadcrumbs): Provide a “You Are Here” trail (e.g., Home > Resources > Accessibility and Equity Resource Center) so users understand their location in the site hierarchy.

    • Active States: Visually highlight the current page in the navigation menu (e.g., a bold underline or different background color for the “Active” tab).

Clear Instructions and Input Assistance

Icon representing proactive guidance and form instructions

Giving Clear Instructions

  • The Goal: To provide all necessary information, requirements, and formatting rules before the user begins an interaction.

  • Why it Matters: For many users, particularly those with cognitive disabilities, anxiety, or those using screen readers, starting a task without knowing the “rules” is overwhelming. Clear instructions reduce the “guesswork,” ensuring the user feels confident and capable of completing the task on the first try.
  • Best Practice: 

    • Up-Front Requirements: If a form requires a Student ID or a specific document upload, state that at the very top of the page.

    • Visible Labels: Use the <label> tag for every input. Ensure the label stays visible even after the user clicks into the box.

    • Formatting Hints: If a date must be MM/DD/YYYY, include that hint as text next to the label (e.g., “Date of Birth (MM/DD/YYYY)”).

    • Identify Required Fields: Use text (like the word “Required”) rather than just a red asterisk, which screen readers may skip.

Icon representing error recovery and input support

Input Assistance

  • The Goal: To automatically detect errors and provide specific, easy-to-follow guidance on how to correct them while the user is interacting.

  • Why it Matters: Mistakes are inevitable. However, for a user with a motor disability or a visual impairment, a “generic error” (like the page just refreshing or a red box appearing without text) can be a total “blocker.” Input assistance acts as a supportive guide that helps the user cross the finish line.

  • Best Practice:

    • Text-Based Errors: Never use color alone (like a red border) to signal an error. Always include a text description (e.g., “Error: Please enter a valid email”).

    • Specific Suggestions: Don’t just say “Invalid Entry.” Say “Password must include at least one capital letter.”

    • Focus Management: When an error occurs, the page should ideally move the user’s keyboard focus to the first error so they can fix it immediately.

    • Data Preservation: If a form is submitted with an error, ensure the information the user typed correctly isn’t wiped out.