https://github.com/scottaohara/aria_links
Fake links made with ARIA & Vanilla JavaScript
https://github.com/scottaohara/aria_links
aria fake-links links
Last synced: 10 days ago
JSON representation
Fake links made with ARIA & Vanilla JavaScript
- Host: GitHub
- URL: https://github.com/scottaohara/aria_links
- Owner: scottaohara
- License: mit
- Created: 2017-03-12T21:06:06.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2021-12-12T02:32:31.000Z (almost 4 years ago)
- Last Synced: 2025-05-25T08:39:13.216Z (5 months ago)
- Topics: aria, fake-links, links
- Language: HTML
- Homepage: https://scottaohara.github.io/aria_links/
- Size: 40 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ARIA Links
If you need a link, you should really just use the `` element with a valid `href`. But maybe you have a legitimate reason to not use an ``? I can't imagine it's actually a 'good' reason. But hey, you do you.
And while you are doing you, you can use this script to help make sure your fake links will be keyboard accessible and programmatically exposed as links to assistive technologies.
See the script in action: [ARIA Links demo](https://scottaohara.github.io/aria_links/)
## Usage
Since custom ARIA links require JavaScript to work, this script allows for two base mark-up patterns to be progressively enhanced into functioning links. Each pattern will gracefully degrade to static text if JavaScript is unavailable.
### Option 1
Use the following mark-up to display static text if JavaScript is unavailable:
```html
Link text here
```
### Option 2
Use the following mark-up to display a static URL if JavaScript is unavailable:
```html
Link text here
https://url-here
```
If JavaScript is disabled, the following CSS selector will add a "-" between what would have been the link text, and the static URL.
```css
[data-link]::before {
content: "-";
}
```
### Optional Option - opening in a new window
Including a `data-blank` attribute on the same element as the `data-aria-link`, will allow the custom link to open in a new window.
```html
Link text here
```
## One last chance to rethink your life choices
Again, if you need to create links you should really just use the `` element. By default browsers already handle all the functionality this script provides, and *more*.
For instance, native links have unique context menus (right click on a link to invoke), where users can choose to open links in new windows / tab, copy the link location, save to disk, etc.
Do you really want to remake these menus and actions for each of your faux links with more custom components and JavaScript?
The correct answer is "no". You don't. :)
## License & Such
This script was written by [Scott O'Hara](https://twitter.com/scottohara).
It has an [MIT](https://github.com/scottaohara/accessible-components/blob/master/LICENSE.md) license.
Do with it what you will, but hopefully you will do nothing with it at all :)