[Issue #494] New config option skipLink for accessibility

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
+};
+```

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
+};
+```

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
+};
+```

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) {

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"
   },

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

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