Accessible HTML

Hypertext Markup Language (HTML) is the backbone of any webpage; it structures your text, images, and other informative elements to be displayed. Pressbooks inherently generates semantic HTML designed for assistive technologies, which is visible by examining the markup in the text editor or by using the inspect tool available in most web browsers. To understand what is happening in the text editor, and whether improvements are needed, let us take a moment to go over practices that make HTML well-structured and readable.

Use Specific Tags Instead of Generic Tags:

Specificity lets users and assistive technologies recognize the different elements within the page, which helps define their purpose. Using heading tags <h1> to <h6> indicates that there are six headings and subheadings structuring the content. Using the paragraph <p> tag confines the body text in its paragraph. Hyperlink tags like <a> enable links to be embedded as clickable text.

Specific rather than generic tags clearly define elements on a page. Examples of generic tags include <div> to mark some kind of division and <span> to mark up part of a text. Although a <div> can be styled to look like a paragraph or a header, the paragraph and header tags will be better interpreted by assistive technologies.

For Example:

  HTML:

  <h1> Welcome to Accessible Design </h1>
  <p> This guide provides best practices for creating accessible content using
  semantic HTML. </p>
  <a href="https://example.com/learn-more"> Learn more about accessibility. </a>

Use Proper Headings:

Headings and subheadings provide structure to a page and its body text. When you title your chapters through the organizational structure of your site, Pressbooks automatically marks up your chapter title with the <h1 class=”entry-title”> tag. The text editor enables the use of header tags <h2>, <h3> … <h6> that convey the hierarchy of information on your page. Ensure that the headers are in order; skipping levels, for example, jumping from <h2> to <h5> can disrupt the flow of reading on assistive technologies.

For Example:

  HTML:

  <h1> Introduction to Accessible Design </h1>
  <h2> What are some best accessibility practices in your Pressbook? </h2>
  <h3> Use Proper Headings </h3>

Provide Meaningful Text when Hyperlinking:

When required to hyperlink to navigate to an external link, the hyperlinked text should meaningfully describe the link’s purpose. Hyperlinking to other sources using texts like “click here” causes ambiguity for screen readers and people alike. The text with the underlying link should be able to relay information regarding the link without users having to rely on the rest of the surrounding texts.

For Example:

  HTML:

  <a href="https://pressbooks.com/accessibility"> Read the accessibility guide. </a>

Add Alternative Text for Images:

Alt text (alt text, alt attributes, or alternative text) for images is an attribute denoted by “alt=” in the <img> image tag. It allows for a text that would display if the image fails to load and for accessible technologies to get a description of the image through the alt attribute. The alternative text should be concise, while still describing the image. A short description is particularly important for visually impaired users to understand the essentials of what the images convey on the page through screen readers.

For Example:

  HTML:

  <img src="images/photo-one.jpeg" alt="A dog playing in the park.">

Ensure Table Accessibility:

Tables are used to organize data in rows and columns and are understood in relation to each other. The header cells are created using the <th> tag. A “scope” attribute in the <th> tag specifies whether the header is a column header <th scope=”col”> or a row header <th scope=”row”>. Keeping the table simple and clean by using one piece of data per cell (atomic) facilitates accessibility. An accessible table avoids merged cells, which disrupt the logical flow of information. Rather than merging cells, include the caption beneath the table to concisely describe the idea of what the data represents. Using tables for anything else, such as fixing page layouts, should be avoided.

For Example:

  HTML:

  <table>
    <tr>
      <th scope="col"> Genre </th>
      <th scope="col"> Author </th>
    </tr>
    <tr>
      <td> Design </td>
      <td> William </td>
    </tr>
  </table>

Text Formatting Conventions:

Proper formatting is key when it comes to the readability of text. A few very useful HTML tags help with this. We have listed the function of four of the most used tags:

• <strong> makes certain labels, descriptors and headings stand out.
• <em> italicizes certain words or phrases to convey their importance.
• <cite> italicizes the title of a book that is being referenced.
• <blockquote> provides a neat block that keeps a quote separate from the rest of the text.

For Example:

  HTML:

  <p> <strong>Accessibility</strong> means ensuring digital content is usable
  by everyone. </p>
  <p> This guide references <cite>Web Content Accessibility Guidelines (WCAG).
  </cite></p>
  <blockquote>
    "Accessible design benefits all users, not only those with disabilities."
  </blockquote>
  <p> Always emphasize key concepts like <em>usability</em> clearly. </p>

Naming Conventions for IDs and Classes:

IDs and Class names are used to identify and group the creation of design elements. Some naming conventions should be followed to ensure consistency during design and for easier edits later on.

Best practices for naming include:

• Using only lowercase letters,
• Using dashes, not spaces, for multi-word names,
• Avoiding special characters !, ?, \, and @.

For Example:

  HTML:

  <div id="nav-bar"></div>
  <p class="contact-us-message"> Contact Us! </p>
  <button class="submit-button"> Submit </button>