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…”).

Advanced 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.

Accessibility Basics in HTML