Accessible HTML

Hypertext Markup Language (HTML) is the backbone of any web page; 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 enables users and assistive technologies to recognize the different elements within the page, thereby defining their purpose. Using tags <h1> to <h6> indicates that six headings are structuring the content. Using the paragraph <p> tag confines the body text in its paragraph. Hyperlink tags, such as <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 a division and <span> to mark up a part of text. Although a <div> can be styled to resemble a paragraph or a header, the paragraph and header tags will be more effectively interpreted by assistive technologies.

For example:

  HTML:

<h1> Welcome to Accessible Design </h1>
<p> 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 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.  Skipping levels, such as jumping from <h2> to <h5>, can disrupt the reading flow for users of assistive technologies. Ensure that the headers are in order.

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 text like “click here” can cause ambiguity for both screen readers and people. The text with the underlying link should be able to convey information regarding the link without users having to rely on the surrounding text.

For example:

  HTML:

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

Add Alternative Text for Images

Alt text (alternative text, or alt attributes) for images is an attribute denoted by alt=”” in the <img> image tag. It allows a text alternative to display if the image fails to load and enables accessible technologies to obtain a description of the image through the alt attribute. The alternative text should be concise yet descriptive of the image. A concise description is crucial for visually impaired users to comprehend the key elements conveyed by the images 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

Formatting with appropriate HTML tags enhances readability.  We have listed the function of four of the most used tags:

• <strong> makes specific 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 surrounding 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>