From 0addc1baefbfa9b5b63e32cc8a6bf11323d48bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrgen=20Rudigier?= Date: Thu, 29 Jun 2023 10:58:58 +0200 Subject: [PATCH 01/19] feat: remove husky --- .husky/pre-commit | 4 ---- package-lock.json | 16 ---------------- package.json | 1 - 3 files changed, 21 deletions(-) delete mode 100755 .husky/pre-commit diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index d24fdfc6..00000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,4 +0,0 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - -npx lint-staged diff --git a/package-lock.json b/package-lock.json index e3cb29cf..0ca371f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,7 +42,6 @@ "gulp-sass": "^5.1.0", "gulp.spritesmith": "^6.13.0", "highlight.js": "^11.8.0", - "husky": "^8.0.3", "import-fresh": "^3.3.0", "jsdom": "^22.0.0", "lint-staged": "^13.2.2", @@ -8966,21 +8965,6 @@ "ms": "^2.0.0" } }, - "node_modules/husky": { - "version": "8.0.3", - "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", - "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", - "dev": true, - "bin": { - "husky": "lib/bin.js" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/typicode" - } - }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", diff --git a/package.json b/package.json index 65bbd314..aad94233 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "gulp-sass": "^5.1.0", "gulp.spritesmith": "^6.13.0", "highlight.js": "^11.8.0", - "husky": "^8.0.3", "import-fresh": "^3.3.0", "jsdom": "^22.0.0", "lint-staged": "^13.2.2", From d4c9e81dabbe9009033b9c4f1c6e5713923ff0ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrgen=20Rudigier?= Date: Thu, 29 Jun 2023 10:59:51 +0200 Subject: [PATCH 02/19] feat: add github actions for code quality --- .github/workflows/codeQuality.yml | 29 +++++++++++++++++++++++++++++ .prettierignore | 1 + package.json | 9 +++++---- 3 files changed, 35 insertions(+), 4 deletions(-) create mode 100644 .github/workflows/codeQuality.yml diff --git a/.github/workflows/codeQuality.yml b/.github/workflows/codeQuality.yml new file mode 100644 index 00000000..e8fca85a --- /dev/null +++ b/.github/workflows/codeQuality.yml @@ -0,0 +1,29 @@ +# +# linter and dependancy cruiser tests + +name: Code Quality checks + +on: + pull_request: + push: + branches: [main] + +jobs: + code-quality: + name: Run linter and prettier + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - uses: actions/setup-node@v3 + with: + node-version: 18.x + + - name: Install dependencies + run: npm ci + + - name: ES syntax linter + run: npm run lint + + - name: Prettier + run: npm run prettier diff --git a/.prettierignore b/.prettierignore index 008d05a3..e55657b8 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ dist src/assets/js/lib/vendor +*.hbs diff --git a/package.json b/package.json index aad94233..20cf1e3d 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,11 @@ "build": "gulp build", "rebuild": "gulp rebuild", "gulp": "gulp", - "lint": "eslint --fix \"**/*.js\"", - "format": "prettier --write \"**/*.{js,scss}\"", - "update": "npx npm-check -u", - "prepare": "husky install" + "lint": "eslint .", + "lint:fix": "eslint --fix .", + "prettier": "prettier --check .", + "prettier:fix": "prettier --write .", + "update": "npx npm-check -u" }, "keywords": [], "author": "", From ced38f0c40587753054c0e00c14c2f7cf0fff7cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrgen=20Rudigier?= Date: Thu, 29 Jun 2023 11:00:17 +0200 Subject: [PATCH 03/19] style: run lint and prettier for all files --- CODE_OF_CONDUCT.md | 26 +- pages/README.md | 4 +- pages/__404.md | 5 +- pages/examples/README.md | 20 +- pages/examples/forms/README.md | 4 +- pages/examples/forms/bad-example/README.md | 4 +- .../_examples/generally-bad-form/README.md | 2 +- .../_examples/generally-bad-form/example.css | 8 +- .../_examples/generally-bad-form/index.html | 24 +- pages/examples/forms/good-example/README.md | 4 +- .../_examples/generally-good-form/README.md | 2 +- .../_examples/generally-good-form/example.css | 5 +- .../_examples/generally-good-form/index.html | 215 +-- .../grouping-with-fieldset-legend/README.md | 6 +- .../README.md | 2 +- .../example.css | 11 +- .../index.html | 18 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 26 +- .../_examples/grouped-checkboxes/README.md | 2 +- .../_examples/grouped-checkboxes/example.css | 5 +- .../_examples/grouped-checkboxes/index.html | 15 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 53 +- .../_examples/grouped-radio-buttons/README.md | 2 +- .../grouped-radio-buttons/example.css | 5 +- .../grouped-radio-buttons/index.html | 12 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 136 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 19 +- .../non-related-checkboxes/README.md | 2 +- .../non-related-checkboxes/example.css | 2 +- .../non-related-checkboxes/index.html | 10 +- .../forms/grouping-with-headings/README.md | 4 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 80 +- pages/examples/forms/handling/README.md | 14 +- .../forms/html-5-validations/README.md | 10 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 10 +- .../html-5-client-side-validations/README.md | 2 +- .../example.css | 5 +- .../html-5-client-side-validations/index.html | 37 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 11 +- pages/examples/forms/in-tables/README.md | 4 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 53 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 26 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 26 +- .../forms/non-interactive-content/README.md | 12 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 104 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 92 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 90 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 119 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 120 +- .../making-content-focusable/README.md | 2 +- .../making-content-focusable/example.css | 5 +- .../making-content-focusable/index.html | 79 +- pages/examples/forms/required/README.md | 8 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 8 +- .../required-input-with-asterisk/README.md | 2 +- .../required-input-with-asterisk/example.css | 5 +- .../required-input-with-asterisk/index.html | 10 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 31 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 9 +- .../required-inputs-with-html-5/README.md | 2 +- .../required-inputs-with-html-5/example.css | 5 +- .../required-inputs-with-html-5/index.html | 11 +- .../forms/validation-messages/README.md | 4 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 32 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 32 +- pages/examples/headings/README.md | 4 +- .../headings/alternative-techniques/README.md | 12 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 64 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 64 +- .../README.md | 4 +- .../example.css | 2 +- .../index.html | 48 +- .../README.md | 4 +- .../example.css | 2 +- .../index.html | 48 +- pages/examples/headings/bad-example/README.md | 4 +- .../generally-bad-headings/README.md | 2 +- .../generally-bad-headings/index.html | 67 +- .../examples/headings/good-example/README.md | 6 +- .../generally-good-headings/README.md | 2 +- .../generally-good-headings/index.html | 69 +- pages/examples/headings/handling/README.md | 6 +- .../headings/html-5-outline/README.md | 4 +- .../README.md | 2 +- .../index.html | 70 +- .../README.md | 2 +- .../index.html | 70 +- .../html-5-headings-outline/README.md | 2 +- .../html-5-headings-outline/index.html | 70 +- pages/examples/headings/iframes/README.md | 20 +- .../README.md | 2 +- .../iframe.html | 15 +- .../index.html | 26 +- .../general-iframe-example/README.md | 2 +- .../general-iframe-example/iframe.html | 7 +- .../general-iframe-example/index.html | 26 +- .../README.md | 2 +- .../iframe.html | 15 +- .../index.html | 26 +- .../multiple-h1-okay-for-seo/README.md | 6 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 60 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 64 +- .../visually-hidden-headings/README.md | 4 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 60 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 60 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 48 +- pages/examples/hiding-elements/README.md | 4 +- .../from-all-devices/README.md | 4 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 8 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 8 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 8 +- .../from-screen-readers/README.md | 6 +- .../hiding-elements/okay-for-seo/README.md | 6 +- .../hiding-elements/visually/README.md | 18 +- .../hiding-an-element-visually/README.md | 2 +- .../hiding-an-element-visually/_example.css | 2 +- .../hiding-an-element-visually/index.html | 11 +- .../README.md | 4 +- .../README.md | 4 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 16 +- pages/examples/html_boilerplate/README.md | 4 +- pages/examples/sensible-aria-usage/README.md | 4 +- .../sensible-aria-usage/alert/README.md | 32 +- .../README.md | 2 +- .../index.html | 40 +- .../README.md | 2 +- .../index.html | 40 +- .../README.md | 2 +- .../index.html | 40 +- .../sensible-aria-usage/current/README.md | 4 +- .../README.md | 2 +- .../README.md | 2 +- .../index.html | 30 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 26 +- .../sensible-aria-usage/describedby/README.md | 14 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 12 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 16 +- .../sensible-aria-usage/expanded/README.md | 15 +- .../README.md | 2 +- .../index.html | 10 +- .../README.md | 2 +- .../index.html | 6 +- .../README.md | 2 +- .../index.html | 4 +- .../sensible-aria-usage/hidden/README.md | 8 +- .../README.md | 2 +- .../index.html | 8 +- .../README.md | 2 +- .../index.html | 8 +- .../README.md | 2 +- .../index.html | 6 +- .../README.md | 2 +- .../index.html | 6 +- .../label-labelledby/README.md | 28 +- .../README.md | 2 +- .../index.html | 8 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 12 +- .../presentation/README.md | 8 +- .../_examples/removing-a-links-role/README.md | 3 +- .../removing-a-links-role/index.html | 8 +- .../README.md | 7 +- .../index.html | 12 +- .../sensible-aria-usage/pressed/README.md | 8 +- .../README.md | 2 +- .../index.html | 4 +- .../README.md | 2 +- .../index.html | 6 +- pages/examples/tables/README.md | 4 +- pages/examples/tables/bad-examples/README.md | 6 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 43 +- .../README.md | 2 +- .../example.css | 2 +- .../index.html | 43 +- pages/examples/tables/good-example/README.md | 4 +- .../_examples/generally-good-table/README.md | 2 +- .../generally-good-table/example.css | 5 +- .../_examples/generally-good-table/index.html | 46 +- pages/examples/tables/handling/README.md | 4 +- .../examples/tables/hidden-headers/README.md | 4 +- .../table-with-hidden-headers/README.md | 2 +- .../table-with-hidden-headers/example.css | 7 +- .../table-with-hidden-headers/index.html | 33 +- .../examples/tables/layout-changes/README.md | 4 +- .../README.md | 2 +- .../example.css | 9 +- .../index.html | 41 +- .../table-with-block-elements/README.md | 2 +- .../table-with-block-elements/example.css | 9 +- .../table-with-block-elements/index.html | 43 +- .../tables/multiple-headers/README.md | 6 +- .../table-with-ambiguous-data/README.md | 2 +- .../table-with-ambiguous-data/example.css | 5 +- .../table-with-ambiguous-data/index.html | 118 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 118 +- .../_examples/table-with-unique-ids/README.md | 2 +- .../table-with-unique-ids/example.css | 5 +- .../table-with-unique-ids/index.html | 146 +- pages/examples/tables/responsive/README.md | 4 +- .../README.md | 2 +- .../example.css | 12 +- .../index.html | 41 +- .../README.md | 2 +- .../example.css | 12 +- .../index.html | 41 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 43 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 52 +- .../README.md | 2 +- .../example.css | 12 +- .../index.html | 43 +- .../tables/spanning-rows-cols/README.md | 6 +- .../README.md | 2 +- .../example.css | 5 +- .../index.html | 98 +- .../examples/tables/sticky-headers/README.md | 4 +- .../table-with-fixed-headers/README.md | 2 +- .../table-with-fixed-headers/example.css | 7 +- .../table-with-fixed-headers/index.html | 1616 +++++------------ .../tables/table-of-divs-experiment/README.md | 4 +- .../_examples/fixed-table-of-divs/README.md | 2 +- .../_examples/fixed-table-of-divs/example.css | 9 +- .../_examples/fixed-table-of-divs/index.html | 37 +- .../_examples/invalid-table-of-divs/README.md | 2 +- .../invalid-table-of-divs/example.css | 9 +- .../invalid-table-of-divs/index.html | 37 +- .../table-of-divs-using-aria/README.md | 2 +- .../table-of-divs-using-aria/example.css | 9 +- .../table-of-divs-using-aria/index.html | 37 +- .../table-of-divs-with-flexbox/README.md | 2 +- .../table-of-divs-with-flexbox/example.css | 9 +- .../table-of-divs-with-flexbox/index.html | 37 +- pages/examples/widgets/README.md | 5 +- pages/examples/widgets/accordion/README.md | 15 +- .../_examples/accordion-with-aria/README.md | 2 +- .../_examples/accordion-with-aria/example.css | 6 +- .../_examples/accordion-with-aria/index.html | 97 +- .../accordion-with-radio-buttons/README.md | 2 +- .../accordion-with-radio-buttons/example.css | 12 +- .../accordion-with-radio-buttons/index.html | 129 +- .../multi-accordion-with-checkboxes/README.md | 2 +- .../example.css | 12 +- .../index.html | 122 +- pages/examples/widgets/autosuggest/README.md | 16 +- .../autosuggest-with-radio-buttons/README.md | 2 +- .../example.css | 8 +- .../autosuggest-with-radio-buttons/index.html | 36 +- pages/examples/widgets/carousel/README.md | 16 +- .../carousel-with-radio-buttons/README.md | 2 +- .../carousel-with-radio-buttons/example.css | 8 +- .../carousel-with-radio-buttons/index.html | 161 +- pages/examples/widgets/datepicker/README.md | 18 +- .../datepicker-with-radio-buttons/README.md | 2 +- .../datepicker-with-radio-buttons/example.css | 8 +- .../datepicker-with-radio-buttons/index.html | 5 +- pages/examples/widgets/dialog/README.md | 18 +- .../dialog/_examples/modal-dialog/README.md | 2 +- .../dialog/_examples/modal-dialog/example.css | 2 +- .../dialog/_examples/modal-dialog/index.html | 30 +- .../_examples/non-modal-dialog/README.md | 2 +- .../_examples/non-modal-dialog/example.css | 2 +- .../_examples/non-modal-dialog/index.html | 30 +- pages/examples/widgets/dropdown/README.md | 4 +- .../double-purpose-dropdown/README.md | 2 +- .../double-purpose-dropdown/example.css | 2 +- .../double-purpose-dropdown/index.html | 2 +- .../_examples/mega-dropdown/README.md | 2 +- .../_examples/mega-dropdown/example.css | 35 +- .../_examples/mega-dropdown/index.html | 55 +- .../README.md | 2 +- .../example.css | 19 +- .../index.html | 6 +- .../_examples/multi-level-dropdown/README.md | 2 +- .../multi-level-dropdown/example.css | 14 +- .../_examples/multi-level-dropdown/index.html | 6 +- .../_examples/simple-dropdown/README.md | 2 +- .../_examples/simple-dropdown/example.css | 12 +- .../_examples/simple-dropdown/index.html | 2 +- .../widgets/proof-of-concept/README.md | 6 +- pages/examples/widgets/tablists/README.md | 21 +- .../tablist-with-radio-buttons/README.md | 2 +- .../tablist-with-radio-buttons/example.css | 6 +- .../tablist-with-radio-buttons/index.html | 127 +- pages/examples/widgets/tooltips/README.md | 24 +- .../automatically-displayed-tooltip/README.md | 2 +- .../example.css | 2 +- .../index.html | 60 +- .../manually-displayed-tooltip/README.md | 2 +- .../manually-displayed-tooltip/example.css | 2 +- .../manually-displayed-tooltip/index.html | 41 +- pages/introduction/README.md | 4 +- pages/introduction/about/README.md | 4 +- pages/introduction/how-to-use/README.md | 4 +- pages/introduction/license/README.md | 4 +- pages/introduction/privacy-policy/README.md | 4 +- pages/knowledge/README.md | 6 +- pages/knowledge/aria/README.md | 4 +- pages/knowledge/aria/bad-practices/README.md | 30 +- pages/knowledge/aria/purpose/README.md | 18 +- .../knowledge/colours-and-contrast/README.md | 8 +- .../colour-is-not-enough/README.md | 14 +- .../graphical-objects/README.md | 12 +- .../how-to-calculate/README.md | 5 +- .../how-to-examine/README.md | 6 +- .../colours-and-contrast/text/README.md | 14 +- .../user-interface-components/README.md | 12 +- pages/knowledge/keyboard-only/README.md | 4 +- .../keyboard-only/browsing-websites/README.md | 28 +- .../controlling-a-computer/README.md | 6 +- .../keyboard-only/how-to-implement/README.md | 47 +- pages/knowledge/screen-readers/README.md | 4 +- .../screen-readers/desktop/README.md | 4 +- .../desktop/browse-focus-modes/README.md | 30 +- .../desktop/insert-modifier-key/README.md | 20 +- .../interacting-with-websites/README.md | 8 +- .../desktop/reading-websites/README.md | 6 +- .../desktop/screenreader-shortcuts/README.md | 10 +- .../screen-readers/how-to-implement/README.md | 4 +- .../linear-processing-using-cursor/README.md | 4 +- .../knowledge/screen-readers/mobile/README.md | 4 +- .../interacting-with-websites/README.md | 4 +- .../mobile/reading-websites/README.md | 8 +- .../no-visual-attributes/README.md | 4 +- .../relevant-combinations/README.md | 14 +- .../screen-readers/so-buggy/README.md | 16 +- .../screen-readers/what-and-why/README.md | 4 +- pages/knowledge/semantics/README.md | 4 +- .../knowledge/semantics/interaction/README.md | 14 +- pages/knowledge/semantics/meaning/README.md | 80 +- pages/knowledge/semantics/widgets/README.md | 14 +- pages/setup/README.md | 4 +- pages/setup/browsers/README.md | 4 +- pages/setup/browsers/bookmarklets/README.md | 6 +- .../contents-structured/README.md | 4 +- .../browsers/bookmarklets/h123/README.md | 8 +- .../bookmarklets/html-codesniffer/README.md | 6 +- pages/setup/browsers/chrome/README.md | 6 +- .../browsers/chrome/wave-toolbar/README.md | 6 +- pages/setup/browsers/edge/README.md | 4 +- pages/setup/browsers/firefox/README.md | 6 +- .../firefox/web-developer-toolbar/README.md | 12 +- .../browsers/internet-explorer-11/README.md | 6 +- pages/setup/helper-tools/README.md | 4 +- .../colour-contrast-analyser/README.md | 4 +- .../helper-tools/high-contrast-mode/README.md | 4 +- .../pdf-accessibility-checker/README.md | 4 +- .../helper-tools/totalvalidator/README.md | 4 +- pages/setup/screen-readers/README.md | 4 +- pages/setup/screen-readers/jaws/README.md | 12 +- pages/setup/screen-readers/nvda/README.md | 17 +- pages/setup/screen-readers/talkback/README.md | 4 +- .../screen-readers/voiceover-ios/README.md | 4 +- pages/setup/windows/README.md | 4 +- .../setup/windows/virtual-machines/README.md | 4 +- pages/setup/windows/vmware-on-macos/README.md | 22 +- .../windows/vmware-on-windows-linux/README.md | 16 +- pages/setup/windows/why/README.md | 4 +- src/assets/img/favicon/manifest.webmanifest | 34 +- src/components/base/button/button.hbs | 2 +- .../content/cardmenu/cardmenu-card-part.hbs | 10 +- .../content/cardmenu/cardmenu-card.hbs | 10 +- .../content/meta-info/meta-info.hbs | 13 +- .../content/section_title/section_title.hbs | 2 +- .../content/text_container/text_container.hbs | 2 +- src/components/global/anchor/anchor.hbs | 2 +- src/components/global/logo/logo.hbs | 10 +- src/components/global/search/search.hbs | 19 +- src/components/global/tracking/tracking.hbs | 22 +- src/templates/example.hbs | 19 +- 445 files changed, 3679 insertions(+), 4871 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 26d3c264..7cf4febb 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation. Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting ## Our Responsibilities diff --git a/pages/README.md b/pages/README.md index 596738f5..5f219a33 100644 --- a/pages/README.md +++ b/pages/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Welcome" +navigation_title: 'Welcome' position: 1 -changed: "2018-05-06" +changed: '2018-05-06' --- # Welcome to the Accessibility Developer Guide! diff --git a/pages/__404.md b/pages/__404.md index a3d70c41..36af33fb 100644 --- a/pages/__404.md +++ b/pages/__404.md @@ -1,6 +1,6 @@ --- -navigation_title: "Error 404 - Page not found" -changed: "2018-05-06" +navigation_title: 'Error 404 - Page not found' +changed: '2018-05-06' --- # Error 404 - Page not found. @@ -10,4 +10,3 @@ Please use the menu or the search to find the content you have been looking for. Maybe you clicked a link somewhere on the web, pointing to a legacy (moved or deleted) «Accessibility Developer Guide» page. If you came here by clicking on a link within the «Accessibility Developer Guide», please contact us ([development@access-for-all.ch](mailto:development@access-for-all.ch)) and tell us what link you clicked (and on which page). - diff --git a/pages/examples/README.md b/pages/examples/README.md index def0de50..d923e6f8 100644 --- a/pages/examples/README.md +++ b/pages/examples/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Examples" +navigation_title: 'Examples' position: 4 -changed: "2018-04-02" +changed: '2018-04-02' --- # Examples of accessibility patterns @@ -52,11 +52,11 @@ There are results of the currently relevant assistive devices: There are some special types of examples though: - "Bad" examples aim to demonstrate typical mis-uses or misconceptions of a concept, bad code, or similar. - - Such examples are inaccessible by design, and do not offer any results. + - Such examples are inaccessible by design, and do not offer any results. - A starting point (or interim step) within a sequence of examples that aim to demonstrate how to deal with and optimise a certain accessibility requirement. - - Such sequences always result in a final (and fully accessible) example. + - Such sequences always result in a final (and fully accessible) example. - An example showing a technique that is valid according to standards, but not (yet?) accessibility supported. - - Alas, such results have failing results. + - Alas, such results have failing results. In general: only copy&paste code from examples that have fully passing compatibility results! @@ -65,12 +65,12 @@ In general: only copy&paste code from examples that have fully passing compatibi We have conducted additional compatibility tests, all with assistive devices that are expected to play a role in future: - Desktop screen readers: - - JAWS with Edge - - VoiceOver/macOS with Safari - - Narrator with Edge + - JAWS with Edge + - VoiceOver/macOS with Safari + - Narrator with Edge - Mobile screen readers: - - VoiceOver/iOS with Safari - - TalkBack with Chrome + - VoiceOver/iOS with Safari + - TalkBack with Chrome While some of these devices still show problems, the general outlook confirms that our examples are as future-proof as possible. diff --git a/pages/examples/forms/README.md b/pages/examples/forms/README.md index 2af7925c..6ee10600 100644 --- a/pages/examples/forms/README.md +++ b/pages/examples/forms/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Forms" +navigation_title: 'Forms' position: 5 -changed: "2018-05-12" +changed: '2018-05-12' --- # Forms diff --git a/pages/examples/forms/bad-example/README.md b/pages/examples/forms/bad-example/README.md index c8ee17d6..9b0b03b4 100644 --- a/pages/examples/forms/bad-example/README.md +++ b/pages/examples/forms/bad-example/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Bad example" +navigation_title: 'Bad example' position: 3 -changed: "2020-04-30" +changed: '2020-04-30' --- # General bad form example diff --git a/pages/examples/forms/bad-example/_examples/generally-bad-form/README.md b/pages/examples/forms/bad-example/_examples/generally-bad-form/README.md index 0922fd86..b1d5cf03 100644 --- a/pages/examples/forms/bad-example/_examples/generally-bad-form/README.md +++ b/pages/examples/forms/bad-example/_examples/generally-bad-form/README.md @@ -1,3 +1,3 @@ --- -title: "Generally bad form" +title: 'Generally bad form' --- diff --git a/pages/examples/forms/bad-example/_examples/generally-bad-form/example.css b/pages/examples/forms/bad-example/_examples/generally-bad-form/example.css index 6ad4f330..bc1581cb 100644 --- a/pages/examples/forms/bad-example/_examples/generally-bad-form/example.css +++ b/pages/examples/forms/bad-example/_examples/generally-bad-form/example.css @@ -1,8 +1,10 @@ -.control, .fieldset { +.control, +.fieldset { margin: 6px 0; } -label, .label { +label, +.label { display: inline-block; width: 120px; vertical-align: top; @@ -30,4 +32,4 @@ label, .label { } #button:hover { cursor: default; -} \ No newline at end of file +} diff --git a/pages/examples/forms/bad-example/_examples/generally-bad-form/index.html b/pages/examples/forms/bad-example/_examples/generally-bad-form/index.html index 139cb804..9d52ddc8 100644 --- a/pages/examples/forms/bad-example/_examples/generally-bad-form/index.html +++ b/pages/examples/forms/bad-example/_examples/generally-bad-form/index.html @@ -1,24 +1,16 @@ -
- -
-
- -
+
+
-
- Gender -
+
Gender
-
- Male -
+
Male
-
- Female -
+
Female
-Submit \ No newline at end of file +Submit diff --git a/pages/examples/forms/good-example/README.md b/pages/examples/forms/good-example/README.md index c0ecf92b..1823e2f8 100644 --- a/pages/examples/forms/good-example/README.md +++ b/pages/examples/forms/good-example/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Good example" +navigation_title: 'Good example' position: 2 -changed: "2020-04-30" +changed: '2020-04-30' --- # General good form example diff --git a/pages/examples/forms/good-example/_examples/generally-good-form/README.md b/pages/examples/forms/good-example/_examples/generally-good-form/README.md index e038f606..ba6b0b64 100644 --- a/pages/examples/forms/good-example/_examples/generally-good-form/README.md +++ b/pages/examples/forms/good-example/_examples/generally-good-form/README.md @@ -1,5 +1,5 @@ --- -title: "Generally good form" +title: 'Generally good form' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/good-example/_examples/generally-good-form/example.css b/pages/examples/forms/good-example/_examples/generally-good-form/example.css index 27a8e36e..41496375 100644 --- a/pages/examples/forms/good-example/_examples/generally-good-form/example.css +++ b/pages/examples/forms/good-example/_examples/generally-good-form/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { input + label { width: auto; -} \ No newline at end of file +} diff --git a/pages/examples/forms/good-example/_examples/generally-good-form/index.html b/pages/examples/forms/good-example/_examples/generally-good-form/index.html index 9aa63a36..6884f555 100644 --- a/pages/examples/forms/good-example/_examples/generally-good-form/index.html +++ b/pages/examples/forms/good-example/_examples/generally-good-form/index.html @@ -1,15 +1,19 @@
- +
- +
- +
- +
@@ -17,153 +21,118 @@
Gender
- +
- +
Hobbies
- +
- +
- +
- + + + + + + + + + +
- + + + +
- + + + + +
- +
- +
- +
- +
@@ -171,4 +140,4 @@
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/README.md b/pages/examples/forms/grouping-with-fieldset-legend/README.md index af47362d..70c2e245 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Grouping with fieldset/legend" +navigation_title: 'Grouping with fieldset/legend' position: 4 -changed: "2018-05-03" +changed: '2018-05-03' --- # Grouping form controls with fieldset and legend @@ -122,4 +122,4 @@ So if for visual (or any other serious) reason you cannot use standard `
-
- Gender -
+
Gender
- +
- +
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/README.md b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/README.md index 7fda4376..ee2ab95f 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/README.md @@ -1,5 +1,5 @@ --- -title: "Grouped and differentiated form controls" +title: 'Grouped and differentiated form controls' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/example.css b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/example.css index 84e3942a..c5d2acd8 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/example.css +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -6,4 +7,4 @@ label { display: inline-block; width: 120px; vertical-align: top; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/index.html b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/index.html index fb10dd5a..7d4d82a3 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/index.html +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-and-differentiated-form-controls/index.html @@ -2,31 +2,39 @@
Billing address
- +
- +
- +
- +
Shipping address
- +
- +
- +
- +
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/README.md b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/README.md index 133c31b7..cb9648e3 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/README.md @@ -1,5 +1,5 @@ --- -title: "Grouped checkboxes" +title: 'Grouped checkboxes' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/example.css b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/example.css index 84e3942a..c5d2acd8 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/example.css +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -6,4 +7,4 @@ label { display: inline-block; width: 120px; vertical-align: top; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/index.html b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/index.html index d51f8270..077cb4a7 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/index.html +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-checkboxes/index.html @@ -2,13 +2,20 @@
Hobbies
- +
- +
- +
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/README.md b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/README.md index 9cd85199..f42562ba 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/README.md @@ -1,5 +1,5 @@ --- -title: "Grouped form controls with too long legend" +title: 'Grouped form controls with too long legend' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/example.css b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/example.css index 27a8e36e..41496375 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/example.css +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { input + label { width: auto; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/index.html b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/index.html index a5ab2323..6c2901b0 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/index.html +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-form-controls-with-too-long-legend/index.html @@ -1,45 +1,30 @@
- Please fill out the following inputs truthfully and completely. We will get back to you as soon as possible. Thank you for your effort. + + Please fill out the following inputs truthfully and completely. We will + get back to you as soon as possible. Thank you for your effort. +
- +
- + + + + + + + + + +
-
\ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/README.md b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/README.md index 24eeed2d..70e0f560 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/README.md @@ -1,5 +1,5 @@ --- -title: "Grouped radio buttons" +title: 'Grouped radio buttons' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/example.css b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/example.css index 27a8e36e..41496375 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/example.css +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { input + label { width: auto; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/index.html b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/index.html index 6e7e2f9b..9e7ed8b3 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/index.html +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-radio-buttons/index.html @@ -2,10 +2,16 @@
Gender
- +
- +
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/README.md b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/README.md index 9cd85199..f42562ba 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/README.md @@ -1,5 +1,5 @@ --- -title: "Grouped form controls with too long legend" +title: 'Grouped form controls with too long legend' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/example.css b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/example.css index 5cb72730..898dd8eb 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/example.css +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { input + label { width: auto; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/index.html b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/index.html index 9cdd400a..a277b29f 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/index.html +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/grouped-thematically-related-form-controls/index.html @@ -2,10 +2,12 @@
Your address
- +
- +
@@ -17,104 +19,68 @@
Additional details
- +
- + + + + + + + + + +
Interests
- + + + +
- +
- +
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/README.md b/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/README.md index fb7b71e1..54e113d0 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/README.md @@ -1,5 +1,5 @@ --- -title: "Nested fieldset/legend structures" +title: 'Nested fieldset/legend structures' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/example.css b/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/example.css index 27a8e36e..41496375 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/example.css +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { input + label { width: auto; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/index.html b/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/index.html index ab07789a..c946234c 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/index.html +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/nested-fieldset-legend-structures/index.html @@ -5,19 +5,28 @@
- +
Gender
- +
- +
- +
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/README.md b/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/README.md index b522a548..cadc9341 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/README.md @@ -1,5 +1,5 @@ --- -title: "Non related checkboxes" +title: 'Non related checkboxes' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/example.css b/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/example.css index 31df7057..97b9dc38 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/example.css +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/example.css @@ -1,3 +1,3 @@ .control { margin: 6px 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/index.html b/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/index.html index 8d7dd42a..c8253aea 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/index.html +++ b/pages/examples/forms/grouping-with-fieldset-legend/_examples/non-related-checkboxes/index.html @@ -3,9 +3,13 @@
- +
- +
- \ No newline at end of file + diff --git a/pages/examples/forms/grouping-with-headings/README.md b/pages/examples/forms/grouping-with-headings/README.md index b38d4823..eb9d2fa8 100644 --- a/pages/examples/forms/grouping-with-headings/README.md +++ b/pages/examples/forms/grouping-with-headings/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Grouping with headings" +navigation_title: 'Grouping with headings' position: 5 -changed: "2018-05-03" +changed: '2018-05-03' --- # Grouping form controls with headings diff --git a/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/README.md b/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/README.md index 08e252a7..c93a9722 100644 --- a/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/README.md +++ b/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/README.md @@ -1,5 +1,5 @@ --- -title: "Headings mixed into a form as children of legends" +title: 'Headings mixed into a form as children of legends' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/example.css b/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/example.css index 27a8e36e..41496375 100644 --- a/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/example.css +++ b/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { input + label { width: auto; -} \ No newline at end of file +} diff --git a/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/index.html b/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/index.html index fd5787c5..7cd7d978 100644 --- a/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/index.html +++ b/pages/examples/forms/grouping-with-headings/_examples/headings-mixed-into-a-form-as-children-of-legends/index.html @@ -1,76 +1,66 @@ -

- Tell us something about you -

-

- Please fill out the following form. -

+

Tell us something about you

+

Please fill out the following form.

-

- General information -

+

General information
- +
Gender
- +
- +
-

- Additional information -

+

Additional information
- + + + +
- +
- +
-
\ No newline at end of file + diff --git a/pages/examples/forms/handling/README.md b/pages/examples/forms/handling/README.md index b2a9dec5..a0301c62 100644 --- a/pages/examples/forms/handling/README.md +++ b/pages/examples/forms/handling/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Handling" +navigation_title: 'Handling' position: 1 -changed: "2018-06-15" +changed: '2018-06-15' --- # How to handle forms @@ -35,13 +35,13 @@ You can add `Shift` to most shortcuts to reverse direction. For example press `S ### Interaction with form elements - `Enter` (or `Esc`): enter (or exit) focus mode (a distinctive **beep** sound is played). - - Only available when focusing an interactive element. - - In NVDA, `NVDA + Space` is an alternative way of toggling interaction modes (regardless where the cursor is at the moment). + - Only available when focusing an interactive element. + - In NVDA, `NVDA + Space` is an alternative way of toggling interaction modes (regardless where the cursor is at the moment). - `Space`: toggle checkbox and expand/collapse combobox. - `Enter`: activate button (or submit form when focusing certain form elements). - `Up` / `Down` (and sometimes `Left` / `Right`). - - Select radio button value. - - Select element in combobox. + - Select radio button value. + - Select element in combobox. #### JAWS braille viewer @@ -66,7 +66,7 @@ In the upcoming text, we are referring to the keys `NVDA` and `JAWS`. If you do NVDA's "Elements List" displays a page's form outline. To open it: - First make sure you are in browse mode. - - If unclear to you, see [Screen readers' browse and focus modes](/knowledge/screen-readers/desktop/browse-focus-modes). + - If unclear to you, see [Screen readers' browse and focus modes](/knowledge/screen-readers/desktop/browse-focus-modes). - Press `Alt + F` to select the "Form fields" area. - Press `Alt + B` to select the "Buttons" area. diff --git a/pages/examples/forms/html-5-validations/README.md b/pages/examples/forms/html-5-validations/README.md index 5cee425c..f56b625b 100644 --- a/pages/examples/forms/html-5-validations/README.md +++ b/pages/examples/forms/html-5-validations/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "HTML 5 validations" +navigation_title: 'HTML 5 validations' position: 9 -changed: "2018-05-03" +changed: '2018-05-03' --- # HTML 5 client side validations @@ -31,8 +31,8 @@ The following example demonstrates a few of those validations: - All inputs are required (using `required` attribute). - The "Email" input checks for a valid input format (using `type="email"` attribute). - The "Password" input checks for a custom pattern (using `pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"` attribute). - - This requires an input of at least six characters with at least one number, one lowercase and one uppercase letter. - - To make the pattern available to the user in a human readable form, you can use the `title` attribute like this: ` title="Minimum 6 characters containing lowercase, uppercase, and at least one number"`. + - This requires an input of at least six characters with at least one number, one lowercase and one uppercase letter. + - To make the pattern available to the user in a human readable form, you can use the `title` attribute like this: ` title="Minimum 6 characters containing lowercase, uppercase, and at least one number"`. [Example](_examples/html-5-client-side-validations) @@ -46,7 +46,7 @@ A few notes though: - Some screen readers announce missing required values automatically as "invalid", others do not. - Some screen readers announce both an input's name and validation error, others only announce the validation error. - - The latter case is a minor inconvenience, as the user may have to find out the input's name manually (which is easy, but still an annoyance). + - The latter case is a minor inconvenience, as the user may have to find out the input's name manually (which is easy, but still an annoyance). ## Using the invalid attribute diff --git a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/README.md b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/README.md index e087a416..12b77d61 100644 --- a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/README.md +++ b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/README.md @@ -1,3 +1,3 @@ --- -title: "HTML 5 client side validations with untitled pattern" +title: 'HTML 5 client side validations with untitled pattern' --- diff --git a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/example.css b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/example.css index 49027377..59874d15 100644 --- a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/example.css +++ b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -24,4 +25,4 @@ label + .error { fieldset .error { margin-left: 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/index.html b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/index.html index ff0b4cf9..677c6f4a 100644 --- a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/index.html +++ b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations-with-untitled-pattern/index.html @@ -1,8 +1,14 @@
- +
-
\ No newline at end of file + diff --git a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/README.md b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/README.md index 26841c97..48be4331 100644 --- a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/README.md +++ b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/README.md @@ -1,5 +1,5 @@ --- -title: "HTML 5 client side validations" +title: 'HTML 5 client side validations' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/example.css b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/example.css index 49027377..59874d15 100644 --- a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/example.css +++ b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -24,4 +25,4 @@ label + .error { fieldset .error { margin-left: 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/index.html b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/index.html index 355a65b0..37653278 100644 --- a/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/index.html +++ b/pages/examples/forms/html-5-validations/_examples/html-5-client-side-validations/index.html @@ -1,26 +1,49 @@
- +
- +
- +
Gender
- +
- +
- +
-
\ No newline at end of file + diff --git a/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/README.md b/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/README.md index b250b064..cf524519 100644 --- a/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/README.md +++ b/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/README.md @@ -1,5 +1,5 @@ --- -title: "Required inputs with HTML 5 and ARIA" +title: 'Required inputs with HTML 5 and ARIA' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/example.css b/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/example.css index acb12d11..c5a57fda 100644 --- a/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/example.css +++ b/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { .required { color: red; -} \ No newline at end of file +} diff --git a/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/index.html b/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/index.html index 2dde4e66..a4956408 100644 --- a/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/index.html +++ b/pages/examples/forms/html-5-validations/_examples/required-inputs-with-html-5-and-aria/index.html @@ -1,14 +1,17 @@
- +
- +
- +
-
\ No newline at end of file + diff --git a/pages/examples/forms/in-tables/README.md b/pages/examples/forms/in-tables/README.md index 29562ac1..16a13841 100644 --- a/pages/examples/forms/in-tables/README.md +++ b/pages/examples/forms/in-tables/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "In tables" +navigation_title: 'In tables' position: 10 -changed: "2020-04-30" +changed: '2020-04-30' --- # Forms within tables diff --git a/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/README.md b/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/README.md index c7f5a362..f2f6cff6 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/README.md +++ b/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/README.md @@ -1,5 +1,5 @@ --- -title: "Form controls with labels in a table" +title: 'Form controls with labels in a table' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/example.css b/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/example.css index 4c2dc110..fa8943f8 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/example.css +++ b/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/example.css @@ -10,6 +10,7 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; -} \ No newline at end of file +} diff --git a/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/index.html b/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/index.html index 49cfeb66..afd58a0f 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/index.html +++ b/pages/examples/forms/in-tables/_examples/form-controls-with-labels-in-a-table/index.html @@ -2,51 +2,66 @@ - - - + + +
- Delivery provider - - Insurance - - Comment - Delivery providerInsuranceComment
- + - + - +
- + - + - +
- + - + - +
- \ No newline at end of file + diff --git a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/README.md b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/README.md index cf921387..4f81e5d4 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/README.md +++ b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/README.md @@ -1,5 +1,5 @@ --- -title: "Form controls without labels in a table, fixed with ARIA" +title: 'Form controls without labels in a table, fixed with ARIA' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/example.css b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/example.css index 2a0d5d4c..e728994d 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/example.css +++ b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/example.css @@ -2,6 +2,7 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; -} \ No newline at end of file +} diff --git a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/index.html b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/index.html index f5f9758f..8eee7c18 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/index.html +++ b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table-fixed-with-aria/index.html @@ -2,21 +2,17 @@ - - - + + +
- Delivery provider - - Insurance - - Comment - Delivery providerInsuranceComment
- + @@ -27,7 +23,9 @@
- + @@ -38,7 +36,9 @@
- + @@ -49,4 +49,4 @@
- \ No newline at end of file + diff --git a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/README.md b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/README.md index 2c1fd1c4..d98086ef 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/README.md +++ b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/README.md @@ -1,3 +1,3 @@ --- -title: "Form controls without labels in a table" +title: 'Form controls without labels in a table' --- diff --git a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/example.css b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/example.css index 2a0d5d4c..e728994d 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/example.css +++ b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/example.css @@ -2,6 +2,7 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; -} \ No newline at end of file +} diff --git a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/index.html b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/index.html index 0d80b02f..de70f5b8 100644 --- a/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/index.html +++ b/pages/examples/forms/in-tables/_examples/form-controls-without-labels-in-a-table/index.html @@ -2,21 +2,17 @@ - - - + + +
- Delivery provider - - Insurance - - Comment - Delivery providerInsuranceComment
- + @@ -27,7 +23,9 @@
- + @@ -38,7 +36,9 @@
- + @@ -49,4 +49,4 @@
- \ No newline at end of file + diff --git a/pages/examples/forms/non-interactive-content/README.md b/pages/examples/forms/non-interactive-content/README.md index 891c9742..6ad3aac8 100644 --- a/pages/examples/forms/non-interactive-content/README.md +++ b/pages/examples/forms/non-interactive-content/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Non-interactive content" +navigation_title: 'Non-interactive content' position: 6 -changed: "2020-04-30" +changed: '2020-04-30' --- # Placing non-interactive content between form controls @@ -49,9 +49,9 @@ Instead of referencing all the information, simply give the user a short clue th The example above shows three ways to give a user clue about additional information: 1. For "Full name", a clue was appended to the `
- \ No newline at end of file + diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/README.md b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/README.md index 54583e8e..fa090d51 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/README.md +++ b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/README.md @@ -1,5 +1,5 @@ --- -title: "Associating content to form controls using ARIA" +title: 'Associating content to form controls using ARIA' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/example.css b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/example.css index 9faa88d3..1ab33e19 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/example.css +++ b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -23,4 +24,4 @@ fieldset .description { ul { margin-top: 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/index.html b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/index.html index 04a9bb9f..26338e06 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/index.html +++ b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-controls-using-aria/index.html @@ -1,12 +1,21 @@
- +

Please tell us your name.

- +

Please tell us something about your history.

@@ -14,67 +23,58 @@
Gender
- +

You may be this if you like beer, gadgets, and Playboy Magazine.

- +

You may be this if you like prosecco, make up, and Playgirl Magazine.

- + + + + + + + + + +

Tell us how old you are.

- +
    -
  • - I entered all data truthfully -
    • -
  • - I'm a good person -
    • -
  • - I won't vote for Donald Trump next time -
    • +
  • I entered all data truthfully
    • +
  • I'm a good person
    • +
  • I won't vote for Donald Trump next time
- \ No newline at end of file + diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/README.md b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/README.md index d2c2e47a..546d490f 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/README.md +++ b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/README.md @@ -1,5 +1,5 @@ --- -title: "Associating Content to Form Inputs Using Multiple Labels" +title: 'Associating Content to Form Inputs Using Multiple Labels' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/example.css b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/example.css index 0c0825fa..f611afd9 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/example.css +++ b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -26,4 +27,4 @@ fieldset .description { ul { margin-top: 0; margin-left: -120px; -} \ No newline at end of file +} diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/index.html b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/index.html index 21bef182..2d717944 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/index.html +++ b/pages/examples/forms/non-interactive-content/_examples/associating-content-to-form-inputs-using-multiple-labels/index.html @@ -1,66 +1,62 @@
- +
- +
Gender
- +
- +
- +
-
-
\ No newline at end of file + diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/README.md b/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/README.md index 366159a3..712d285e 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/README.md +++ b/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/README.md @@ -1,5 +1,5 @@ --- -title: "Associating too much content to form controls using ARIA" +title: 'Associating too much content to form controls using ARIA' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/example.css b/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/example.css index 3e4fc9b1..020ef7a5 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/example.css +++ b/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -27,4 +28,4 @@ ul { p { margin: 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/index.html b/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/index.html index b4555122..ad682f91 100644 --- a/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/index.html +++ b/pages/examples/forms/non-interactive-content/_examples/associating-too-much-content-to-form-controls-using-aria/index.html @@ -1,92 +1,75 @@ -

- A seemingly very important form -

+

A seemingly very important form

- +
+

Please tell us your name.

+

A name typically consists of a first and a last name.

+

Some people also have a middle name. Or more than one.

- Please tell us your name. + Because of that, we offer a single input here, instead of one for each + kind of name.

- A name typically consists of a first and a last name. -

-

- Some people also have a middle name. Or more than one. -

-

- Because of that, we offer a single input here, instead of one for each kind of name. -

-

- Some cultures even have habits of naming that are very different to ours, so it's really hard (if not impossible) to define a offer an input mask that's working for all. This is another reason why having a single input works fine here. + Some cultures even have habits of naming that are very different to + ours, so it's really hard (if not impossible) to define a offer an input + mask that's working for all. This is another reason why having a single + input works fine here.

- +
+

Please tell us something about your history.

- Please tell us something about your history. -

-

- If you don't know what a "biography" is, please visit the Wikipedia page about "Biography". + If you don't know what a "biography" is, please visit the + Wikipedia page about "Biography".

- +
-

- Terms and conditions -

-

- Definitions -

-

- Some definitions that nobody ever will read. -

-

- Scope of Our Service -

-

- More information that nobody ever will read. -

+

Terms and conditions

+

Definitions

+

Some definitions that nobody ever will read.

+

Scope of Our Service

+

More information that nobody ever will read.

    -
  • - Very important note -
    • -
  • - Another important note -
    • -
  • - Maybe less important note -
    • -
  • - Again, very important note -
    • +
  • Very important note
    • +
  • Another important note
    • +
  • Maybe less important note
    • +
  • Again, very important note
-

- Correspondence and Communication -

-

- Still: nobody will ever read this information. -

-

- But at least let's put a link to Google here: What are terms and conditions? -

-

- Disclaimer -

-

- Yeah, you know what I mean: never-ever-read-information here. -

-

- Etc. -

+

Correspondence and Communication

+

Still: nobody will ever read this information.

- Etc. etc. etc. + But at least let's put a link to Google here: + What are terms and conditions?

+

Disclaimer

+

Yeah, you know what I mean: never-ever-read-information here.

+

Etc.

+

Etc. etc. etc.

-
\ No newline at end of file + diff --git a/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/README.md b/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/README.md index 27c81369..fa86f838 100644 --- a/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/README.md +++ b/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/README.md @@ -1,5 +1,5 @@ --- -title: "Giving clue about additional content in a form" +title: 'Giving clue about additional content in a form' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/example.css b/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/example.css index df581d77..9062aeab 100644 --- a/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/example.css +++ b/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/example.css @@ -6,7 +6,8 @@ overflow: hidden; } -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -39,4 +40,4 @@ p { #biography_description { display: none; -} \ No newline at end of file +} diff --git a/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/index.html b/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/index.html index d722a732..a88d0246 100644 --- a/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/index.html +++ b/pages/examples/forms/non-interactive-content/_examples/giving-clue-about-additional-content-in-a-form/index.html @@ -1,95 +1,73 @@ -

- A seemingly very important form -

+

A seemingly very important form

- +
+

Please tell us your name.

+

A name typically consists of a first and a last name.

+

Some people also have a middle name. Or more than one.

- Please tell us your name. + Because of that, we offer a single input here, instead of one for each + kind of name.

- A name typically consists of a first and a last name. -

-

- Some people also have a middle name. Or more than one. -

-

- Because of that, we offer a single input here, instead of one for each kind of name. -

-

- Some cultures even have habits of naming that are very different to ours, so it's really hard (if not impossible) to define a offer an input mask that's working for all. This is another reason why having a single input works fine here. + Some cultures even have habits of naming that are very different to + ours, so it's really hard (if not impossible) to define a offer an input + mask that's working for all. This is another reason why having a single + input works fine here.

- +
+

Please tell us something about your history.

- Please tell us something about your history. -

-

- If you don't know what a "biography" is, please visit the Wikipedia page about "Biography". + If you don't know what a "biography" is, please visit the + Wikipedia page about "Biography".

- +
-
- For additional info read below -
+
For additional info read below
-

- Terms and conditions -

-

- Definitions -

-

- Some definitions that nobody ever will read. -

-

- Scope of Our Service -

-

- More information that nobody ever will read. -

+

Terms and conditions

+

Definitions

+

Some definitions that nobody ever will read.

+

Scope of Our Service

+

More information that nobody ever will read.

    -
  • - Very important note -
    • -
  • - Another important note -
    • -
  • - Maybe less important note -
    • -
  • - Again, very important note -
    • +
  • Very important note
    • +
  • Another important note
    • +
  • Maybe less important note
    • +
  • Again, very important note
-

- Correspondence and Communication -

-

- Still: nobody will ever read this information. -

-

- But at least let's put a link to Google here: What are terms and conditions? -

-

- Disclaimer -

-

- Yeah, you know what I mean: never-ever-read-information here. -

-

- Etc. -

+

Correspondence and Communication

+

Still: nobody will ever read this information.

- Etc. etc. etc. + But at least let's put a link to Google here: + What are terms and conditions?

+

Disclaimer

+

Yeah, you know what I mean: never-ever-read-information here.

+

Etc.

+

Etc. etc. etc.

-
\ No newline at end of file + diff --git a/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/README.md b/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/README.md index 15f95367..dbd33e19 100644 --- a/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/README.md +++ b/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/README.md @@ -1,5 +1,5 @@ --- -title: "Making content focusable" +title: 'Making content focusable' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/example.css b/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/example.css index 9faa88d3..1ab33e19 100644 --- a/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/example.css +++ b/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -23,4 +24,4 @@ fieldset .description { ul { margin-top: 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/index.html b/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/index.html index 0f110fac..5f5a0399 100644 --- a/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/index.html +++ b/pages/examples/forms/non-interactive-content/_examples/making-content-focusable/index.html @@ -1,9 +1,7 @@
-

- Please tell us your name. -

+

Please tell us your name.

@@ -14,67 +12,48 @@
Gender
- +

You may be this if you like beer, gadgets, and Playboy Magazine.

- +

You may be this if you like prosecco, make up, and Playgirl Magazine.

- + + + + + + + + + + -

- Tell us how old you are. -

+

Tell us how old you are.

- +
    -
  • - I entered all data truthfully -
    • -
  • - I'm a good person -
    • -
  • - I won't vote for Donald Trump next time -
    • +
  • I entered all data truthfully
    • +
  • I'm a good person
    • +
  • I won't vote for Donald Trump next time
- \ No newline at end of file + diff --git a/pages/examples/forms/required/README.md b/pages/examples/forms/required/README.md index f9d9dbc0..b9df93af 100644 --- a/pages/examples/forms/required/README.md +++ b/pages/examples/forms/required/README.md @@ -1,12 +1,12 @@ --- -navigation_title: "Required (*)" +navigation_title: 'Required (*)' position: 8 -changed: "2018-05-29" +changed: '2018-05-29' --- -# Indicating form controls as required using asterisks (*) +# Indicating form controls as required using asterisks (\*) -**Asterisk (*) next to a form control's label usually indicates it as "required". Oftentimes, this asterisk's purpose is then explained somewhere else on the page. Many users (especially screen reader users) may be confused with that, so be sure to make this information is easily accessible.** +**Asterisk (\*) next to a form control's label usually indicates it as "required". Oftentimes, this asterisk's purpose is then explained somewhere else on the page. Many users (especially screen reader users) may be confused with that, so be sure to make this information is easily accessible.** [[_TOC_]] diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/README.md b/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/README.md index 574bbb6b..952f0d0b 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/README.md +++ b/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/README.md @@ -1,3 +1,3 @@ --- -title: "Required input with asterisk and ARIA" +title: 'Required input with asterisk and ARIA' --- diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/example.css b/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/example.css index 1870839d..ab683323 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/example.css +++ b/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/example.css @@ -6,7 +6,8 @@ overflow: hidden; } -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -18,4 +19,4 @@ label { .required { color: red; -} \ No newline at end of file +} diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/index.html b/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/index.html index 07d5737b..59b664d6 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/index.html +++ b/pages/examples/forms/required/_examples/required-input-with-asterisk-and-aria/index.html @@ -1,9 +1,11 @@
- +
- +
@@ -11,4 +13,4 @@ - \ No newline at end of file + diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisk/README.md b/pages/examples/forms/required/_examples/required-input-with-asterisk/README.md index 1ca20424..651b58db 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisk/README.md +++ b/pages/examples/forms/required/_examples/required-input-with-asterisk/README.md @@ -1,3 +1,3 @@ --- -title: "Required input with asterisk" +title: 'Required input with asterisk' --- diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisk/example.css b/pages/examples/forms/required/_examples/required-input-with-asterisk/example.css index 1870839d..ab683323 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisk/example.css +++ b/pages/examples/forms/required/_examples/required-input-with-asterisk/example.css @@ -6,7 +6,8 @@ overflow: hidden; } -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -18,4 +19,4 @@ label { .required { color: red; -} \ No newline at end of file +} diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisk/index.html b/pages/examples/forms/required/_examples/required-input-with-asterisk/index.html index 3e4e72f6..376371ad 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisk/index.html +++ b/pages/examples/forms/required/_examples/required-input-with-asterisk/index.html @@ -1,14 +1,14 @@
- +
- +
-

- *Required field -

+

*Required field

diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/README.md b/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/README.md index 2bd628b4..3e8d066b 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/README.md +++ b/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/README.md @@ -1,5 +1,5 @@ --- -title: "Required input with asterisks as icons" +title: 'Required input with asterisks as icons' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/example.css b/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/example.css index c6fe590a..d7213234 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/example.css +++ b/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/example.css @@ -29,4 +29,4 @@ svg#definition { height: 0.5em; fill: red; vertical-align: top; -} \ No newline at end of file +} diff --git a/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/index.html b/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/index.html index 7f3a8228..c7798539 100644 --- a/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/index.html +++ b/pages/examples/forms/required/_examples/required-input-with-asterisks-as-icons/index.html @@ -1,19 +1,32 @@ - + + + + + + + + +
- +
- +
-
\ No newline at end of file + diff --git a/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/README.md b/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/README.md index 699d3196..81d62589 100644 --- a/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/README.md +++ b/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/README.md @@ -1,3 +1,3 @@ --- -title: "Required input with hidden asterisks and ARIA" +title: 'Required input with hidden asterisks and ARIA' --- diff --git a/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/example.css b/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/example.css index 1870839d..ab683323 100644 --- a/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/example.css +++ b/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/example.css @@ -6,7 +6,8 @@ overflow: hidden; } -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -18,4 +19,4 @@ label { .required { color: red; -} \ No newline at end of file +} diff --git a/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/index.html b/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/index.html index 8289b340..dc0a1f52 100644 --- a/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/index.html +++ b/pages/examples/forms/required/_examples/required-input-with-hidden-asterisks-and-aria/index.html @@ -1,9 +1,12 @@
- +
- +
@@ -11,4 +14,4 @@ - \ No newline at end of file + diff --git a/pages/examples/forms/required/_examples/required-inputs-with-html-5/README.md b/pages/examples/forms/required/_examples/required-inputs-with-html-5/README.md index bbbdf67d..f2af6c28 100644 --- a/pages/examples/forms/required/_examples/required-inputs-with-html-5/README.md +++ b/pages/examples/forms/required/_examples/required-inputs-with-html-5/README.md @@ -1,5 +1,5 @@ --- -title: "Required inputs with HTML 5 and ARIA" +title: 'Required inputs with HTML 5 and ARIA' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/required/_examples/required-inputs-with-html-5/example.css b/pages/examples/forms/required/_examples/required-inputs-with-html-5/example.css index acb12d11..c5a57fda 100644 --- a/pages/examples/forms/required/_examples/required-inputs-with-html-5/example.css +++ b/pages/examples/forms/required/_examples/required-inputs-with-html-5/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -10,4 +11,4 @@ label { .required { color: red; -} \ No newline at end of file +} diff --git a/pages/examples/forms/required/_examples/required-inputs-with-html-5/index.html b/pages/examples/forms/required/_examples/required-inputs-with-html-5/index.html index 2dde4e66..a4956408 100644 --- a/pages/examples/forms/required/_examples/required-inputs-with-html-5/index.html +++ b/pages/examples/forms/required/_examples/required-inputs-with-html-5/index.html @@ -1,14 +1,17 @@
- +
- +
- +
-
\ No newline at end of file + diff --git a/pages/examples/forms/validation-messages/README.md b/pages/examples/forms/validation-messages/README.md index b3bc4515..80d64c04 100644 --- a/pages/examples/forms/validation-messages/README.md +++ b/pages/examples/forms/validation-messages/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Validation messages" +navigation_title: 'Validation messages' position: 7 -changed: "2020-04-30" +changed: '2020-04-30' --- # Validation messages diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/README.md b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/README.md index 388f5e07..b6e45361 100644 --- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/README.md +++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/README.md @@ -1,5 +1,5 @@ --- -title: "Form validation with messages next to controls" +title: 'Form validation with messages next to controls' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.css b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.css index 49027377..59874d15 100644 --- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.css +++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -24,4 +25,4 @@ label + .error { fieldset .error { margin-left: 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/index.html b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/index.html index c6f858b4..c9071262 100644 --- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/index.html +++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/index.html @@ -1,23 +1,41 @@
- +
- +
Gender
- +
- +
- +
- +
-
\ No newline at end of file + diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/README.md b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/README.md index 89ea6b3c..57969492 100644 --- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/README.md +++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/README.md @@ -1,5 +1,5 @@ --- -title: "Form validation with messages on top" +title: 'Form validation with messages on top' compatibility: Keyboard only: status: pass diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.css b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.css index 86fd0b4e..01c4ca9a 100644 --- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.css +++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.css @@ -1,4 +1,5 @@ -.control, fieldset { +.control, +fieldset { margin: 6px 0; } @@ -18,4 +19,4 @@ input + label { fieldset ul { margin: 0; -} \ No newline at end of file +} diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/index.html b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/index.html index c6f858b4..c9071262 100644 --- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/index.html +++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/index.html @@ -1,23 +1,41 @@
- +
- +
Gender
- +
- +
- +
- +
-
\ No newline at end of file + diff --git a/pages/examples/headings/README.md b/pages/examples/headings/README.md index 07b95485..befa44ac 100644 --- a/pages/examples/headings/README.md +++ b/pages/examples/headings/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Headings" +navigation_title: 'Headings' position: 3 -changed: "2018-05-02" +changed: '2018-05-02' --- # Heading outlines diff --git a/pages/examples/headings/alternative-techniques/README.md b/pages/examples/headings/alternative-techniques/README.md index 48a5500c..47241868 100644 --- a/pages/examples/headings/alternative-techniques/README.md +++ b/pages/examples/headings/alternative-techniques/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Alternative techniques" +navigation_title: 'Alternative techniques' position: 6 -changed: "2018-05-01" +changed: '2018-05-01' --- # Alternative techniques for labelling page regions @@ -25,11 +25,11 @@ So you should always provide a proper headings outline which covers all regions Since HTML 5 there are some new containers that provide semantical context: - `
` is meant to contain header info. - - For example a page's logo, slogan, etc. + - For example a page's logo, slogan, etc. - `
` is meant to contain the main content of a page. - - For example, on a website with cooking recipes, a page showing a single recipe would contain exactly that recipe in the `
` container (but not any additional page areas like header, navigation, or footer). + - For example, on a website with cooking recipes, a page showing a single recipe would contain exactly that recipe in the `
` container (but not any additional page areas like header, navigation, or footer). - `
` is meant to contain footer info. - - For example links to a page's disclaimer, copyright info, etc. + - For example links to a page's disclaimer, copyright info, etc. - There are a few more of those containers, like `
` or `
diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/README.md b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/README.md index d5ab0072..975697a3 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/README.md +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/README.md @@ -1,5 +1,5 @@ --- -title: "Page with HTML5 structural elements, labelled with ARIA, and visually hidden headings" +title: 'Page with HTML5 structural elements, labelled with ARIA, and visually hidden headings' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/example.css b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/example.css index 446c506e..a875eb90 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/example.css +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/example.css @@ -49,4 +49,4 @@ footer { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/index.html b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/index.html index f549bf35..4ca8f5e5 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/index.html +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria-and-visually-hidden-headings/index.html @@ -1,15 +1,9 @@
-

- Header -

-

- John Doe's Web Presence -

+

Header

+

John Doe's Web Presence

-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

-

- Footer -

-

- Copyright 2057 John Doe -

-
\ No newline at end of file +

Footer

+

Copyright 2057 John Doe

+ diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/README.md b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/README.md index 5121096c..2d527e46 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/README.md +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/README.md @@ -1,5 +1,5 @@ --- -title: "Page with HTML5 structural elements, labelled with ARIA" +title: 'Page with HTML5 structural elements, labelled with ARIA' compatibility: Keyboard only: status: pass @@ -15,5 +15,5 @@ compatibility: 2018.3 + FF ESR 52.7.3: status: pass date: 2018-04-09 -Comments: "strictly passes WCAG, but don't do it!" +Comments: "strictly passes WCAG, but don't do it!" --- diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/example.css b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/example.css index 446c506e..a875eb90 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/example.css +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/example.css @@ -49,4 +49,4 @@ footer { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/index.html b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/index.html index d3070b3a..395ea8d3 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/index.html +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements-labelled-with-aria/index.html @@ -1,7 +1,5 @@
-

- John Doe's Web Presence -

+

John Doe's Web Presence

-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

-

- Copyright 2057 John Doe -

-
\ No newline at end of file +

Copyright 2057 John Doe

+ diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/README.md b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/README.md index 32c3bfd7..e8ed9164 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/README.md +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/README.md @@ -1,5 +1,5 @@ --- -title: "Page with HTML5 structural elements" +title: 'Page with HTML5 structural elements' compatibility: Keyboard only: status: pass @@ -15,5 +15,5 @@ compatibility: 2018.3 + FF ESR 52.7.3: status: pass date: 2018-04-09 -Comments: "strictly passes WCAG, but don't do it!" +Comments: "strictly passes WCAG, but don't do it!" --- diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/example.css b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/example.css index c112457a..b1efa412 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/example.css +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/example.css @@ -39,4 +39,4 @@ footer { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/index.html b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/index.html index de11f997..28bdfdd5 100644 --- a/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/index.html +++ b/pages/examples/headings/alternative-techniques/_examples/page-with-html5-structural-elements/index.html @@ -1,7 +1,5 @@
-

- John Doe's Web Presence -

+

John Doe's Web Presence

-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

-

- Copyright 2057 John Doe -

-
\ No newline at end of file +

Copyright 2057 John Doe

+ diff --git a/pages/examples/headings/bad-example/README.md b/pages/examples/headings/bad-example/README.md index e130fa45..89380df4 100644 --- a/pages/examples/headings/bad-example/README.md +++ b/pages/examples/headings/bad-example/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Bad example" +navigation_title: 'Bad example' position: 3 -changed: "2018-04-03" +changed: '2018-04-03' --- # General bad headings example diff --git a/pages/examples/headings/bad-example/_examples/generally-bad-headings/README.md b/pages/examples/headings/bad-example/_examples/generally-bad-headings/README.md index 52c588ed..4a276863 100644 --- a/pages/examples/headings/bad-example/_examples/generally-bad-headings/README.md +++ b/pages/examples/headings/bad-example/_examples/generally-bad-headings/README.md @@ -1,3 +1,3 @@ --- -title: "Generally bad headings" +title: 'Generally bad headings' --- diff --git a/pages/examples/headings/bad-example/_examples/generally-bad-headings/index.html b/pages/examples/headings/bad-example/_examples/generally-bad-headings/index.html index f319dd9f..0b8118d3 100644 --- a/pages/examples/headings/bad-example/_examples/generally-bad-headings/index.html +++ b/pages/examples/headings/bad-example/_examples/generally-bad-headings/index.html @@ -1,54 +1,41 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Physical Activities -

-

- Playing Soccer -

+

Dancing

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Dancing -

+

Salsa

+

Salsa is a popular form of social dance that originated in the Caribbean.

+

Rock'n'Roll

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Rock'n'Roll is a very athletic, competitive form of partner dance that + originated from lindy hop.

-

- Salsa -

+

Gardening

- Salsa is a popular form of social dance that originated in the Caribbean. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

-

- Rock'n'Roll -

+

Relaxing Activities

+

Watching Movies

- Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. -

-

- Gardening -

-

- Gardening is the practice of growing and cultivating plants as part of horticulture. -

-

- Relaxing Activities -

-

- Watching Movies -

-

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, is + a series of still images which, when shown on a screen, creates the illusion + of moving images due to the phi phenomenon.

Meditate

- Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself. -

\ No newline at end of file + Meditation is a practice where an individual operates or trains the mind or + induces a mode of consciousness, either to realize some benefit or for the + mind to simply acknowledge its content without becoming identified with that + content, or as an end in itself. +

diff --git a/pages/examples/headings/good-example/README.md b/pages/examples/headings/good-example/README.md index da95ceb8..0adf34d6 100644 --- a/pages/examples/headings/good-example/README.md +++ b/pages/examples/headings/good-example/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Good example" +navigation_title: 'Good example' position: 2 -changed: "2018-04-03" +changed: '2018-04-03' --- # General good headings example @@ -30,4 +30,4 @@ HTML headings can be compared closely to heading styles in text processors like ![Heading styles in Word](_media/heading-styles-in-word.png) -If they are properly used, they allow the automatic generation of stuff like a TOC. And a TOC in a print document serves the exact same purpose like the document outline on a webpage. \ No newline at end of file +If they are properly used, they allow the automatic generation of stuff like a TOC. And a TOC in a print document serves the exact same purpose like the document outline on a webpage. diff --git a/pages/examples/headings/good-example/_examples/generally-good-headings/README.md b/pages/examples/headings/good-example/_examples/generally-good-headings/README.md index 21646123..9d7be826 100644 --- a/pages/examples/headings/good-example/_examples/generally-good-headings/README.md +++ b/pages/examples/headings/good-example/_examples/generally-good-headings/README.md @@ -1,5 +1,5 @@ --- -title: "Generally good headings" +title: 'Generally good headings' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/good-example/_examples/generally-good-headings/index.html b/pages/examples/headings/good-example/_examples/generally-good-headings/index.html index 90cc4c4b..966282c3 100644 --- a/pages/examples/headings/good-example/_examples/generally-good-headings/index.html +++ b/pages/examples/headings/good-example/_examples/generally-good-headings/index.html @@ -1,54 +1,39 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Physical Activities -

-

- Playing Soccer -

+

Dancing

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Dancing -

+

Salsa

+

Salsa is a popular form of social dance that originated in the Caribbean.

+

Rock'n'Roll

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Rock'n'Roll is a very athletic, competitive form of partner dance that + originated from lindy hop.

-

- Salsa -

+

Gardening

- Salsa is a popular form of social dance that originated in the Caribbean. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

-

- Rock'n'Roll -

+

Relaxing Activities

+

Watching Movies

- Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. + A film, also called a movie, motion picture, theatrical film, or photoplay, is + a series of still images which, when shown on a screen, creates the illusion + of moving images due to the phi phenomenon.

-

- Gardening -

+

Meditate

- Gardening is the practice of growing and cultivating plants as part of horticulture. + Meditation is a practice where an individual operates or trains the mind or + induces a mode of consciousness, either to realize some benefit or for the + mind to simply acknowledge its content without becoming identified with that + content, or as an end in itself.

-

- Relaxing Activities -

-

- Watching Movies -

-

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. -

-

- Meditate -

-

- Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself. -

\ No newline at end of file diff --git a/pages/examples/headings/handling/README.md b/pages/examples/headings/handling/README.md index 1f816387..8e1cef87 100644 --- a/pages/examples/headings/handling/README.md +++ b/pages/examples/headings/handling/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Handling" +navigation_title: 'Handling' position: 1 -changed: "2018-04-18" +changed: '2018-04-18' --- # How to handle headings @@ -40,7 +40,7 @@ In the upcoming text, we are referring to the keys `NVDA` and `JAWS`. If you do NVDA's "Elements List" displays a page's heading outline in a tree view. To open it: - First make sure you are in browse mode. - - If unclear to you, see [Screen readers' browse and focus modes](/knowledge/screen-readers/desktop/browse-focus-modes). + - If unclear to you, see [Screen readers' browse and focus modes](/knowledge/screen-readers/desktop/browse-focus-modes). - To open it, press `NVDA + F7`. - Press `Alt + H` to select the "Headings" area. diff --git a/pages/examples/headings/html-5-outline/README.md b/pages/examples/headings/html-5-outline/README.md index 2226b6f4..5198d989 100644 --- a/pages/examples/headings/html-5-outline/README.md +++ b/pages/examples/headings/html-5-outline/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "HTML 5 outline" +navigation_title: 'HTML 5 outline' position: 7 -changed: "2018-05-01" +changed: '2018-05-01' --- # HTML 5's headings outline algorithm diff --git a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/README.md b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/README.md index 1221601d..41fb803a 100644 --- a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/README.md +++ b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/README.md @@ -1,5 +1,5 @@ --- -title: "HTML 5 headings outline with ARIA level fixes" +title: 'HTML 5 headings outline with ARIA level fixes' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/index.html b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/index.html index f73bee51..fd70139c 100644 --- a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/index.html +++ b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-aria-level-fixes/index.html @@ -1,72 +1,60 @@ -

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

-

- Physical Activities -

+

Physical Activities

-

- Playing Soccer -

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement.

-

- Salsa -

+

Salsa

- Salsa is a popular form of social dance that originated in the Caribbean. + Salsa is a popular form of social dance that originated in the + Caribbean.

-

- Rock'n'Roll -

+

Rock'n'Roll

- Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. + Rock'n'Roll is a very athletic, competitive form of partner dance that + originated from lindy hop.

-

- Gardening -

+

Gardening

- Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

-

- Relaxing Activities -

+

Relaxing Activities

-

- Watching Movies -

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or + photoplay, is a series of still images which, when shown on a screen, + creates the illusion of moving images due to the phi phenomenon.

-

- Meditate -

+

Meditate

- Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself. + Meditation is a practice where an individual operates or trains the mind + or induces a mode of consciousness, either to realize some benefit or for + the mind to simply acknowledge its content without becoming identified + with that content, or as an end in itself.

-
\ No newline at end of file + diff --git a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/README.md b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/README.md index 71604ee0..2afb9e73 100644 --- a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/README.md +++ b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/README.md @@ -1,5 +1,5 @@ --- -title: "HTML 5 headings outline with traditionally numbered headings" +title: 'HTML 5 headings outline with traditionally numbered headings' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/index.html b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/index.html index 3a2662be..eccbb444 100644 --- a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/index.html +++ b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline-with-traditionally-numbered-headings/index.html @@ -1,72 +1,60 @@ -

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

-

- Physical Activities -

+

Physical Activities

-

- Playing Soccer -

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement.

-

- Salsa -

+

Salsa

- Salsa is a popular form of social dance that originated in the Caribbean. + Salsa is a popular form of social dance that originated in the + Caribbean.

-

- Rock'n'Roll -

+

Rock'n'Roll

- Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. + Rock'n'Roll is a very athletic, competitive form of partner dance that + originated from lindy hop.

-

- Gardening -

+

Gardening

- Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

-

- Relaxing Activities -

+

Relaxing Activities

-

- Watching Movies -

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or + photoplay, is a series of still images which, when shown on a screen, + creates the illusion of moving images due to the phi phenomenon.

-

- Meditate -

+

Meditate

- Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself. + Meditation is a practice where an individual operates or trains the mind + or induces a mode of consciousness, either to realize some benefit or for + the mind to simply acknowledge its content without becoming identified + with that content, or as an end in itself.

-
\ No newline at end of file + diff --git a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/README.md b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/README.md index 029d2ee9..4745a1fb 100644 --- a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/README.md +++ b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/README.md @@ -1,5 +1,5 @@ --- -title: "HTML 5 headings outline" +title: 'HTML 5 headings outline' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/index.html b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/index.html index 7cc9a391..3b6e6812 100644 --- a/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/index.html +++ b/pages/examples/headings/html-5-outline/_examples/html-5-headings-outline/index.html @@ -1,72 +1,60 @@ -

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

-

- Physical Activities -

+

Physical Activities

-

- Playing Soccer -

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement.

-

- Salsa -

+

Salsa

- Salsa is a popular form of social dance that originated in the Caribbean. + Salsa is a popular form of social dance that originated in the + Caribbean.

-

- Rock'n'Roll -

+

Rock'n'Roll

- Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. + Rock'n'Roll is a very athletic, competitive form of partner dance that + originated from lindy hop.

-

- Gardening -

+

Gardening

- Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

-

- Relaxing Activities -

+

Relaxing Activities

-

- Watching Movies -

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or + photoplay, is a series of still images which, when shown on a screen, + creates the illusion of moving images due to the phi phenomenon.

-

- Meditate -

+

Meditate

- Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself. + Meditation is a practice where an individual operates or trains the mind + or induces a mode of consciousness, either to realize some benefit or for + the mind to simply acknowledge its content without becoming identified + with that content, or as an end in itself.

-
\ No newline at end of file + diff --git a/pages/examples/headings/iframes/README.md b/pages/examples/headings/iframes/README.md index 1ac4b4d5..6091c5f8 100644 --- a/pages/examples/headings/iframes/README.md +++ b/pages/examples/headings/iframes/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Iframes" +navigation_title: 'Iframes' position: 8 -changed: "2018-06-15" +changed: '2018-06-15' --- # External content in iframes @@ -34,11 +34,11 @@ The resulting headings outline looks like this to a screen reader: ![Bad heading outline](_media/bad-heading-outline.png) - `

` Hobbies - - `

` Playing Soccer - - `

` Dancing + - `

` Playing Soccer + - `

` Dancing - `

` Salsa - `

` Rock'n'Roll - - `

` Gardening + - `

` Gardening To fix it, the headings in the embedded content need to be on the correct level relatively to the parent page. @@ -49,8 +49,8 @@ Now the resulting headings outline looks correct: ![Appropriate heading outline](_media/appropriate-heading-outline.png) - `

` Hobbies - - `

` Playing Soccer - - `

` Dancing - - `

` Salsa - - `

` Rock'n'Roll - - `

` Gardening + - `

` Playing Soccer + - `

` Dancing + - `

` Salsa + - `

` Rock'n'Roll + - `

` Gardening diff --git a/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/README.md b/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/README.md index c0534056..af7e1b86 100644 --- a/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/README.md +++ b/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/README.md @@ -1,3 +1,3 @@ --- -title: "Bad iframe with interferring headings" +title: 'Bad iframe with interferring headings' --- diff --git a/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/iframe.html b/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/iframe.html index 2784979f..fc184ceb 100644 --- a/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/iframe.html +++ b/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/iframe.html @@ -1,21 +1,18 @@ - + - + Information about dance -

- Salsa -

+

Salsa

Salsa is a popular form of social dance that originated in the Caribbean.

-

- Rock'n'Roll -

+

Rock'n'Roll

- Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. + Rock'n'Roll is a very athletic, competitive form of partner dance that + originated from lindy hop.

diff --git a/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/index.html b/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/index.html index a187967b..cf06fbec 100644 --- a/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/index.html +++ b/pages/examples/headings/iframes/_examples/bad-iframe-with-interferring-headings/index.html @@ -1,22 +1,14 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Playing Soccer -

-

- Soccer is a team sport played between two teams of eleven players with a spherical ball. -

-

- Dancing -

+

Dancing

-

- Gardening -

+

Gardening

- Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

diff --git a/pages/examples/headings/iframes/_examples/general-iframe-example/README.md b/pages/examples/headings/iframes/_examples/general-iframe-example/README.md index ef7b5a6a..9e083e86 100644 --- a/pages/examples/headings/iframes/_examples/general-iframe-example/README.md +++ b/pages/examples/headings/iframes/_examples/general-iframe-example/README.md @@ -1,5 +1,5 @@ --- -title: "General iframe example" +title: 'General iframe example' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/iframes/_examples/general-iframe-example/iframe.html b/pages/examples/headings/iframes/_examples/general-iframe-example/iframe.html index c90ea067..98ab6c02 100644 --- a/pages/examples/headings/iframes/_examples/general-iframe-example/iframe.html +++ b/pages/examples/headings/iframes/_examples/general-iframe-example/iframe.html @@ -1,12 +1,13 @@ - + - + Information about dance

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement.

diff --git a/pages/examples/headings/iframes/_examples/general-iframe-example/index.html b/pages/examples/headings/iframes/_examples/general-iframe-example/index.html index a187967b..cf06fbec 100644 --- a/pages/examples/headings/iframes/_examples/general-iframe-example/index.html +++ b/pages/examples/headings/iframes/_examples/general-iframe-example/index.html @@ -1,22 +1,14 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Playing Soccer -

-

- Soccer is a team sport played between two teams of eleven players with a spherical ball. -

-

- Dancing -

+

Dancing

-

- Gardening -

+

Gardening

- Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

diff --git a/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/README.md b/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/README.md index 9ae80d82..526acdfd 100644 --- a/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/README.md +++ b/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/README.md @@ -1,5 +1,5 @@ --- -title: "Iframe with appropriate headings" +title: 'Iframe with appropriate headings' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/iframe.html b/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/iframe.html index 2784979f..fc184ceb 100644 --- a/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/iframe.html +++ b/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/iframe.html @@ -1,21 +1,18 @@ - + - + Information about dance -

- Salsa -

+

Salsa

Salsa is a popular form of social dance that originated in the Caribbean.

-

- Rock'n'Roll -

+

Rock'n'Roll

- Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. + Rock'n'Roll is a very athletic, competitive form of partner dance that + originated from lindy hop.

diff --git a/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/index.html b/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/index.html index a187967b..cf06fbec 100644 --- a/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/index.html +++ b/pages/examples/headings/iframes/_examples/iframe-with-appropriate-headings/index.html @@ -1,22 +1,14 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Playing Soccer -

-

- Soccer is a team sport played between two teams of eleven players with a spherical ball. -

-

- Dancing -

+

Dancing

-

- Gardening -

+

Gardening

- Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture.

diff --git a/pages/examples/headings/multiple-h1-okay-for-seo/README.md b/pages/examples/headings/multiple-h1-okay-for-seo/README.md index d030364d..7c7a2c43 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/README.md +++ b/pages/examples/headings/multiple-h1-okay-for-seo/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Multiple h1 okay for SEO?" +navigation_title: 'Multiple h1 okay for SEO?' position: 5 -changed: "2018-05-15" +changed: '2018-05-15' --- # Regarding search engine optimisation, is it okay to have multiple headings on level 1? @@ -64,4 +64,4 @@ This creates a heading outline which technically is a bit invalid, as it starts Another thing may really feel a bit strange though, as using this technique, the header stands on its own, while the footer is part of the main content. -This special case is accepted though by the accessibility community. \ No newline at end of file +This special case is accepted though by the accessibility community. diff --git a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/README.md b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/README.md index 7da887fd..41fa5797 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/README.md +++ b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/README.md @@ -1,5 +1,5 @@ --- -title: "Page with only one h1 on top of main content" +title: 'Page with only one h1 on top of main content' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/example.css b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/example.css index c112457a..b1efa412 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/example.css +++ b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/example.css @@ -39,4 +39,4 @@ footer { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/index.html b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/index.html index d198e82b..3ced9bc9 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/index.html +++ b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-main-content/index.html @@ -1,15 +1,9 @@
- -

- John Doe's Web Presence -

+ +

John Doe's Web Presence

-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

- -

- Copyright 2057 John Doe -

-
\ No newline at end of file + +

Copyright 2057 John Doe

+ diff --git a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/README.md b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/README.md index 3d2d8987..65355b88 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/README.md +++ b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/README.md @@ -1,5 +1,5 @@ --- -title: "Page with only one h1 on top of page" +title: 'Page with only one h1 on top of page' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/example.css b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/example.css index c112457a..b1efa412 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/example.css +++ b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/example.css @@ -39,4 +39,4 @@ footer { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/index.html b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/index.html index 1993254b..c1bb4991 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/index.html +++ b/pages/examples/headings/multiple-h1-okay-for-seo/_examples/page-with-only-one-h1-on-top-of-page/index.html @@ -1,18 +1,10 @@ -

- My Hobbies -

+

My Hobbies

- -

- John Doe's Web Presence -

+ +

John Doe's Web Presence

-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

- -

- Copyright 2057 John Doe -

-
\ No newline at end of file + +

Copyright 2057 John Doe

+ diff --git a/pages/examples/headings/visually-hidden-headings/README.md b/pages/examples/headings/visually-hidden-headings/README.md index d98a5593..486504ee 100644 --- a/pages/examples/headings/visually-hidden-headings/README.md +++ b/pages/examples/headings/visually-hidden-headings/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Visually hidden headings" +navigation_title: 'Visually hidden headings' position: 4 -changed: "2018-04-03" +changed: '2018-04-03' --- # Adding visually hidden headings to complete a page's outline diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/README.md b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/README.md index 7cb5c3c0..ed73229b 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/README.md +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/README.md @@ -1,5 +1,5 @@ --- -title: "Page with additional page regions, with headings" +title: 'Page with additional page regions, with headings' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/example.css b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/example.css index 61dd1a26..6c589642 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/example.css +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/example.css @@ -33,4 +33,4 @@ body { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/index.html b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/index.html index 66a78c5b..5b8f6089 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/index.html +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-headings/index.html @@ -1,15 +1,9 @@
-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

\ No newline at end of file +

Footer

+

Copyright 2057 John Doe

+
diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/README.md b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/README.md index 1f2a2953..8b4c88d9 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/README.md +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/README.md @@ -1,5 +1,5 @@ --- -title: "Page with additional page regions, with visually hidden headings" +title: 'Page with additional page regions, with visually hidden headings' compatibility: Keyboard only: status: pass diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/example.css b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/example.css index fc4838f2..39cc53d9 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/example.css +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/example.css @@ -39,4 +39,4 @@ body { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/index.html b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/index.html index e5f32e8f..f09e5496 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/index.html +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-with-visually-hidden-headings/index.html @@ -1,15 +1,9 @@
-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

\ No newline at end of file +

Footer

+

Copyright 2057 John Doe

+
diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/README.md b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/README.md index 9809cf1d..f585420b 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/README.md +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/README.md @@ -1,3 +1,3 @@ --- -title: "Page with additional page regions, without headings" +title: 'Page with additional page regions, without headings' --- diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/example.css b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/example.css index ba63f7c6..7073802c 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/example.css +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/example.css @@ -31,4 +31,4 @@ body { padding-left: 20px; padding-right: 20px; border-top: 1px solid black; -} \ No newline at end of file +} diff --git a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/index.html b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/index.html index ddcf1da8..e9be069f 100644 --- a/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/index.html +++ b/pages/examples/headings/visually-hidden-headings/_examples/page-with-additional-page-regions-without-headings/index.html @@ -1,7 +1,5 @@
-

- My Hobbies -

-

- These all are activities I love to do on a regular basis. -

-

- Physical Activities -

-

- Playing Soccer -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Dancing -

+

Dancing

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Relaxing Activities -

-

- Watching Movies -

+

Relaxing Activities

+

Watching Movies

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. + A film, also called a movie, motion picture, theatrical film, or photoplay, + is a series of still images which, when shown on a screen, creates the + illusion of moving images due to the phi phenomenon.

\ No newline at end of file +

Copyright 2057 John Doe

+
diff --git a/pages/examples/hiding-elements/README.md b/pages/examples/hiding-elements/README.md index 91be1599..d66d800f 100644 --- a/pages/examples/hiding-elements/README.md +++ b/pages/examples/hiding-elements/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Hiding elements" +navigation_title: 'Hiding elements' position: 2 -changed: "2018-05-02" +changed: '2018-05-02' --- # Hiding elements correctly diff --git a/pages/examples/hiding-elements/from-all-devices/README.md b/pages/examples/hiding-elements/from-all-devices/README.md index df832db4..35d4345c 100644 --- a/pages/examples/hiding-elements/from-all-devices/README.md +++ b/pages/examples/hiding-elements/from-all-devices/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "From all devices" +navigation_title: 'From all devices' position: 3 -changed: "2021-06-29" +changed: '2021-06-29' --- # Hiding elements from all devices diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/README.md b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/README.md index 744cf9ff..8b4e87d7 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/README.md +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/README.md @@ -1,5 +1,5 @@ --- -title: "Hiding elements from all devices using display none" +title: 'Hiding elements from all devices using display none' compatibility: Keyboard only: status: pass diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/example.css b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/example.css index 31b550e5..1cda2ae1 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/example.css +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/example.css @@ -1,3 +1,3 @@ .display-none { display: none; -} \ No newline at end of file +} diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/index.html b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/index.html index 6d52b5e0..d38c2c34 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/index.html +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-display-none/index.html @@ -1,6 +1,2 @@ -

- This paragraph is visible. But is there something below? -

- \ No newline at end of file +

This paragraph is visible. But is there something below?

+ diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/README.md b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/README.md index 5c357f07..c7358968 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/README.md +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/README.md @@ -1,5 +1,5 @@ --- -title: "Hiding elements from all devices using hidden attribute" +title: 'Hiding elements from all devices using hidden attribute' compatibility: Keyboard only: status: pass diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/example.css b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/example.css index 2ffb392f..8c36ea53 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/example.css +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/example.css @@ -4,4 +4,4 @@ .visibility-hidden { visibility: hidden; -} \ No newline at end of file +} diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/index.html b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/index.html index 22249775..12e78614 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/index.html +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-hidden-attribute/index.html @@ -1,6 +1,2 @@ -

- This paragraph is visible. But is there something below? -

- \ No newline at end of file +

This paragraph is visible. But is there something below?

+ diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/README.md b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/README.md index a7cf6e7c..900b1bfb 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/README.md +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/README.md @@ -1,5 +1,5 @@ --- -title: "Hiding elements from all devices using visibility hidden" +title: 'Hiding elements from all devices using visibility hidden' compatibility: Keyboard only: status: pass diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/example.css b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/example.css index 85ff121e..8d8a729d 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/example.css +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/example.css @@ -1,3 +1,3 @@ .visibility-hidden { visibility: hidden; -} \ No newline at end of file +} diff --git a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/index.html b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/index.html index 8652bdfe..f8cacf15 100644 --- a/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/index.html +++ b/pages/examples/hiding-elements/from-all-devices/_examples/hiding-elements-from-all-devices-using-visibility-hidden/index.html @@ -1,6 +1,2 @@ -

- This paragraph is visible. But is there something below? -

-

- This text is perceivable by no device. -

\ No newline at end of file +

This paragraph is visible. But is there something below?

+

This text is perceivable by no device.

diff --git a/pages/examples/hiding-elements/from-screen-readers/README.md b/pages/examples/hiding-elements/from-screen-readers/README.md index 452ca334..f274af76 100644 --- a/pages/examples/hiding-elements/from-screen-readers/README.md +++ b/pages/examples/hiding-elements/from-screen-readers/README.md @@ -1,11 +1,11 @@ --- -navigation_title: "From screen readers" +navigation_title: 'From screen readers' position: 2 -changed: "2018-05-13" +changed: '2018-05-13' --- # Hiding elements from screen readers using aria-hidden **To hide an element from screen readers means: visually (on a computer screen) it is perceivable, but non-visual clients (for example screen readers) ignore it. This is done easily using ARIA, but you should never try this on focusable elements.** -Everything interesting about hiding elements from screen readers is written here: [Hiding elements from screen readers using aria-hidden](/examples/sensible-aria-usage/hidden). \ No newline at end of file +Everything interesting about hiding elements from screen readers is written here: [Hiding elements from screen readers using aria-hidden](/examples/sensible-aria-usage/hidden). diff --git a/pages/examples/hiding-elements/okay-for-seo/README.md b/pages/examples/hiding-elements/okay-for-seo/README.md index c5e9e003..a453943d 100644 --- a/pages/examples/hiding-elements/okay-for-seo/README.md +++ b/pages/examples/hiding-elements/okay-for-seo/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Okay for SEO?" +navigation_title: 'Okay for SEO?' position: 5 -changed: "2018-04-03" +changed: '2018-04-03' --- # Regarding search engine optimisation, is it okay to hide elements? @@ -20,4 +20,4 @@ When this fraud was detected, search engines began to punish such strategies wit Nowadays, search engines have become much smarter: they rely heavily on valid semantics of information (if you haven't done this yet, go back and read [Semantics and their importance for accessibility](/knowledge/semantics)). In this respect, search engines can be compared very closely to users with special needs. -As such, we claim: everything that is good for users with special needs can be treated as good practice for SEO. \ No newline at end of file +As such, we claim: everything that is good for users with special needs can be treated as good practice for SEO. diff --git a/pages/examples/hiding-elements/visually/README.md b/pages/examples/hiding-elements/visually/README.md index 26cf265a..42497360 100644 --- a/pages/examples/hiding-elements/visually/README.md +++ b/pages/examples/hiding-elements/visually/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Visually" +navigation_title: 'Visually' position: 1 -changed: "2018-03-24" +changed: '2018-03-24' --- # Hiding elements visually by moving them off-screen @@ -15,10 +15,10 @@ It may be surprising, but the only way to hide an element visually while retaini ```css .visually-hidden { position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; + left: -10000px; + top: auto; + width: 1px; + height: 1px; overflow: hidden; } ``` @@ -42,10 +42,10 @@ In the following example, press the `Tab` key to focus and show the (previously The usage of this technique has some side effects for visual users: - When searching in the browser for text, elements visually hidden with this technique are still found. - - This can be confusing, as some of the results may not be visible (though the browser scrolls to the correct viewport position when toggling through the results). + - This can be confusing, as some of the results may not be visible (though the browser scrolls to the correct viewport position when toggling through the results). - When selecting text (for example for copying it to the clipboard), elements that were visually hidden using this technique are also selected (if they are between the selection start and selection end position). - - This can be confusing, as the selected text may differ from what is expected. + - This can be confusing, as the selected text may differ from what is expected. ## Further possibilities using ARIA -Instead of moving elements out of the viewport, it is possible to replace or add text content specifically for screen readers using ARIA: [Labelling elements using aria-label and aria-labelledby](/examples/sensible-aria-usage/label-labelledby). \ No newline at end of file +Instead of moving elements out of the viewport, it is possible to replace or add text content specifically for screen readers using ARIA: [Labelling elements using aria-label and aria-labelledby](/examples/sensible-aria-usage/label-labelledby). diff --git a/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/README.md b/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/README.md index 57ae77da..3d2897cd 100644 --- a/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/README.md +++ b/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/README.md @@ -1,5 +1,5 @@ --- -title: "Hiding an element visually" +title: 'Hiding an element visually' compatibility: Keyboard only: status: pass diff --git a/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/_example.css b/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/_example.css index c63c697a..337f5d52 100644 --- a/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/_example.css +++ b/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/_example.css @@ -4,4 +4,4 @@ height: 1px; overflow: hidden; left: -10000px; -} \ No newline at end of file +} diff --git a/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/index.html b/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/index.html index af1e003e..66f6d404 100644 --- a/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/index.html +++ b/pages/examples/hiding-elements/visually/_examples/hiding-an-element-visually/index.html @@ -1,9 +1,12 @@

- This is the first paragraph. It is perceivable both visually and by screen readers. + This is the first paragraph. It is perceivable both visually and by screen + readers.

- This is the third paragraph. It is perceivable both visually and by screen readers. -

\ No newline at end of file + This is the third paragraph. It is perceivable both visually and by screen + readers. +

diff --git a/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities-alternative/README.md b/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities-alternative/README.md index ece349f7..091093d2 100644 --- a/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities-alternative/README.md +++ b/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities-alternative/README.md @@ -1,4 +1,4 @@ --- -title: "Hiding elements only visually: iOS peculiarities alternative" -comments: "example not tested" +title: 'Hiding elements only visually: iOS peculiarities alternative' +comments: 'example not tested' --- diff --git a/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities/README.md b/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities/README.md index fa4722a1..ebd97e37 100644 --- a/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities/README.md +++ b/pages/examples/hiding-elements/visually/_examples/hiding-elements-only-visually-ios-peculiarities/README.md @@ -1,4 +1,4 @@ --- -title: "Hiding elements only visually: iOS peculiarities" -comments: "example not tested" +title: 'Hiding elements only visually: iOS peculiarities' +comments: 'example not tested' --- diff --git a/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/README.md b/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/README.md index 93bd5cd7..cc78c0e1 100644 --- a/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/README.md +++ b/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/README.md @@ -1,5 +1,5 @@ --- -title: "Toggling visibility of a hidden element on focus" +title: 'Toggling visibility of a hidden element on focus' compatibility: Keyboard only: status: pass diff --git a/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/example.css b/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/example.css index 6fa4b78b..5e80d3f3 100644 --- a/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/example.css +++ b/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/example.css @@ -18,4 +18,4 @@ #jump { background-color: white; padding: 10px; -} \ No newline at end of file +} diff --git a/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/index.html b/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/index.html index 54806863..c5c9c2bb 100644 --- a/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/index.html +++ b/pages/examples/hiding-elements/visually/_examples/toggling-visibility-of-a-hidden-element-on-focus/index.html @@ -1,7 +1,5 @@ -

- Navigation -

+

Navigation

-

- Here is the content headline -

-

- And here is some content. -

-

- And some more content. -

\ No newline at end of file +

Here is the content headline

+

And here is some content.

+

And some more content.

diff --git a/pages/examples/html_boilerplate/README.md b/pages/examples/html_boilerplate/README.md index c39a6d52..626d76ef 100644 --- a/pages/examples/html_boilerplate/README.md +++ b/pages/examples/html_boilerplate/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "HTML Boilerplate" +navigation_title: 'HTML Boilerplate' position: 1 -changed: "2018-09-02" +changed: '2018-09-02' --- # Basic structure of an accessible HTML file diff --git a/pages/examples/sensible-aria-usage/README.md b/pages/examples/sensible-aria-usage/README.md index 0da2a8eb..aeb82158 100644 --- a/pages/examples/sensible-aria-usage/README.md +++ b/pages/examples/sensible-aria-usage/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Sensible ARIA usage" +navigation_title: 'Sensible ARIA usage' position: 7 -changed: "2021-09-22" +changed: '2021-09-22' --- # Sensible usage of ARIA roles and attributes diff --git a/pages/examples/sensible-aria-usage/alert/README.md b/pages/examples/sensible-aria-usage/alert/README.md index 0cd664c2..1c7373f1 100644 --- a/pages/examples/sensible-aria-usage/alert/README.md +++ b/pages/examples/sensible-aria-usage/alert/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Alert" +navigation_title: 'Alert' position: 8 -changed: "2018-05-15" +changed: '2018-05-15' --- # Noticing screen readers using alert role @@ -21,24 +21,20 @@ Setting `role="alert"` to a newly added DOM element (using JavaScript) forces th In the following code, the user is greeted "Hello!" after 10 seconds. ```html -

- The user may read this paragraph... -

+

The user may read this paragraph...

-

- ...or this paragraph. -

+

...or this paragraph.

``` ```javascript -var sayHello; -sayHello = function() { - return $("#alert").append("

Hello!

"); -}; +var sayHello +sayHello = function () { + return $('#alert').append("

Hello!

") +} -return setTimeout(sayHello, 10000); +return setTimeout(sayHello, 10000) ``` [Example](_examples/single-announcement-of-an-element-using-alert-role) @@ -52,12 +48,12 @@ You may have noticed that the screen reader's current announcement was brutally But look at the following, more extreme example, where the user is greeted very 2 seconds: ```javascript -var sayHello; -sayHello = function() { - $("#alert").append(`

Hello!

`); -}; +var sayHello +sayHello = function () { + $('#alert').append(`

Hello!

`) +} -setInterval(sayHello, 2000); +setInterval(sayHello, 2000) ``` This is extremely disturbing, as the user is interrupted again and again while browsing the page. Something like this can destroy the whole user experience for screen reader users. diff --git a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/README.md b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/README.md index 7f215a63..e9139c29 100644 --- a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/README.md +++ b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/README.md @@ -1,5 +1,5 @@ --- -title: "Loop announcement of an element using alert role" +title: 'Loop announcement of an element using alert role' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/index.html b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/index.html index 183397ed..73960b19 100644 --- a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/index.html +++ b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-alert-role/index.html @@ -1,31 +1,21 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Physical Activities -

-

- Playing Soccer -

+

Dancing

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Dancing -

+

Relaxing Activities

+

Watching Movies

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + A film, also called a movie, motion picture, theatrical film, or photoplay, is + a series of still images which, when shown on a screen, creates the illusion + of moving images due to the phi phenomenon.

-

- Relaxing Activities -

-

- Watching Movies -

-

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. -

-
\ No newline at end of file +
diff --git a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/README.md b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/README.md index a194378d..7e8c5612 100644 --- a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/README.md +++ b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/README.md @@ -1,3 +1,3 @@ --- -title: "Loop announcement of an element using hidden alert role" +title: 'Loop announcement of an element using hidden alert role' --- diff --git a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/index.html b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/index.html index c3bddfd5..9aaefce6 100644 --- a/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/index.html +++ b/pages/examples/sensible-aria-usage/alert/_examples/loop-announcement-of-an-element-using-hidden-alert-role/index.html @@ -1,31 +1,21 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Physical Activities -

-

- Playing Soccer -

+

Dancing

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Dancing -

+

Relaxing Activities

+

Watching Movies

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + A film, also called a movie, motion picture, theatrical film, or photoplay, is + a series of still images which, when shown on a screen, creates the illusion + of moving images due to the phi phenomenon.

-

- Relaxing Activities -

-

- Watching Movies -

-

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. -

- \ No newline at end of file + diff --git a/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/README.md b/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/README.md index 255d1771..52ddae48 100644 --- a/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/README.md +++ b/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/README.md @@ -1,5 +1,5 @@ --- -title: "Single announcement of an element using alert role" +title: 'Single announcement of an element using alert role' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/index.html b/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/index.html index 183397ed..73960b19 100644 --- a/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/index.html +++ b/pages/examples/sensible-aria-usage/alert/_examples/single-announcement-of-an-element-using-alert-role/index.html @@ -1,31 +1,21 @@ -

- My Hobbies -

+

My Hobbies

+

These all are activities I love to do on a regular basis.

+

Physical Activities

+

Playing Soccer

- These all are activities I love to do on a regular basis. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.

-

- Physical Activities -

-

- Playing Soccer -

+

Dancing

- Soccer is a team sport played between two teams of eleven players with a spherical ball. + Dance is a performing art form consisting of purposefully selected sequences + of human movement.

-

- Dancing -

+

Relaxing Activities

+

Watching Movies

- Dance is a performing art form consisting of purposefully selected sequences of human movement. + A film, also called a movie, motion picture, theatrical film, or photoplay, is + a series of still images which, when shown on a screen, creates the illusion + of moving images due to the phi phenomenon.

-

- Relaxing Activities -

-

- Watching Movies -

-

- A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. -

-
\ No newline at end of file +
diff --git a/pages/examples/sensible-aria-usage/current/README.md b/pages/examples/sensible-aria-usage/current/README.md index a5f7fea0..2dd5463a 100644 --- a/pages/examples/sensible-aria-usage/current/README.md +++ b/pages/examples/sensible-aria-usage/current/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Current" +navigation_title: 'Current' position: 5 -changed: "2018-05-14" +changed: '2018-05-14' --- # Marking elements as the current one using aria-current diff --git a/pages/examples/sensible-aria-usage/current/_examples/marking-an-element-as-current-using-aria-current/README.md b/pages/examples/sensible-aria-usage/current/_examples/marking-an-element-as-current-using-aria-current/README.md index e5c0519f..9ce7d1a3 100644 --- a/pages/examples/sensible-aria-usage/current/_examples/marking-an-element-as-current-using-aria-current/README.md +++ b/pages/examples/sensible-aria-usage/current/_examples/marking-an-element-as-current-using-aria-current/README.md @@ -1,5 +1,5 @@ --- -title: "Marking an element as current using aria-current" +title: 'Marking an element as current using aria-current' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/README.md b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/README.md index b0725f55..ed52679d 100644 --- a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/README.md +++ b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/README.md @@ -1,5 +1,5 @@ --- -title: "Marking elements using different aria-current values" +title: 'Marking elements using different aria-current values' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/index.html b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/index.html index 66dc14d2..2bb5915c 100644 --- a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/index.html +++ b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-different-aria-current-values/index.html @@ -1,23 +1,9 @@
    -
  • - Element 1 -
    • -
  • - Element 2 -
    • -
  • - Element 3 -
    • -
  • - Element 4 -
    • -
  • - Element 5 -
    • -
  • - Element 6 -
    • -
  • - Element 7 -
    • -
\ No newline at end of file +
  • Element 1
    • +
  • Element 2
    • +
  • Element 3
    • +
  • Element 4
    • +
  • Element 5
    • +
  • Element 6
    • +
  • Element 7
    • + diff --git a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/README.md b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/README.md index 72c4b2a3..1607763e 100644 --- a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/README.md +++ b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/README.md @@ -1,5 +1,5 @@ --- -title: "Marking elements using visually hidden text" +title: 'Marking elements using visually hidden text' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/example.css b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/example.css index 8561349d..87da89ce 100644 --- a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/example.css +++ b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/example.css @@ -5,4 +5,4 @@ width: 1px; height: 1px; overflow: hidden; -} \ No newline at end of file +} diff --git a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/index.html b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/index.html index f1537841..ded7d568 100644 --- a/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/index.html +++ b/pages/examples/sensible-aria-usage/current/_examples/marking-elements-using-visually-hidden-text/index.html @@ -1,20 +1,8 @@
      -
    • - Element 1 -
      • -
    • - Element 2 -
      • -
    • - Element 3 -
      • -
    • - Element 4 -
      • -
    • - Element 5 -
      • -
    • - Element 6 -
      • -
    \ No newline at end of file +
  • Element 1
    • +
  • Element 2
    • +
  • Element 3
    • +
  • Element 4
    • +
  • Element 5
    • +
  • Element 6
    • + diff --git a/pages/examples/sensible-aria-usage/describedby/README.md b/pages/examples/sensible-aria-usage/describedby/README.md index 9c09355f..ecdb2a5a 100644 --- a/pages/examples/sensible-aria-usage/describedby/README.md +++ b/pages/examples/sensible-aria-usage/describedby/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Describedby" +navigation_title: 'Describedby' position: 2 -changed: "2018-05-14" +changed: '2018-05-14' --- # Adding descriptions to elements using aria-describedby @@ -19,13 +19,9 @@ In addition to an element's label (see [Labelling elements using aria-label and Using `aria-describedby`, any number of elements can be set as description(s) of another element (by referencing their IDs). For example, the following link's description is "The world's best known search engine": ```html - - Google - + Google -
    - The world's best known search engine -
    +
    The world's best known search engine
    ``` By the way, elements hidden using CSS can still be referenced: @@ -71,7 +67,7 @@ The only case where we truly recommend the usage of `aria-describedby`, is to at For this, the information itself must be visible (and as such discoverable also in browse mode) and as close as possible to the element it describes. -If instead you need to attach information that itself is invisible, you better use visually hidden text (see [Hiding elements visually by moving them off-screen](/examples/hiding-elements/visually)). For an example, see [Indicating form controls as required using asterisks (*)](/examples/forms/required). +If instead you need to attach information that itself is invisible, you better use visually hidden text (see [Hiding elements visually by moving them off-screen](/examples/hiding-elements/visually)). For an example, see [Indicating form controls as required using asterisks (\*)](/examples/forms/required). ## Conclusion diff --git a/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/README.md b/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/README.md index a561795f..a32bc9de 100644 --- a/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/README.md +++ b/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/README.md @@ -1,5 +1,5 @@ --- -title: "Adding a description to an element using aria-describedby" +title: 'Adding a description to an element using aria-describedby' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/example.css b/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/example.css index 2a1ce9c5..cbef3345 100644 --- a/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/example.css +++ b/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/example.css @@ -1,3 +1,3 @@ #description { display: none; -} \ No newline at end of file +} diff --git a/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/index.html b/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/index.html index ce25e42b..d6f21ae3 100644 --- a/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/index.html +++ b/pages/examples/sensible-aria-usage/describedby/_examples/adding-a-description-to-an-element-using-aria-describedby/index.html @@ -1,10 +1,4 @@ -

    - How is the following link announced by screen readers? -

    +

    How is the following link announced by screen readers?

    Google -
    - The world's best known search engine -
    -

    - Is this what you expected? -

    +
    The world's best known search engine
    +

    Is this what you expected?

    diff --git a/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/README.md b/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/README.md index f565aab1..e4b4e8d0 100644 --- a/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/README.md +++ b/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/README.md @@ -1,5 +1,5 @@ --- -title: "Adding multiple descriptions to an element using aria-describedby" +title: 'Adding multiple descriptions to an element using aria-describedby' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/example.css b/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/example.css index 2a1ce9c5..cbef3345 100644 --- a/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/example.css +++ b/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/example.css @@ -1,3 +1,3 @@ #description { display: none; -} \ No newline at end of file +} diff --git a/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/index.html b/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/index.html index 4d546bc5..6d2c7969 100644 --- a/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/index.html +++ b/pages/examples/sensible-aria-usage/describedby/_examples/adding-multiple-descriptions-to-an-element-using-aria-describedby/index.html @@ -1,13 +1,5 @@ -

    - How is the following link announced by screen readers? -

    +

    How is the following link announced by screen readers?

    Google -
    - The world's best known search engine -
    -
    - But still not the only search engine on the planet -
    -

    - Is this what you expected? -

    +
    The world's best known search engine
    +
    But still not the only search engine on the planet
    +

    Is this what you expected?

    diff --git a/pages/examples/sensible-aria-usage/expanded/README.md b/pages/examples/sensible-aria-usage/expanded/README.md index 9ff6c6b8..758ae065 100644 --- a/pages/examples/sensible-aria-usage/expanded/README.md +++ b/pages/examples/sensible-aria-usage/expanded/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Expanded" +navigation_title: 'Expanded' position: 3 -changed: "2018-05-29" +changed: '2018-05-29' --- # Marking elements expandable using aria-expanded @@ -21,9 +21,7 @@ On a visual level, this status typically is indicated using an icon, for example On a semantical level, the `aria-expanded` attribute is a good choice to convey that an element's visibility can be toggled, together with its current state: ```html - + ``` A screen reader will announce: @@ -41,9 +39,7 @@ If the button is activated (and the `aria-expanded` status is changed to `true` There is a similar ARIA attribute, `aria-haspopup`, which leads screen readers to announce an element as having a menu. ```html - + ``` A screen reader will announce: @@ -90,11 +86,10 @@ While this is even more robust than using `aria-expanded`, it may feel out of pl If you need to describe the expandability status of interactive elements, `aria-expanded` is one of the few ARIA attributes we truly recommend for general use. -## You could be also interested in +## You could be also interested in Knowledge is power! Our guide has more to offer about: - [The purpose behind the WAI-ARIA standard](/knowledge/aria/purpose) - [Bad ARIA practices](/knowledge/aria/bad-practices) - [Sensible usage of ARIA roles and attributes](/examples/sensible-aria-usage) - diff --git a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/README.md b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/README.md index c4e8c610..242c2c5b 100644 --- a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/README.md +++ b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/README.md @@ -1,5 +1,5 @@ --- -title: "Marking an element expandable using a checkbox" +title: 'Marking an element expandable using a checkbox' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/index.html b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/index.html index e6da9fbb..a78db30c 100644 --- a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/index.html +++ b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-a-checkbox/index.html @@ -1,7 +1,7 @@ -

    - Please click the following checkbox. -

    - +

    Please click the following checkbox.

    + \ No newline at end of file +
    diff --git a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/README.md b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/README.md index 05557e38..e61cf383 100644 --- a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/README.md +++ b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/README.md @@ -1,5 +1,5 @@ --- -title: "Marking an element expandable using aria-expanded" +title: 'Marking an element expandable using aria-expanded' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/index.html b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/index.html index 32de55d3..fbe17863 100644 --- a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/index.html +++ b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-expanded/index.html @@ -1,7 +1,5 @@ -

    - Please click the following button. -

    +

    Please click the following button.

    \ No newline at end of file + diff --git a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/README.md b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/README.md index 70d31a2f..06c11eb6 100644 --- a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/README.md +++ b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/README.md @@ -1,5 +1,5 @@ --- -title: "Marking an element expandable using aria-haspopup" +title: 'Marking an element expandable using aria-haspopup' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/index.html b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/index.html index 5f485a71..03c8b5ae 100644 --- a/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/index.html +++ b/pages/examples/sensible-aria-usage/expanded/_examples/marking-an-element-expandable-using-aria-haspopup/index.html @@ -1,6 +1,4 @@ -

    - Please click the following button. -

    +

    Please click the following button.

    diff --git a/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/README.md b/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/README.md index 2834fd39..4a230c92 100644 --- a/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/README.md +++ b/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/README.md @@ -1,3 +1,3 @@ --- -title: "Trying to unhide an aria-hidden child" +title: 'Trying to unhide an aria-hidden child' --- diff --git a/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/index.html b/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/index.html index 9518d092..dc339cc5 100644 --- a/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/index.html +++ b/pages/examples/sensible-aria-usage/hidden/_examples/trying-to-unhide-an-aria-hidden-child/index.html @@ -1,8 +1,6 @@ \ No newline at end of file + diff --git a/pages/examples/sensible-aria-usage/label-labelledby/README.md b/pages/examples/sensible-aria-usage/label-labelledby/README.md index ba757247..fd2151e9 100644 --- a/pages/examples/sensible-aria-usage/label-labelledby/README.md +++ b/pages/examples/sensible-aria-usage/label-labelledby/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Label & labelledby" +navigation_title: 'Label & labelledby' position: 1 -changed: "2018-05-14" +changed: '2018-05-14' --- # Labelling elements using aria-label and aria-labelledby @@ -15,9 +15,7 @@ changed: "2018-05-14" How an element is announced by a screen reader is usually determined by its content. For example, the following link's label is "Google": ```html - - Google - + Google ``` So a screen reader will announce: @@ -33,9 +31,7 @@ ARIA provides two attributes that allow to override these labels. Using `aria-label`, an element's label can be set directly. For example, the following link's label is "No, Bing!": ```html - - Google - + Google ``` So a screen reader will announce: @@ -49,13 +45,9 @@ So a screen reader will announce: Using `aria-labelledby`, an element's label can be set by referencing the ID of another element. For example, the following link's label is "No, Bing!": ```html - - Google - + Google -
    - No, Bing! -
    +
    No, Bing!
    ``` By the way, elements hidden using CSS can still be referenced: @@ -96,7 +88,9 @@ In general, HTML elements provide their own way of labelling: As such, there are very rare cases (if any) where `aria-label` and `aria-labelledby` are truly the only way to go. For example, a valid usage of `aria-label` could be to override an existing label with additional, more precise information specifically for screen reader users: ```html - ``` @@ -106,7 +100,9 @@ However, why not present this information to every user, for example using a too ```html ``` diff --git a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/README.md b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/README.md index 8cacae71..01ed38b3 100644 --- a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/README.md +++ b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/README.md @@ -1,5 +1,5 @@ --- -title: "Labelling an element using aria-label" +title: 'Labelling an element using aria-label' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/index.html b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/index.html index 15f3aa93..b0148fb3 100644 --- a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/index.html +++ b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-label/index.html @@ -1,7 +1,3 @@ -

    - How is the following link announced by screen readers? -

    +

    How is the following link announced by screen readers?

    Google -

    - Is this what you expected? -

    +

    Is this what you expected?

    diff --git a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/README.md b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/README.md index 1a183862..6679d14e 100644 --- a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/README.md +++ b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/README.md @@ -1,5 +1,5 @@ --- -title: "Labelling an element using aria-labelledby" +title: 'Labelling an element using aria-labelledby' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/example.css b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/example.css index fac4daba..43af60ef 100644 --- a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/example.css +++ b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/example.css @@ -1,3 +1,3 @@ #bing { display: none; -} \ No newline at end of file +} diff --git a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/index.html b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/index.html index bba524e3..df7a7b9b 100644 --- a/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/index.html +++ b/pages/examples/sensible-aria-usage/label-labelledby/_examples/labelling-an-element-using-aria-labelledby/index.html @@ -1,10 +1,4 @@ -

    - How is the following link announced by screen readers? -

    +

    How is the following link announced by screen readers?

    Google -
    - No, Bing! -
    -

    - Is this what you expected? -

    +
    No, Bing!
    +

    Is this what you expected?

    diff --git a/pages/examples/sensible-aria-usage/presentation/README.md b/pages/examples/sensible-aria-usage/presentation/README.md index 3650b316..9f1562de 100644 --- a/pages/examples/sensible-aria-usage/presentation/README.md +++ b/pages/examples/sensible-aria-usage/presentation/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Presentation" +navigation_title: 'Presentation' position: 7 -changed: "2018-05-15" +changed: '2018-05-15' --- # Removing semantics using presentation role @@ -21,9 +21,7 @@ Notice: we know that `role="presentation"` does not work in Internet Explorer. S To a screen reader, the following is no paragraph anymore, and as such cannot be navigated to by pressing the `P` key: ```html -

    - Hello folks! -

    +

    Hello folks!

    ``` [Example](_examples/removing-semantics-using-presentation-role) diff --git a/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/README.md b/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/README.md index 6e77c90f..9754f9c4 100644 --- a/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/README.md +++ b/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/README.md @@ -12,9 +12,8 @@ compatibility: 2018.3 + IE 11: status: fail date: 2018-05-23 - comment: "Link is announced as link" + comment: 'Link is announced as link' 2018.3 + FF ESR 52.7.3: status: pass date: 2018-05-22 - --- diff --git a/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/index.html b/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/index.html index 1c6f3ac0..2cba9abf 100644 --- a/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/index.html +++ b/pages/examples/sensible-aria-usage/presentation/_examples/removing-a-links-role/index.html @@ -1,7 +1,3 @@ -

    - The following link is still clickable. -

    +

    The following link is still clickable.

    Google -

    - Is this what you expected? -

    \ No newline at end of file +

    Is this what you expected?

    diff --git a/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/README.md b/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/README.md index 481f8487..a50f9bc6 100644 --- a/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/README.md +++ b/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/README.md @@ -1,5 +1,5 @@ --- -title: "Removing semantics using presentation role" +title: 'Removing semantics using presentation role' compatibility: Keyboard only: status: pass @@ -12,10 +12,9 @@ compatibility: 2018.3 + IE 11: status: fail date: 2018-05-23 - comments: "Paragraphs can still be jumped at" + comments: 'Paragraphs can still be jumped at' 2018.3 + FF ESR 52.7.3: status: fail date: 2018-05-22 - comments: "Paragraphs can still be jumped at" - + comments: 'Paragraphs can still be jumped at' --- diff --git a/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/index.html b/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/index.html index 75022245..bf16998d 100644 --- a/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/index.html +++ b/pages/examples/sensible-aria-usage/presentation/_examples/removing-semantics-using-presentation-role/index.html @@ -1,9 +1,3 @@ -

    - This is a real paragraph. -

    -

    - This paragraph has lost its inherent role. -

    -

    - This again is a real paragraph. -

    \ No newline at end of file +

    This is a real paragraph.

    +

    This paragraph has lost its inherent role.

    +

    This again is a real paragraph.

    diff --git a/pages/examples/sensible-aria-usage/pressed/README.md b/pages/examples/sensible-aria-usage/pressed/README.md index fec36045..7bc0d239 100644 --- a/pages/examples/sensible-aria-usage/pressed/README.md +++ b/pages/examples/sensible-aria-usage/pressed/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Pressed" +navigation_title: 'Pressed' position: 4 -changed: "2018-05-14" +changed: '2018-05-14' --- # Marking elements activatable using aria-pressed @@ -21,9 +21,7 @@ On a visual level, this status typically is indicated using icons, for example a On a semantical level, the `aria-pressed` attribute is a good choice to convey that an element's visibility can be activated, together with its current state: ```html - + ``` A screen reader will announce: diff --git a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/README.md b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/README.md index bd0af046..ff3c048b 100644 --- a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/README.md +++ b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/README.md @@ -1,5 +1,5 @@ --- -title: "Marking an element togglable using aria-pressed" +title: 'Marking an element togglable using aria-pressed' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/index.html b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/index.html index f750fed1..c2a9dd23 100644 --- a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/index.html +++ b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-togglable-using-aria-pressed/index.html @@ -1,5 +1,3 @@ -

    - Please click the following checkbox. -

    +

    Please click the following checkbox.

    diff --git a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/README.md b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/README.md index 32cb6d02..966b7c1d 100644 --- a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/README.md +++ b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/README.md @@ -1,5 +1,5 @@ --- -title: "Marking an element toggleable using a checkbox" +title: 'Marking an element toggleable using a checkbox' compatibility: Keyboard only: status: pass diff --git a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/index.html b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/index.html index 5c3fe187..94ee31b8 100644 --- a/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/index.html +++ b/pages/examples/sensible-aria-usage/pressed/_examples/marking-an-element-toggleable-using-a-checkbox/index.html @@ -1,5 +1,3 @@ -

    - Please click the following checkbox. -

    +

    Please click the following checkbox.

    - \ No newline at end of file + diff --git a/pages/examples/tables/README.md b/pages/examples/tables/README.md index 35c96299..96ac3fa8 100644 --- a/pages/examples/tables/README.md +++ b/pages/examples/tables/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Tables" +navigation_title: 'Tables' position: 4 -changed: "2018-05-02" +changed: '2018-05-02' --- # Data tables diff --git a/pages/examples/tables/bad-examples/README.md b/pages/examples/tables/bad-examples/README.md index 12931dbd..884726c6 100644 --- a/pages/examples/tables/bad-examples/README.md +++ b/pages/examples/tables/bad-examples/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Bad examples" +navigation_title: 'Bad examples' position: 3 -changed: "2018-06-15" +changed: '2018-06-15' --- # General bad table examples @@ -30,4 +30,4 @@ The table in the following example indeed has a header cell for each column (the [Example](_examples/generally-bad-table-with-only-horizontal-headers) -This makes it hard to identify the current data row when navigating the table vertically. \ No newline at end of file +This makes it hard to identify the current data row when navigating the table vertically. diff --git a/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/README.md b/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/README.md index f1c5642c..db129b3d 100644 --- a/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/README.md +++ b/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/README.md @@ -1,3 +1,3 @@ --- -title: "Generally bad table, with only horizontal headers" +title: 'Generally bad table, with only horizontal headers' --- diff --git a/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/example.css b/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/example.css index 946cd579..c67edda0 100644 --- a/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/example.css +++ b/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/example.css @@ -2,11 +2,12 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; padding: 4px 8px; } th { text-align: left; -} \ No newline at end of file +} diff --git a/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/index.html b/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/index.html index b9c6e0bc..f0cd743b 100644 --- a/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/index.html +++ b/pages/examples/tables/bad-examples/_examples/generally-bad-table-with-only-horizontal-headers/index.html @@ -1,51 +1,46 @@ - + - - - + + + + - + - - + -
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    Playing Soccer - Playing Soccer + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Soccer is a team sport played between two teams of eleven players with a spherical ball. - - Wikipedia + Wikipedia
    Dancing - Dancing - - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia
    \ No newline at end of file + diff --git a/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/README.md b/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/README.md index 52f54066..a3696a8e 100644 --- a/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/README.md +++ b/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/README.md @@ -1,3 +1,3 @@ --- -title: "Generally bad table, without headers" +title: 'Generally bad table, without headers' --- diff --git a/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/example.css b/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/example.css index 8e2f1141..c1c4bb26 100644 --- a/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/example.css +++ b/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/example.css @@ -9,4 +9,4 @@ td { .th { font-weight: bold; -} \ No newline at end of file +} diff --git a/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/index.html b/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/index.html index a0ab1069..d7eb347e 100644 --- a/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/index.html +++ b/pages/examples/tables/bad-examples/_examples/generally-bad-table-without-headers/index.html @@ -1,51 +1,46 @@ - + - - - + + + - + - + - + -
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Wikipedia + Wikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia
    \ No newline at end of file + diff --git a/pages/examples/tables/good-example/README.md b/pages/examples/tables/good-example/README.md index d25bf0da..f46ee2aa 100644 --- a/pages/examples/tables/good-example/README.md +++ b/pages/examples/tables/good-example/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Good example" +navigation_title: 'Good example' position: 2 -changed: "2021-05-25" +changed: '2021-05-25' --- # General good table example diff --git a/pages/examples/tables/good-example/_examples/generally-good-table/README.md b/pages/examples/tables/good-example/_examples/generally-good-table/README.md index 4b562a99..4ba4cd87 100644 --- a/pages/examples/tables/good-example/_examples/generally-good-table/README.md +++ b/pages/examples/tables/good-example/_examples/generally-good-table/README.md @@ -1,5 +1,5 @@ --- -title: "Generally good table" +title: 'Generally good table' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/good-example/_examples/generally-good-table/example.css b/pages/examples/tables/good-example/_examples/generally-good-table/example.css index 946cd579..c67edda0 100644 --- a/pages/examples/tables/good-example/_examples/generally-good-table/example.css +++ b/pages/examples/tables/good-example/_examples/generally-good-table/example.css @@ -2,11 +2,12 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; padding: 4px 8px; } th { text-align: left; -} \ No newline at end of file +} diff --git a/pages/examples/tables/good-example/_examples/generally-good-table/index.html b/pages/examples/tables/good-example/_examples/generally-good-table/index.html index ce08600d..ccde59f9 100644 --- a/pages/examples/tables/good-example/_examples/generally-good-table/index.html +++ b/pages/examples/tables/good-example/_examples/generally-good-table/index.html @@ -1,54 +1,50 @@

    - For more information about my hobbies, please take a look at the following table. + For more information about my hobbies, please take a look at the following + table.

    - + - - - + + + - + - + - + -
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Wikipedia + Wikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia
    \ No newline at end of file + diff --git a/pages/examples/tables/handling/README.md b/pages/examples/tables/handling/README.md index 89917371..1e22c9b4 100644 --- a/pages/examples/tables/handling/README.md +++ b/pages/examples/tables/handling/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Handling" +navigation_title: 'Handling' position: 1 -changed: "2020-04-30" +changed: '2020-04-30' --- # How to handle tables diff --git a/pages/examples/tables/hidden-headers/README.md b/pages/examples/tables/hidden-headers/README.md index 86766504..f9a816bc 100644 --- a/pages/examples/tables/hidden-headers/README.md +++ b/pages/examples/tables/hidden-headers/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Hidden headers" +navigation_title: 'Hidden headers' position: 9 -changed: "2020-11-18" +changed: '2020-11-18' --- # Visually hidden table headers diff --git a/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/README.md b/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/README.md index dfd5bde4..07f858e6 100644 --- a/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/README.md +++ b/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/README.md @@ -1,5 +1,5 @@ --- -title: "Table with hidden headers" +title: 'Table with hidden headers' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/example.css b/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/example.css index 57ae4049..6a2f7b15 100644 --- a/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/example.css +++ b/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/example.css @@ -13,15 +13,16 @@ table { border-collapse: collapse; } -th, td { +th, +td { border-top: 1px solid; border-right: 1px solid; padding: 4px 8px; } -th[scope="row"] { +th[scope='row'] { background-color: lightgreen; } -th[scope="col"] { +th[scope='col'] { background-color: lightpink; } diff --git a/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/index.html b/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/index.html index 9e52fc92..de6cde25 100644 --- a/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/index.html +++ b/pages/examples/tables/hidden-headers/_examples/table-with-hidden-headers/index.html @@ -3,44 +3,35 @@ My Hobbies - - Name - - - Description - - - Additional Resources - + Name + Description + Additional Resources - - Playing Soccer - + Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. Wikipedia - - Dancing - + Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia - - Gardening - + Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia diff --git a/pages/examples/tables/layout-changes/README.md b/pages/examples/tables/layout-changes/README.md index 4de38066..8b4bccc6 100644 --- a/pages/examples/tables/layout-changes/README.md +++ b/pages/examples/tables/layout-changes/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Layout changes" +navigation_title: 'Layout changes' position: 6 -changed: "2018-04-16" +changed: '2018-04-16' --- # Changing a table's visual layout diff --git a/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/README.md b/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/README.md index 90649176..3a205886 100644 --- a/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/README.md +++ b/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/README.md @@ -1,5 +1,5 @@ --- -title: "Table with block elements, fixed with ARIA" +title: 'Table with block elements, fixed with ARIA' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/example.css b/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/example.css index b2148f9d..522ea07a 100644 --- a/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/example.css +++ b/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/example.css @@ -4,7 +4,9 @@ table { border-bottom: 1px solid; } -caption, tr, tbody { +caption, +tr, +tbody { display: block; } @@ -16,7 +18,8 @@ tbody th { background-color: lightgreen; } -th, td { +th, +td { border: 1px solid; border-bottom: 0; padding: 4px 8px; @@ -25,4 +28,4 @@ th, td { th { text-align: left; -} \ No newline at end of file +} diff --git a/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/index.html b/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/index.html index eb99c836..cff24379 100644 --- a/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/index.html +++ b/pages/examples/tables/layout-changes/_examples/table-with-block-elements-fixed-with-aria/index.html @@ -1,47 +1,42 @@ - + - - - + + + - + - + - +
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Wikipedia + Wikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia diff --git a/pages/examples/tables/layout-changes/_examples/table-with-block-elements/README.md b/pages/examples/tables/layout-changes/_examples/table-with-block-elements/README.md index f0680c03..3c3c46ad 100644 --- a/pages/examples/tables/layout-changes/_examples/table-with-block-elements/README.md +++ b/pages/examples/tables/layout-changes/_examples/table-with-block-elements/README.md @@ -1,3 +1,3 @@ --- -title: "Table with block elements" +title: 'Table with block elements' --- diff --git a/pages/examples/tables/layout-changes/_examples/table-with-block-elements/example.css b/pages/examples/tables/layout-changes/_examples/table-with-block-elements/example.css index b2148f9d..522ea07a 100644 --- a/pages/examples/tables/layout-changes/_examples/table-with-block-elements/example.css +++ b/pages/examples/tables/layout-changes/_examples/table-with-block-elements/example.css @@ -4,7 +4,9 @@ table { border-bottom: 1px solid; } -caption, tr, tbody { +caption, +tr, +tbody { display: block; } @@ -16,7 +18,8 @@ tbody th { background-color: lightgreen; } -th, td { +th, +td { border: 1px solid; border-bottom: 0; padding: 4px 8px; @@ -25,4 +28,4 @@ th, td { th { text-align: left; -} \ No newline at end of file +} diff --git a/pages/examples/tables/layout-changes/_examples/table-with-block-elements/index.html b/pages/examples/tables/layout-changes/_examples/table-with-block-elements/index.html index e18f5361..1a7812fe 100644 --- a/pages/examples/tables/layout-changes/_examples/table-with-block-elements/index.html +++ b/pages/examples/tables/layout-changes/_examples/table-with-block-elements/index.html @@ -1,51 +1,46 @@ - + - - - + + + - + - + - + -
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Wikipedia + Wikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia
    \ No newline at end of file +
    diff --git a/pages/examples/tables/multiple-headers/README.md b/pages/examples/tables/multiple-headers/README.md index d159bab4..3cba5d19 100644 --- a/pages/examples/tables/multiple-headers/README.md +++ b/pages/examples/tables/multiple-headers/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Multiple headers" +navigation_title: 'Multiple headers' position: 4 -changed: "2018-04-13" +changed: '2018-04-13' --- # Multiple header cells in a table support identification @@ -36,4 +36,4 @@ Thus, sometimes it is best to mark more than a single data cell as header cell. As you see in the example above, the combinations of first and last names still aren't unique. So you could add even more cells as header cells... -But please do not overdo this. You usually should never need more than two or maybe three header cells for a row, even if they are not fully identifying each and every record. This is better than having all of the cells marked up as header cells (which would be absurd). \ No newline at end of file +But please do not overdo this. You usually should never need more than two or maybe three header cells for a row, even if they are not fully identifying each and every record. This is better than having all of the cells marked up as header cells (which would be absurd). diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/README.md b/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/README.md index ab7b8a25..6d3e7657 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/README.md +++ b/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/README.md @@ -1,3 +1,3 @@ --- -title: "Table with ambiguous data" +title: 'Table with ambiguous data' --- diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/example.css b/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/example.css index 946cd579..c67edda0 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/example.css +++ b/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/example.css @@ -2,11 +2,12 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; padding: 4px 8px; } th { text-align: left; -} \ No newline at end of file +} diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/index.html b/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/index.html index 0cb30034..62ecfd95 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/index.html +++ b/pages/examples/tables/multiple-headers/_examples/table-with-ambiguous-data/index.html @@ -1,105 +1,51 @@ - + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + -
    Address List + Address List +
    - First name - - Last name - - Street - - City - First nameLast nameStreetCity
    - Jack - - Doe - - Boulevard Street 123 - - New York - JackDoeBoulevard Street 123New York
    - Jim - - Doe - - Boulevard Street 123 - - Smallville - JimDoeBoulevard Street 123Smallville
    - John - - Doe - - Main Street 123 - - New York - JohnDoeMain Street 123New York
    - John - - Doe - - Main Street 123 - - Tampa - JohnDoeMain Street 123Tampa
    - John - - Doe - - Another Street 123 - - New York - JohnDoeAnother Street 123New York
    - Jules - - Doe - - Another Street 123 - - Tampa - JulesDoeAnother Street 123Tampa
    \ No newline at end of file + diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/README.md b/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/README.md index 1949fd02..04f8c262 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/README.md +++ b/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/README.md @@ -1,5 +1,5 @@ --- -title: "Table with multiple header cells" +title: 'Table with multiple header cells' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/example.css b/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/example.css index 946cd579..c67edda0 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/example.css +++ b/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/example.css @@ -2,11 +2,12 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; padding: 4px 8px; } th { text-align: left; -} \ No newline at end of file +} diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/index.html b/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/index.html index 2156833d..f515e80e 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/index.html +++ b/pages/examples/tables/multiple-headers/_examples/table-with-multiple-header-cells/index.html @@ -1,105 +1,51 @@ - + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + -
    Address List + Address List +
    - First name - - Last name - - Street - - City - First nameLast nameStreetCity
    - Jack - - Doe - - Boulevard Street 123 - - New York - JackDoeBoulevard Street 123New York
    - Jim - - Doe - - Boulevard Street 123 - - Smallville - JimDoeBoulevard Street 123Smallville
    - John - - Doe - - Main Street 123 - - New York - JohnDoeMain Street 123New York
    - John - - Doe - - Main Street 123 - - Tampa - JohnDoeMain Street 123Tampa
    - John - - Doe - - Another Street 123 - - New York - JohnDoeAnother Street 123New York
    - Jules - - Doe - - Another Street 123 - - Tampa - JulesDoeAnother Street 123Tampa
    \ No newline at end of file + diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/README.md b/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/README.md index ff654b9a..48045cd4 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/README.md +++ b/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/README.md @@ -1,5 +1,5 @@ --- -title: "Table with unique IDs" +title: 'Table with unique IDs' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/example.css b/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/example.css index 946cd579..c67edda0 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/example.css +++ b/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/example.css @@ -2,11 +2,12 @@ table { border-collapse: collapse; } -td, th { +td, +th { border: 1px solid; padding: 4px 8px; } th { text-align: left; -} \ No newline at end of file +} diff --git a/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/index.html b/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/index.html index 9ef868ac..6c2398b6 100644 --- a/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/index.html +++ b/pages/examples/tables/multiple-headers/_examples/table-with-unique-ids/index.html @@ -1,126 +1,58 @@ - + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + -
    Address List + Address List +
    - ID - - First name - - Last name - - Street - - City - IDFirst nameLast nameStreetCity
    - 1000001 - - Jack - - Doe - - Boulevard Street 123 - - New York - 1000001JackDoeBoulevard Street 123New York
    - 1000002 - - Jim - - Doe - - Boulevard Street 123 - - Smallville - 1000002JimDoeBoulevard Street 123Smallville
    - 1000003 - - John - - Doe - - Main Street 123 - - New York - 1000003JohnDoeMain Street 123New York
    - 1000004 - - John - - Doe - - Main Street 123 - - Tampa - 1000004JohnDoeMain Street 123Tampa
    - 1000005 - - John - - Doe - - Another Street 123 - - New York - 1000005JohnDoeAnother Street 123New York
    - 1000006 - - Jules - - Doe - - Another Street 123 - - Tampa - 1000006JulesDoeAnother Street 123Tampa
    \ No newline at end of file + diff --git a/pages/examples/tables/responsive/README.md b/pages/examples/tables/responsive/README.md index dae47ef0..197329f5 100644 --- a/pages/examples/tables/responsive/README.md +++ b/pages/examples/tables/responsive/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Responsive" +navigation_title: 'Responsive' position: 7 -changed: "2018-04-16" +changed: '2018-04-16' --- # Responsive tables diff --git a/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/README.md b/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/README.md index c365dfe3..c2d3ee3d 100644 --- a/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/README.md +++ b/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/README.md @@ -1,5 +1,5 @@ --- -title: "Table with added headers in narrow view" +title: 'Table with added headers in narrow view' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/example.css b/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/example.css index 660f623d..2097d30e 100644 --- a/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/example.css +++ b/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/example.css @@ -10,7 +10,8 @@ tbody th { background-color: lightgreen; } -th, td { +th, +td { border: 1px solid; } @@ -25,7 +26,9 @@ th, td { border-bottom: 1px solid; } - caption, tr, tbody { + caption, + tr, + tbody { display: block; } @@ -38,7 +41,8 @@ th, td { overflow: hidden; } - td, th { + td, + th { border-bottom: 0; padding: 4px 8px; display: block; @@ -52,4 +56,4 @@ th, td { .narrow-th { display: none; } -} \ No newline at end of file +} diff --git a/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/index.html b/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/index.html index e95221a1..52582ff9 100644 --- a/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/index.html +++ b/pages/examples/tables/responsive/_examples/table-with-added-headers-in-narrow-view/index.html @@ -1,16 +1,12 @@ - + - - - + + + @@ -19,10 +15,15 @@ Playing Soccer @@ -30,10 +31,13 @@ Dancing @@ -41,11 +45,14 @@ Gardening -
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is + a team sport played between two teams of eleven players with a spherical + ball. - Wikipedia + Wikipedia
    - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is + a performing art form consisting of purposefully selected sequences of + human movement. - Wikipedia + Wikipedia
    - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening + is the practice of growing and cultivating plants as part of + horticulture. - Wikipedia + Wikipedia
    \ No newline at end of file + diff --git a/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/README.md b/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/README.md index 589e61f5..dbb4a1b3 100644 --- a/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/README.md +++ b/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/README.md @@ -1,5 +1,5 @@ --- -title: "Table with block elements in narrow view" +title: 'Table with block elements in narrow view' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/example.css b/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/example.css index 8336616c..8572de55 100644 --- a/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/example.css +++ b/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/example.css @@ -10,7 +10,8 @@ tbody th { background-color: lightgreen; } -th, td { +th, +td { border: 1px solid; } @@ -20,11 +21,14 @@ th, td { border-bottom: 1px solid; } - caption, tr, tbody { + caption, + tr, + tbody { display: block; } - td, th { + td, + th { border-bottom: 0; padding: 4px 8px; display: block; @@ -33,4 +37,4 @@ th, td { th { text-align: left; } -} \ No newline at end of file +} diff --git a/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/index.html b/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/index.html index 112d4a4c..0696f189 100644 --- a/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/index.html +++ b/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/index.html @@ -1,47 +1,42 @@ - + - - - + + + - + - + - +
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Wikipedia + Wikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia diff --git a/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/README.md b/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/README.md index 32e84f92..d105d2fd 100644 --- a/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/README.md +++ b/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/README.md @@ -1,5 +1,5 @@ --- -title: "Table with hidden column in narrow view" +title: 'Table with hidden column in narrow view' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/example.css b/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/example.css index 45df2c16..9f776b76 100644 --- a/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/example.css +++ b/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/example.css @@ -10,7 +10,8 @@ tbody th { background-color: lightgreen; } -th, td { +th, +td { border: 1px solid; } @@ -18,4 +19,4 @@ th, td { .hidden-narrow { display: none; } -} \ No newline at end of file +} diff --git a/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/index.html b/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/index.html index 296367c1..4f30c749 100644 --- a/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/index.html +++ b/pages/examples/tables/responsive/_examples/table-with-hidden-column-in-narrow-view/index.html @@ -1,51 +1,46 @@ - + - - - + + + - + - + - + -
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Wikipedia + Wikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia
    \ No newline at end of file +
    diff --git a/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/README.md b/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/README.md index 6e4f5a02..3fe71bbb 100644 --- a/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/README.md +++ b/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/README.md @@ -1,5 +1,5 @@ --- -title: "Table with smaller elements in narrow view" +title: 'Table with smaller elements in narrow view' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/example.css b/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/example.css index 31a72253..3207555e 100644 --- a/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/example.css +++ b/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/example.css @@ -10,7 +10,8 @@ tbody th { background-color: lightgreen; } -th, td { +th, +td { border: 1px solid; } @@ -28,4 +29,4 @@ img { .hidden-wide { display: none; } -} \ No newline at end of file +} diff --git a/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/index.html b/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/index.html index fb2c0028..1345088a 100644 --- a/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/index.html +++ b/pages/examples/tables/responsive/_examples/table-with-smaller-elements-in-narrow-view/index.html @@ -1,50 +1,52 @@ - + - - - + + + - + - + - + diff --git a/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/README.md b/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/README.md index 5ce79478..8ea910c7 100644 --- a/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/README.md +++ b/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/README.md @@ -1,5 +1,5 @@ --- -title: "Table with visually hidden headers in narrow view" +title: 'Table with visually hidden headers in narrow view' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/example.css b/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/example.css index 0ffc9e0f..0a7dc484 100644 --- a/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/example.css +++ b/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/example.css @@ -10,7 +10,8 @@ tbody th { background-color: lightgreen; } -th, td { +th, +td { border: 1px solid; } @@ -20,7 +21,9 @@ th, td { border-bottom: 1px solid; } - caption, tr, tbody { + caption, + tr, + tbody { display: block; } @@ -33,7 +36,8 @@ th, td { overflow: hidden; } - td, th { + td, + th { border-bottom: 0; padding: 4px 8px; display: block; @@ -42,4 +46,4 @@ th, td { th { text-align: left; } -} \ No newline at end of file +} diff --git a/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/index.html b/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/index.html index 7ddb2ee6..0696f189 100644 --- a/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/index.html +++ b/pages/examples/tables/responsive/_examples/table-with-visually-hidden-headers-in-narrow-view/index.html @@ -1,51 +1,46 @@
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - WikipediaWikipedia + WikipediaWikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. - WikipediaWikipedia + WikipediaWikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. - WikipediaWikipedia + WikipediaWikipedia
    - + - - - + + + - + - + - + -
    My Hobbies + My Hobbies +
    - Name - - Description - - Additional Resources - NameDescriptionAdditional Resources
    - Playing Soccer - Playing Soccer - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball. - Wikipedia + Wikipedia
    - Dancing - Dancing - Dance is a performing art form consisting of purposefully selected sequences of human movement. + Dance is a performing art form consisting of purposefully selected + sequences of human movement. Wikipedia
    - Gardening - Gardening - Gardening is the practice of growing and cultivating plants as part of horticulture. + Gardening is the practice of growing and cultivating plants as part of + horticulture. Wikipedia
    \ No newline at end of file + diff --git a/pages/examples/tables/spanning-rows-cols/README.md b/pages/examples/tables/spanning-rows-cols/README.md index 6dfe42ab..ef1b19a4 100644 --- a/pages/examples/tables/spanning-rows-cols/README.md +++ b/pages/examples/tables/spanning-rows-cols/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Spanning rows & cols" +navigation_title: 'Spanning rows & cols' position: 5 -changed: "2018-04-13" +changed: '2018-04-13' --- # Spanning multiple rows and columns @@ -28,4 +28,4 @@ And one last thing to note: finding the cell "Chillout" is not that easy using a ## What does this mean for developers? -In our opinion, this all clearly are shortcomings of screen readers, as the HTML code is perfectly clean and unambiguous - and tables are a feature that exists for decades already! Still, we advise not to overuse `rowspan` and `colspan` and to keep data tables simple - in the end, all users will be thankful. \ No newline at end of file +In our opinion, this all clearly are shortcomings of screen readers, as the HTML code is perfectly clean and unambiguous - and tables are a feature that exists for decades already! Still, we advise not to overuse `rowspan` and `colspan` and to keep data tables simple - in the end, all users will be thankful. diff --git a/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/README.md b/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/README.md index 066d6d29..95bff469 100644 --- a/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/README.md +++ b/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/README.md @@ -1,5 +1,5 @@ --- -title: "Table spanning multiple rows and columns" +title: 'Table spanning multiple rows and columns' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/example.css b/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/example.css index 879b4af4..d3cfe94f 100644 --- a/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/example.css +++ b/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/example.css @@ -2,7 +2,8 @@ table { border-collapse: collapse; } -th, td { +th, +td { border: 1px solid; padding: 4px 8px; -} \ No newline at end of file +} diff --git a/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/index.html b/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/index.html index c33a62b6..6bba3e52 100644 --- a/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/index.html +++ b/pages/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/index.html @@ -1,87 +1,43 @@ - + - - + + - - - - - - - - + + + + + + + + - - - - + + + + - - - + + + - - - + + + - - - + + + -
    My Week Schedule + My Week Schedule +
    - Work Days - - Leisure Days - Work DaysLeisure Days
    - Hour - - Monday - - Tuesday - - Wednesday - - Thursday - - Friday - - Saturday - - Sunday - HourMondayTuesdayWednesdayThursdayFridaySaturdaySunday
    - 9:00 - - Sports - - German - - English - 9:00SportsGermanEnglish - German - - Dancing - - Sleeping - GermanDancingSleeping
    - 10:00 - - Chemistry - - Sports - 10:00ChemistrySports - Physics - - Computer Science - - Chillout - PhysicsComputer ScienceChillout
    \ No newline at end of file + diff --git a/pages/examples/tables/sticky-headers/README.md b/pages/examples/tables/sticky-headers/README.md index 323608bb..d83cc0ed 100644 --- a/pages/examples/tables/sticky-headers/README.md +++ b/pages/examples/tables/sticky-headers/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "Sticky headers" +navigation_title: 'Sticky headers' position: 10 -changed: "2018-04-16" +changed: '2018-04-16' --- # Sticky table headers diff --git a/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/README.md b/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/README.md index 5268f16d..f9e3809f 100644 --- a/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/README.md +++ b/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/README.md @@ -1,5 +1,5 @@ --- -title: "Table with fixed headers" +title: 'Table with fixed headers' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/example.css b/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/example.css index 97a394e8..0e9bc8ee 100644 --- a/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/example.css +++ b/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/example.css @@ -32,7 +32,8 @@ body { display: table-row; } -.th, .td { +.th, +.td { border-top: 1px solid; border-right: 1px solid; padding: 4px 8px; @@ -42,10 +43,10 @@ body { .th { font-weight: bold; } -.th[role="rowheader"] { +.th[role='rowheader'] { background-color: lightgreen; } -.th[role="columnheader"] { +.th[role='columnheader'] { background-color: lightpink; } diff --git a/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/index.html b/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/index.html index 154e3de0..47484cba 100644 --- a/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/index.html +++ b/pages/examples/tables/sticky-headers/_examples/table-with-fixed-headers/index.html @@ -1,2215 +1,1407 @@
    -

    - My Hobbies -

    +

    My Hobbies

    -
    - Name -
    -
    - Description -
    -
    - Additional Resources -
    +
    Name
    +
    Description
    +
    Additional Resources
    -
    - Hobby 1 -
    -
    - Description of hobby 1 -
    +
    Hobby 1
    +
    Description of hobby 1
    Wikipedia
    -
    - Hobby 2 -
    -
    - Description of hobby 2 -
    +
    Hobby 2
    +
    Description of hobby 2
    Wikipedia
    -
    - Hobby 3 -
    -
    - Description of hobby 3 -
    +
    Hobby 3
    +
    Description of hobby 3
    Wikipedia
    -
    - Hobby 4 -
    -
    - Description of hobby 4 -
    +
    Hobby 4
    +
    Description of hobby 4
    Wikipedia
    -
    - Hobby 5 -
    -
    - Description of hobby 5 -
    +
    Hobby 5
    +
    Description of hobby 5
    Wikipedia
    -
    - Hobby 6 -
    -
    - Description of hobby 6 -
    +
    Hobby 6
    +
    Description of hobby 6
    Wikipedia
    -
    - Hobby 7 -
    -
    - Description of hobby 7 -
    +
    Hobby 7
    +
    Description of hobby 7
    Wikipedia
    -
    - Hobby 8 -
    -
    - Description of hobby 8 -
    +
    Hobby 8
    +
    Description of hobby 8
    Wikipedia
    -
    - Hobby 9 -
    -
    - Description of hobby 9 -
    +
    Hobby 9
    +
    Description of hobby 9
    Wikipedia
    -
    - Hobby 10 -
    -
    - Description of hobby 10 -
    +
    Hobby 10
    +
    Description of hobby 10
    Wikipedia
    -
    - Hobby 11 -
    -
    - Description of hobby 11 -
    +
    Hobby 11
    +
    Description of hobby 11
    Wikipedia
    -
    - Hobby 12 -
    -
    - Description of hobby 12 -
    +
    Hobby 12
    +
    Description of hobby 12
    Wikipedia
    -
    - Hobby 13 -
    -
    - Description of hobby 13 -
    +
    Hobby 13
    +
    Description of hobby 13
    Wikipedia
    -
    - Hobby 14 -
    -
    - Description of hobby 14 -
    +
    Hobby 14
    +
    Description of hobby 14
    Wikipedia
    -
    - Hobby 15 -
    -
    - Description of hobby 15 -
    +
    Hobby 15
    +
    Description of hobby 15
    Wikipedia
    -
    - Hobby 16 -
    -
    - Description of hobby 16 -
    +
    Hobby 16
    +
    Description of hobby 16
    Wikipedia
    -
    - Hobby 17 -
    -
    - Description of hobby 17 -
    +
    Hobby 17
    +
    Description of hobby 17
    Wikipedia
    -
    - Hobby 18 -
    -
    - Description of hobby 18 -
    +
    Hobby 18
    +
    Description of hobby 18
    Wikipedia
    -
    - Hobby 19 -
    -
    - Description of hobby 19 -
    +
    Hobby 19
    +
    Description of hobby 19
    Wikipedia
    -
    - Hobby 20 -
    -
    - Description of hobby 20 -
    +
    Hobby 20
    +
    Description of hobby 20
    Wikipedia
    -
    - Hobby 21 -
    -
    - Description of hobby 21 -
    +
    Hobby 21
    +
    Description of hobby 21
    Wikipedia
    -
    - Hobby 22 -
    -
    - Description of hobby 22 -
    +
    Hobby 22
    +
    Description of hobby 22
    Wikipedia
    -
    - Hobby 23 -
    -
    - Description of hobby 23 -
    +
    Hobby 23
    +
    Description of hobby 23
    Wikipedia
    -
    - Hobby 24 -
    -
    - Description of hobby 24 -
    +
    Hobby 24
    +
    Description of hobby 24
    Wikipedia
    -
    - Hobby 25 -
    -
    - Description of hobby 25 -
    +
    Hobby 25
    +
    Description of hobby 25
    Wikipedia
    -
    - Hobby 26 -
    -
    - Description of hobby 26 -
    +
    Hobby 26
    +
    Description of hobby 26
    Wikipedia
    -
    - Hobby 27 -
    -
    - Description of hobby 27 -
    +
    Hobby 27
    +
    Description of hobby 27
    Wikipedia
    -
    - Hobby 28 -
    -
    - Description of hobby 28 -
    +
    Hobby 28
    +
    Description of hobby 28
    Wikipedia
    -
    - Hobby 29 -
    -
    - Description of hobby 29 -
    +
    Hobby 29
    +
    Description of hobby 29
    Wikipedia
    -
    - Hobby 30 -
    -
    - Description of hobby 30 -
    +
    Hobby 30
    +
    Description of hobby 30
    Wikipedia
    -
    - Hobby 31 -
    -
    - Description of hobby 31 -
    +
    Hobby 31
    +
    Description of hobby 31
    Wikipedia
    -
    - Hobby 32 -
    -
    - Description of hobby 32 -
    +
    Hobby 32
    +
    Description of hobby 32
    Wikipedia
    -
    - Hobby 33 -
    -
    - Description of hobby 33 -
    +
    Hobby 33
    +
    Description of hobby 33
    Wikipedia
    -
    - Hobby 34 -
    -
    - Description of hobby 34 -
    +
    Hobby 34
    +
    Description of hobby 34
    Wikipedia
    -
    - Hobby 35 -
    -
    - Description of hobby 35 -
    +
    Hobby 35
    +
    Description of hobby 35
    Wikipedia
    -
    - Hobby 36 -
    -
    - Description of hobby 36 -
    +
    Hobby 36
    +
    Description of hobby 36
    Wikipedia
    -
    - Hobby 37 -
    -
    - Description of hobby 37 -
    +
    Hobby 37
    +
    Description of hobby 37
    Wikipedia
    -
    - Hobby 38 -
    -
    - Description of hobby 38 -
    +
    Hobby 38
    +
    Description of hobby 38
    Wikipedia
    -
    - Hobby 39 -
    -
    - Description of hobby 39 -
    +
    Hobby 39
    +
    Description of hobby 39
    Wikipedia
    -
    - Hobby 40 -
    -
    - Description of hobby 40 -
    +
    Hobby 40
    +
    Description of hobby 40
    Wikipedia
    -
    - Hobby 41 -
    -
    - Description of hobby 41 -
    +
    Hobby 41
    +
    Description of hobby 41
    Wikipedia
    -
    - Hobby 42 -
    -
    - Description of hobby 42 -
    +
    Hobby 42
    +
    Description of hobby 42
    Wikipedia
    -
    - Hobby 43 -
    -
    - Description of hobby 43 -
    +
    Hobby 43
    +
    Description of hobby 43
    Wikipedia
    -
    - Hobby 44 -
    -
    - Description of hobby 44 -
    +
    Hobby 44
    +
    Description of hobby 44
    Wikipedia
    -
    - Hobby 45 -
    -
    - Description of hobby 45 -
    +
    Hobby 45
    +
    Description of hobby 45
    Wikipedia
    -
    - Hobby 46 -
    -
    - Description of hobby 46 -
    +
    Hobby 46
    +
    Description of hobby 46
    Wikipedia
    -
    - Hobby 47 -
    -
    - Description of hobby 47 -
    +
    Hobby 47
    +
    Description of hobby 47
    Wikipedia
    -
    - Hobby 48 -
    -
    - Description of hobby 48 -
    +
    Hobby 48
    +
    Description of hobby 48
    Wikipedia
    -
    - Hobby 49 -
    -
    - Description of hobby 49 -
    +
    Hobby 49
    +
    Description of hobby 49
    Wikipedia
    -
    - Hobby 50 -
    -
    - Description of hobby 50 -
    +
    Hobby 50
    +
    Description of hobby 50
    Wikipedia
    -
    - Hobby 51 -
    -
    - Description of hobby 51 -
    +
    Hobby 51
    +
    Description of hobby 51
    Wikipedia
    -
    - Hobby 52 -
    -
    - Description of hobby 52 -
    +
    Hobby 52
    +
    Description of hobby 52
    Wikipedia
    -
    - Hobby 53 -
    -
    - Description of hobby 53 -
    +
    Hobby 53
    +
    Description of hobby 53
    Wikipedia
    -
    - Hobby 54 -
    -
    - Description of hobby 54 -
    +
    Hobby 54
    +
    Description of hobby 54
    Wikipedia
    -
    - Hobby 55 -
    -
    - Description of hobby 55 -
    +
    Hobby 55
    +
    Description of hobby 55
    Wikipedia
    -
    - Hobby 56 -
    -
    - Description of hobby 56 -
    +
    Hobby 56
    +
    Description of hobby 56
    Wikipedia
    -
    - Hobby 57 -
    -
    - Description of hobby 57 -
    +
    Hobby 57
    +
    Description of hobby 57
    Wikipedia
    -
    - Hobby 58 -
    -
    - Description of hobby 58 -
    +
    Hobby 58
    +
    Description of hobby 58
    Wikipedia
    -
    - Hobby 59 -
    -
    - Description of hobby 59 -
    +
    Hobby 59
    +
    Description of hobby 59
    Wikipedia
    -
    - Hobby 60 -
    -
    - Description of hobby 60 -
    +
    Hobby 60
    +
    Description of hobby 60
    Wikipedia
    -
    - Hobby 61 -
    -
    - Description of hobby 61 -
    +
    Hobby 61
    +
    Description of hobby 61
    Wikipedia
    -
    - Hobby 62 -
    -
    - Description of hobby 62 -
    +
    Hobby 62
    +
    Description of hobby 62
    Wikipedia
    -
    - Hobby 63 -
    -
    - Description of hobby 63 -
    +
    Hobby 63
    +
    Description of hobby 63
    Wikipedia
    -
    - Hobby 64 -
    -
    - Description of hobby 64 -
    +
    Hobby 64
    +
    Description of hobby 64
    Wikipedia
    -
    - Hobby 65 -
    -
    - Description of hobby 65 -
    +
    Hobby 65
    +
    Description of hobby 65
    Wikipedia
    -
    - Hobby 66 -
    -
    - Description of hobby 66 -
    +
    Hobby 66
    +
    Description of hobby 66
    Wikipedia
    -
    - Hobby 67 -
    -
    - Description of hobby 67 -
    +
    Hobby 67
    +
    Description of hobby 67
    Wikipedia
    -
    - Hobby 68 -
    -
    - Description of hobby 68 -
    +
    Hobby 68
    +
    Description of hobby 68
    Wikipedia
    -
    - Hobby 69 -
    -
    - Description of hobby 69 -
    +
    Hobby 69
    +
    Description of hobby 69
    Wikipedia
    -
    - Hobby 70 -
    -
    - Description of hobby 70 -
    +
    Hobby 70
    +
    Description of hobby 70
    Wikipedia
    -
    - Hobby 71 -
    -
    - Description of hobby 71 -
    +
    Hobby 71
    +
    Description of hobby 71
    Wikipedia
    -
    - Hobby 72 -
    -
    - Description of hobby 72 -
    +
    Hobby 72
    +
    Description of hobby 72
    Wikipedia
    -
    - Hobby 73 -
    -
    - Description of hobby 73 -
    +
    Hobby 73
    +
    Description of hobby 73
    Wikipedia
    -
    - Hobby 74 -
    -
    - Description of hobby 74 -
    +
    Hobby 74
    +
    Description of hobby 74
    Wikipedia
    -
    - Hobby 75 -
    -
    - Description of hobby 75 -
    +
    Hobby 75
    +
    Description of hobby 75
    Wikipedia
    -
    - Hobby 76 -
    -
    - Description of hobby 76 -
    +
    Hobby 76
    +
    Description of hobby 76
    Wikipedia
    -
    - Hobby 77 -
    -
    - Description of hobby 77 -
    +
    Hobby 77
    +
    Description of hobby 77
    Wikipedia
    -
    - Hobby 78 -
    -
    - Description of hobby 78 -
    +
    Hobby 78
    +
    Description of hobby 78
    Wikipedia
    -
    - Hobby 79 -
    -
    - Description of hobby 79 -
    +
    Hobby 79
    +
    Description of hobby 79
    Wikipedia
    -
    - Hobby 80 -
    -
    - Description of hobby 80 -
    +
    Hobby 80
    +
    Description of hobby 80
    Wikipedia
    -
    - Hobby 81 -
    -
    - Description of hobby 81 -
    +
    Hobby 81
    +
    Description of hobby 81
    Wikipedia
    -
    - Hobby 82 -
    -
    - Description of hobby 82 -
    +
    Hobby 82
    +
    Description of hobby 82
    Wikipedia
    -
    - Hobby 83 -
    -
    - Description of hobby 83 -
    +
    Hobby 83
    +
    Description of hobby 83
    Wikipedia
    -
    - Hobby 84 -
    -
    - Description of hobby 84 -
    +
    Hobby 84
    +
    Description of hobby 84
    Wikipedia
    -
    - Hobby 85 -
    -
    - Description of hobby 85 -
    +
    Hobby 85
    +
    Description of hobby 85
    Wikipedia
    -
    - Hobby 86 -
    -
    - Description of hobby 86 -
    +
    Hobby 86
    +
    Description of hobby 86
    Wikipedia
    -
    - Hobby 87 -
    -
    - Description of hobby 87 -
    +
    Hobby 87
    +
    Description of hobby 87
    Wikipedia
    -
    - Hobby 88 -
    -
    - Description of hobby 88 -
    +
    Hobby 88
    +
    Description of hobby 88
    Wikipedia
    -
    - Hobby 89 -
    -
    - Description of hobby 89 -
    +
    Hobby 89
    +
    Description of hobby 89
    Wikipedia
    -
    - Hobby 90 -
    -
    - Description of hobby 90 -
    +
    Hobby 90
    +
    Description of hobby 90
    Wikipedia
    -
    - Hobby 91 -
    -
    - Description of hobby 91 -
    +
    Hobby 91
    +
    Description of hobby 91
    Wikipedia
    -
    - Hobby 92 -
    -
    - Description of hobby 92 -
    +
    Hobby 92
    +
    Description of hobby 92
    Wikipedia
    -
    - Hobby 93 -
    -
    - Description of hobby 93 -
    +
    Hobby 93
    +
    Description of hobby 93
    Wikipedia
    -
    - Hobby 94 -
    -
    - Description of hobby 94 -
    +
    Hobby 94
    +
    Description of hobby 94
    Wikipedia
    -
    - Hobby 95 -
    -
    - Description of hobby 95 -
    +
    Hobby 95
    +
    Description of hobby 95
    Wikipedia
    -
    - Hobby 96 -
    -
    - Description of hobby 96 -
    +
    Hobby 96
    +
    Description of hobby 96
    Wikipedia
    -
    - Hobby 97 -
    -
    - Description of hobby 97 -
    +
    Hobby 97
    +
    Description of hobby 97
    Wikipedia
    -
    - Hobby 98 -
    -
    - Description of hobby 98 -
    +
    Hobby 98
    +
    Description of hobby 98
    Wikipedia
    -
    - Hobby 99 -
    -
    - Description of hobby 99 -
    +
    Hobby 99
    +
    Description of hobby 99
    Wikipedia
    -
    - Hobby 100 -
    -
    - Description of hobby 100 -
    +
    Hobby 100
    +
    Description of hobby 100
    Wikipedia
    -
    - Hobby 101 -
    -
    - Description of hobby 101 -
    +
    Hobby 101
    +
    Description of hobby 101
    Wikipedia
    -
    - Hobby 102 -
    -
    - Description of hobby 102 -
    +
    Hobby 102
    +
    Description of hobby 102
    Wikipedia
    -
    - Hobby 103 -
    -
    - Description of hobby 103 -
    +
    Hobby 103
    +
    Description of hobby 103
    Wikipedia
    -
    - Hobby 104 -
    -
    - Description of hobby 104 -
    +
    Hobby 104
    +
    Description of hobby 104
    Wikipedia
    -
    - Hobby 105 -
    -
    - Description of hobby 105 -
    +
    Hobby 105
    +
    Description of hobby 105
    Wikipedia
    -
    - Hobby 106 -
    -
    - Description of hobby 106 -
    +
    Hobby 106
    +
    Description of hobby 106
    Wikipedia
    -
    - Hobby 107 -
    -
    - Description of hobby 107 -
    +
    Hobby 107
    +
    Description of hobby 107
    Wikipedia
    -
    - Hobby 108 -
    -
    - Description of hobby 108 -
    +
    Hobby 108
    +
    Description of hobby 108
    Wikipedia
    -
    - Hobby 109 -
    -
    - Description of hobby 109 -
    +
    Hobby 109
    +
    Description of hobby 109
    Wikipedia
    -
    - Hobby 110 -
    -
    - Description of hobby 110 -
    +
    Hobby 110
    +
    Description of hobby 110
    Wikipedia
    -
    - Hobby 111 -
    -
    - Description of hobby 111 -
    +
    Hobby 111
    +
    Description of hobby 111
    Wikipedia
    -
    - Hobby 112 -
    -
    - Description of hobby 112 -
    +
    Hobby 112
    +
    Description of hobby 112
    Wikipedia
    -
    - Hobby 113 -
    -
    - Description of hobby 113 -
    +
    Hobby 113
    +
    Description of hobby 113
    Wikipedia
    -
    - Hobby 114 -
    -
    - Description of hobby 114 -
    +
    Hobby 114
    +
    Description of hobby 114
    Wikipedia
    -
    - Hobby 115 -
    -
    - Description of hobby 115 -
    +
    Hobby 115
    +
    Description of hobby 115
    Wikipedia
    -
    - Hobby 116 -
    -
    - Description of hobby 116 -
    +
    Hobby 116
    +
    Description of hobby 116
    Wikipedia
    -
    - Hobby 117 -
    -
    - Description of hobby 117 -
    +
    Hobby 117
    +
    Description of hobby 117
    Wikipedia
    -
    - Hobby 118 -
    -
    - Description of hobby 118 -
    +
    Hobby 118
    +
    Description of hobby 118
    Wikipedia
    -
    - Hobby 119 -
    -
    - Description of hobby 119 -
    +
    Hobby 119
    +
    Description of hobby 119
    Wikipedia
    -
    - Hobby 120 -
    -
    - Description of hobby 120 -
    +
    Hobby 120
    +
    Description of hobby 120
    Wikipedia
    -
    - Hobby 121 -
    -
    - Description of hobby 121 -
    +
    Hobby 121
    +
    Description of hobby 121
    Wikipedia
    -
    - Hobby 122 -
    -
    - Description of hobby 122 -
    +
    Hobby 122
    +
    Description of hobby 122
    Wikipedia
    -
    - Hobby 123 -
    -
    - Description of hobby 123 -
    +
    Hobby 123
    +
    Description of hobby 123
    Wikipedia
    -
    - Hobby 124 -
    -
    - Description of hobby 124 -
    +
    Hobby 124
    +
    Description of hobby 124
    Wikipedia
    -
    - Hobby 125 -
    -
    - Description of hobby 125 -
    +
    Hobby 125
    +
    Description of hobby 125
    Wikipedia
    -
    - Hobby 126 -
    -
    - Description of hobby 126 -
    +
    Hobby 126
    +
    Description of hobby 126
    Wikipedia
    -
    - Hobby 127 -
    -
    - Description of hobby 127 -
    +
    Hobby 127
    +
    Description of hobby 127
    Wikipedia
    -
    - Hobby 128 -
    -
    - Description of hobby 128 -
    +
    Hobby 128
    +
    Description of hobby 128
    Wikipedia
    -
    - Hobby 129 -
    -
    - Description of hobby 129 -
    +
    Hobby 129
    +
    Description of hobby 129
    Wikipedia
    -
    - Hobby 130 -
    -
    - Description of hobby 130 -
    +
    Hobby 130
    +
    Description of hobby 130
    Wikipedia
    -
    - Hobby 131 -
    -
    - Description of hobby 131 -
    +
    Hobby 131
    +
    Description of hobby 131
    Wikipedia
    -
    - Hobby 132 -
    -
    - Description of hobby 132 -
    +
    Hobby 132
    +
    Description of hobby 132
    Wikipedia
    -
    - Hobby 133 -
    -
    - Description of hobby 133 -
    +
    Hobby 133
    +
    Description of hobby 133
    Wikipedia
    -
    - Hobby 134 -
    -
    - Description of hobby 134 -
    +
    Hobby 134
    +
    Description of hobby 134
    Wikipedia
    -
    - Hobby 135 -
    -
    - Description of hobby 135 -
    +
    Hobby 135
    +
    Description of hobby 135
    Wikipedia
    -
    - Hobby 136 -
    -
    - Description of hobby 136 -
    +
    Hobby 136
    +
    Description of hobby 136
    Wikipedia
    -
    - Hobby 137 -
    -
    - Description of hobby 137 -
    +
    Hobby 137
    +
    Description of hobby 137
    Wikipedia
    -
    - Hobby 138 -
    -
    - Description of hobby 138 -
    +
    Hobby 138
    +
    Description of hobby 138
    Wikipedia
    -
    - Hobby 139 -
    -
    - Description of hobby 139 -
    +
    Hobby 139
    +
    Description of hobby 139
    Wikipedia
    -
    - Hobby 140 -
    -
    - Description of hobby 140 -
    +
    Hobby 140
    +
    Description of hobby 140
    Wikipedia
    -
    - Hobby 141 -
    -
    - Description of hobby 141 -
    +
    Hobby 141
    +
    Description of hobby 141
    Wikipedia
    -
    - Hobby 142 -
    -
    - Description of hobby 142 -
    +
    Hobby 142
    +
    Description of hobby 142
    Wikipedia
    -
    - Hobby 143 -
    -
    - Description of hobby 143 -
    +
    Hobby 143
    +
    Description of hobby 143
    Wikipedia
    -
    - Hobby 144 -
    -
    - Description of hobby 144 -
    +
    Hobby 144
    +
    Description of hobby 144
    Wikipedia
    -
    - Hobby 145 -
    -
    - Description of hobby 145 -
    +
    Hobby 145
    +
    Description of hobby 145
    Wikipedia
    -
    - Hobby 146 -
    -
    - Description of hobby 146 -
    +
    Hobby 146
    +
    Description of hobby 146
    Wikipedia
    -
    - Hobby 147 -
    -
    - Description of hobby 147 -
    +
    Hobby 147
    +
    Description of hobby 147
    Wikipedia
    -
    - Hobby 148 -
    -
    - Description of hobby 148 -
    +
    Hobby 148
    +
    Description of hobby 148
    Wikipedia
    -
    - Hobby 149 -
    -
    - Description of hobby 149 -
    +
    Hobby 149
    +
    Description of hobby 149
    Wikipedia
    -
    - Hobby 150 -
    -
    - Description of hobby 150 -
    +
    Hobby 150
    +
    Description of hobby 150
    Wikipedia
    -
    - Hobby 151 -
    -
    - Description of hobby 151 -
    +
    Hobby 151
    +
    Description of hobby 151
    Wikipedia
    -
    - Hobby 152 -
    -
    - Description of hobby 152 -
    +
    Hobby 152
    +
    Description of hobby 152
    Wikipedia
    -
    - Hobby 153 -
    -
    - Description of hobby 153 -
    +
    Hobby 153
    +
    Description of hobby 153
    Wikipedia
    -
    - Hobby 154 -
    -
    - Description of hobby 154 -
    +
    Hobby 154
    +
    Description of hobby 154
    Wikipedia
    -
    - Hobby 155 -
    -
    - Description of hobby 155 -
    +
    Hobby 155
    +
    Description of hobby 155
    Wikipedia
    -
    - Hobby 156 -
    -
    - Description of hobby 156 -
    +
    Hobby 156
    +
    Description of hobby 156
    Wikipedia
    -
    - Hobby 157 -
    -
    - Description of hobby 157 -
    +
    Hobby 157
    +
    Description of hobby 157
    Wikipedia
    -
    - Hobby 158 -
    -
    - Description of hobby 158 -
    +
    Hobby 158
    +
    Description of hobby 158
    Wikipedia
    -
    - Hobby 159 -
    -
    - Description of hobby 159 -
    +
    Hobby 159
    +
    Description of hobby 159
    Wikipedia
    -
    - Hobby 160 -
    -
    - Description of hobby 160 -
    +
    Hobby 160
    +
    Description of hobby 160
    Wikipedia
    -
    - Hobby 161 -
    -
    - Description of hobby 161 -
    +
    Hobby 161
    +
    Description of hobby 161
    Wikipedia
    -
    - Hobby 162 -
    -
    - Description of hobby 162 -
    +
    Hobby 162
    +
    Description of hobby 162
    Wikipedia
    -
    - Hobby 163 -
    -
    - Description of hobby 163 -
    +
    Hobby 163
    +
    Description of hobby 163
    Wikipedia
    -
    - Hobby 164 -
    -
    - Description of hobby 164 -
    +
    Hobby 164
    +
    Description of hobby 164
    Wikipedia
    -
    - Hobby 165 -
    -
    - Description of hobby 165 -
    +
    Hobby 165
    +
    Description of hobby 165
    Wikipedia
    -
    - Hobby 166 -
    -
    - Description of hobby 166 -
    +
    Hobby 166
    +
    Description of hobby 166
    Wikipedia
    -
    - Hobby 167 -
    -
    - Description of hobby 167 -
    +
    Hobby 167
    +
    Description of hobby 167
    Wikipedia
    -
    - Hobby 168 -
    -
    - Description of hobby 168 -
    +
    Hobby 168
    +
    Description of hobby 168
    Wikipedia
    -
    - Hobby 169 -
    -
    - Description of hobby 169 -
    +
    Hobby 169
    +
    Description of hobby 169
    Wikipedia
    -
    - Hobby 170 -
    -
    - Description of hobby 170 -
    +
    Hobby 170
    +
    Description of hobby 170
    Wikipedia
    -
    - Hobby 171 -
    -
    - Description of hobby 171 -
    +
    Hobby 171
    +
    Description of hobby 171
    Wikipedia
    -
    - Hobby 172 -
    -
    - Description of hobby 172 -
    +
    Hobby 172
    +
    Description of hobby 172
    Wikipedia
    -
    - Hobby 173 -
    -
    - Description of hobby 173 -
    +
    Hobby 173
    +
    Description of hobby 173
    Wikipedia
    -
    - Hobby 174 -
    -
    - Description of hobby 174 -
    +
    Hobby 174
    +
    Description of hobby 174
    Wikipedia
    -
    - Hobby 175 -
    -
    - Description of hobby 175 -
    +
    Hobby 175
    +
    Description of hobby 175
    Wikipedia
    -
    - Hobby 176 -
    -
    - Description of hobby 176 -
    +
    Hobby 176
    +
    Description of hobby 176
    Wikipedia
    -
    - Hobby 177 -
    -
    - Description of hobby 177 -
    +
    Hobby 177
    +
    Description of hobby 177
    Wikipedia
    -
    - Hobby 178 -
    -
    - Description of hobby 178 -
    +
    Hobby 178
    +
    Description of hobby 178
    Wikipedia
    -
    - Hobby 179 -
    -
    - Description of hobby 179 -
    +
    Hobby 179
    +
    Description of hobby 179
    Wikipedia
    -
    - Hobby 180 -
    -
    - Description of hobby 180 -
    +
    Hobby 180
    +
    Description of hobby 180
    Wikipedia
    -
    - Hobby 181 -
    -
    - Description of hobby 181 -
    +
    Hobby 181
    +
    Description of hobby 181
    Wikipedia
    -
    - Hobby 182 -
    -
    - Description of hobby 182 -
    +
    Hobby 182
    +
    Description of hobby 182
    Wikipedia
    -
    - Hobby 183 -
    -
    - Description of hobby 183 -
    +
    Hobby 183
    +
    Description of hobby 183
    Wikipedia
    -
    - Hobby 184 -
    -
    - Description of hobby 184 -
    +
    Hobby 184
    +
    Description of hobby 184
    Wikipedia
    -
    - Hobby 185 -
    -
    - Description of hobby 185 -
    +
    Hobby 185
    +
    Description of hobby 185
    Wikipedia
    -
    - Hobby 186 -
    -
    - Description of hobby 186 -
    +
    Hobby 186
    +
    Description of hobby 186
    Wikipedia
    -
    - Hobby 187 -
    -
    - Description of hobby 187 -
    +
    Hobby 187
    +
    Description of hobby 187
    Wikipedia
    -
    - Hobby 188 -
    -
    - Description of hobby 188 -
    +
    Hobby 188
    +
    Description of hobby 188
    Wikipedia
    -
    - Hobby 189 -
    -
    - Description of hobby 189 -
    +
    Hobby 189
    +
    Description of hobby 189
    Wikipedia
    -
    - Hobby 190 -
    -
    - Description of hobby 190 -
    +
    Hobby 190
    +
    Description of hobby 190
    Wikipedia
    -
    - Hobby 191 -
    -
    - Description of hobby 191 -
    +
    Hobby 191
    +
    Description of hobby 191
    Wikipedia
    -
    - Hobby 192 -
    -
    - Description of hobby 192 -
    +
    Hobby 192
    +
    Description of hobby 192
    Wikipedia
    -
    - Hobby 193 -
    -
    - Description of hobby 193 -
    +
    Hobby 193
    +
    Description of hobby 193
    Wikipedia
    -
    - Hobby 194 -
    -
    - Description of hobby 194 -
    +
    Hobby 194
    +
    Description of hobby 194
    Wikipedia
    -
    - Hobby 195 -
    -
    - Description of hobby 195 -
    +
    Hobby 195
    +
    Description of hobby 195
    Wikipedia
    -
    - Hobby 196 -
    -
    - Description of hobby 196 -
    +
    Hobby 196
    +
    Description of hobby 196
    Wikipedia
    -
    - Hobby 197 -
    -
    - Description of hobby 197 -
    +
    Hobby 197
    +
    Description of hobby 197
    Wikipedia
    -
    - Hobby 198 -
    -
    - Description of hobby 198 -
    +
    Hobby 198
    +
    Description of hobby 198
    Wikipedia
    -
    - Hobby 199 -
    -
    - Description of hobby 199 -
    +
    Hobby 199
    +
    Description of hobby 199
    Wikipedia
    -
    - Hobby 200 -
    -
    - Description of hobby 200 -
    +
    Hobby 200
    +
    Description of hobby 200
    Wikipedia
    diff --git a/pages/examples/tables/table-of-divs-experiment/README.md b/pages/examples/tables/table-of-divs-experiment/README.md index f68b7681..c66a16ea 100644 --- a/pages/examples/tables/table-of-divs-experiment/README.md +++ b/pages/examples/tables/table-of-divs-experiment/README.md @@ -1,7 +1,7 @@ --- -navigation_title: "\"Table of divs\" experiment" +navigation_title: '"Table of divs" experiment' position: 8 -changed: "2020-11-18" +changed: '2020-11-18' --- # The "table of divs" experiment diff --git a/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/README.md b/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/README.md index 3dac5b20..75528b6c 100644 --- a/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/README.md +++ b/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/README.md @@ -1,5 +1,5 @@ --- -title: "Fixed table of divs" +title: 'Fixed table of divs' compatibility: Keyboard only: status: pass diff --git a/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/example.css b/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/example.css index ac0cc231..9d3f9ce5 100644 --- a/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/example.css +++ b/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/example.css @@ -7,7 +7,8 @@ display: flex; } -.th, .td { +.th, +.td { border-top: 1px solid; border-right: 1px solid; padding: 4px 8px; @@ -17,13 +18,13 @@ .th { font-weight: bold; } -.th[role="rowheader"] { +.th[role='rowheader'] { background-color: lightgreen; } -.th[role="columnheader"] { +.th[role='columnheader'] { background-color: lightpink; } .favourites { font-style: italic; -} \ No newline at end of file +} diff --git a/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/index.html b/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/index.html index 5cb4ddfa..64748837 100644 --- a/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/index.html +++ b/pages/examples/tables/table-of-divs-experiment/_examples/fixed-table-of-divs/index.html @@ -1,24 +1,15 @@ -

    - My Hobbies -

    +

    My Hobbies

    -
    - Name -
    -
    - Description -
    -
    - Additional Resources -
    +
    Name
    +
    Description
    +
    Additional Resources
    -
    - Playing Soccer -
    +
    Playing Soccer
    - Soccer is a team sport played between two teams of eleven players with a spherical ball. + Soccer is a team sport played between two teams of eleven players with a + spherical ball.
    Wikipedia @@ -26,22 +17,20 @@