https://github.com/kafkaesc/angular-skipper
Angular-Skipper is a demo for how to effectively implement a skip to main content link in Angular. ⛵️
https://github.com/kafkaesc/angular-skipper
accessibility angular bootstrap javascript typescript ux web
Last synced: 2 months ago
JSON representation
Angular-Skipper is a demo for how to effectively implement a skip to main content link in Angular. ⛵️
- Host: GitHub
- URL: https://github.com/kafkaesc/angular-skipper
- Owner: kafkaesc
- License: mit
- Created: 2021-08-14T23:34:49.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-13T02:25:56.000Z (over 3 years ago)
- Last Synced: 2025-02-17T14:44:55.581Z (over 1 year ago)
- Topics: accessibility, angular, bootstrap, javascript, typescript, ux, web
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# My Favorite Things
This project is a demonstration of how to implement a reliable 'skip to main content' button using the Angular framework. This button is not always necessary, but on pages with large headers it can be an important quality of life improvement for keyboard-focused and keyboard-dependent users.
The layout for this site includes a skip to main content button next to the site logo, but it is only visible when focused. Clicking or pressing enter on the button will shift the focus the first item in the page's main content, skipping the navigation items as suggested.
Beneath the main navigation menu is a sub-menu demonstrating different typical methods one might use to write a skip to main content button for a site. So far only `[href]` calling a string from the component's TypeScript works as a reliable solution.
If you are using Safari or Firefox on macOS and this site is not behaving as expected, you might want to check your system settings. You can find more details about this [here](https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox/11713537#11713537).
To run:
1. navigate to the project folder
1. `npm install`
1. `ng serve -o`
A working version of this site can be viewed at https://kafkaesc.github.io/Angular-Skipper.
The full code for this site can be viewed at https://github.com/kafkaesc/Angular-Skipper.
Built by Jared Hettinger.