diff --git a/docs/configuration.md b/docs/configuration.md index 3194c1085..080218084 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -466,3 +466,14 @@ window.$docsify = { ``` > Note: The options with fallbackLanguages didn't work with the `notFoundPage` options. + +## skipLink + +* type: `Boolean` + +Add a [skip link](https://webaim.org/techniques/skipnav) to help with screen reader accessibility +```js +window.$docsify = { + skipLink: true +}; +``` diff --git a/docs/de-de/configuration.md b/docs/de-de/configuration.md index 2f5ebdcb4..5e4c7e075 100644 --- a/docs/de-de/configuration.md +++ b/docs/de-de/configuration.md @@ -448,3 +448,15 @@ window.$docsify = { }; ``` > Note: The options with fallbackLanguages didn't work with the `notFoundPage` options. + + +## skipLink + +* type: `Boolean` + +Add a [skip link](https://webaim.org/techniques/skipnav) to help with screen reader accessibility +```js +window.$docsify = { + skipLink: true +}; +``` diff --git a/docs/zh-cn/configuration.md b/docs/zh-cn/configuration.md index c72684001..c8c8b027d 100644 --- a/docs/zh-cn/configuration.md +++ b/docs/zh-cn/configuration.md @@ -449,3 +449,13 @@ window.$docsify = { > Note: The options with fallbackLanguages didn't work with the `notFoundPage` options. +## skipLink + +* type: `Boolean` + +Add a [skip link](https://webaim.org/techniques/skipnav) to help with screen reader accessibility +```js +window.$docsify = { + skipLink: true +}; +``` diff --git a/index.html b/index.html index 4d508f0f8..d61c83481 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,7 @@ subMaxLevel: 2, mergeNavbar: true, formatUpdated: '{MM}/{DD} {HH}:{mm}', + skipLink: true, plugins: [ function (hook, vm) { hook.beforeEach(function (html) { diff --git a/package.json b/package.json index 4b9f1189e..01ad26d1c 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "marked": "^0.3.12", "medium-zoom": "^0.4.0", "opencollective": "^1.0.3", - "prismjs": "^1.9.0", + "prismjs": "^1.13.0", "tinydate": "^1.0.0", "tweezer.js": "^1.4.0" }, diff --git a/src/core/render/index.js b/src/core/render/index.js index 6ccb13669..038cefab7 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -80,6 +80,11 @@ function renderNameLink(vm) { } } +function updateSkipLink(vm) { + const skipLink = dom.getNode('#skip-link') + skipLink.href = `/#${vm.route.path}?id=main` +} + export function renderMixin(proto) { proto._renderTo = function (el, content, replace) { const node = dom.getNode(el) @@ -202,6 +207,8 @@ export function renderMixin(proto) { proto._updateRender = function () { // Render name link renderNameLink(this) + // Update skip-link link + updateSkipLink(this) } } @@ -251,6 +258,15 @@ export function initRender(vm) { dom.before(navAppendToTarget, navEl) } + if (config.skipLink + && !dom.find('skip-link')) { + const skipLinkDom = dom.create('a') + skipLinkDom.id = 'skip-link' + skipLinkDom.href = '#/?id=main' + skipLinkDom.innerHTML = 'Skip to main content' + dom.before(dom.body, skipLinkDom) + } + if (config.themeColor) { dom.$.head.appendChild( dom.create('div', tpl.theme(config.themeColor)).firstElementChild diff --git a/src/themes/basic/_layout.styl b/src/themes/basic/_layout.styl index 747c7e5fa..c63576321 100644 --- a/src/themes/basic/_layout.styl +++ b/src/themes/basic/_layout.styl @@ -9,7 +9,7 @@ body:not(.ready) overflow hidden - [data-cloak], .app-nav, > nav + [data-cloak], .app-nav, > nav, #skip-link display none div#app @@ -178,6 +178,24 @@ li input[type='checkbox'] height 80px width 80px +#skip-link + position: absolute + top: -40px + left: 0px + outline: 0 + padding: 0.5em 1em + color: transparent + background-color: transparent + z-index 30 + transition: color .1s ease-in + transition: background-color .1s ease-in + + &:focus + top: 0px + height: 40px + background-color: var(--theme-color, $color-primary) + color: $color-text + /* main */ main display block