diff --git a/.github/workflows/codeQuality.yml b/.github/workflows/codeQuality.yml new file mode 100644 index 00000000..6fb6a02f --- /dev/null +++ b/.github/workflows/codeQuality.yml @@ -0,0 +1,26 @@ +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: Run ESLint + run: npm run lint + + - name: Run Prettier + run: npm run prettier -- --check 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/.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/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/package-lock.json b/package-lock.json index c9bb8717..8804f9ea 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..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": "", @@ -55,7 +56,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", diff --git a/pages/README.md b/pages/README.md index e58adbec..9d0e6a41 100644 --- a/pages/README.md +++ b/pages/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Welcome" +navigation_title: 'Welcome' position: 1 --- diff --git a/pages/__404.md b/pages/__404.md index 2bd5ba32..4edabe2e 100644 --- a/pages/__404.md +++ b/pages/__404.md @@ -1,5 +1,5 @@ --- -navigation_title: "Error 404 - Page not found" +navigation_title: 'Error 404 - Page not found' --- # Error 404 - Page not found. @@ -9,4 +9,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 66e62306..04e31c57 100644 --- a/pages/examples/README.md +++ b/pages/examples/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Examples" +navigation_title: 'Examples' position: 4 --- @@ -51,11 +51,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! @@ -64,12 +64,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 8ba11db5..2a08049b 100644 --- a/pages/examples/forms/README.md +++ b/pages/examples/forms/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Forms" +navigation_title: 'Forms' position: 5 --- diff --git a/pages/examples/forms/bad-example/README.md b/pages/examples/forms/bad-example/README.md index 5c9f6590..c63f825a 100644 --- a/pages/examples/forms/bad-example/README.md +++ b/pages/examples/forms/bad-example/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Bad example" +navigation_title: 'Bad example' position: 3 --- 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 f3b1ca1b..509d2dac 100644 --- a/pages/examples/forms/good-example/README.md +++ b/pages/examples/forms/good-example/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Good example" +navigation_title: 'Good example' position: 2 --- 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 b009267b..983841dd 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 47b389e0..aa41505d 100644 --- a/pages/examples/forms/grouping-with-fieldset-legend/README.md +++ b/pages/examples/forms/grouping-with-fieldset-legend/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Grouping with fieldset/legend" +navigation_title: 'Grouping with fieldset/legend' position: 4 --- @@ -68,14 +68,12 @@ On one side, JAWS attaches the ``'s text to the label of each contained > Personal Details, First Name. > Personal Details, Last Name. - On the other side, NVDA only announces the ``'s text when entering the `
`. For the above example, it literally announces: > Personal Details, Grouping. First Name. > Last Name. - -Update 2023: JAWS and NVADA attaches the `` only once by focusing the first element 'First Name" or entering the `
`. +Update 2023: JAWS and NVADA attaches the `` only once by focusing the first element 'First Name" or entering the `
`. [Example](_examples/grouped-form-controls-with-too-long-legend) @@ -125,4 +123,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 da83b7ea..e531900d 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 0a293e49..d49d801a 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 @@ -14,8 +14,8 @@ compatibility: 2023.1 + Edge: status: pass date: 2023-07-13 - comments: - - in clarification.. + comments: + - in clarification.. JAWS: 2018.3 + FF ESR 52.7.3: 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 44ab2bcd..1af13b53 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 @@ -8,8 +8,8 @@ compatibility: 2023.1 + FF 115: status: pass date: 2023-08-03 - comments: - - Firefox (version 115.x) is reading the whole fieldset-legend once by focusing the first input field. + comments: + - Firefox (version 115.x) is reading the whole fieldset-legend once by focusing the first input field. 2021.2 + Chrome: status: pass date: 2021-02-10 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 f95d57a2..2b3b9d95 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 40b1de8f..65947a32 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 0bde6d76..772b6109 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 56160d02..a7fcec4e 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 534b12e4..58b7b7ba 100644 --- a/pages/examples/forms/grouping-with-headings/README.md +++ b/pages/examples/forms/grouping-with-headings/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Grouping with headings" +navigation_title: 'Grouping with headings' position: 5 --- 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 64bf8dfa..58897fc5 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 4f046418..4cda707c 100644 --- a/pages/examples/forms/handling/README.md +++ b/pages/examples/forms/handling/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Handling" +navigation_title: 'Handling' position: 1 --- @@ -34,13 +34,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 @@ -65,7 +65,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 74e4c291..c7a0de68 100644 --- a/pages/examples/forms/html-5-validations/README.md +++ b/pages/examples/forms/html-5-validations/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "HTML 5 validations" +navigation_title: 'HTML 5 validations' position: 9 --- @@ -30,8 +30,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) @@ -45,7 +45,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 f7f31024..768fd7a8 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 ea4fcc95..772b202e 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 @@ -19,7 +19,7 @@ compatibility: status: pass date: 2023-07-13 comments: - - The name of an invalid field is not automatically announced. This is nasty, but the user can find this information manually. After sending the form you'll get the the message per field at the first time when it is focused. + - The name of an invalid field is not automatically announced. This is nasty, but the user can find this information manually. After sending the form you'll get the the message per field at the first time when it is focused. JAWS: 2018.3 + FF ESR 52.7.3: 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 3bdaa4c9..fa45c82a 100644 --- a/pages/examples/forms/in-tables/README.md +++ b/pages/examples/forms/in-tables/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "In tables" +navigation_title: 'In tables' position: 10 --- 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 faf0de58..cc7527be 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 569a5e8d..090e87e4 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 2250bb66..b972d285 100644 --- a/pages/examples/forms/non-interactive-content/README.md +++ b/pages/examples/forms/non-interactive-content/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Non-interactive content" +navigation_title: 'Non-interactive content' position: 6 --- @@ -48,9 +48,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 134fc56f..65e93755 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 @@ -25,5 +25,5 @@ compatibility: status: pass date: 2023-07-13 comments: - - does not tell the content associated with Aria, but only the label and the fieldset/legend + - does not tell the content associated with Aria, but only the label and the fieldset/legend --- 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 23d27a4e..b47707b8 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 8c7946b8..404c591f 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 @@ -25,5 +25,5 @@ compatibility: status: pass date: 2023-07-13 comments: - - does not tell the content associated with Aria, but only the label and the fieldset/legend + - does not tell the content associated with Aria, but only the label and the fieldset/legend --- 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 beef5d01..f8bb2af1 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 @@ -15,7 +15,7 @@ compatibility: status: pass date: 2023-07-13 comments: - - is only working in brows-mode, better example with aria-describedby. + - is only working in brows-mode, better example with aria-describedby. JAWS: 2018.3 + FF ESR 52.7.3: status: pass @@ -26,6 +26,6 @@ compatibility: 2023.23 + Edge: status: pass date: 2023-07-13 - comments: - - is only working in brows-mode, better example with aria-describedby. + comments: + - is only working in brows-mode, better example with aria-describedby. --- 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 8cc97b67..5a5e229c 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 c3562be1..fcb14297 100644 --- a/pages/examples/forms/required/README.md +++ b/pages/examples/forms/required/README.md @@ -1,11 +1,11 @@ --- -navigation_title: "Required (*)" +navigation_title: 'Required (*)' position: 8 --- -# 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 make sure 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 make sure 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 0062040c..90cf4a50 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 9017ade9..26743cfe 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 f6f634fb..68d73261 100644 --- a/pages/examples/forms/validation-messages/README.md +++ b/pages/examples/forms/validation-messages/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Validation messages" +navigation_title: 'Validation messages' position: 7 --- 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 4c766698..bd05e895 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 @@ -24,6 +24,6 @@ compatibility: 2023.23 + Edge: status: fail date: 2023-07-13 - comments: - - error message are not read out. + comments: + - error message are not read out. --- 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 4a5c26b0..be4e28c9 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 @@ -24,6 +24,6 @@ compatibility: 2023.23 + Edge: status: pass date: 2023-07-13 - comments: - - the relation between the error message and the form field it not clear in Edge. + comments: + - the relation between the error message and the form field it not clear in Edge. --- 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 13c55f7f..b37715c4 100644 --- a/pages/examples/headings/README.md +++ b/pages/examples/headings/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Headings" +navigation_title: 'Headings' position: 3 --- diff --git a/pages/examples/headings/alternative-techniques/README.md b/pages/examples/headings/alternative-techniques/README.md index b5b70a42..3aaed456 100644 --- a/pages/examples/headings/alternative-techniques/README.md +++ b/pages/examples/headings/alternative-techniques/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Alternative techniques" +navigation_title: 'Alternative techniques' position: 6 --- @@ -24,11 +24,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 b666395e..19804848 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 05305f33..4f7067e7 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 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 cafc7daf..c43883ec 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 @@ -18,7 +18,7 @@ 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!" 2021.2 + Chrome: status: pass date: 2021-02-10 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 c1fbbbad..ec74ede7 100644 --- a/pages/examples/headings/bad-example/README.md +++ b/pages/examples/headings/bad-example/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Bad example" +navigation_title: 'Bad example' position: 3 --- 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 5a68d6bb..ee0423fd 100644 --- a/pages/examples/headings/good-example/README.md +++ b/pages/examples/headings/good-example/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Good example" +navigation_title: 'Good example' position: 2 --- @@ -29,4 +29,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 510f3df6..f91cdf73 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 6e0be5cc..895bb4ed 100644 --- a/pages/examples/headings/handling/README.md +++ b/pages/examples/headings/handling/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Handling" +navigation_title: 'Handling' position: 1 --- @@ -39,7 +39,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 578ff6e5..caeaca23 100644 --- a/pages/examples/headings/html-5-outline/README.md +++ b/pages/examples/headings/html-5-outline/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "HTML 5 outline" +navigation_title: 'HTML 5 outline' position: 7 --- 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 99489487..7e99260f 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 fef6f3aa..dc742f03 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/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 a46077d7..b0d8b2ab 100644 --- a/pages/examples/headings/iframes/README.md +++ b/pages/examples/headings/iframes/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Iframes" +navigation_title: 'Iframes' position: 8 --- @@ -33,11 +33,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. @@ -48,8 +48,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 edffddd8..f8dd881f 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 cd01edd9..37e6751b 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 201d140b..6e35e4f5 100644 --- a/pages/examples/headings/multiple-h1-okay-for-seo/README.md +++ b/pages/examples/headings/multiple-h1-okay-for-seo/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Multiple h1 okay for SEO?" +navigation_title: 'Multiple h1 okay for SEO?' position: 5 --- @@ -63,4 +63,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 10c6dd8e..95fdede9 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 26950a70..1188eec1 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 dc7d24dd..b056be11 100644 --- a/pages/examples/headings/visually-hidden-headings/README.md +++ b/pages/examples/headings/visually-hidden-headings/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Visually hidden headings" +navigation_title: 'Visually hidden headings' position: 4 --- 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 988cd4aa..acc8b28e 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 6742f17c..81f3f2a9 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 e36c4c85..9db8777c 100644 --- a/pages/examples/hiding-elements/README.md +++ b/pages/examples/hiding-elements/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Hiding elements" +navigation_title: 'Hiding elements' position: 2 --- diff --git a/pages/examples/hiding-elements/from-all-devices/README.md b/pages/examples/hiding-elements/from-all-devices/README.md index eef1bc80..917a1319 100644 --- a/pages/examples/hiding-elements/from-all-devices/README.md +++ b/pages/examples/hiding-elements/from-all-devices/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "From all devices" +navigation_title: 'From all devices' position: 3 --- 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 bd989cb9..4c42d9a0 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 e6aeb7e2..46ade62d 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 75204a3b..92cc523d 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 3d3bf5a8..235feea8 100644 --- a/pages/examples/hiding-elements/from-screen-readers/README.md +++ b/pages/examples/hiding-elements/from-screen-readers/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "From screen readers" +navigation_title: 'From screen readers' position: 2 --- @@ -7,4 +7,4 @@ position: 2 **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 e8540e9f..ee53bbb9 100644 --- a/pages/examples/hiding-elements/okay-for-seo/README.md +++ b/pages/examples/hiding-elements/okay-for-seo/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Okay for SEO?" +navigation_title: 'Okay for SEO?' position: 5 --- @@ -19,4 +19,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 aeba26ce..103994c4 100644 --- a/pages/examples/hiding-elements/visually/README.md +++ b/pages/examples/hiding-elements/visually/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Visually" +navigation_title: 'Visually' position: 1 --- @@ -14,10 +14,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; } ``` @@ -41,10 +41,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 c22724e7..06143b2d 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 b3087524..af09736b 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 b5aff88d..edc7b4a8 100644 --- a/pages/examples/html_boilerplate/README.md +++ b/pages/examples/html_boilerplate/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "HTML Boilerplate" +navigation_title: 'HTML Boilerplate' position: 1 --- diff --git a/pages/examples/sensible-aria-usage/README.md b/pages/examples/sensible-aria-usage/README.md index d98a913e..700594a8 100644 --- a/pages/examples/sensible-aria-usage/README.md +++ b/pages/examples/sensible-aria-usage/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Sensible ARIA usage" +navigation_title: 'Sensible ARIA usage' position: 7 --- diff --git a/pages/examples/sensible-aria-usage/alert/README.md b/pages/examples/sensible-aria-usage/alert/README.md index 611a1655..b307caf7 100644 --- a/pages/examples/sensible-aria-usage/alert/README.md +++ b/pages/examples/sensible-aria-usage/alert/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Alert" +navigation_title: 'Alert' position: 8 --- @@ -20,24 +20,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) @@ -51,12 +47,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 41de0c2a..61e0aff8 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 757e0389..e4866829 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 513caa7f..93ca87cf 100644 --- a/pages/examples/sensible-aria-usage/current/README.md +++ b/pages/examples/sensible-aria-usage/current/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Current" +navigation_title: 'Current' position: 5 --- 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 70f23504..07876ced 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 0e3824b3..9d9f0ab2 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 @@ \ 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 1f0f8955..c1445655 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 @@ \ 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 57610ab6..ca2707b9 100644 --- a/pages/examples/sensible-aria-usage/describedby/README.md +++ b/pages/examples/sensible-aria-usage/describedby/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Describedby" +navigation_title: 'Describedby' position: 2 --- @@ -18,13 +18,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: @@ -70,7 +66,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 81793fa2..4399ecaa 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 6204343e..34eb47e6 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 1b9ceb91..2258f04f 100644 --- a/pages/examples/sensible-aria-usage/expanded/README.md +++ b/pages/examples/sensible-aria-usage/expanded/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Expanded" +navigation_title: 'Expanded' position: 3 --- @@ -20,9 +20,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: @@ -40,9 +38,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: @@ -89,11 +85,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 9194d909..d646bd8e 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 221257f1..c45d8af0 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 c518ccd1..f38799c9 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 d3ee57b0..8dc0c362 100644 --- a/pages/examples/sensible-aria-usage/label-labelledby/README.md +++ b/pages/examples/sensible-aria-usage/label-labelledby/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Label & labelledby" +navigation_title: 'Label & labelledby' position: 1 --- @@ -14,9 +14,7 @@ position: 1 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: @@ -32,9 +30,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: @@ -48,13 +44,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: @@ -95,7 +87,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 - ``` @@ -105,7 +99,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 f864fcde..6f31671c 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 775143b6..4ce90a39 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 96c735b9..e1b82bbb 100644 --- a/pages/examples/sensible-aria-usage/presentation/README.md +++ b/pages/examples/sensible-aria-usage/presentation/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Presentation" +navigation_title: 'Presentation' position: 7 --- @@ -20,9 +20,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 c46f692d..b713e41c 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 @@ -15,7 +15,6 @@ compatibility: status: pass date: 2023-07-13 JAWS: - 2018.3 + FF ESR 52.7.3: status: pass date: 2018-05-22 @@ -25,5 +24,4 @@ compatibility: 2023.1 + Edge: status: pass date: 2023-07-13 - --- 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 e7bdacb5..dcb20a32 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? -

    +

    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 008c3459..7be99b34 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 @@ -18,12 +18,11 @@ compatibility: 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' 2021.2 + Chrome: status: pass date: 2021-02-10 2023.1 + Edge: status: pass date: 2023-07-13 - --- 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 5e419125..decbdc51 100644 --- a/pages/examples/sensible-aria-usage/pressed/README.md +++ b/pages/examples/sensible-aria-usage/pressed/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Pressed" +navigation_title: 'Pressed' position: 4 --- @@ -20,9 +20,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 88f0cda7..670b3434 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 1bfeca97..fc2c8f8a 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 4157b75f..2a0ee058 100644 --- a/pages/examples/tables/README.md +++ b/pages/examples/tables/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Tables" +navigation_title: 'Tables' position: 4 --- diff --git a/pages/examples/tables/bad-examples/README.md b/pages/examples/tables/bad-examples/README.md index 02b21dc1..0ec046d6 100644 --- a/pages/examples/tables/bad-examples/README.md +++ b/pages/examples/tables/bad-examples/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Bad examples" +navigation_title: 'Bad examples' position: 3 --- @@ -29,4 +29,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 fc5f03ba..600cfa2f 100644 --- a/pages/examples/tables/good-example/README.md +++ b/pages/examples/tables/good-example/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Good example" +navigation_title: 'Good example' position: 2 --- 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 e1812911..ba5a2d4d 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 2aaff528..2104df1f 100644 --- a/pages/examples/tables/handling/README.md +++ b/pages/examples/tables/handling/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Handling" +navigation_title: 'Handling' position: 1 --- diff --git a/pages/examples/tables/hidden-headers/README.md b/pages/examples/tables/hidden-headers/README.md index 142c86a1..314324d7 100644 --- a/pages/examples/tables/hidden-headers/README.md +++ b/pages/examples/tables/hidden-headers/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Hidden headers" +navigation_title: 'Hidden headers' position: 9 --- 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 0d4b0235..3c7a3123 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 964d8409..f493b801 100644 --- a/pages/examples/tables/layout-changes/README.md +++ b/pages/examples/tables/layout-changes/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Layout changes" +navigation_title: 'Layout changes' position: 6 --- 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 1adce377..11455ccf 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 982572e6..36192525 100644 --- a/pages/examples/tables/multiple-headers/README.md +++ b/pages/examples/tables/multiple-headers/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Multiple headers" +navigation_title: 'Multiple headers' position: 4 --- @@ -35,4 +35,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 c79ab531..541391c1 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 5dbf38b8..d9a0e20b 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/_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-block-elements-in-narrow-view/README.md b/pages/examples/tables/responsive/_examples/table-with-block-elements-in-narrow-view/README.md index ec21f8a5..8794ebdc 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-scroll-container/index.html b/pages/examples/tables/responsive/_examples/table-with-scroll-container/index.html index f1022202..e770fb29 100644 --- a/pages/examples/tables/responsive/_examples/table-with-scroll-container/index.html +++ b/pages/examples/tables/responsive/_examples/table-with-scroll-container/index.html @@ -1,4 +1,9 @@ -
    +
    My Hobbies 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 f812ca77..00aa1024 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/spanning-rows-cols/README.md b/pages/examples/tables/spanning-rows-cols/README.md index c01afad9..8c0cc5f9 100644 --- a/pages/examples/tables/spanning-rows-cols/README.md +++ b/pages/examples/tables/spanning-rows-cols/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "Spanning rows & cols" +navigation_title: 'Spanning rows & cols' position: 5 --- @@ -27,4 +27,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/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 265ffdcb..7f7894ec 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
    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 ab77bb6d..9e02b0e7 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 @@ -24,4 +24,4 @@ compatibility: 2023.23 + Edge: status: pass date: 2023-07-13 ---- \ No newline at end of file +--- diff --git a/pages/examples/tables/table-of-divs-experiment/README.md b/pages/examples/tables/table-of-divs-experiment/README.md index 18acd7fe..31ee6f2a 100644 --- a/pages/examples/tables/table-of-divs-experiment/README.md +++ b/pages/examples/tables/table-of-divs-experiment/README.md @@ -1,5 +1,5 @@ --- -navigation_title: "\"Table of divs\" experiment" +navigation_title: '"Table of divs" experiment' position: 8 --- 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 06cd5eff..315e7281 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 @@