From f6164241c66d93ed689741b6999eed8102b37fe1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 5 Jan 2024 15:28:42 +0000 Subject: [PATCH 1/4] Bump puppeteer from 21.6.1 to 21.7.0 in /src (#3549) Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 21.6.1 to 21.7.0. - [Release notes](https://github.com/puppeteer/puppeteer/releases) - [Changelog](https://github.com/puppeteer/puppeteer/blob/main/release-please-config.json) - [Commits](https://github.com/puppeteer/puppeteer/compare/puppeteer-v21.6.1...puppeteer-v21.7.0) --- updated-dependencies: - dependency-name: puppeteer dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- src/package-lock.json | 94 +++++++++++++++++++++---------------------- src/package.json | 2 +- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/src/package-lock.json b/src/package-lock.json index 9e031ab6387..fd1db155933 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -15,7 +15,7 @@ "node-fetch": "3.3.2", "node-watch": "0.7.4", "prettier": "3.1.1", - "puppeteer": "21.6.1", + "puppeteer": "21.7.0", "rainbow-code": "2.1.7", "recursive-readdir": "2.2.3", "run-script-os": "1.1.6", @@ -186,9 +186,9 @@ } }, "node_modules/@puppeteer/browsers": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.9.0.tgz", - "integrity": "sha512-QwguOLy44YBGC8vuPP2nmpX4MUN2FzWbsnvZJtiCzecU3lHmVZkaC1tq6rToi9a200m8RzlVtDyxCS0UIDrxUg==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.9.1.tgz", + "integrity": "sha512-PuvK6xZzGhKPvlx3fpfdM2kYY3P/hB1URtK8wA7XUJ6prn6pp22zvJHu48th0SGcHL9SutbPHrFuQgfXTFobWA==", "dev": true, "dependencies": { "debug": "4.3.4", @@ -213,9 +213,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.10.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz", - "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==", + "version": "20.10.6", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz", + "integrity": "sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==", "dev": true, "optional": true, "dependencies": { @@ -408,9 +408,9 @@ } }, "node_modules/chromium-bidi": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.1.tgz", - "integrity": "sha512-dcCqOgq9fHKExc2R4JZs/oKbOghWpUNFAJODS8WKRtLhp3avtIH5UDCBrutdqZdh3pARogH8y1ObXm87emwb3g==", + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.2.tgz", + "integrity": "sha512-PbVOSddxgKyj+JByqavWMNqWPCoCaT6XK5Z1EFe168sxnB/BM51LnZEPXSbFcFAJv/+u2B4XNTs9uXxy4GW3cQ==", "dev": true, "dependencies": { "mitt": "3.0.1", @@ -1494,15 +1494,15 @@ } }, "node_modules/puppeteer": { - "version": "21.6.1", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-21.6.1.tgz", - "integrity": "sha512-O+pbc61oj8ln6m8EJKncrsQFmytgRyFYERtk190PeLbJn5JKpmmynn2p1PiFrlhCitAQXLJ0MOy7F0TeyCRqBg==", + "version": "21.7.0", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-21.7.0.tgz", + "integrity": "sha512-Yy+UUy0b9siJezbhHO/heYUoZQUwyqDK1yOQgblTt0l97tspvDVFkcW9toBlnSvSfkDmMI3Dx9cZL6R8bDArHA==", "dev": true, "hasInstallScript": true, "dependencies": { - "@puppeteer/browsers": "1.9.0", + "@puppeteer/browsers": "1.9.1", "cosmiconfig": "8.3.6", - "puppeteer-core": "21.6.1" + "puppeteer-core": "21.7.0" }, "bin": { "puppeteer": "lib/esm/puppeteer/node/cli.js" @@ -1512,17 +1512,17 @@ } }, "node_modules/puppeteer-core": { - "version": "21.6.1", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-21.6.1.tgz", - "integrity": "sha512-0chaaK/RL9S1U3bsyR4fUeUfoj51vNnjWvXgG6DcsyMjwYNpLcAThv187i1rZCo7QhJP0wZN8plQkjNyrq2h+A==", + "version": "21.7.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-21.7.0.tgz", + "integrity": "sha512-elPYPozrgiM3phSy7VDUJCVWQ07SPnOm78fpSaaSNFoQx5sur/MqhTSro9Wz8lOEjqCykGC6WRkwxDgmqcy1dQ==", "dev": true, "dependencies": { - "@puppeteer/browsers": "1.9.0", - "chromium-bidi": "0.5.1", + "@puppeteer/browsers": "1.9.1", + "chromium-bidi": "0.5.2", "cross-fetch": "4.0.0", "debug": "4.3.4", "devtools-protocol": "0.0.1203626", - "ws": "8.15.1" + "ws": "8.16.0" }, "engines": { "node": ">=16.13.2" @@ -1971,9 +1971,9 @@ "dev": true }, "node_modules/ws": { - "version": "8.15.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.15.1.tgz", - "integrity": "sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==", + "version": "8.16.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", + "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", "dev": true, "engines": { "node": ">=10.0.0" @@ -2198,9 +2198,9 @@ } }, "@puppeteer/browsers": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.9.0.tgz", - "integrity": "sha512-QwguOLy44YBGC8vuPP2nmpX4MUN2FzWbsnvZJtiCzecU3lHmVZkaC1tq6rToi9a200m8RzlVtDyxCS0UIDrxUg==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.9.1.tgz", + "integrity": "sha512-PuvK6xZzGhKPvlx3fpfdM2kYY3P/hB1URtK8wA7XUJ6prn6pp22zvJHu48th0SGcHL9SutbPHrFuQgfXTFobWA==", "dev": true, "requires": { "debug": "4.3.4", @@ -2219,9 +2219,9 @@ "dev": true }, "@types/node": { - "version": "20.10.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz", - "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==", + "version": "20.10.6", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.6.tgz", + "integrity": "sha512-Vac8H+NlRNNlAmDfGUP7b5h/KA+AtWIzuXy0E6OyP8f1tCLYAtPvKRRDJjAPqhpCb0t6U2j7/xqAuLEebW2kiw==", "dev": true, "optional": true, "requires": { @@ -2356,9 +2356,9 @@ } }, "chromium-bidi": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.1.tgz", - "integrity": "sha512-dcCqOgq9fHKExc2R4JZs/oKbOghWpUNFAJODS8WKRtLhp3avtIH5UDCBrutdqZdh3pARogH8y1ObXm87emwb3g==", + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.2.tgz", + "integrity": "sha512-PbVOSddxgKyj+JByqavWMNqWPCoCaT6XK5Z1EFe168sxnB/BM51LnZEPXSbFcFAJv/+u2B4XNTs9uXxy4GW3cQ==", "dev": true, "requires": { "mitt": "3.0.1", @@ -3154,28 +3154,28 @@ "dev": true }, "puppeteer": { - "version": "21.6.1", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-21.6.1.tgz", - "integrity": "sha512-O+pbc61oj8ln6m8EJKncrsQFmytgRyFYERtk190PeLbJn5JKpmmynn2p1PiFrlhCitAQXLJ0MOy7F0TeyCRqBg==", + "version": "21.7.0", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-21.7.0.tgz", + "integrity": "sha512-Yy+UUy0b9siJezbhHO/heYUoZQUwyqDK1yOQgblTt0l97tspvDVFkcW9toBlnSvSfkDmMI3Dx9cZL6R8bDArHA==", "dev": true, "requires": { - "@puppeteer/browsers": "1.9.0", + "@puppeteer/browsers": "1.9.1", "cosmiconfig": "8.3.6", - "puppeteer-core": "21.6.1" + "puppeteer-core": "21.7.0" } }, "puppeteer-core": { - "version": "21.6.1", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-21.6.1.tgz", - "integrity": "sha512-0chaaK/RL9S1U3bsyR4fUeUfoj51vNnjWvXgG6DcsyMjwYNpLcAThv187i1rZCo7QhJP0wZN8plQkjNyrq2h+A==", + "version": "21.7.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-21.7.0.tgz", + "integrity": "sha512-elPYPozrgiM3phSy7VDUJCVWQ07SPnOm78fpSaaSNFoQx5sur/MqhTSro9Wz8lOEjqCykGC6WRkwxDgmqcy1dQ==", "dev": true, "requires": { - "@puppeteer/browsers": "1.9.0", - "chromium-bidi": "0.5.1", + "@puppeteer/browsers": "1.9.1", + "chromium-bidi": "0.5.2", "cross-fetch": "4.0.0", "debug": "4.3.4", "devtools-protocol": "0.0.1203626", - "ws": "8.15.1" + "ws": "8.16.0" } }, "querystringify": { @@ -3539,9 +3539,9 @@ "dev": true }, "ws": { - "version": "8.15.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.15.1.tgz", - "integrity": "sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==", + "version": "8.16.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", + "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", "dev": true, "requires": {} }, diff --git a/src/package.json b/src/package.json index 9be5903ff8f..ad03890ff1d 100644 --- a/src/package.json +++ b/src/package.json @@ -40,7 +40,7 @@ "node-fetch": "3.3.2", "node-watch": "0.7.4", "prettier": "3.1.1", - "puppeteer": "21.6.1", + "puppeteer": "21.7.0", "rainbow-code": "2.1.7", "recursive-readdir": "2.2.3", "run-script-os": "1.1.6", From e6781a1b76b5939b06491a5d5f7b30f73ba946ba Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 18:47:37 +0000 Subject: [PATCH 2/4] Bump jsdom from 23.0.1 to 23.2.0 in /src (#3551) Bumps [jsdom](https://github.com/jsdom/jsdom) from 23.0.1 to 23.2.0. - [Release notes](https://github.com/jsdom/jsdom/releases) - [Changelog](https://github.com/jsdom/jsdom/blob/main/Changelog.md) - [Commits](https://github.com/jsdom/jsdom/compare/23.0.1...23.2.0) --- updated-dependencies: - dependency-name: jsdom dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- src/package-lock.json | 157 +++++++++++++++++++++++++++++++++--------- src/package.json | 2 +- 2 files changed, 126 insertions(+), 33 deletions(-) diff --git a/src/package-lock.json b/src/package-lock.json index fd1db155933..ef888b19bb0 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -11,7 +11,7 @@ "devDependencies": { "ejs": "3.1.9", "fs-extra": "11.2.0", - "jsdom": "23.0.1", + "jsdom": "23.2.0", "node-fetch": "3.3.2", "node-watch": "0.7.4", "prettier": "3.1.1", @@ -25,6 +25,17 @@ "xml-js": "1.6.11" } }, + "node_modules/@asamuzakjp/dom-selector": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-2.0.1.tgz", + "integrity": "sha512-QJAJffmCiymkv6YyQ7voyQb5caCth6jzZsQncYCpHXrJ7RqdYG5y43+is8mnFcYubdOkr7cn1+na9BdFMxqw7w==", + "dev": true, + "dependencies": { + "bidi-js": "^1.0.3", + "css-tree": "^2.3.1", + "is-potential-custom-element-name": "^1.0.1" + } + }, "node_modules/@babel/code-frame": { "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", @@ -339,6 +350,15 @@ "node": ">=10.0.0" } }, + "node_modules/bidi-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz", + "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==", + "dev": true, + "dependencies": { + "require-from-string": "^2.0.2" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -556,16 +576,29 @@ "webidl-conversions": "^3.0.0" } }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/cssstyle": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz", - "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz", + "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==", "dev": true, "dependencies": { "rrweb-cssom": "^0.6.0" }, "engines": { - "node": ">=14" + "node": ">=18" } }, "node_modules/data-uri-to-buffer": { @@ -1136,12 +1169,13 @@ } }, "node_modules/jsdom": { - "version": "23.0.1", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.0.1.tgz", - "integrity": "sha512-2i27vgvlUsGEBO9+/kJQRbtqtm+191b5zAZrU/UezVmnC2dlDAFLgDYJvAEi94T4kjsRKkezEtLQTgsNEsW2lQ==", + "version": "23.2.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.2.0.tgz", + "integrity": "sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==", "dev": true, "dependencies": { - "cssstyle": "^3.0.0", + "@asamuzakjp/dom-selector": "^2.0.1", + "cssstyle": "^4.0.1", "data-urls": "^5.0.0", "decimal.js": "^10.4.3", "form-data": "^4.0.0", @@ -1149,7 +1183,6 @@ "http-proxy-agent": "^7.0.0", "https-proxy-agent": "^7.0.2", "is-potential-custom-element-name": "^1.0.1", - "nwsapi": "^2.2.7", "parse5": "^7.1.2", "rrweb-cssom": "^0.6.0", "saxes": "^6.0.0", @@ -1160,7 +1193,7 @@ "whatwg-encoding": "^3.1.1", "whatwg-mimetype": "^4.0.0", "whatwg-url": "^14.0.0", - "ws": "^8.14.2", + "ws": "^8.16.0", "xml-name-validator": "^5.0.0" }, "engines": { @@ -1208,6 +1241,12 @@ "node": ">=12" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, "node_modules/mime-db": { "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", @@ -1314,12 +1353,6 @@ "node": ">=6" } }, - "node_modules/nwsapi": { - "version": "2.2.7", - "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz", - "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", - "dev": true - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -1570,6 +1603,15 @@ "node": ">=0.10.0" } }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -1705,6 +1747,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/streamx": { "version": "2.15.6", "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.6.tgz", @@ -2066,6 +2117,17 @@ } }, "dependencies": { + "@asamuzakjp/dom-selector": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-2.0.1.tgz", + "integrity": "sha512-QJAJffmCiymkv6YyQ7voyQb5caCth6jzZsQncYCpHXrJ7RqdYG5y43+is8mnFcYubdOkr7cn1+na9BdFMxqw7w==", + "dev": true, + "requires": { + "bidi-js": "^1.0.3", + "css-tree": "^2.3.1", + "is-potential-custom-element-name": "^1.0.1" + } + }, "@babel/code-frame": { "version": "7.22.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", @@ -2313,6 +2375,15 @@ "integrity": "sha512-8PzkB0arJFV4jJWSGOYR+OEic6aeKMu/osRhBULN6RY0ykby6LKhbmuQ5ublvaas5BOwboah5D87nrHyuh8PPA==", "dev": true }, + "bidi-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz", + "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==", + "dev": true, + "requires": { + "require-from-string": "^2.0.2" + } + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2466,10 +2537,20 @@ } } }, + "css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "requires": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + } + }, "cssstyle": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz", - "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz", + "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==", "dev": true, "requires": { "rrweb-cssom": "^0.6.0" @@ -2886,12 +2967,13 @@ } }, "jsdom": { - "version": "23.0.1", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.0.1.tgz", - "integrity": "sha512-2i27vgvlUsGEBO9+/kJQRbtqtm+191b5zAZrU/UezVmnC2dlDAFLgDYJvAEi94T4kjsRKkezEtLQTgsNEsW2lQ==", + "version": "23.2.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.2.0.tgz", + "integrity": "sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==", "dev": true, "requires": { - "cssstyle": "^3.0.0", + "@asamuzakjp/dom-selector": "^2.0.1", + "cssstyle": "^4.0.1", "data-urls": "^5.0.0", "decimal.js": "^10.4.3", "form-data": "^4.0.0", @@ -2899,7 +2981,6 @@ "http-proxy-agent": "^7.0.0", "https-proxy-agent": "^7.0.2", "is-potential-custom-element-name": "^1.0.1", - "nwsapi": "^2.2.7", "parse5": "^7.1.2", "rrweb-cssom": "^0.6.0", "saxes": "^6.0.0", @@ -2910,7 +2991,7 @@ "whatwg-encoding": "^3.1.1", "whatwg-mimetype": "^4.0.0", "whatwg-url": "^14.0.0", - "ws": "^8.14.2", + "ws": "^8.16.0", "xml-name-validator": "^5.0.0" } }, @@ -2942,6 +3023,12 @@ "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", "dev": true }, + "mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, "mime-db": { "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", @@ -3013,12 +3100,6 @@ "integrity": "sha512-RinNxoz4W1cep1b928fuFhvAQ5ag/+1UlMDV7rbyGthBIgsiEouS4kvRayvvboxii4m8eolKOIBo3OjDqbc+uQ==", "dev": true }, - "nwsapi": { - "version": "2.2.7", - "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz", - "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", - "dev": true - }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -3214,6 +3295,12 @@ "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", "dev": true }, + "require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true + }, "requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -3316,6 +3403,12 @@ "dev": true, "optional": true }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + }, "streamx": { "version": "2.15.6", "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.6.tgz", diff --git a/src/package.json b/src/package.json index ad03890ff1d..36f4fe316f7 100644 --- a/src/package.json +++ b/src/package.json @@ -36,7 +36,7 @@ "devDependencies": { "ejs": "3.1.9", "fs-extra": "11.2.0", - "jsdom": "23.0.1", + "jsdom": "23.2.0", "node-fetch": "3.3.2", "node-watch": "0.7.4", "prettier": "3.1.1", From dc6d60f6c431343fd3e39dcf705b487a3bbb3852 Mon Sep 17 00:00:00 2001 From: Sakae Kotaro Date: Wed, 10 Jan 2024 03:49:46 +0900 Subject: [PATCH 3/4] Translation of accessibility chapter to Japanese (#3550) --- src/content/ja/2022/accessibility.md | 791 +++++++++++++++++++++++++++ 1 file changed, 791 insertions(+) create mode 100644 src/content/ja/2022/accessibility.md diff --git a/src/content/ja/2022/accessibility.md b/src/content/ja/2022/accessibility.md new file mode 100644 index 00000000000..c39207ed006 --- /dev/null +++ b/src/content/ja/2022/accessibility.md @@ -0,0 +1,791 @@ +--- +#See https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide#metadata-to-add-at-the-top-of-your-chapters +title: アクセシビリティ +description: 読みやすさ、ナビゲーション、フォーム、メディア、ARIA、アクセシビリティ・アプリを網羅した2022年版ウェブ年鑑のアクセシビリティの章。 +authors: [SaptakS, thibaudcolas, scottdavis99] +reviewers: [shantsis] +analysts: [thibaudcolas] +editors: [dereknahman] +translators: [ksakae1216] +SaptakS_bio: Saptak Sは、ウェブ開発において使いやすさ、セキュリティ、プライバシー、アクセシビリティを重視する、人権に焦点を当てたウェブ開発者です。彼は、The A11Y Project、OnionShare、Wagtailなど、様々なオープンソースプロジェクトのコントリビューター兼メンテナーです。彼のブログはsaptaks.blogで見つけることができます。 +scottdavis99_bio: Scott Davisは、Thoughtworksにおける著者兼デジタルアクセシビリティアドボケートです。彼は、ウェブ開発の最先端・革新的・新興・非伝統的な側面に焦点を当てています。"デジタルアクセシビリティは、単なるコンプライアンスチェックボックス以上のものです。アクセシビリティは革新のためのスプリングボードです。" +thibaudcolas_bio: Thibaud Colasは、アクセシビリティのトピックに焦点を当てたウェブ開発者であり、オープンソースのコントリビューターです。彼は、[Wagtail](https://wagtail.org/) CMSのコアコントリビューターであり、[Django](https://www.djangoproject.com/)のアクセシビリティチームのメンバーでもあります。 +results: https://docs.google.com/spreadsheets/d/1ladaKh6RbtMKQwkccwxDJGQf85KyhfLrtlM_9e9sLH8/ +featured_quote: 良いアクセシビリティは、障害を持つ人だけでなく、すべての人にとって有益です。これはユニバーサルデザインの核心原則の一つです。COVID-19パンデミックが始まって以来、ますます多くの人々がインターネットに依存するようになりました。同様に、アクセシビリティも改善する必要があります。そうでなければ、多くの人々を疎外するリスクがあります。ウェブアクセシビリティの現状はまだ望ましいレベルには達していませんが、今年はサイトのアクセシビリティが全体的に改善されたことが見られました。 +featured_stat_1: 8% +featured_stat_label_1: `prefers-color-scheme` を使用して、ライト/ダークモードに基づいてスタイルを調整するサイト +featured_stat_2: 22.9% +featured_stat_label_2: Lighthouseのカラーコントラスト監査に合格するモバイルサイト +featured_stat_3: 9% +featured_stat_label_3: `:focus-visible` を使用するサイトは、昨年の0.6%に比べて増加 +--- + +## 序章 + +グローバルオンライン人口の27%がモバイルで音声検索を使用しています。Facebookの動画の85%が音声をオフにしてクローズドキャプションをオンで視聴されています。Siri、Alexa、Cortanaなどの音声アシスタントに質問すると、通常、パーソナルコンピューターが存在して以来のスクリーンリーダー技術を使ってウェブページから答えを読み上げます。 + +ソフトウェアの機能が「アクセシビリティ機能」でなくなり、単に私たち全員が使用する「機能」となるのはいつですか？次にスマートフォンをサイレント/バイブレートモードにするとき、とくに聴覚障害/難聴コミュニティのメンバーでない場合、自分自身にその質問をしてみてください。 + +良いアクセシビリティは、障害を持つ人だけでなく、すべての人にとって有益です。これはユニバーサルデザインの核心原則の1つです。ティム・バーナーズ＝リーは「ウェブの力はその普遍性にあります。障害の有無にかかわらず、誰もがアクセスできることが本質的な側面です」と述べています。COVID-19パンデミックが始まって以来、ますます多くの人々がインターネットに依存するようになりました。同様に、アクセシビリティも改善する必要があります。そうでなければ、多くの人々を疎外するリスクがあります。 + +Lighthouseアクセシビリティ監査データの全体的なサイトスコアの中央値は、2020年の80%から2021年には82%へ、そして2022年には83%へと上昇しました。この増加が正しい方向へのシフトを表していることを願っています。 + +ウェブアクセシビリティの現状はまだ望ましいレベルには達していませんが、今年はサイトのアクセシビリティが全体的に改善されたことが見られました。Lighthouseアクセシビリティ監査データの全体的なサイトスコアの中央値は、2020年の80%から2021年には82%へ、そして2022年には83%へと上昇しました。Lighthouseの結果を監査ごとに見ることで、どのような具体的な改善が行われたかを把握できます。 + +{{ figure_markup( + image="lighthouse-audit-improvements-yoy.png", + caption="年ごとのLighthouse監査の改善。", + description="2021年と2022年において、5つの特定のLighthouse監査に合格しているサイトの数を示す棒グラフ。`aria-required-children`は2021年に63%のサイトで合格し、2022年には68%で合格。`aria-tooltip-name`は2021年に29%で合格し、2022年には75%で合格。`definition-list`は2021年に65%で合格し、2022年には68%で合格。`html-has-lang passes`は2021年に81%で合格し、2022年には84%で合格。`object-alt`は2021年に1%で合格し、2022年には20%で合格。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=1480221360&format=interactive", + sheets_gid="1270834582", + sql_file="lighthouse_a11y_audits.sql", +) }} + +Lighthouse監査の報告結果を見ると、41個の自動チェックのうち、35個が2022年に2021年に比べてより多くのサイトで成功裏に合格しました。11個の監査が1%以上の改善を示し、`aria-required-children`、`aria-tooltip-name`、`definition-list`、`html-has-lang`、`object-alt`がとくに顕著な増加を示しています。この増加が正しい方向へのシフトを表していることを願っています。 + +ウェブにおけるアクセシビリティの改善に向けて、実践的なリンクと解決策を提供する形で本章を書こうと試みました。一貫性を保つために、本章では「障害を持つ人々」という人第一の用語を使用していますが、アイデンティティ第一の用語「障害のある人々」も使われていることを認識しています。私たちが用語を選んだことは、どちらの用語がもっとも適切かを指示するものではありません。 + +## 読みやすさ + +ウェブ上の情報やコンテンツの可読性は極めて重要です。コンテンツの可読性に貢献するウェブサイトの要因は数多くあります。これらの要因は、インターネット上の誰もがコンテンツを消費するだけでなく、コンテンツのどの側面によっても害を受けないことを保証します。 + +### カラーコントラスト + +カラーコントラストとは、テキスト、図表、アイコノグラフィー、その他の情報を含む前景がセクションの背景からどれだけ際立っているかを指します。高いカラーコントラストは通常、人々がコンテンツを区別しやすくなることを意味します。 + +Web Content Accessibility Guidelines（WCAG）によって定義される通常サイズのテキスト（24pxまで）の最小コントラスト要件は、AA適合性で4.5:1、AAA適合性で7:1です。ただし、大きなフォントサイズの場合、コントラスト要件は3:1のみであり、大きなテキストは低いコントラストでも可読性が向上します。 + +{{ figure_markup( + image="color-contrast-2019-2020-2021-2022.png", + caption="十分なカラーコントラストを持つサイト。", + description="2019年には22.0%のモバイルサイトが十分なカラーコントラストを持っていたこと、2020年にはわずかに減少して21.1%になり、2020年にはわずかに増加して22.2%になり、2022年にはさらに増加して22.9%になったことを示す棒グラフ。2022年では、デスクトップサイトも22.7%に達しています。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=2111814473&format=interactive", + sheets_gid="1468870242", + sql_file="color_contrast.sql", +) }} + +22.9%のモバイルサイトが十分なテキストのカラーコントラストを持っていることが分かりました。前年比でほぼ1%増加しています。2022年には、デスクトップサイトのデータもあり、22.7%が自動テキストコントラストチェックに合格しています。テキストベースのカラーコントラストに関する問題は、ウェブサイトの構築を開始する前に非常に簡単に検証できるものです。開発者やデザイナーがテキストやグラフィカル要素のカラーコントラストをチェックするのに役立つ複数のツールがあります。以下はその一部です。 + +- ウェブカラーコントラストチェッカー（WebAIM製） +- Figmaプラグイン（Stark製） + +プロジェクトの初めや問題に取り組む際に、カラーコントラスト要件を満たすカラースキームを選択し、ウェブサイト全体で使用するのは良いアイデアです。また、ユーザーが選択できるように、ダークモード、ライトモード、高コントラストモードなどの他のカラーモードを提供することもできます。 + +### ズームとスケーリング + +ズームは、視力が低いユーザーがウェブサイトのテキストをより見やすく表示するためによく使用する機能の1つです。ブラウザにはシステム設定があり、ユーザーがウェブサイトをズームイン/アウトしてスケーリングすることを可能にするツールもあります。[Adrian Roselli](https://twitter.com/aardrian)は、ズームを無効にしないべき[さまざまな理由について詳細に説明](https://adrianroselli.com/2015/10/dont-disable-zoom.html)しています。 + +{{ figure_markup( + image="pages-zooming-scaling-disabled.png", + caption="ズームインとスケーリングが無効になっているページ。", + description="デスクトップサイトの16％とモバイルサイトの18％がスケーリングを無効にし、それぞれ最大スケールを1に設定したのは20％と24％であり、23％と28％はどちらかを使用しています。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=550476172&format=interactive", + sheets_gid="602773443", + sql_file="viewport_zoom_scale.sql", +) }} + +WCAGは、ウェブサイト内のテキストを最低でも200％までリサイズできるようにすることを要件としています。私たちは、デスクトップホームページの23％とモバイルホームページの28％がズームを無効にしようとしていることを発見しました。 + +開発者がズームを無効にした方法は、`` タグに `content` 属性内に `maximum-scale`、`minimum-scale`、`user-scalable=no`、または `user-scalable=0` のような値を追加することです。したがって、これらの値を持つウェブサイトがある場合は、ズームを有効にするために `content` 属性から特定の値を削除してください。 + +{{ figure_markup( + image="pages-zooming-scaling-disabled-by-rank.png", + caption="ランク別にズームとスケーリングが無効になっているページ。", + description="トップ1,000のサイトでは、デスクトップサイトの21％とモバイルサイトの40％がズームとスケーリングを無効にしています。トップ10,000ではそれぞれ25％と36％、トップ100,000では25％と32％、トップミリオンでは24％と29％、そしてすべてのサイトでは23％と28％です。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=1987306037&format=interactive", + sheets_gid="1896788548", + sql_file="viewport_zoom_scale_by_domain_rank.sql", +) }} + +トップ1,000のもっとも訪問されるサイトのうち、デスクトップサイトの21％とモバイルサイトの40％は、ユーザーのズームやスケーリングを無効にしようとするコードを使用して構築されています。これは、ズームが無効になっているサイトの割合がモバイルではデスクトップと比較してほぼ倍になっていることを意味します。どのデバイスでもズームを無効にしないことは非常に重要です。この問題に対処するために、ブラウザは開発者がズームを無効にしようとする試みを上書きし始めています。[Manuel Matuzović](https://twitter.com/mmatuzo)は、ブラウザでのズームの無効化とユーザー設定に関する懸念について語った記事を書いています。[詳細はこちら](https://www.matuzo.at/blog/2022/please-stop-disabling-zoom/)をご覧ください。 + +{{ figure_markup( + image="font-unit-usage.png", + caption="フォント単位の使用。", + description="フォントサイズに `px` が使用されているデスクトップとモバイルページの割合はそれぞれ71％、`em` はそれぞれ15％、`rem` はそれぞれ6％、`%` はデスクトップで4％、モバイルで5％、`` はそれぞれ2％、最後に `pt` はそれぞれ2％です。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=850268795&format=interactive", + sheets_gid="955782036", + sql_file="units_properties.sql", +) }} + +フォントサイズに選択する単位についても考慮すべき点があります。デスクトップのページの71％が `px` を使用しており、`em` と `rem` はそれぞれ15％と6％しか使用していません。したがって、デスクトップでの `px` の使用率は前年比で2％増加し、一方で `em` の使用率は2％減少しました。`font-size` に関しては、ユーザーがブラウザの設定で明示的に大きなまたは小さなデフォルトフォントサイズを選択した場合、`px` を使用すると [スケーリングされない可能性があるため](https://adrianroselli.com/2019/12/responsive-type-and-zoom.html#Update02)、`em` または `rem` などの相対単位を使用することが賢明とされています。 + +### 言語の識別 + +`lang` 属性を使用した言語の識別は、より良いスクリーンリーダーサポートを提供するために重要であり、自動ブラウザ翻訳にも役立ちます。これは、障害を持つ人々を含むすべての人々に役立つ機能のもう1つの良い例です。`lang` 属性がない場合、Chromeの自動ブラウザ翻訳がテキストを誤って翻訳することがよくあります。[Manuel Matuzović](https://www.matuzo.at/blog/lang-attribute/)は、`lang` 属性の不足による自動翻訳の失敗の一例を示しています。 + +{{ figure_markup( + content="83%", + caption="モバイルサイトには有効な `lang` 属性があります。", + classes="big-number", + sheets_gid="420415839", + sql_file="valid_html_lang.sql", +) }} + +83%のモバイルウェブサイトには`lang`属性が存在することは励みになります。さらに、そのグループの中で99%以上が有効な値を持っています。ただし、これはWCAG 2.1のLevel A適合の問題であるため、改善の余地があります。この成功基準を満たすには、`lang`属性を `` タグに設定し、[既知の主要言語タグ](https://www.w3.org/WAI/standards-guidelines/act/rules/bf051a/#known-primary-language-tag) を使用できます。 [`lang`属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) はグローバル属性であり、ウェブページに複数の言語のコンテンツがある場合に他のタグにも設定できます。ウェブサイトの正しい言語を定義することは重要です。ウェブサイトを作成するためにテンプレートをコピーする場合、ウェブサイトのコンテンツで使用される言語とコードで使用される`lang="en"`属性との間に不一致があることがあります。 + +### ユーザーの設定 + +CSS Media Queries Level5仕様 には、ユーザーのアクセシビリティに関するさまざまな設定に使用できる特定のユーザー設定メディアクエリがあります。これには、ユーザーに適したカラースキームやコントラストモードを選択することから、前庭障害を持つ人々に役立つページ上のアニメーションを削減することなどが含まれます。 + +{{ figure_markup( + image="userpreference-media-queries.png", + caption="ユーザー設定メディアクエリ。", + description="`prefers-reduced-motion` メディアクエリを使用するデスクトップサイトが34%、モバイルサイトも34%です。 `prefers-color-scheme` メディアクエリを使用するデスクトップサイトは8%、モバイルサイトも8%です。また、`prefers-contrast` メディアクエリはデスクトップサイトとモバイルサイトの両方で1%が使用しています。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=727284960&format=interactive", + sheets_gid="48059230", + sql_file="media_query_features.sql", +) }} + +モバイルウェブサイトの34%がprefers-reduced-motionを使用していることが判明しました。動きを主要な要素とするウェブサイトは、前庭障害を持つ方にとって問題を引き起こす可能性があるため、prefers-reduced-motionメディアクエリを利用して、これらのアニメーションを調整または削除することが重要です。アクセシビリティに関する素晴らしい リソース も多くあり、アクセス可能なアニメーションの設計 に関する情報も豊富です。 + +デスクトップとモバイルのウェブサイトのうち、8%が `prefers-color-scheme` メディアクエリを使用し、さらに1%が `prefers-contrast` を使用していることが判明しました。これらのメディアクエリは、ユーザーの好みに基づいて ディスプレイモード を調整することで、コンテンツの読みやすさを向上させます。`prefers-color-scheme` はブラウザがユーザーのシステムカラーを検出するのを可能にし、ウェブ開発者はこの情報を使用して明暗モードを提供できます。`prefers-contrast` は、低視力や光過敏症のあるユーザーにとって高コントラストモードが役立つ場合に便利です。 + +### 強制カラーモード + +「強制カラーモード」は、テキストの可読性をカラーコントラストを通じて向上させるためのアクセシビリティ機能です。強制カラーモードでは、ユーザーのオペレーティングシステムがほとんどの色に関連するスタイルの制御を引き継ぎます。一般的なパターンとして背景画像などが完全に無効化されるため、テキストと背景のコントラストが予測可能になります。そのもっともよく知られた実装はWindowsの _ハイコントラストモード_ であり、Windows 11では _コントラスト・テーマ_ に改名されました。これらのテーマは、代替の低コントラストと高コントラストのカラーパレットを提供し、利用可能な[システムカラー](https://developer.mozilla.org/ja/docs/Web/CSS/system-color)のどれかをカスタマイズする能力も提供します。 + +{{ figure_markup( + image="forced-colors-mode.png", + caption="強制色モード。", + description="25%のデスクトップサイトと24%のモバイルサイトが `-ms-high-contrast` メディアクエリを使用し、9%のデスクトップサイトと8%のモバイルサイトが `forced-colors` を使用していることを示す棒グラフです。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=359612516&format=interactive", + sheets_gid="48059230", + sql_file="media_query_features.sql", +) }} + +他のユーザー好みのメディアクエリと同様に、多くのウェブサイトが強制色モードに基づいて調整を行っています。モバイルサイトの8%とデスクトップサイトの9%が `forced-colors` メディアクエリを使用してスタイルを変更していますが、古いIE11専用の `-ms-high-contrast` メディアクエリの使用率はモバイルとデスクトップの両方で20%以上です。 +これによってサイトがどの程度強制色モードをサポートしているかは分かりませんが、`forced-colors` メディアクエリが主要なブラウザでサポートされているのは[2020年から](https://caniuse.com/mdn-css_at-rules_media_forced-colors)であり、Windows以外のデバイスで[強制色モードのエミュレート](https://developer.chrome.com/docs/devtools/rendering/emulate-css?hl=ja)をサポートするのは2022年2月からであることを考えると、データはそれでもなお励みになります。 + +## ナビゲーション + +ウェブサイトをナビゲートする際に重要なのは、ユーザーがさまざまな方法や入力デバイスを使用する可能性があることを覚えておくことです。マウスでページをスクロールする人もいれば、キーボードやスイッチコントロールデバイスを使用する人もいます。また、スクリーンリーダーを使って異なる見出しレベルをブラウズする人もいます。ウェブサイトを作成する際は、人々が選択するデバイスや支援技術に関係なく、ウェブサイトが全員にとって機能するようにすることが重要です。 + +### フォーカス表示 + +キーボードナビゲーションやスイッチコントロールデバイスに主に依存している人々にとって、フォーカス表示は非常に重要です。これらのツールは、運動能力が限られている人々によく使用されます。スイッチコントロールデバイスには、[単一スイッチ](https://www.24a11y.com/2018/i-used-a-switch-control-for-a-day/)から[シップ・アンド・パフデバイス](https://accessibleweb.com/assistive-technologies/assistive-technology-focus-sip-and-puff-devices/)までさまざまな種類があります。目に見えるフォーカススタイルと適切なフォーカス順序は、そのようなユーザーがページ上の位置を視覚的に知るために不可欠です。 + +#### フォーカススタイル + +WCAGは、ページをトラバースする際にどの要素がキーボードフォーカスを持っているかを知るために、すべての対話型コンテンツに目に見えるフォーカスインジケーターを要求しています。事実上、[WCAG 2.2](https://w3c.github.io/wcag/guidelines/22/)では（2022年12月に公開予定）、これは[AAレベルからレベルAに昇格されました](https://w3c.github.io/wcag/guidelines/22/#focus-visible)。 + +{{ figure_markup( + image="pages-overriding-focus-styles.png", + caption="フォーカススタイルを上書きするページ。", + description="デスクトップサイトの90%とモバイルサイトの89%が `:focus` 擬似クラスを使用し、デスクトップサイトの90%とモバイルサイトの91%が `:focus` 擬似クラスを使用してアウトラインを0またはnoneに設定しています。デスクトップサイトの9%とモバイルサイトの10%が `:focus-visible` 擬似クラスを使用しています。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=500239469&format=interactive", + sheets_gid="1548098920", + sql_file="focus_outline_0.sql", +) }} + +私たちは、ウェブサイトの86%が `:focus {outline: 0}` を追加していることを発見しました。これは、フォーカスされた対話型要素にブラウザが使用するデフォルトのアウトラインを削除します。いくつかの場合では、カスタムスタイリングを使って上書きされていますが、常にそうではありません。これにより、ユーザーはどの要素がフォーカスされているかを判断できず、ナビゲーションが妨げられます。[Sara Soueidan](https://twitter.com/SaraSoueidan)には、[WCAG準拠のフォーカスインジケーターをデザインする方法についての素晴らしい記事](https://www.sarasoueidan.com/blog/focus-indicators/)があります。しかし、昨年の0.6%と比較して、9%のウェブサイトが `:focus-visible` を持っているのを見るのは興味深いことです。これは間違いなく正しい方向への一歩です。 + +#### `tabindex` + +`tabindex` は、要素がフォーカスを受け取ることができるかどうかを制御するために追加できる属性です。その値によって、要素はキーボードフォーカスまたは「タブ」順序内で整理されることもあります。 + +私たちは、モバイルウェブサイトの60%とデスクトップウェブサイトの62%が `tabindex` を使用していることを発見しました。`tabindex` 属性はいくつかの異なる目的に使用され、アクセシビリティの問題を引き起こす可能性があります： + +- `tabindex="0"` を追加すると、要素はシーケンシャルなキーボードフォーカス順序に追加されます。対話型であることを意図したカスタム要素やウィジェットは、明示的に割り当てられた `tabindex="0"` が必要です。 +- `tabindex="-1"` は、要素がキーボードフォーカス順序にはないが、JavaScriptを使用してプログラム的にフォーカスできることを意味します。 +- 正の値の `tabindex` は、キーボードフォーカス順序を上書きするために使用され、ほとんどの場合、[WCAG 2.4.3 - フォーカス順序](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html)の失敗につながります。 + +キーボードフォーカス順序に非対話型要素を配置することは、低視力ユーザーに混乱を招く可能性があるため、避けるべきです。 + +{{ figure_markup( + image="tabindex-usage-and-values.png", + caption="`tabindex` の使用。", + description="`tabindex` を使用するページの棒グラフ。デスクトップの場合、`tabindex` を持つページの77%で0が使用されており、モバイルの場合は76%です。負の `tabindex` はどちらも69%、正の `tabindex` はデスクトップで8%、モバイルで7%が使用されています。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSi-gjiB_GnE2U4P7oxN2zqs0DbA2YDPqtsfIm3IBmtph_VE7FTrQvw7L6FsOsJlcZFI6HEULXuKEeb/pubchart?oid=723679746&format=interactive", + sheets_gid="1436895233", + sql_file="tabindex_usage_and_values.sql", +) }} + +すべてのウェブサイトの中で `tabindex` 属性を持つものは、そのうち7%が正の値を持っています。`tabindex` に正の値を使用することは一般的に良くない慣行であり、通常のナビゲーションを妨げる可能性があります。[Karl Groves](https://twitter.com/karlgroves) は、この概念について詳しく説明する [素晴らしい記事](https://karlgroves.com/2018/11/13/why-using-tabindex-values-greater-than-0-is-bad) を書いています。 + +### ランドマーク + +ランドマークは、ウェブページをテーマごとの領域に分けるのに役立ち、支援技術を使用するユーザーがページの構造を理解しやすくし、ウェブサイトをナビゲートしやすくします。たとえば、[ローターメニュー](https://www.afb.org/blindness-and-low-vision/using-technology/cell-phones-tablets-mobile/apple-ios-iphone-and-ipad-2)を使用して異なるページのランドマーク間をナビゲートできますし、[スキップリンク](https://webaim.org/techniques/skipnav/)を使用して `
` を含むランドマークをターゲットに￥できます。ランドマークは、さまざまなHTML5要素を使用して作成できますが、ARIAの最初のルールにしたがって、可能な限りネイティブなHTML5要素を優先すべきです。 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTML5
要素		ARIAロール
相当		要素を
持つページ		ロールを
持つページ		要素または
ロールを持つページ
`
`
`role="main"`31%17%38%
`
`
`role="banner"`63%13%65%
``role="navigation"`63%22%67%
`
`
`role="contentinfo"`65%11%66%
+
+ {{ figure_link( + caption="ランドマーク要素とロールの使用（デスクトップ）。", + sheets_gid="2141972716", + sql_file="landmark_elements_and_roles.sql", + ) }} +
+
+ +ほとんどのウェブページに期待される一般的なランドマークは、`
`、`
`、`