News_Homepage_HTML_SCSS_GRID_TYPESCRIPT

What are you most proud of, and what would you do differently next time? Accessibility Features

Accessibility has been a priority throughout the site. Here are the key implementations:

• Semantic Elements: Proper use of HTML5 elements ensures logical content organization.
• ARIA Attributes:
  • aria-expanded and aria-hidden to indicate the state of the mobile navigation menu.
  • aria-label and aria-labelledby for descriptive labels on links, sections, and images.
• Screen Reader Support:
  • sr-only class hides visual elements but keeps them accessible to screen readers.
  • Navigation links and buttons are descriptive and provide context for their actions.
• Keyboard Navigation: The site is fully navigable via keyboard, with logical focus order and interactive elements like buttons and links.

---

Handling Responsive Navigation with the Burger Menu

The responsive navigation is managed using a burger menu for mobile devices. Here’s how it works:

1. Checkbox Input: A hidden <input type="checkbox"> element toggles the menu's visibility.
2. ARIA States:
   • aria-expanded dynamically updates to reflect whether the menu is open or closed.
   • aria-controls links the toggle button to the corresponding navigation element for assistive technologies.
3. CSS Styling:
   • The sidebar (<aside>) is styled to be off-screen by default and slides into view when the checkbox is checked.
   • Media queries ensure the desktop navigation (<nav class="desktop-nav">) is displayed instead of the burger menu on larger screens.
4. Progressive Enhancement: The approach ensures that the menu is usable even if JavaScript is disabled.

This implementation ensures that the navigation is both responsive and accessible across a variety of devices and user needs.

What challenges did you encounter, and how did you overcome them?

This is the first time I build an Animated Hamburger Menu With Only CSS, hopefully I was able to follow some youtube tutorial to get some help. It was fun to do.

What specific areas of your project would you like help with?

Feel free to give my any feedback :) much appreciate