Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ember-a11y/ember-a11y-landmarks
Ember addon to help with landmark roles for better accessibility
https://github.com/ember-a11y/ember-a11y-landmarks
a11y accessibility ember ember-addon landmark landmark-roles
Last synced: 2 months ago
JSON representation
Ember addon to help with landmark roles for better accessibility
- Host: GitHub
- URL: https://github.com/ember-a11y/ember-a11y-landmarks
- Owner: ember-a11y
- License: mit
- Created: 2017-05-14T17:04:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-07-26T06:09:06.000Z (over 3 years ago)
- Last Synced: 2024-10-15T07:48:33.859Z (3 months ago)
- Topics: a11y, accessibility, ember, ember-addon, landmark, landmark-roles
- Language: JavaScript
- Size: 4.82 MB
- Stars: 19
- Watchers: 8
- Forks: 4
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-a11y-landmarks - Ember.js addon to help with landmark roles for better accessibility. (Packages / a11y)
README
# ember-a11y-landmarks
[](https://www.npmjs.com/package/ember-a11y-landmarks)
[](https://travis-ci.org/ember-a11y/ember-a11y-landmarks)
The `ember-a11y-landmarks` addon helps you assign the `role` attribute that should go on landmark tags like `` and ``, without needing to learn the intricacies of when to add roles or what they should be. A landmark is a special kind of semantic HTML tag that Assistive technology(AT) uses to parse a page correctly.
When is this addon needed? In a typical Ember app, almost everything gets wrapped in a `
`, but this can be confusing to tools like screen readers. The Assistive Technology expects that either landmark elements are direct descendants of the `` element or that they have a particular `role` attribute. `ember-a11y-landmarks` handles this problem for you.
## How this addon works
This addon helps add the correct roles to the following elements:
| tagName | role |
| ------- | ------------- |
| header | banner |
| nav | navigation |
| aside | complementary |
| main | main |
| form | form |
| footer | contentinfo |
While semantic landmark tags are best for accessibility, some developers may be faced with working on an app that uses `div` tags instead. For those cases, this addon provides a way to add roles to a `div` element until they can be refactored (see [Div Usage](#div-usage)).
```bash
ember install ember-a11y-landmarks
```
## Landmark Tag Usage
This addon is used like a block component. Just set the `tagName` attribute to `header`, `nav`, `aside`, `main`, `form`, or `footer`, and put your content inside the block. For example, here's a header:
```hbs
This is my header content
```
The resulting markup in the DOM will have the correct tag type and the role that should be used for that tag:
This is my header content
## Div Usage
If a developer must use a div instead of a semantic tag like ``, define `landmarkRole` instead of `tagname`. You can look up the correct landmark role in the [How this addon works](#how-this-addon-works) table. Here's a header example:
```hbs
This is my header content (that should be refactored later to go inside a real header tag)
```
In the DOM markup, this will result in a `div` with the specified `role`:
This is my header content (that should be refactored later to go inside a real header tag)
## Form/Search Usage
If defining a form, no additional `landmarkRole` is required. However, if the form will be used as a search, then the `landmarkRole` value should be set to `search`.
Form:
```hbs
...
```
Search:
```hbs
...
```
## Contributions
Contributions to this project are encouraged.
## Compatibility
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above