Building a Responsive and Accessible Web Page

Overview

For this Skills-Based Assessment, you will demonstrate your ability to create a well-structured, responsive, and accessible web page using the HTML and CSS techniques you have learned. You will be assessed on your use of semantic HTML, CSS layout techniques (including Flexbox and Grid), and the implementation of accessibility features.

Time Allotment

• Time: 3 hours

Project Requirements

You will design and develop a responsive, multi-section webpage for a fictitious company called Accessible Design Co.. Your webpage should meet the following criteria:

1. Semantic HTML Structure

• Use semantic HTML elements (<header>, <main>, <section>, <article>, <footer>, etc.) to create a clear and meaningful structure.
• Ensure that all content is organized hierarchically using proper headings (<h1>, <h2>, etc.).

2. Responsive Design Using Flexbox and Grid

• Implement a responsive navigation bar using Flexbox that adjusts to smaller screen sizes.
• Use CSS Grid to create a multi-column layout for the main content area that collapses to a single column on mobile devices.
• Add media queries to adjust the layout and font sizes for different screen sizes (e.g., 600px and 1024px breakpoints).

3. Accessibility Features

• Use ARIA roles and attributes to enhance the accessibility of interactive elements:
  • Add role="navigation" to the navigation bar.
  • Use aria-label or aria-labelledby for labeling interactive elements where necessary.
  • Include aria-live attributes for dynamically updating content, if applicable.
• Ensure that all images have meaningful alt text, and decorative images use alt="".
• Design forms with accessible labels and validation feedback:
  • Use <label> elements associated with each form input.
  • Add aria-describedby for additional instructions or error messages.
• Ensure proper keyboard navigation and focus management for all interactive elements.

4. Color Contrast and Visual Design

• Ensure text has a sufficient contrast ratio against the background (use tools like WebAIM Contrast Checker ).
• Use CSS to style focus states for interactive elements (e.g., links and buttons) to make them visible when navigated with a keyboard.

Project Description and Example Content

Header Section

• A company logo (use a placeholder image) and a responsive navigation bar with links to “Home,” “About Us,” “Services,” and “Contact.”

Main Content

• Hero Section: A large, welcoming section with a background image, an attention-grabbing heading, and a call-to-action button.
• About Us Section: A brief description of the company, organized using semantic tags.
• Services Section: A grid-based layout that showcases different services the company offers, with icons or images and short descriptions.
• Contact Form: A form for users to get in touch, including fields for “Name,” “Email,” “Subject,” and “Message,” with accessible labels and ARIA attributes.

Footer Section

• A footer with copyright information, social media links, and contact details.

Evaluation Criteria

Submission Instructions

1. Prepare Your Project:

   • Ensure that your code is clean and well-documented.
   • Test your webpage in multiple browsers and screen sizes to ensure responsiveness and accessibility.

2. Submit Your Work:

   • Upload your project files to a GitHub repository.
   • Provide a README.md file with a brief description of your project and instructions on how to view or run it.
   • Submit the link to your GitHub repository on Canvas.

Reflection Questions

After completing your project, answer the following questions:

1. What accessibility challenges did you face, and how did you address them?
2. How did you ensure that your design was responsive and accessible to all users?
3. What tools or resources did you find most helpful during this project?

Additional Resources

• W3C Web Accessibility Initiative (WAI) 
• A Complete Guide to Flexbox - CSS Tricks 
• A Complete Guide to Grid - CSS Tricks 
• WebAIM - Color Contrast Checker