Guideline 1.3 Adaptable (WCAG 2.2)

Headings help create a well-defined structure that assists screen readers in understanding the page layout. You must start with an H1 at the top level and use subsequent headings (H2, H3, etc.) to indicate new sections and sub-sections, much like a book’s table of contents.

<main>
  <h1>Classic Margherita Pizza</h1>
  <p>Welcome to our weekly spotlight recipe! This week, we're making a classic Margherita pizza, a simple yet delicious favorite.</p>
 <h2>The Story Behind the Dish</h2>
 <p>The Margherita pizza is named after Queen Margherita of Savoy. It's known for its ingredients that mimic the colors of the Italian flag: red tomato sauce, white mozzarella, and green basil.</p>
</main>

Using lists helps organize content in a straightforward, navigable format for all users, including those using assistive technologies. Use unordered lists (<ul>) for non-sequential items and ordered lists (<ol>) for content that should follow a specific sequence.

<section>
  <h2>Ingredients</h2>
  <ul>
    <li>1 ball of pizza dough</li>
    <li>2 tomatoes, sliced</li>
    <li>1 ball of mozzarella cheese</li>
    <li>Fresh basil leaves</li>
    <li>Extra virgin olive oil</li>
    <li>Salt to taste</li>
  </ul>
  
  <h3>Preparation Steps</h3>
  <ol>
    <li>Preheat your oven to its highest setting.</li>
    <li>Roll out the pizza dough on a clean surface.</li>
    <li>Arrange tomato slices evenly over the dough.</li>
    <li>Distribute torn mozzarella across the tomatoes.</li>
    <li>Drizzle with olive oil and sprinkle a pinch of salt.</li>
    <li>Bake for 10-12 minutes until the crust is golden and the cheese bubbly.</li>
    <li>Add fresh basil leaves just before serving.</li>
  </ol>
</section>

Structured tables allow all users, including those using assistive technologies, to understand the organization and relationships of the information presented. Use captions to describe the table. Use headers with the ‘scope’ attribute to clarify the relationship between header and data cells.

<table>
  <caption>Nutritional Values of Ingredients</caption>
  <thead>
    <tr>
      <th scope="col">Ingredient</th>
      <th scope="col">Calories</th>
      <th scope="col">Protein (grams)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Pizza Dough</th>
      <td>250</td>
      <td>8</td>
    </tr>
    <tr>
      <th scope="row">Mozzarella Cheese</th>
      <td>280</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

Imagine a webpage with two columns. The content should flow logically from the top of the first column to the bottom and then continue from the top of the second column. If read in any other order, the content might not make sense.

When organizing events like a dog show, it’s crucial to ensure all attendees can easily understand the schedule and find their way around. Many traditional event schedules rely heavily on visual cues, such as colors and symbols, to differentiate between venues and activities. However, this approach can create barriers for individuals who are blind, have low vision, or are colorblind.

Instructions: The venue for each event is indicated by both the name of the ring and an optional color ribbon.

<table border="1">
  <caption>Dog Show Competition Schedule</caption>
  <thead>
    <tr>
      <th>Time</th>
      <th>Event</th>
      <th>Venue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9:00 AM</td>
      <td>Best in Breed</td>
      <td>Ring A <span style="color:blue">(Blue Ribbon)</span></td>
    </tr>
    <tr>
      <td>10:30 AM</td>
      <td>Obedience Trials</td>
      <td>Ring B <span style="color:green">(Green Ribbon)</span></td>
    </tr>
  </tbody>
</table>
<p><strong>Instructions:</strong> The venue for each event is indicated by both the name of the ring and an optional color ribbon.</p>

Check out Lane Community College Web Team blog post about the Garmin Connect app.

Pretend you’re creating an online intake form for your website. Below is the HTML code for a simple form designed to gather basic contact information using the ‘autocomplete’ attribute and additional comments from your clients.

<form>
  <!-- Client's Name -->
  <label for="client-name">Your Name:</label>
  <input type="text" id="client-name" name="client-name" autocomplete="name" placeholder="First and Last Name" required>
  <!-- Client's Email -->
  <label for="client-email">Email:</label>
  <input type="email" id="client-email" name="client-email" autocomplete="email" placeholder="example@example.com" required>
  <!-- Additional Information -->
  <label for="additional-info">Additional Information:</label>
  <textarea id="additional-info" name="additional-info" placeholder="Enter any additional information here"></textarea>
  <!-- Submit Button -->
  <button type="submit">Submit</button>
</form>