{"id":21240636,"url":"https://github.com/chrisnajman/accessible-mobile-menu","last_synced_at":"2026-04-09T17:01:16.320Z","repository":{"id":214961770,"uuid":"737514188","full_name":"chrisnajman/accessible-mobile-menu","owner":"chrisnajman","description":"A responsive mobile menu with accessibility features designed for both screen reader users and keyboard-based navigation.","archived":false,"fork":false,"pushed_at":"2024-01-16T17:21:09.000Z","size":51,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T19:36:42.789Z","etag":null,"topics":["accessibility","aria-attributes","css-imports","css-nesting","dark-mode-toggle","html-css-javascript","js-modules","mobile-menu","svg-animations","svg-icons","svg-sprites"],"latest_commit_sha":null,"homepage":"https://chrisnajman.github.io/accessible-mobile-menu/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisnajman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-31T10:35:44.000Z","updated_at":"2024-01-09T17:53:46.000Z","dependencies_parsed_at":"2024-01-16T20:47:39.346Z","dependency_job_id":null,"html_url":"https://github.com/chrisnajman/accessible-mobile-menu","commit_stats":null,"previous_names":["chrisnajman/accessible-mobile-menu"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-mobile-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-mobile-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-mobile-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-mobile-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisnajman","download_url":"https://codeload.github.com/chrisnajman/accessible-mobile-menu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681002,"owners_count":20330155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","aria-attributes","css-imports","css-nesting","dark-mode-toggle","html-css-javascript","js-modules","mobile-menu","svg-animations","svg-icons","svg-sprites"],"created_at":"2024-11-21T00:52:14.131Z","updated_at":"2025-12-30T17:36:56.630Z","avatar_url":"https://github.com/chrisnajman.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accessible Mobile Menu\n\nA responsive mobile menu that prioritizes accessibility features for screen readers and keyboard users.\n\n---\n\n## Description\n\nThe mobile menu is designed to be responsive, and is visible on screens less than 768px wide. It is initially hidden and appears upon clicking the hamburger menu button. Clicking on a menu item will close the menu.\n\n---\n\n## Accessibility Features\n\n### Screen Reader Accessibility\n\nThe menu is accessible to screen readers through the use of appropriate ARIA attributes.\n\n#### ARIA Attributes Used\n\n- `aria-controls=\"site-navigation\"`: Associates the hamburger button with the site navigation menu.\n- `aria-expanded=\"false\" / aria-expanded=\"true\"`: Dynamically updates the state of the navigation menu, indicating whether it's expanded or collapsed.\n\n### Keyboard Accessibility\n\nThe menu ensures accessibility for keyboard users by allowing them to navigate to the hamburger button using the keyboard's tab functionality. Once focused on the button, users can press the 'enter' key to toggle the visibility of the menu. This behavior ensures that keyboard users can interact with the menu effectively, enabling them to open and close it without relying on mouse interactions.\n\n### WAVE Web Accessibility Evaluation Tools Report\n\n- [Automated accessibility analysis results](https://wave.webaim.org/report#/https://chrisnajman.github.io/accessible-mobile-menu/)\n\n---\n\n## Usage\n\n### HTML Structure\n\nThe HTML structure comprises a div element with an ID of `primary-navigation`, containing the hamburger button and the navigation menu.\n\n### CSS\n\nThe CSS defines the styles for the mobile menu and the hamburger button, including responsive design for different screen sizes.\n\n### JavaScript Functionality\n\nThe JavaScript function `btnHamburger()` handles the click event on the hamburger button, toggling the visibility of the navigation menu and updating ARIA attributes accordingly.\n\n---\n\n## Source\n\n- The animation on the button is based on the basic version of [Basic, Intermediate \u0026 Pro animated hamburger icons](https://youtu.be/R00QiudbD4Y?si=VDTxfeCotRcLGnGx).\n\n---\n\n## Testing\n\nTested on Windows 10 with:\n\n- Chrome\n- Firefox\n- Microsoft Edge\n\nThe page has been tested in both browser and device views.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Faccessible-mobile-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisnajman%2Faccessible-mobile-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Faccessible-mobile-menu/lists"}