Skip to content

Commit 7f3b9a5

Browse files
authored
Add class to the Skip Link in the accessibility.md (vuejs#2123)
- CSS syntax is case-insensitive so it is better to use kebab case (skip-link) instead of camel case (skipLink) - The anchor tag must have a class of skip-link
1 parent f634c9b commit 7f3b9a5

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

src/guide/best-practices/accessibility.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ Typically this is done on the top of `App.vue` as it will be the first focusable
1515
```vue-html
1616
<ul class="skip-links">
1717
<li>
18-
<a href="#main" ref="skipLink">Skip to main content</a>
18+
<a href="#main" ref="skipLink" class="skip-link">Skip to main content</a>
1919
</li>
2020
</ul>
2121
```
2222

2323
To hide the link unless it is focused, you can add the following style:
2424

2525
```css
26-
.skipLink {
26+
.skip-link {
2727
white-space: nowrap;
2828
margin: 1em auto;
2929
top: 0;
@@ -32,7 +32,7 @@ To hide the link unless it is focused, you can add the following style:
3232
margin-left: -72px;
3333
opacity: 0;
3434
}
35-
.skipLink:focus {
35+
.skip-link:focus {
3636
opacity: 1;
3737
background-color: white;
3838
padding: 0.5em;

0 commit comments

Comments
 (0)