Digital Accessibility Learning Path: Developers – Part 1

Accessible Web Development: Part 1 – Identifiable

Table of Contents

• Part 1: Identifiable
  • Logical Content Structure
    • Include a descriptive page Title
    • Ensure robust page structure
  • Easy to Read and Understand
    • Label form elements
    • Ensure the site is readable with stylesheets disabled
    • Do not rely on Sensory Characteristics
    • Use appropriate markup for Data Tables
    • Use descriptive text or labels for all Interactive content
    • Identify Document Links
  • Resources

Logical Content Structure

Include a descriptive page Title

• Apply a descriptive, concise <title> for each unique page in a group of web pages. The page <title> is necessary to differentiate web pages. Titles are visible on each open web browser tab, and it is the first thing read by a screen reader when a page is opened.
• Make sure the naming convention is consistent across all pages in a group of pages. The <title> may be similar to the text of the main heading (h1).

Ensure robust page structure

Page layout and programmatic structure has a large impact on usability and accessibility, and can facilitate understanding and navigation when used effectively. Structural markup is often viewed as the page outline, which can facilitate the identification of page content and sections. Consider the following best practices:

• Use page headings, and be sure to apply them in a logical, nested, hierarchical order without skipping heading levels. Heading markup should always match the visual presentation, and can be used to identify the beginning of a content group. Use CSS to style headings as needed.
• Use Page Regions or Landmarks to section content. Ensure descriptive labels are included.
• The following image of page structure example includes:
  • <nav>
  • <main>
  • <h1>
  • <h2>
  • <h3>
  • <aside>
  • <footer>

Logical Order of Content

• Page content must be presented in a way that is logical and preserves meaning for all users. Keyboard focus and the reflow of content should align with the logical reading order, and be consistent with the visual order.
• This is also true for alert messages and new content that appears on-screen, or populates page areas. Focus should move to new content or be placed on the next focusable item in the visual or logical Tab sequence when a user takes action; and/or all users should be informed when new content has appeared or pre-existing content has changed.

Easy to Read and Understand

Label form elements

<label for="name">Name (first and last name):</label>

<input type="text" id="name" value="name" />

<fieldset>
  <legend>I am interested in the following (check all that apply):</legend>
  <div>
    <input id="photo" name="interests" type="checkbox" value="ph">
    <label for="photo">Photography</label>
  </div>
  <div>    
    <input checked="checked" id="watercol" name="interests" type="checkbox" value="wa">
    <label for="watercol">Watercolor</label>
  </div>
  <div>  
    <input checked="checked" id="acrylic" name="interests" type="checkbox" value="ac">
    <label for="acrylic">Acrylic</label>
  </div>
</fieldset>

Ensure the site is readable with stylesheets disabled

• If you disable CSS, the site must be readable, logical and meaningful. The site content should not be confusing or lose information.

Do not rely on Sensory Characteristics

• Users who perceive color differently, experience various forms of color blindness, or have low vision or blindness, may not understand context, when color alone is used to convey information.
• Ensure the use of color for text and background, meets or exceeds minimum contrast specifications in all states, including (mouse) hover, and on-focus (keyboard).
• Avoid language that relies on specific sensory perception such as “Press the Red button on the Left to continue.” If color is used, also include another indicator such as an asterisk, and refer to it with instruction.
• Use guidance for spacial orientation that is linear (e.g., “At the beginning of the page”), or refers to the programmatic title of a section, Landmark or content group (e.g., “following the Events section”).

Example of Color Alone being used to convey information.

See the times indicated in Green, for available options:
10:00AM 11:30AM 1:00PM 2:30PM

Example of how the use of color may appear, for some people without color vision

See the times indicated in Green, for available options:
10:00AM 11:30AM 1:00PM 2:30PM

Example using Color as well as a visual indicator to convey information that does not rely on color vision.

See the times indicated with an asterisk*, for available options:
10:00AM* 11:30AM 1:00PM* 2:30PM

Use appropriate markup for Data Tables

• Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationships. Assistive technologies use this information to provide context to users.
• Header cells must be marked up with <th>, and data cells with <td> to make tables accessible. For more complex tables, explicit associations may be needed using scope, id, and headers attributes.
• Do not use tables for layout purposes alone.

<table class="table-design table-a11y" role="table">
  <caption>Table Caption</caption>
  <thead>
    <tr role="row">
      <th id="columnheader1" role="columnheader" scope="col">Column Header 1</th>
      <th id="columnheader2" role="columnheader" scope="col">Column Header 2</th>
      <th id="columnheader3" role="columnheader" scope="col">Column Header 3</th>
      <th id="columnheader4" role="columnheader" scope="col">Column Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <th id="item1" role="rowheader" scope="row" headers="columnheader1"><span class="col-header" aria-hidden="true">Column Header 1</span>Row 1 - Cell 1</th>
      <td role="cell" headers="item1 columnheader2"><span class="col-header" aria-hidden="true">Column Header 2</span>Row 1 - Cell 2</td>
      <td role="cell" headers="item1 columnheader3"><span class="col-header" aria-hidden="true">Column Header 3</span>Row 1 - Cell 3</td>
      <td role="cell" headers="item1 columnheader4"><span class="col-header" aria-hidden="true">Column Header 4</span>Row 1 - Cell 4</td>
    </tr>
    <tr role="row">
      <th id="item2" role="rowheader" scope="row" headers="columnheader1"><span class="col-header" aria-hidden="true">Column Header 1</span>Row 2 - Cell 1</th>
      <td role="cell" headers="item2 columnheader2"><span class="col-header" aria-hidden="true">Column Header 2</span>Row 2 - Cell 2</td>
      <td role="cell" headers="item2 columnheader3"><span class="col-header" aria-hidden="true">Column Header 3</span>Row 2 - Cell 3</td>
      <td role="cell" headers="item2 columnheader4"><span class="col-header" aria-hidden="true">Column Header 4</span>Row 2 - Cell 4</td>
    </tr>
  </tbody>
</table>

Use descriptive text or labels and identify all Interactive content

<a>Read more<span class="sr-only"> about kittens</span></a>

.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
  } 

Identify Document Links

• It is useful for all users when linked document format types are identifiable. Include the document format in the link text, e.g.; “4th Quarter Report (PDF)”.
• If icons are used, ensure a programmatic descriptive label is applied appropriately. When the format is also conveyed in plain text, the icon can be programmatically hidden to avoid redundancy.

Resources

Related Resources: Part 1 – Identifiable

Logical Content Structure

• Writing for Web Accessibility (W3C)
• Document Structure: The Accessibility Feature You Don’t Notice Until It’s Not There (DigitalVA.gov)
• Creating Accessible Digital Documents – Headings (NU)
• Creating Accessible Digital Documents – Table of Contents (NU)

Easy to Read and Understand

• Use Clear and Understandable Content (W3C)
• Readable (W3C)
• Designing for Web Accessibility (W3C)
• Use of Color (W3C)
• Name, Role, Value (W3C)
• ARIA Authoring Practices Guide (APG) | Patterns (W3C)

Additional Resources

Your Feedback is Welcome

We would love to hear your thoughts on this learning content. Please let us know if you have completed any of the modules, have any feedback or just want to say hello. Email us at digital-accessibility@northeastern.edu.