Udemy's Omnifood Project

After completing Jonas Schmedtmann's Build Responsive Real-World Websites with HTML and CSS course, I further enhanced the Omnifood project by incorporating key accessibility features:

Skip to Main Content:
Added a "Skip to main content" link for easier navigation by keyboard and screen reader users.
Focus Indicator:
Provided a visual indication for focused elements to improve keyboard navigation and accessibility.
Button Clarity for Screen Readers:
Prevented screen readers from simultaneously reading the "Start eating well" and "Learn more" buttons by managing their accessibility attributes.
Image Visibility for Screen Readers:
Hidden customer photos from screen readers, allowing blind and low-vision users to focus on content without distraction while still understanding the page structure.
Colour Contrast Improvements:
Fixed colour contrast issues, ensuring text passes accessibility standards and is legible for users with low vision.
Improved "How It Works" Section:
Ensured screen readers announce "Step" before each number in the process, providing clearer instructions for blind users.
Enhanced Diagram Accessibility:
Added descriptive context to screen readers for categories (e.g., “Vegan category”) and reviews (e.g., "441 reviews"), while hiding decorative icons like flames, cutlery, and stars.
Meal Plan Navigation:
Provided screen readers with additional context, such as saying "Plan" when reading headings like "Starter" or "Complete" and distinguishing links like "Start eating well with the starter plan."