HTML Exercise

Let’s fix some HTML code in an example!

Go through the form fields, “buttons”, images, links and content sections. See what markup and controls (interactive components) you can improve with standard HTML elements and attributes.

Play with labeling of controls, keeping in mind the Label in Name (opens in a new tab) criteron in the Web Content Accessibility Guidelines (among other success criteria). See debugging tips below.

• Code playground below: (open in new window)

• Find the completed code in this codebase: /completed-components/exercise-3-html

• View completed code on a page: /product-page-exercise-3

Announcements

• Get It By 12/24 W/ Free Standard Shipping  See Cutoff Dates

• Gear Gifts For Everyone On Your List  Shop Our Gift Guide

• Winter’s Warmest Boots, Beanies, Mittens & More  Shop Now

Background

Cart, contains items

< Back

/

Ruffwear

K9 Float Coat

5 out of 5 stars

1 Review

---

$89.95

Lowest Price Guarantee

Color:

Blue Dusk

Red Sumac

Wave Orange

Size:

XXS

XXS

XS

XS

S

S

L

L

XL

XL

Quantity

Add to Cart

Add to Wishlist

Debugging tips 🧐

To debug and verify behavior of your HTML, use these tools and techniques:

• Use your keyboard to ensure controls are reachable and operable.
• Try out Landmarks, Headings, and Accessible Names under Ad-hoc tools in Accessibility Insights (opens in a new tab).
• Inspect the DOM to see how content and controls are marked up:
  • Are prominent pieces of text in h1-h6 tags, creating an overall outline?
  • Are groups of items in unordered or ordered lists?
  • Are HTML elements used according to their specifications, such as listitems as children of a list?
  • How are forms marked up? Are individual fields properly labeled? Are there fieldset groups?
  • Do buttons look like buttons, and links look like links?
• Run an extension like Axe (opens in a new tab) to see if there are any other violations related to HTML content structure, landmarks, or ARIA (sneak peek to the next section).
• Fire up VoiceOver or NVDA and navigate through the page. How are interactive components presented? What can you learn from the VoiceOver rotor or NVDA Elements List?