Practice Problems

Create a new HTML file for each problem, focusing on accessibility features.

Problem 1: Accessible Image Gallery

File Name: problem1.html
Display three images in a simple gallery.
Provide meaningful alt text for each image (no empty or generic “image” alt attributes).
Add a heading (<h2>) describing the gallery topic (e.g., “Travel Destinations”).

Problem 2: Accessible Form

File Name: problem2.html
Create a form with:
- Required text field for “Name.”
- Email field with an appropriate label.
- A <button> to submit.
Use ARIA attributes where relevant (aria-required="true", role="form" if desired).
Ensure each <input> has a matching <label>.

Problem 3: Navigation and Keyboard Focus

File Name: problem3.html
Add a <nav> menu with 3–5 links.
Use tabindex="0" on a specific section to make it focusable by keyboard alone.
Write a paragraph explaining how keyboard users can navigate your page (e.g., “Press Tab to move to the next link or form field…”).

Assignment Submission

After completing these exercises, call Mike over for feedback on your newly created HTML documents.

Advance Problems

Problem 4: Accessible Multimedia Section

File Name: problem4.html

Instructions:

HTML Structure:
- Create a standard HTML document with appropriate <head> and <body> sections.
- Set the <title> to “Accessible Multimedia Section.”
Multimedia Content:
- Embed a video using the <video> tag. (If you do not have a video file, you can use a placeholder source such as sample-video.mp4.)
- Include a poster attribute for the <video> that references an image (e.g., images/video-poster.jpg) with a descriptive alt text provided separately (e.g., in a nearby <p>).
- Provide accessible controls for the video (using the controls attribute).
Captions/Transcript:
- Add a <track> element inside the <video> tag for captions (using kind="captions"). (You can use a placeholder file name such as captions.vtt.)
- Below the video, include a paragraph or a link to a text transcript for users who rely on assistive technologies.
Accessibility Enhancements:
- Use ARIA attributes where appropriate. For example, add aria-label="Video player showing a sample multimedia presentation" to the <video> tag.
- Provide clear descriptive text (using <p> or <figcaption>) that explains the content of the video.

Objective:

Build an accessible multimedia section that includes video content with captions, a transcript, and appropriate ARIA labels and descriptive text for users who depend on assistive technologies.

Problem 5: Accessible Data Table

File Name: problem5.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- Set the <title> to “Accessible Data Table.”
Table Creation:
- Build a table that displays, for example, quarterly sales data or any other tabular information.
- Use the <caption> element to provide a concise title for the table (e.g., “Quarterly Sales Data”).
Table Headers and Cells:
- Structure the table with <thead>, <tbody>, and, optionally, <tfoot>.
- In the <thead>, create a row with <th> elements for each column (e.g., “Quarter,” “Sales,” “Growth”).
- For each <th>, add the scope attribute (e.g., scope="col") to clearly indicate the header’s relation to its cells.
- Populate the <tbody> with several rows of sample data.
Accessibility Enhancements:
- Use ARIA roles if necessary (for example, role="table" on the <table> element, although semantic HTML is usually sufficient).
- Ensure that the table’s data is easy to interpret by providing a descriptive <caption> and using proper header associations.

Objective:

Create an accessible data table that is easy to navigate using screen readers by applying proper table structure, captions, and header associations.

Problem 6: Accessible Landing Page with ARIA Landmarks

File Name: problem6.html

Instructions:

HTML Structure:
- Set up a standard HTML document.
- Set the <title> to “Accessible Landing Page.”
Page Layout with Landmarks:
- Header:
  - Use a <header> element with a role="banner".
  - Include a site title and a navigation menu.
  - In the <nav> element, add a list of links (e.g., Home, Services, Contact) and include aria-label="Main Navigation".
- Main Content:
  - Create a <main> element with role="main".
  - Add one or more <section> elements with descriptive headings (e.g., <h2>About Us</h2>).
  - Within each section, include text and images. Ensure each image has a meaningful alt attribute.
- Complementary Section (Optional):
  - Use an <aside> with role="complementary" for additional information or links related to the main content.
- Footer:
  - Add a <footer> with role="contentinfo".
  - Include contact details, social media links, or copyright information.
Keyboard Navigation & Focus:
- Add a focusable element (using tabindex="0") in a prominent area (e.g., a “Skip to Content” link at the top) so that keyboard users can quickly jump past the navigation.
Explanatory Text:
- Write a short paragraph at the bottom of the page (or as a comment in your code) explaining how the use of ARIA landmarks and focusable elements improves navigation for users relying on assistive technologies.

Objective:

Develop a full landing page that leverages ARIA roles and landmarks to create a clearly defined structure, enhancing the overall accessibility for screen readers and keyboard users.

Day 8: Accessibility Basics in HTML