Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add: Accessibility feature #319

Open
wants to merge 1 commit into
base: 2.x
Choose a base branch
from
Open

add: Accessibility feature #319

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 17 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,23 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
</font-awesome-layers>
```

[Accessibility](https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility):

If your icon has semantic meaning, all you need to do is throw a `title="meaning"` attribute.

```html
<font-awesome-icon icon="magic" title="Magic is included!" />
```

Auto-accessibility takes care of the rest, adding the following:

```html
<svg aria-labelledby="svg-inline--fa-title-ZxH5yimlZvHW" data-prefix="fas" data-icon="magic" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-magic fa-w-16">
<title id="svg-inline--fa-title-ZxH5yimlZvHW" class="">Magic is included!</title>
<path fill="currentColor" d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z" class=""></path>
</svg>
```

## Integrating with other tools and frameworks

### Nuxt.js
Expand Down