Skip to main content

Understanding Programmatically Determined in Web Accessibility

Information and relationships within the web content can be understood by software, such as assistive technologies (AT) like screen readers

Understanding Programmatically Determined in Web Accessibility

A11y.Cafe ~

When building accessible websites, a fundamental principle is that content and functionality must be “programmatically determined.” This concept is essential for ensuring that web content is accessible to all users, including those who rely on assistive technologies. This article will introduce the concept of “programmatically determined,” explain its importance, and provide practical guidelines for implementing it in your web projects.

What Does “Programmatically Determined” Mean?

In the context of web accessibility, “programmatically determined” means that information and relationships within the web content can be understood by software, such as assistive technologies (AT) like screen readers. This allows users with disabilities to interact with and understand the content.

Why is Programmatically Determined Important?

  1. Enhances Usability for Assistive Technologies: When information is programmatically determined, screen readers and other AT can interpret and convey the content to users with visual, auditory, or cognitive disabilities.
  2. Ensures Accessibility Compliance: Adhering to this principle helps ensure that your website meets accessibility standards, such as the Web Content Accessibility Guidelines (WCAG).
  3. Improves User Experience: By making content accessible programmatically, you improve the overall user experience for all visitors, including those who may not rely on AT but benefit from a well-structured site.

WCAG 2.2 Guidelines and Success Criteria

WCAG 2.2 provides a set of guidelines to help make web content more accessible. Here are some relevant success criteria related to programmatically determined content:

  1. 1.3.1 Info and Relationships (Level A)

    • Description: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
    • Example: Using semantic HTML elements (e.g., <header>, <nav>, <article>, <section>) instead of generic <div> and <span> elements to define the structure of the page.
    <header>
  <h1>Welcome to Our Website</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<main>
  <article>
    <h2>Latest News</h2>
    <p>Here is the latest news from our company...</p>
  </article>
</main>

  2. 4.1.2 Name, Role, Value (Level A)

    • Description: For all user interface components (including form elements, links, and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
    • Example: Providing accessible names for form inputs using the label element.
    <form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />

  <button type="submit">Login</button>
</form>

Best Practices for Implementing Programmatically Determined Content

  1. Use Semantic HTML: Use HTML elements that convey meaning and structure. This helps browsers and AT understand the content better.

  2. ARIA Landmarks and Roles: Use Accessible Rich Internet Applications (ARIA) roles and landmarks to define regions of the page.

  3. Labels and Descriptions: Ensure that all interactive elements, like form controls and buttons, have clear and programmatically associated labels.

  4. Dynamic Content Updates: Use ARIA live regions to provide dynamic content updates to AT users without requiring a page reload.

    <div aria-live="polite">
  <!-- Dynamic content updates here -->
</div>

Relevant Resources

To learn more about making web content programmatically determined, check out these resources:

By understanding and implementing programmatically determined content, you contribute to a more inclusive web experience for all users.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue