Forms, Media, and Accessibility

Session Time: 120 minutes

---

Table of Contents

1. Web Form Essentials and Architecture
2. Form Controls, Labelling, and Grouping
3. Multimedia and Accessibility (WCAG)
4. Leveraging AI for Inclusive Design
5. Lab: Accessible Forms and Media Integration
6. Wrap-Up and Reflection

---

Learning Objectives

Upon completion of this session, participants will be able to:

• Construct interactive forms using appropriate input types and validation.
• Explain how web forms function and identifying specific form controls, including labelling and grouping strategies.
• Evaluate multimedia integration for accessibility compliance.
• Utilize AI tools to audit and improve accessibility features.

---

Session Breakdown

Segment	Topic	Duration (minutes)
Concept I	Forms Architecture, Controls & Validation	45
Concept II	Media Integration & Accessibility Auditing	30
Practical Lab	Lab: Accessible Forms and Media Integration	45
Total		120 minutes

---

1. Web Form Essentials and Architecture

Learning objective: Explain Web Form Essentials and How Forms Work.

How Forms Work

Forms are the primary method for collecting user data and sending it to a server. They act as a data bridge between the Client (User) and the Server (Backend).

You may have used a website login form or a survey, which basically is for submitting information to a website. Like the example below of a login form in Wikipedia.

When a user submits a form, the browser packages the data into key-value pairs and sends it via an HTTP request.

sequenceDiagram
    participant U as User
    participant B as Browser
    participant S as Server

    Note left of U: Fills out inputs<br/>(Username, Email)
    U->>B: Clicks "Submit"
    Note right of B: Browser packages data:<br/>username="Dave"&email="dave@test.com"
    B->>S: HTTP Request (GET or POST)
    S-->>B: HTTP Response (Success/Redirect)
    Note left of U: User sees "Thank You" message

The <form> Element

Imagine you want to ask people on your website about their favorite actor. As a first step, you need a way to collect the data.

In HTML, you can build this using the form element (<form>), an <input> with a <label>, and a submit <button>.

<form>
  <label for="actor">Who is your favorite actor?</label>
  <input type="text" id="actor" name="actor">
  <button>Save</button>
</form>

When a form is submitted (for example, when the user clicks the Submit button), the browser makes a request. A script can respond to that request and process the data.

The container for all form controls is the <form> tag. It requires two crucial attributes:

1. action: The URL where the data is sent (e.g., /submit-contact).
2. method: How the data is sent.
   • GET: Data is appended to the URL (visible). Used for search bars.
   • POST: Data is sent in the request body (invisible). Used for passwords and sensitive data.

---

2. Form Controls, Labelling, and Grouping

To make a form interactive, you need to add form elements. There are controls to enter and select data, elements that describe controls, elements that group fields, and buttons to submit a form.

Common Input Types

The <input> element is the most versatile form control. Its behavior changes based on the type attribute.

Input Type	Description	Example Code
text	Standard single-line text.	<input type="text">
password	Masks characters (dots/asterisks).	<input type="password">
email	Validates for email format on mobile keyboards.	<input type="email">
radio	Select ONE option from a set.	<input type="radio" name="gender">
checkbox	Select MULTIPLE options.	<input type="checkbox">
date	Opens a date picker.	<input type="date">
file	Allows file uploads.	<input type="file">

Other Essential Controls:

<select> and <option>: Creates a dropdown menu.

<textarea>: For multi-line text (e.g., comments).

<button>: Triggers the submission.

Labelling Form Controls

Accessibility relies heavily on connecting a visual label to the data input.

Explicit Labelling (Best Practice): Use the for attribute on the label to match the id of the input.

<label for="username">Enter your Username:</label>
<input type="text" id="username" name="username">

Why? Clicking the text label focuses the input, and screen readers read the label aloud when the input is selected.

Grouping Inputs with <fieldset> and <legend>

When you have related inputs, like a set of radio buttons for "Shipping Method," you must group them semantically. A <div> is insufficient because a screen reader won't announce the context ("Shipping Method") when the user tabs to the "Express" radio button.

• <fieldset>: Wraps the group.
• <legend>: Provides the caption for the group.

<fieldset>
  <legend>Choose your shipping method:</legend>
  
  <input type="radio" id="standard" name="shipping" value="standard">
  <label for="standard">Standard (3-5 days)</label><br>

  <input type="radio" id="express" name="shipping" value="express">
  <label for="express">Express (1-2 days)</label>
</fieldset>

Client-Side Validation

HTML5 allows you to stop invalid data before it reaches the server. This provides instant feedback to the user .

• required: The field cannot be empty.
• type="email": Checks for an @ symbol and domain structure.
• min / max: Restricts numeric ranges (e.g., Age 18-99).
• pattern: Accepts a Regular Expression (Regex).
  • Example: pattern="[0-9]{5}" ensures exactly 5 digits for a Zip Code.

Tech Note: Always use the name attribute on inputs. Without it, the browser sends no data to the server for that field!

---

Intro to Accessibility Concepts

What is accessibility?

Accessibility refers to the practice of ensuring that digital products and services are usable by everyone, regardless of their abilities or disabilities. It involves designing and developing products and services in a way that allows individuals of all backgrounds and capabilities to use them effectively.

To achieve accessibility, we aim to accommodate individuals with various disabilities, including those related to visual, auditory, mobility, and cognitive functions.

Why is it important?

Accessibility is important because it allows everyone to participate fully in society. When digital products and services are not accessible, they exclude people with disabilities. This can significantly impact their lives, preventing them from accessing education, employment, and essential services.

Whether you are aware of it or not, you've experienced the benefits of accessibility while using technology and digital products. Have you ever had to adjust your phone's brightness when using it in bright sunlight or used voice commands to perform tasks on your phone or smart device? You can thank accessibility for those innovations!

Discussing disabilities

In crafting the content of these lessons, we've made thoughtful decisions grounded in inclusivity and clarity. We recognize our role as developers in ensuring the tools and platforms we create are accessible to all, without exception.

1. We speak of disabilities candidly, without resorting to euphemisms or condescension, because clear communication is the cornerstone of understanding and action. Our language strives to put people first, reflecting our focus on the individual rather than their disability, thereby promoting dignity and respect.
2. We are acutely aware that our audience is diverse and global, with varying preferences for how they are addressed or describe their experiences. While it is not feasible to cater to every individual preference in our broad communications, we strongly advocate for personal respect and adherence to one's chosen identifiers in one-on-one interactions. Asking and abiding by someone's preferences is not just a matter of politeness—it's a fundamental acknowledgment of their identity and experience.

By committing to accessibility in our lessons, we serve not only those with permanent disabilities but also those facing temporary challenges or none at all. Accessible content transcends boundaries, ensuring that everyone has equal opportunity to learn, engage, and succeed irrespective of their current abilities.

---

Visual Accommodations

What are visual disabilities?

Visual disabilities encompass conditions like blindness, low vision, and color blindness. Individuals with visual disabilities may face challenges in seeing or distinguishing between colors.

Accommodating visual disabilities

We can utilize these techniques to accommodate individuals with visual disabilities:

• Include alternative text (alt text) for images to ensure that people who use screen readers can comprehend the content of the images.
• Utilize high-contrast colors between text and background to enhance the visibility of text.
• Refrain from relying solely on color to convey information.

📚 A screen reader is a software application that converts text and other elements on a digital screen into speech or Braille. Users of screen readers can range from people with varying degrees of visual impairment, including those who are completely blind, to individuals with learning disabilities like dyslexia that make processing text challenging.

Alternative text (alt text)

Alternative text (alt text) is a brief image description that can be understood by screen readers. It is essential to provide alt text for all images, including decorative ones like logos or icons.

In situations where an image cannot be loaded, you might encounter alt text similar to the example above. If the image were visible, it would presumably display a blue car.

Writing effective alt text can be challenging for various reasons, primarily because it attempts to capture what is important about an image in text. However, the important elements in an image can change depending on the context in which the image is used. Sometimes, you may not have information about the context in which the image will be used, and that's perfectly fine.

Although all of these won't apply in all conditions, here are some tips for writing good alt text:

• Keep it concise. Alt text should be as brief as possible while still conveying the image's intended meaning.
• Avoid using words like "image" or "photo." Screen readers will already indicate that the content is an image.
• Be specific. If the image contains text, include that text in the alt text if it's relevant to the context.
• Be consistent. Use the same alt text for the same image wherever it appears on your website, unless the context requires a deviation.
• Capture emotion when applicable. If an image conveys emotional significance or depicts a dramatic or exciting scene, attempt to convey that emotion in the alt text if it's relevant.

For more info, this video from Google does a great job explaining how to write good alt text.

Who benefits?

These accommodations provide advantages for individuals with visual impairments but also extend their benefits to other groups:

• Users with low bandwidth or limited connectivity: In situations where images may not load, alt text can serve as a useful placeholder, ensuring that content remains accessible.
• Users who discover images through search engines: Alt text plays a crucial role in helping search engines understand and categorize the content of images, making it beneficial for a broader audience.

How to add alt text to an image

You can add alt text to an image by adding the alt attribute inside of an <img> element, as shown below:

<img 
  src="./image-source" 
  alt="Add alt text here! The alt text should be as short as possible but still 
    descriptive enough to convey the image's meaning."
>

🎓 You Do

Write alt text for the above image without consideration to the context the image will be used in.

Consider the colors in the image, the people or objects present, the style of the image, and any other details you think might be relevant.

Color contrast

Color contrast is the difference between the brightness of two colors. High color contrast makes text and images easier to read and comprehend.

The W3C publishes the Web Content Accessibility Guidelines (WCAG), which companies and governments often reference to help them implement accessibility standards on the web. One of the areas they set standards for is color contrast.

Who this benefits

Once again, these improvements provide advantages for individuals with visual impairments but also extend their benefits to various groups:

• Individuals without visual impairments: Users without visual impairments also encounter difficulties when dealing with low-contrast visual elements, as they can be challenging to read.
• Individuals using devices outdoors: Sunlight often poses readability challenges for many screens. High contrast can aid visibility when using devices outdoors.
• Individuals using low-quality displays: High-contrast monitors are a relatively recent development and may not be widespread across all display options, so this benefit extends to users with older or lower-quality displays.

Understanding WCAG color contrast requirements

The Web Content Accessibility Guidelines (WCAG) outline specific color contrast requirements to ensure digital content is accessible to a wide range of users. These guidelines prioritize inclusivity and usability for individuals with various visual abilities.

WCAG 2.0 level AA, which represents the easiest level of compliance, establishes minimum color contrast ratios. These ratios are as follows:

• For normal text: A minimum color contrast ratio of 4.5:1 is required. This means that there should be a significant difference in brightness between the text and its background to make it easily readable.
• For large text: When text is 24 pixels (px) or larger, a minimum color contrast ratio of 3:1 is specified. While the requirement is slightly lower for larger text, it still ensures readability for a broader audience.

💡 The ratio is expressed as "4.5:1" where the first number (4.5) represents the relative brightness or luminance of the text color, and the second number (1) represents the relative brightness or luminance of the background color.

There are many online tools to check the contrast between two colors.

• This contrast checker built by WebAIM is one the most popular ways to compare the contrast directly between two colors.
• Both Chrome and Firefox have built-in tools to evaluate a website and flag any inaccessible text found on it as well.

There is a recurring theme when implementing accessible content: simpler is almost always better. Black text on a white background or white text on a black background will always meet these contrast requirements. That said, you're not restricted from doing something unique. Just ensure it meets the guidelines.

🎓 You Do

Add this HTML inside the <body>:

<button id="btn">Click me!</button>

And this CSS to your CSS file:

#btn {
  background-color: #EFEFEF;
  color: #FFFFFF;
  font-size: 20px;
  padding: 8px 16px;
}

Alter the CSS for the button to meet the WCAG 2.0 level AA color contrast requirements.

Can't choose a color? Here are a few cool resources you can explore to help out:

• Adobe Color
• Coolors
• ColorSpace

Don't forget you can always opt for a simpler color palette.

Conveying meaning without color

While using color to highlight links or warnings can be effective, it should not be the sole method of conveying importance or clickability. This is because individuals perceive colors differently, and we aim to provide an inclusive user experience.

Consider the presentation of links, which traditionally feature distinct colors and are underlined. The underlining is especially beneficial for individuals with color vision differences, such as difficulty distinguishing between blue/black and purple/black, ensuring they can differentiate links from standard text.

Beyond this, underlined links are a widespread and clear pattern used across the internet. By adhering to this design, your users will immediately recognize how to navigate your site, even if they've never visited it.

Who benefits?

In addition to benefiting users with visual impairments, these practices also provide advantages to:

• People who are not visually impaired. Following established patterns helps all users find familiar landmarks in your application.
• People using devices outdoors or low-quality displays. Sunlight or bad display technology can make colors look washed out. Using signals beyond color increases the visibility of elements.
• A global audience. Cultural interpretations of color can vary, so using language other than color to communicate may be necessary for a site to be usable globally.

---

Auditory Accommodations

Learning objective: By the end of this lesson students will be able to accommodate users with auditory disabilities by implementing transcripts, closed captioning, and visual feedback.

What are auditory disabilities?

Auditory disabilities encompass conditions like deafness and hearing loss. Individuals with auditory disabilities may face challenges in hearing or understanding spoken language.

Accommodating auditory disabilities

When sound is not a reliable means of communication, visual communication becomes a crucial alternative.

We can utilize these techniques to accommodate individuals with auditory disabilities:

• Offer transcripts of audio content to enable access for those who are deaf or hard of hearing.
• Incorporate closed captioning in videos to ensure that individuals who are deaf or hard of hearing can comprehend the audio content.
• Provide visual feedback when users interact with elements like buttons.

Who benefits?

Accommodating auditory disabilities directly benefits individuals who are deaf or hard-of-hearing but extends its advantages to various groups:

• Users who consume content in settings where playing audio may be inappropriate. Cultural norms differ, but many consider it impolite to play audio in public spaces. Offering an option for users without headphones to access content without audio can be considerate.
• Users who prefer reading over listening to audio. Many people can read more quickly than spoken words can be conveyed.
• Users who struggle with auditory memory. Many individuals find it challenging to retain information presented solely through audio. Presenting information in multiple formats aids information retention. Transcripts also allow individuals to consume information at their own pace.
• Users with time constraints who cannot listen to entire audio content. Text is easily searchable, and highlights are simpler to locate.
• Users with temporary disabilities, such as ear infections.
• Users discovering audio content through search engines. Transcripts enable search engines to understand and index audio and video content.

🎓 You Do

Scenario: You are part of a design team working on a mobile app for a new social networking platform. One of the key features of the app is a video-sharing section where users can post short video clips with audio.

Task: List two ways that you could accommodate individuals with auditory disabilities in this scenario, specifically concerning the video-sharing feature.

---

Mobility Accommodations

Learning objective: By the end of this lesson students will be able to apply techniques to make web content accessible for individuals with mobility disabilities, including keyboard navigation and responsive design principles.

What are mobility disabilities?

Mobility accommodations can help people with arthritis, Parkinson's, MS, quadriplegia, paraplegia, and limb differences. Elderly users may also lack fine motor skills. These conditions have unique accessibility requirements and affect motor function to varying degrees.

Accommodating mobility disabilities

Here are some way that we can improve accessibility for users with mobility disabilities:

• Ensure buttons and links are large enough to be easily tapped with a finger or other pointing device. This is depicted above. Easy to tap elements should have a minimum surface area of 48px x 48px.
• Provide keyboard navigation. This allows users to navigate a website or app using only a keyboard. This option is critical for those who find it difficult to use a mouse or other pointing device.
• Minimize interactions where users are required to click and drag items.
• Use clear and consistent labels for all interactive elements. This will help users understand what each element does and how to interact with it, regardless of how they interact with the website. This can even help people who need to interact with your site using voice commands.
• Implement responsive design. This will ensure that your website looks good and functions well on all devices, regardless of screen size.

Who benefits?

Beyond benefitting people with long-term mobility challenges, others can benefit from these accommodations as well:

• Those with short-term disabilities like repetitive strain injuries or a broken arm.
• Multitasking users with only one or no hands available to interact with their devices. The user may be carrying out other activities like holding a baby, cooking food, and so on.

🎓 You Do

Scenario: Imagine you are a part of a development team tasked with designing a new e-commerce website. The website will offer a range of products and services and will be viewable on all devices.

Task: How would you apply the techniques learned in this lesson to accommodate individuals with mobility disabilities? List two considerations you would make when designing product card interactions on mobile devices.

---

Cognitive Accommodations

Learning objective: By the end of this lesson students will be able to accommodate individuals with cognitive disabilities, focusing on clear language, simplified UI, and consistent design patterns.

What are cognitive disabilities?

Individuals with cognitive disabilities may include those with learning disabilities, intellectual disabilities, and autism spectrum disorder. These individuals may face challenges related to memory, attention, problem-solving, and communication.

Accommodating cognitive disabilities

We can accommodate individuals with cognitive disabilities through accessibility using these techniques:

• When writing instructions and descriptions, prioritize clear and concise language, and avoid technical jargon.
• Simplify the user interface (UI) to prevent it from becoming too busy, overwhelming, or confusing. Avoid the use of unexpected or confusing elements.
• Offer multiple ways for users to interact with our content, including text, audio, images, and video. This approach provides users with greater flexibility, allowing them to choose the path that best suits their needs.
• Ensure that users receive clear and concise feedback when interacting with our interface. This feedback can take visual or auditory forms and helps users confirm that their actions have the desired effect.
• Maintain a consistent layout and design across our website to help users locate information and understand how our website operates. It's also beneficial to follow established patterns commonly used on other websites on the internet.

Who benefits?

By applying the techniques mentioned above, you'll notice that these guidelines benefit a wide range of individuals. Here are some other groups impacted positively by our efforts to accommodate cognitive disabilities:

• Individuals with low digital literacy: A simplified user interface and the use of clear, everyday language contribute to better understanding.
• The broader population: Reducing cognitive load benefits everyone, especially those who may be tired or experiencing stress.

🎓 You Do

Scenario: Imagine you are part of a design team tasked with creating a new mobile app for a weather service. The app provides weather forecasts, severe weather alerts, and storm tracking features.

Task: List two ways to accommodate individuals with cognitive disabilities while designing the user interface and content for the weather app.

---

Overlapping Accommodations

Learning objective: By the end of this lesson students will be able to implement inclusive design strategies that address multiple disabilities, emphasizing minimized animation, concise communication, and predictable interaction patterns.

Accommodating multiple disabilities

Many of the features we implement serve to accommodate individuals with multiple disabilities simultaneously.

Minimizing animation

Animation can lead to cognitive overload, making it more challenging for individuals to interact with your site. Additionally, individuals with epilepsy or other photosensitive conditions can be sensitive to flashing lights, flickering images, or patterns. It's essential to consider these factors in your design to ensure that everyone can safely access your content.

• Avoid using flashing lights, flickering images, or rapidly changing patterns in our app.
• If your content includes extensive animation that isn't essential, provide an easy way for users to disable it.
• Offer users the option to disable flashing lights and flickering images if needed.

Keep it concise

When communicating with your users, provide only relevant information and format it in easily digestible chunks. Shorter sentences and paragraphs are preferable, as they reduce cognitive load and enhance the browsing experience, particularly for individuals with visual disabilities.

Break up text into smaller paragraphs and utilize headings and subheadings to organize content. This approach makes your content more readable and scannable.

Be predictable

Don't reinvent the wheel. The best solutions may not be flashy, complex, or novel. Sticking to the fundamentals unlocks a surprising amount of accessibility.

• Use clear and consistent labels for all interactive elements to ensure that users understand their purpose and how to interact with them.
• Ensure that all interactive elements behave predictably. For example, clicking a button should trigger an expected action.
• Prioritize writing valid semantic HTML and CSS code to ensure the functionality of your website for all users.
• Avoid relying on proprietary browser features. While experimental features may be interesting, they aren't very useful if they are not widely available to all users.

---

Accessibility Principles

Learning objective: By the end of this lesson students will be able to apply the four core principles of accessibility — perceivable, operable, understandable, and robust.

The four principles of accessibility

The accommodations we've discussed help our content adhere to the four main accessibility principles. These principles state that content should be perceivable, operable, understandable, and robust.

Perceivable

Information and user interface components must be presented so all users can perceive them. We do this through a few methods, namely:

• Provide text alternatives so that content can be made into text.
• Design for adaptability - our content should be able to be presented differently without losing any important information or structure.

Operable

User interface components and controls must be operable by all users.

• Content should be keyboard accessible.
• Refrain from adding content that can trigger photosensitive conditions like epilepsy.
• Allow for different input modalities, such as touch.

Understandable

Information and the operation of user interface components must be understandable. For example:

• Content should be readable and presented in a predictable way. Instructions should be clear and concise.
• Design our sites to assist users in inputting information so that they can avoid and correct mistakes when they enter information we weren't expecting.

Robust

Content must be robust enough to be interpreted reliably by users, including the assistive technologies they may use.

• We should design our website to be compatible with as many different browsers and assistive technologies as possible.

---

Testing for Accessibility

Learning objective: By the end of this lesson students will be able to determine which accessibility testing methods should be employed to ensure digital products are accessible to all users.

Automated vs. manual testing

We've already talked about a few ways to test our sites to make sure they are accessible, including online tools and DevTools. Further testing can be done to identify and fix any accessibility problems in our software.

There are two main ways to test for accessibility: automated testing and manual testing.

Automated testing

Automated testing uses tools to scan a site's potential accessibility problems. These tools can be beneficial for identifying common problems, but they cannot find all accessibility issues. An example is the accessibility DevTools in Chrome and Firefox to evaluate for appropriate contrast.

Manual testing

Manual testing involves testing a digital product or service by hand. This is the best way to find all the accessibility problems in a product or service. However, manual testing can be time-consuming and expensive. An example of this is the contrast checker provided by WebAIM.

Which type of testing should we use?

The best approach to testing for accessibility is to use a combination of automated and manual testing. Automated testing can help us quickly identify common accessibility problems, while manual testing can help us find all the accessibility problems in our software.

Here is an example of how we can use automated and manual testing together:

1. We can use an automated testing tool to scan our software for potential accessibility problems.
2. We can then review the results of the automated testing tool to identify any accessibility problems that need to be fixed.
3. We can then manually test our software to find any accessibility problems the automated testing tool did not find.

---

Multimedia and WCAG Standards

Learning Objective: Evaluate multimedia integration for accessibility compliance .

The Web Content Accessibility Guidelines (WCAG) are the global standard for accessibility. A core principle is Perceivable: Information and user interface components must be presentable to users in ways they can perceive.

2.1 Images and Contextual Alt Text

The alt attribute is mandatory for the <img> tag. However, what you write inside depends on context.

[Image of alt text decision tree flowchart]

1. Informational Images: Convey meaning (e.g., a chart, a button icon).
   • Alt Text: "Bar chart showing sales increase of 10%."
2. Functional Images: Act as links or buttons (e.g., a printer icon).
   • Alt Text: "Print this page" (Not "Printer").
3. Decorative Images: Visual flair only (e.g., a swoop graphic).
   • Alt Text: alt="" (Empty string). This tells the screen reader to ignore it completely.

2.2 Semantic Figures

When an image has a visible caption, use <figure> and <figcaption>. This creates a semantic relationship between the image and the text description.

<figure>
  <img src="robot-arm.jpg" alt="An orange robotic arm assembling a car door." width="400">
  <figcaption>Fig 1. Automated assembly line usage in 2024.</figcaption>
</figure>

Audio and Video Accessibility

Multimedia must be accessible to those who cannot hear (Deaf/HoH) or cannot see (Blind/Low Vision).

• Captions (Subtitles): Text synchronized with audio. Required for video.
• Transcripts: A text document containing all dialogue and sound descriptions. Required for audio-only content (podcasts).
• Audio Descriptions: A secondary audio track describing visual actions (e.g., "The hero slowly opens the door").

The <track> Element: This element allows you to attach external text files (WebVTT format) to a video player.

<video controls>
  <source src="lesson.mp4" type="video/mp4">
  <track src="captions-en.vtt" kind="captions" srclang="en" label="English">
</video>

---

3. Utilizing AI to Audit and Improve Accessibility

Learning Objective: Utilize AI to audit and improve accessibility features .

AI tools act as a "Pair Programmer" that specializes in compliance. They can process code faster than a human to find syntax errors, but they require human judgment to assess context.

AI Use Case: The "Linting" Audit

You can paste a block of code into an AI and ask it to run a "WCAG Audit."

• Prompt: "Analyze this HTML form. List every violation of WCAG 2.1 Level AA. Specifically look for color contrast issues in the inline styles, missing labels, and vague link text."
• Why this helps: It catches things you might miss, like placeholder text being used instead of a real label (a common fail).

Limitations of AI

• Visual Context: AI cannot "see" if your text color #ccc is on a white background unless you explicitly tell it or provide a screenshot.
• Contextual Meaning: AI might suggest alt="dog" for an image. A human knows if it should be alt="Our mascot, Sparky" or alt="Golden Retriever running".

---

4. Lab: Accessible Forms and Media Integration

Lab Objective: Design a functional feedback form with multimedia elements. Use AI to audit accessibility gaps and implement recommended improvements manually .

Scenario

You are building a Customer Support Portal for a tech company. The page needs a form for users to report bugs and a video tutorial section on "How to Reset Your Device."

Step 1: File Setup

1. Create a folder support-portal.
2. Create index.html.
3. Add the basic HTML5 boilerplate (! + Tab in VS Code).

Step 2: Drafting the "Bug Report" Form

Create a form that collects the following. Focus on using the correct input types!

• User Name: Text.
• Device ID: Number.
• Issue Date: Date picker.
• Severity: Radio buttons (Low, Medium, High). Hint: Use <fieldset> here!
• Description: Textarea.

Code Starter (Incomplete - For Student Practice):

<form action="#" method="POST">
  <h1>Report a Bug</h1>
  
  <fieldset>
    <legend>Severity Level</legend>
    <input type="radio" id="low" name="severity" value="low">
    <label for="low">Low</label>
    </fieldset>
  
  <button type="submit">Submit Report</button>
</form>

Step 3: Integrating Video

1. Below the form, add a heading: <h2>Video Tutorials</h2>.
2. Embed a video file (use a placeholder like https://www.w3schools.com/html/mov_bbb.mp4).
3. Add the controls attribute so users can play/pause.
4. Challenge: The video tag implies visual content. Add a descriptive paragraph below it for users who cannot play the video, summarizing the content.

Step 4: The AI Accessibility Audit

1. Intentionally break your code: Remove the <legend> from your fieldset and remove the alt attribute from any images you added.
2. Copy the code into your AI assistant.
3. Prompt:

   "I am learning accessibility. Please audit this HTML code. 1) Identify any form inputs that are not properly grouped. 2) Check if all media has appropriate fallbacks. 3) Output the corrected code with comments explaining the fixes."

4. Task: Read the AI's explanation. Did it catch the missing <legend>?

Step 5: Manual Fix Implementation

Apply the fixes to your local file.

• Ensure all inputs have ids that match their label for attributes.
• Ensure the video has controls.
• Ensure the radio buttons are wrapped in a fieldset.

---

5. Wrap-Up and Reflection

Common Beginner Mistakes to Avoid

1. Using placeholder as a label: Placeholders disappear when the user types. This strains short-term memory and is invisible to some screen readers. Always use a visible <label>.
2. "Click Here" Links: Avoid links that say <a href="...">Click Here</a>. Screen reader users often browse by a list of links. Hearing "Click Here, Click Here, Click Here" is useless. Use descriptive text: <a href="...">Read our Returns Policy</a>.
3. Autoplay Media: Never set audio or video to autoplay. It is disorienting for screen reader users (who now hear two voices at once) and annoying for everyone else.

Discussion Questions

• How does semantic HTML (like <fieldset>) improve the experience for a blind user compared to a sighted user?
• In the lab, why did we use type="date" instead of just letting the user type the date in a text box? (Hint: Think about mobile users).