01 / What You Will Learn

Over the past several weeks, you have learned to structure content with HTML, style it with CSS, and make layouts responsive. Now you will consider how people experience your website in different ways.

02 / What Is Web Accessibility?

Web accessibility means designing and developing websites so people with different abilities can perceive, understand, navigate, and interact with the content.

Some people navigate with a keyboard rather than a mouse. Some use screen readers that announce page content aloud. Others may have low vision, color-vision differences, hearing disabilities, or difficulty using small interactive controls.

Accessibility is not achieved by one CSS property or a single testing tool. It comes from a series of thoughtful design and development decisions.

03 / Use HTML to Communicate Meaning

HTML elements provide structure and meaning. Choosing the correct element helps browsers and assistive technologies interpret the page.

<header>
  <h1>My Design Portfolio</h1>
</header>

<nav aria-label="Main navigation">
  <a href="#work">View my work</a>
  <a href="#about">About me</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <section id="work">
    <h2>Selected Work</h2>
    <p>A collection of recent projects.</p>
  </section>
</main>

<footer>
  <p>© 2026 My Portfolio</p>
</footer>

These elements describe the roles of different page areas:

• <header> introduces a page or section.
• <nav> identifies a navigation area.
• <main> contains the page’s primary content.
• <section> groups related content.
• <footer> contains closing or supplementary information.

04 / Images and Alternative Text

Alternative text, often called alt text, communicates the purpose or meaningful content of an image to people who may not be able to see it. It can also appear when an image fails to load.

<img src="abstract-painting.jpg"
     alt="Abstract painting with layered red and blue brushstrokes">

Write alt text that communicates the image’s relevant content in context. You do not need to begin with “Image of” or “Picture of.”

<img src="decorative-line.png"
     alt="">

If an image is purely decorative and does not add information, an empty alt attribute tells assistive technology it can be skipped. Do not omit the alt attribute entirely.

Practice: improve the description

For artwork, consider what a person needs to understand about the image. Describe important subjects, actions, and visual details without turning the alt text into an unnecessarily long artist statement.

05 / Color Contrast and Readability

Color helps establish a visual identity, but text must remain readable against its background. Pale text on a pale background or dark text on a dark background can make a page difficult to use.

As a general WCAG guideline, normal-sized text should have a contrast ratio of at least 4.5:1 against its background. Large text has a lower minimum of 3:1. These are useful starting points for evaluating your color choices.

body {
  background-color: #ffffff;
  color: #172033;
}

.primary-button {
  background-color: #183b91;
  color: #ffffff;
}

Use a contrast checker to evaluate your chosen foreground and background colors. Do not rely on color alone to communicate meaning: pair color with text, labels, icons, or other visual cues.

06 / Links, Buttons, and Keyboard Navigation

Interactive elements should communicate what they do and be usable without a mouse.

<!-- Less descriptive -->
<a href="portfolio.html">Click here</a>

<!-- More descriptive -->
<a href="portfolio.html">View my design portfolio</a>

Descriptive links make it easier for people to understand where a link leads, especially when they encounter links outside the surrounding paragraph.

<!-- Use a link to navigate to another page -->
<a href="about.html">About me</a>

<!-- Use a button to perform an action -->
<button type="button">Show details</button>

Browsers provide built-in keyboard behavior for links, buttons, and standard form controls. Avoid removing the visible focus outline unless you replace it with an equally clear indicator.

Keyboard test

1. Click the preview, then press Tab to move between interactive elements.
2. Look for a visible focus indicator showing which element is selected.
3. Press Shift + Tab to move backward.
4. Use Enter or Space as appropriate to activate the focused link or button.

07 / Introduction to HTML Forms

Forms allow visitors to enter information. You see them on contact pages, event registrations, feedback pages, surveys, and many other websites.

A basic form can use several HTML elements:

Connect labels to fields

A label’s for attribute should match the field’s id. This relationship helps users, including people using screen readers, identify each field.

<label for="name">Your name</label>
<input type="text" id="name" name="name">

Notice that both the label and the input use the same identifier, name. If the identifiers do not match, the label may not be correctly associated with its field.

08 / Build an Accessible Contact Form

In this guided example, you will create a contact form for a personal portfolio. It includes a name field, an email field, a reason for contacting you, a message area, and a submit button.

<section class="contact-section" id="contact">
  <h2>Get in Touch</h2>
  <p>Have a question or project idea? Send me a message.</p>

  <form action="#" method="post">
    <div class="form-field">
      <label for="contact-name">Your name</label>
      <input type="text" id="contact-name"
             name="name" autocomplete="name" required>
    </div>

    <div class="form-field">
      <label for="contact-email">Email address</label>
      <input type="email" id="contact-email"
             name="email" autocomplete="email" required>
    </div>

    <div class="form-field">
      <label for="contact-reason">Reason for contacting me</label>
      <select id="contact-reason" name="reason">
        <option value="">Choose an option</option>
        <option value="project">Project inquiry</option>
        <option value="collaboration">Collaboration</option>
        <option value="other">Other</option>
      </select>
    </div>

    <div class="form-field">
      <label for="contact-message">Your message</label>
      <textarea id="contact-message" name="message"
                rows="5" required></textarea>
    </div>

    <button type="submit">Send Message</button>
  </form>
</section>

What the attributes do

• type=”text” creates a field for short text.
• type=”email” provides a field intended for an email address and enables basic browser validation.
• required asks the browser to prevent submission when a required field is empty.
• autocomplete helps browsers recognize common information fields.
• rows=”5″ gives the message area an initial height of five text rows.
• type=”submit” makes the button submit the form.

09 / Style the Form with CSS

Accessible forms can still have a strong visual identity. Use clear spacing, readable text, visible field boundaries, and a distinct button. The following CSS creates a simple layout that can adapt to narrower screens.

.contact-section {
  max-width: 700px;
  margin: 40px auto;
  padding: 24px;
  background: #f4f6fa;
  border-radius: 12px;
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: #172033;
  background: #ffffff;
  border: 1px solid #68748a;
  border-radius: 6px;
}

.form-field textarea {
  resize: vertical;
}

.contact-section button {
  padding: 12px 20px;
  border: 0;
  border-radius: 6px;
  background: #183b91;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-section button:hover {
  background: #10285f;
}

.contact-section button:focus-visible {
  outline: 3px solid #2855d9;
  outline-offset: 3px;
}

@media (max-width: 500px) {
  .contact-section {
    padding: 16px;
    margin: 20px auto;
  }
}

Try changing the background color, button color, border radius, and spacing. Keep enough contrast between text and its background, and make sure keyboard focus remains visible.

10 / In-Class Assignment: Accessible Contact Page

Create a single-page contact page for a creative portfolio, student organization, fictional studio, or project of your choice. The goal is to combine the HTML structure you have learned with thoughtful usability and accessible form design.

Required elements

Suggested workflow

1. Plan the page. Decide who the page is for and what information visitors need to provide.
2. Build the HTML. Start with the page structure and labeled form fields before adding decorative styles.
3. Apply CSS. Use consistent spacing, typography, borders, and colors to create a clear visual hierarchy.
4. Check accessibility. Test labels, contrast, heading order, link descriptions, and keyboard focus.
5. Test responsiveness. Preview the page at narrow and wide screen sizes and correct any overflow.
6. Revise the design. Improve any confusing labels, cramped spacing, or unclear instructions.

11 / Independent Practice

Expand your contact page into a small, more complete website experience. You can adapt the page to fit a personal portfolio, creative business, exhibition, student club, or fictional brand.

Choose at least two improvements beyond the basic requirements:

• Add a short FAQ section using semantic headings.
• Add a project inquiry category that makes sense for your subject.
• Improve the visual hierarchy with a consistent type scale and spacing system.
• Check your chosen text and background colors with a contrast checker.
• Add a descriptive link back to your portfolio or home page.
• Improve the page’s mobile layout and test the keyboard focus order.

12 / Testing Checklist

Before you submit, test the page from the perspective of someone visiting it for the first time.

13 / What to Submit

Submit the following through the course’s designated submission area:

How your work will be evaluated

• HTML structure: Appropriate semantic elements and logical headings.
• Form usability: Clear labels, suitable field types, and understandable instructions.
• Accessibility: Attention to contrast, keyboard access, image alternatives, and meaningful links.
• CSS design: Consistent typography, spacing, and visual hierarchy.
• Responsive behavior: A layout that remains usable at different screen widths.
• Reflection: An explanation of your design choices and testing process.

14 / Key Terms

15 / Online Resources

Use these resources to review the concepts and explore examples from established web standards organizations.