diff --git a/package-lock.json b/package-lock.json index dc45473a..88fef2ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,36 +37,50 @@ "integrity": "sha512-+rEx4jLOeZpUcdvll7jEg/7hNbwYvHWFy4IGW/tk2JdbyB3SJVyIP6arAwzTH/sp/pO9jftfyZnRj4//sLbLvQ==" }, "@textlint/ast-tester": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/@textlint/ast-tester/-/ast-tester-2.1.6.tgz", - "integrity": "sha512-i+UrSKZXs561g8LXsCBkgpNYkgBS3T3Pif2/+DraZmSKpQ2r2D1yCOdH82IGPWWpQ/GMSg6Z0qpLJpjnYz+bpg==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-tester/-/ast-tester-2.2.4.tgz", + "integrity": "sha512-676xpY3/+Xa+tPaiUPaD4sl//+p3xsnSPYLrQjSmHWXX78F3MwAWd/Lek+SCn4wwvf1tCIx0SPtjfOCa6ru8qw==", "requires": { - "@textlint/ast-node-types": "^4.2.5" + "@textlint/ast-node-types": "^4.3.4" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + } } }, "@textlint/ast-traverse": { - "version": "2.1.7", - "resolved": "https://registry.npmjs.org/@textlint/ast-traverse/-/ast-traverse-2.1.7.tgz", - "integrity": "sha512-73Nw0R4TaskPmF36Hop1DZ8AbH339WrGiLQjzbOLaXHaBHQ4hdNw28UMlw4glfPZb7/zvxPcJRtg9AB8F3ZW0g==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/@textlint/ast-traverse/-/ast-traverse-2.2.5.tgz", + "integrity": "sha512-YduGVn7iaUYOfo7TwHO4b0K/qQpj61Ol/M884ck3vetNd0zBxpHO3GpQKW87SZGGtlsBa9v5Suz/yypnlPo3Og==", "requires": { - "@textlint/ast-node-types": "^4.2.5" + "@textlint/ast-node-types": "^4.3.4" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + } } }, "@textlint/feature-flag": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/@textlint/feature-flag/-/feature-flag-3.1.6.tgz", - "integrity": "sha512-R2s027/WG3zhCMHZG79OhRFmkSL2ghwvFYg/W+2VUva5aYC8i9yeuwRyWt7m83tP1qlI+bq7j3S04fyn6yNheg==", + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@textlint/feature-flag/-/feature-flag-3.2.4.tgz", + "integrity": "sha512-ABhbZ5rfkwa/kTBFxVmeMzE1flcnUjLJ5LTZvOaxH/pElfLLN1J4FEmAZTRCvXGAB498II6nkM2CqcikbKzh6A==", "requires": { "map-like": "^2.0.0" } }, "@textlint/fixer-formatter": { - "version": "3.1.13", - "resolved": "https://registry.npmjs.org/@textlint/fixer-formatter/-/fixer-formatter-3.1.13.tgz", - "integrity": "sha512-FXqAJZ+5fLsOZjvFmn1JhCer8gQI4ZQk3R45bXizRJm6DASByPAGGh/MAQxxHSGeR5wR8miO/koxA2BrS8OhAw==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/@textlint/fixer-formatter/-/fixer-formatter-3.2.5.tgz", + "integrity": "sha512-fh6XiLbX9WF8+79g20qb1I85k/Yc9+h7LRccmaLzTBjVQDNYxX5BtfvGsY0Vf5tBZKT2xFZH4eSLH/EWoL3weg==", "requires": { - "@textlint/module-interop": "^1.0.2", - "@textlint/types": "^1.3.1", + "@textlint/module-interop": "^1.1.4", + "@textlint/types": "^1.4.5", "chalk": "^1.1.3", "debug": "^4.1.1", "diff": "^4.0.1", @@ -75,6 +89,21 @@ "strip-ansi": "^6.0.0", "text-table": "^0.2.0", "try-resolve": "^1.0.1" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + }, + "@textlint/types": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@textlint/types/-/types-1.4.5.tgz", + "integrity": "sha512-7pA1rdiw1jsDNGwxupMC6fPlRNAHY6fKZ3s+jAY53o6RroOSR+5qO0sAjJ26lsSOhveH8imZzyyD08dk58IVJQ==", + "requires": { + "@textlint/ast-node-types": "^4.3.4" + } + } } }, "@textlint/get-config-base-dir": { @@ -83,31 +112,46 @@ "integrity": "sha512-J3cG1pl2llYD4ZaZMe0qVgVaHT8RvT+/SW1FHQ8HRceNalMM9O0Y8iIgtl4GGOx4vMghoIPKFVLASw8P8bJ3ZA==" }, "@textlint/kernel": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@textlint/kernel/-/kernel-3.2.1.tgz", - "integrity": "sha512-gMCgP/tAjCX8dGqgu7nhUwaDC/TzDKeRZb9qa50nqbnILRasKplj3lOWn2osZdkScVZPLQp+al1pDh9pU4D+Dw==", - "requires": { - "@textlint/ast-node-types": "^4.2.5", - "@textlint/ast-tester": "^2.1.6", - "@textlint/ast-traverse": "^2.1.7", - "@textlint/feature-flag": "^3.1.6", - "@textlint/types": "^1.3.1", - "@textlint/utils": "^1.0.3", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@textlint/kernel/-/kernel-3.3.6.tgz", + "integrity": "sha512-M2ciQDAo5W6rpRADzGnMXyxhvJ+lnqYG9iHrqmfDQ2MA0VcolWuA37H67/UstqTs3NYaGC7RZkq9FAV//pl30w==", + "requires": { + "@textlint/ast-node-types": "^4.3.4", + "@textlint/ast-tester": "^2.2.4", + "@textlint/ast-traverse": "^2.2.5", + "@textlint/feature-flag": "^3.2.4", + "@textlint/types": "^1.4.5", + "@textlint/utils": "^1.1.4", "debug": "^4.1.1", - "deep-equal": "^1.1.0", + "deep-equal": "^1.1.1", "map-like": "^2.0.0", "structured-source": "^3.0.2" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + }, + "@textlint/types": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@textlint/types/-/types-1.4.5.tgz", + "integrity": "sha512-7pA1rdiw1jsDNGwxupMC6fPlRNAHY6fKZ3s+jAY53o6RroOSR+5qO0sAjJ26lsSOhveH8imZzyyD08dk58IVJQ==", + "requires": { + "@textlint/ast-node-types": "^4.3.4" + } + } } }, "@textlint/linter-formatter": { - "version": "3.1.12", - "resolved": "https://registry.npmjs.org/@textlint/linter-formatter/-/linter-formatter-3.1.12.tgz", - "integrity": "sha512-OEP4pklu01MEgBJrftD9vwe3HFx+jhiEe1JFIgf7GZ4a0fSer5vQWXBo5wHW6WtZtSa+iLBsLC3mI5VMeshzdA==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/@textlint/linter-formatter/-/linter-formatter-3.2.5.tgz", + "integrity": "sha512-oy5RcBWrC2d7r0Mjw/FBH8cvQuOaCB5PeOPG0Pp44Yr5JbIGLXfh84umHQOTCmxfRxw3ccnUfA9wjbxuL8rWOQ==", "requires": { "@azu/format-text": "^1.0.1", "@azu/style-format": "^1.0.0", - "@textlint/module-interop": "^1.0.2", - "@textlint/types": "^1.3.1", + "@textlint/module-interop": "^1.1.4", + "@textlint/types": "^1.4.5", "chalk": "^1.0.0", "concat-stream": "^1.5.1", "debug": "^4.1.1", @@ -116,32 +160,53 @@ "optionator": "^0.8.1", "pluralize": "^2.0.0", "string-width": "^1.0.1", - "string.prototype.padstart": "^3.0.0", "strip-ansi": "^6.0.0", "table": "^3.7.8", "text-table": "^0.2.0", "try-resolve": "^1.0.1", "xml-escape": "^1.0.0" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + }, + "@textlint/types": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@textlint/types/-/types-1.4.5.tgz", + "integrity": "sha512-7pA1rdiw1jsDNGwxupMC6fPlRNAHY6fKZ3s+jAY53o6RroOSR+5qO0sAjJ26lsSOhveH8imZzyyD08dk58IVJQ==", + "requires": { + "@textlint/ast-node-types": "^4.3.4" + } + } } }, "@textlint/markdown-to-ast": { - "version": "6.1.7", - "resolved": "https://registry.npmjs.org/@textlint/markdown-to-ast/-/markdown-to-ast-6.1.7.tgz", - "integrity": "sha512-B0QtokeQR4a9+4q0NQr8T9l7A1fFihTN5Ze57tVgqW+3ymzXEouh8DvPHeNQ4T6jEkAThvdjk95mxAMpGRJ79w==", + "version": "6.2.5", + "resolved": "https://registry.npmjs.org/@textlint/markdown-to-ast/-/markdown-to-ast-6.2.5.tgz", + "integrity": "sha512-9vlQbylGjnnRGev3yt9ntNy6I9FQH3p+MkbijybKnwobK/msoAX9sThDHOMbGM24PsUHxcDjktDlj2vHN/pwDA==", "requires": { - "@textlint/ast-node-types": "^4.2.5", + "@textlint/ast-node-types": "^4.3.4", "debug": "^4.1.1", "remark-frontmatter": "^1.2.0", "remark-parse": "^5.0.0", "structured-source": "^3.0.2", "traverse": "^0.6.6", "unified": "^6.1.6" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + } } }, "@textlint/module-interop": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@textlint/module-interop/-/module-interop-1.0.2.tgz", - "integrity": "sha512-qQ6dqlg4SYywCywimIbkveQZu1MG6ugf6fcJuWDi3D51FbdkSRsMrPusJ1YoW6Y3XBp0ww9fJjXWtlUStGeQsw==" + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@textlint/module-interop/-/module-interop-1.1.4.tgz", + "integrity": "sha512-9M3kYG5nBoD2lhp05sqi6fieNU6rBcf+A8Trp+4d8o5uJ4RRsWeRtAQMWM7Tv15onqIITRq7fm3la7xovVB9KA==" }, "@textlint/regexp-string-matcher": { "version": "1.1.0", @@ -157,27 +222,34 @@ } }, "@textlint/text-to-ast": { - "version": "3.1.7", - "resolved": "https://registry.npmjs.org/@textlint/text-to-ast/-/text-to-ast-3.1.7.tgz", - "integrity": "sha512-CBAEQmiEa2G/wonlLr1HgUtXfTSas6OGGvYGRIRMJweNh5Ilhbz2nM2/9XQMfLQbdn5pGYrAAAQRB2+/9fZ31A==", + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@textlint/text-to-ast/-/text-to-ast-3.2.4.tgz", + "integrity": "sha512-uIiNg52OdQ3Fn8aOYaV7BLW2QakNsmf4doypIwrW4q+gHYQ3jxdPHHkq6RxuYoO112vO40M3zmAoEZmM1qmPhw==", "requires": { - "@textlint/ast-node-types": "^4.2.5" + "@textlint/ast-node-types": "^4.3.4" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + } } }, "@textlint/textlint-plugin-markdown": { - "version": "5.1.12", - "resolved": "https://registry.npmjs.org/@textlint/textlint-plugin-markdown/-/textlint-plugin-markdown-5.1.12.tgz", - "integrity": "sha512-CJWWTaomR22hQD3ogrZujMH1pNN7DqZadmx9CJXxgKwpI/cuD5d2kClwXO3MeLFckJr5HRso7SFN5ebqKu1ycw==", + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@textlint/textlint-plugin-markdown/-/textlint-plugin-markdown-5.2.6.tgz", + "integrity": "sha512-S65wy2npaBLT7pwPPlrN9Pw40hOJsxiW+T6peMJOFEMLRem5qlCIlT+02Wlf0Rrtr6/gKDckpphTUiZT1+xRnQ==", "requires": { - "@textlint/markdown-to-ast": "^6.1.7" + "@textlint/markdown-to-ast": "^6.2.5" } }, "@textlint/textlint-plugin-text": { - "version": "4.1.13", - "resolved": "https://registry.npmjs.org/@textlint/textlint-plugin-text/-/textlint-plugin-text-4.1.13.tgz", - "integrity": "sha512-KQfSYNDt8HSX8ZL/r86N8OrAuQ9LEuevAtGomtfkw0h7Ed/pUfmuYXjht8wYRdysYBa4JyjrXcmqzRAUdkWrag==", + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@textlint/textlint-plugin-text/-/textlint-plugin-text-4.2.6.tgz", + "integrity": "sha512-KCgb5GVjoEDIi37UpQN6kFciiouyATNYrj/JufCeLNJEcVcxSm12EoFRKjpXpXmTOVqZUyGnIDU797z1usAZDw==", "requires": { - "@textlint/text-to-ast": "^3.1.7" + "@textlint/text-to-ast": "^3.2.4" } }, "@textlint/types": { @@ -189,9 +261,9 @@ } }, "@textlint/utils": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@textlint/utils/-/utils-1.0.3.tgz", - "integrity": "sha512-6oGaBKXYpg5Ooph5p32OFdp1dXDUC1z5mpHg2gmQbx6QZjmP4QX+ygBQdNoCq15d1w88+We6koJl0n0WXjItYw==" + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@textlint/utils/-/utils-1.1.4.tgz", + "integrity": "sha512-KmU+kGi7vG5toUhNdLHHPxyVN1mNGcjMVe1tNDEXT1wU/3oqA96bunElrROWHYw5iNt1QVRaIAtNeMVyzyAdVA==" }, "ajv": { "version": "4.11.8", @@ -1443,9 +1515,9 @@ } }, "spdx-correct": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", - "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", + "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", "requires": { "spdx-expression-parse": "^3.0.0", "spdx-license-ids": "^3.0.0" @@ -1500,15 +1572,6 @@ } } }, - "string.prototype.padstart": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string.prototype.padstart/-/string.prototype.padstart-3.1.0.tgz", - "integrity": "sha512-envqZvUp2JItI+OeQ5UAh1ihbAV5G/2bixTojvlIa090GGqF+NQRxbWb2nv9fTGrZABv6+pE6jXoAZhhS2k4Hw==", - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1" - } - }, "string.prototype.trimend": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.0.tgz", @@ -1644,21 +1707,21 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, "textlint": { - "version": "11.6.3", - "resolved": "https://registry.npmjs.org/textlint/-/textlint-11.6.3.tgz", - "integrity": "sha512-tTLLgB49zkJgq6GYDJOT6F31kHLulFjzovCHpN6ycv8d/aPcYl9vv7f/luR33YBQZdnGLtn+j8+G4GJAZ6Uz6w==", - "requires": { - "@textlint/ast-node-types": "^4.2.5", - "@textlint/ast-traverse": "^2.1.7", - "@textlint/feature-flag": "^3.1.6", - "@textlint/fixer-formatter": "^3.1.13", - "@textlint/kernel": "^3.2.1", - "@textlint/linter-formatter": "^3.1.12", - "@textlint/module-interop": "^1.0.2", - "@textlint/textlint-plugin-markdown": "^5.1.12", - "@textlint/textlint-plugin-text": "^4.1.13", - "@textlint/types": "^1.3.1", - "@textlint/utils": "^1.0.3", + "version": "11.7.6", + "resolved": "https://registry.npmjs.org/textlint/-/textlint-11.7.6.tgz", + "integrity": "sha512-o9nhbylWjOErba1gq2bMoJzughp9JK2VbENR+NCiMsNNEiaJ1P8jbnrL3ES86D6e0QMxziR79w5l7VmmdmLjCw==", + "requires": { + "@textlint/ast-node-types": "^4.3.4", + "@textlint/ast-traverse": "^2.2.5", + "@textlint/feature-flag": "^3.2.4", + "@textlint/fixer-formatter": "^3.2.5", + "@textlint/kernel": "^3.3.6", + "@textlint/linter-formatter": "^3.2.5", + "@textlint/module-interop": "^1.1.4", + "@textlint/textlint-plugin-markdown": "^5.2.6", + "@textlint/textlint-plugin-text": "^4.2.6", + "@textlint/types": "^1.4.5", + "@textlint/utils": "^1.1.4", "debug": "^4.1.1", "deep-equal": "^1.1.0", "file-entry-cache": "^5.0.1", @@ -1677,6 +1740,21 @@ "structured-source": "^3.0.2", "try-resolve": "^1.0.1", "unique-concat": "^0.2.2" + }, + "dependencies": { + "@textlint/ast-node-types": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@textlint/ast-node-types/-/ast-node-types-4.3.4.tgz", + "integrity": "sha512-Grq+vJuNH7HCa278eFeiqJvowrD+onMCoG2ctLyoN+fXYIQGIr1/8fo8AcIg+VM16Kga+N6Y1UWNOWPd8j1nFg==" + }, + "@textlint/types": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@textlint/types/-/types-1.4.5.tgz", + "integrity": "sha512-7pA1rdiw1jsDNGwxupMC6fPlRNAHY6fKZ3s+jAY53o6RroOSR+5qO0sAjJ26lsSOhveH8imZzyyD08dk58IVJQ==", + "requires": { + "@textlint/ast-node-types": "^4.3.4" + } + } } }, "textlint-filter-rule-whitelist": { diff --git a/package.json b/package.json index cbc9848a..08326e4b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "dependencies": { "@textlint-ja/textlint-rule-no-synonyms": "^1.1.0", "sudachi-synonyms-dictionary": "^4.1.0", - "textlint": "^11.6.3", + "textlint": "^11.7.6", "textlint-filter-rule-whitelist": "^2.0.0", "textlint-plugin-rst": "^0.1.1", "textlint-rule-ja-hiragana-fukushi": "^1.2.0", diff --git a/requirements.txt b/requirements.txt index dfbe80da..d03d4ad9 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,3 +1,4 @@ sphinx >= 3.0 sphinx_rtd_theme docutils-ast-writer +sphinxcontrib-trimblank diff --git a/source/categories/dynamic_content.rst b/source/categories/dynamic_content.rst index 8359f6d0..f8878c17 100644 --- a/source/categories/dynamic_content.rst +++ b/source/categories/dynamic_content.rst @@ -20,7 +20,7 @@ ガイドライン [MUST] ユーザーの操作によってコンテンツが増減するようなページでは、どの状態においても、最初から順に読み進めた場合にコンテンツの意味が正しく伝わるような順序にDOMツリーを維持する。 チェック内容 - * |behavior|： ページがどの状態でも、スクリーン・リーダーで読み上げさせたとき、内容的、および視覚的に自然な順序で読み上げられる。 + .. include:: ../checks/inc/gl-dynamic-content-maintain-dom-tree.rst .. raw:: html @@ -65,8 +65,7 @@ - モーダル・ダイアログの表示 チェック内容 - * |functionality|： このようなコンポーネントを作らない。 - * |behavior|： Tab/Shift+Tabキーでフォーカスを移動させたときに、このような挙動が発生するコンポーネントがない。 + .. include:: ../checks/inc/gl-dynamic-content-focus.rst .. raw:: html @@ -107,7 +106,7 @@ - ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。 チェック内容 - * |behavior|： ホバーで表示されるすべてのコンテンツは、このガイドラインに挙げられている項目を満たしている。 + .. include:: ../checks/inc/gl-dynamic-content-hover.rst .. raw:: html @@ -121,7 +120,7 @@ 参考 ```` -* :ref:`exp-hover-content` +* :ref:`exp-dynamic-content-hover` 対応するWCAG 2.1の達成基準 ```````````````````````````` @@ -152,8 +151,7 @@ - ステータス・メッセージであることが分かるように適切なマークアップをする。 チェック内容 - * |behavior|： 操作の結果などを伝えるステータス・メッセージは、適切にスクリーン・リーダーで自動的に読み上げられる。 - * |markup|： 操作の結果などを伝えるステータス・メッセージには、適切にaria-live属性が付与されている。 + .. include:: ../checks/inc/gl-dynamic-content-status.rst .. raw:: html @@ -187,7 +185,7 @@ 自動的に変化するコンテンツ ~~~~~~~~~~~~~~~~~~~~~~~~~~ -参考： :ref:`exp-dynamic-content-auto-update` +参考： :ref:`exp-dynamic-content-auto-updated` .. _gl-dynamic-content-pause-movement: @@ -198,7 +196,7 @@ [MUST] 同じページ上に、自動的に開始し5秒以上継続する、点滅やスクロールを伴うコンテンツと、他のコンテンツを一緒に配置しない。 そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。 チェック内容 - * |visual|、|behavior|：点滅、スクロール、動きを伴うコンテンツがない。 + .. include:: ../checks/inc/gl-dynamic-content-pause-movement.rst .. raw:: html @@ -230,7 +228,7 @@ [MUST] 予め設定された間隔で自動的に内容が更新されたり非表示になったりするコンテンツを作らない。 そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。 チェック内容 - * |visual|、|behavior|：自動更新されるコンテンツがない。 + .. include:: ../checks/inc/gl-dynamic-content-pause-refresh.rst .. raw:: html @@ -261,7 +259,7 @@ ガイドライン [MUST] どの1秒間においても3回を超える閃光を放つものがないようにする。 チェック内容 - * |visual|、|behavior|：光り続けているようなコンテンツがない。 + .. include:: ../checks/inc/gl-dynamic-content-no-flashing.rst .. raw:: html @@ -297,7 +295,7 @@ ガイドライン [SHOULD] 緊急性が高い情報を提示する場合を除いて、プッシュ通知や自動更新などによる割り込みを発生させない。 チェック内容 - * |visual|、|behavior|：ユーザーが予期しない形で発生する、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。 + .. include:: ../checks/inc/gl-dynamic-content-no-interrupt.rst .. raw:: html diff --git a/source/categories/form.rst b/source/categories/form.rst index 989c3deb..b42312fd 100644 --- a/source/categories/form.rst +++ b/source/categories/form.rst @@ -20,7 +20,7 @@ ガイドライン [MUST] フォーム・コントロールには、表示されているテキストをラベルとして明示的に関連付ける。 チェック内容 - * |visual|、|behavior|、|markup|： フォーム・コントロールの役割が分かるテキストがラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。（``label`` 要素と ``for`` 属性で適切なラベル付けがされている。） + .. include:: ../checks/inc/gl-form-label.rst .. raw:: html @@ -71,7 +71,7 @@ ガイドライン [MUST] フォーム・コントロールに対して表示されているテキストを用いたラベル付けができない場合は、非表示のテキストを用いてラベルを付ける。 チェック内容 - * |markup|： フォーム・コントロールに対して ``label`` 要素と ``for`` 属性でのラベル付けができていない場合は、 ``aria-label`` 属性を用いて適切なラベルが指定されている。 + .. include:: ../checks/inc/gl-form-hidden-label.rst .. raw:: html @@ -122,7 +122,7 @@ ガイドライン [MUST] 必須項目やエラー表示に際して、色に加えて他の視覚的要素も用いる。 チェック内容 - * |visual|： グレースケール表示にしても、エラーや必須項目を特定できる。 + .. include:: ../checks/inc/gl-form-color-only.rst .. raw:: html @@ -161,10 +161,6 @@ 制限時間 ~~~~~~~~~~~~~~~~~~~~ -.. todo:: 制限時間について、現実的なところを検討する。 - -.. todo:: 制限時間関連のチェック内容を検討する - 参考： :ref:`exp-timing` .. _gl-form-timing: @@ -183,7 +179,7 @@ - 20時間の例外： 制限時間が20時間よりも長い。 チェック内容 - * |functionality|： + .. include:: ../checks/inc/gl-form-timing.rst .. raw:: html @@ -214,7 +210,7 @@ ガイドライン [SHOULD] 入力や操作に制限時間を設けない。 チェック内容 - * |functionality|： + .. include:: ../checks/inc/gl-form-no-timing.rst .. raw:: html @@ -245,7 +241,7 @@ ガイドライン [SHOULD] 制限時間を超過した場合も、データを失うことなくユーザーが操作を継続できるようにする。 チェック内容 - * |functionality|： + .. include:: ../checks/inc/gl-form-continue.rst .. raw:: html @@ -282,7 +278,7 @@ Tabキーによるフォーカスの移動順序 ガイドライン [MUST] Tab/Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。 チェック内容 - * |behavior|、|markup|： Tab/Shift+Tabキーを使ってフォーム・コントロールの間でフォーカスを移動させたとき、レイアウト的にも想定される入力順序的にも自然な順序でフォーカスが移動する。 + .. include:: ../checks/inc/gl-form-tab-order.rst .. raw:: html @@ -326,13 +322,7 @@ Tabキーによるフォーカスの移動順序 ガイドライン [MUST] フォーカスを受け取ったときに、コンテンツの意味を変える、またはページ全体に及ぶような動的な変化を引き起こすフォーム・コントロールやコンポーネントを用いない。 チェック内容 - * |behavior|： フォーカスを受け取ったときに以下のような変化を自動的に引き起こすようなフォーム・コントロールがない: - - - フォームの送信 - - レイアウトの変更 - - ページの遷移 - - モーダル・ダイアログの表示 - - 表示内容の大幅な変更など + .. include:: ../checks/inc/gl-form-dynamic-content-focus.rst .. raw:: html @@ -363,7 +353,7 @@ Tabキーによるフォーカスの移動順序 ガイドライン [MUST] 値が変更されたときに、コンテンツの意味の変更、ページ全体に及ぶような変化、他のフォーム・フィールドの値の変更などを引き起こすようなフォーム・フィールドを作らない、またはそのようなフォーム・フィールドの挙動について、事前にユーザーに知らせる。 チェック内容 - * |behavior|： フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こらない。 + .. include:: ../checks/inc/gl-form-dynamic-content-change.rst .. raw:: html @@ -402,7 +392,7 @@ Tabキーによるフォーカスの移動順序 ガイドライン [MUST] 入力エラーがある場合、エラー箇所とエラー内容をテキストで知らせる。 チェック内容 - * |visual|： フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。 + .. include:: ../checks/inc/gl-form-errors-identify.rst .. raw:: html @@ -433,7 +423,7 @@ Tabキーによるフォーカスの移動順序 ガイドライン [SHOULD] 入力エラーがある場合に、修正方法を示す。 チェック内容 - * |visual|： フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。 + .. include:: ../checks/inc/gl-form-errors-correction.rst .. raw:: html @@ -464,8 +454,7 @@ Tabキーによるフォーカスの移動順序 ガイドライン [SHOULD] 法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。 チェック内容 - * |functionality|： - * .. todo:: SC 3.3.4のチェック内容を検討する + .. include:: ../checks/inc/gl-form-errors-cancel.rst .. raw:: html @@ -505,7 +494,7 @@ Tabキーによるフォーカスの移動順序 - モバイル向けは44 x 44 CSS px以上 チェック内容 - * |visual|： 開発者ツールを用いて、想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。 + .. include:: ../checks/inc/gl-form-target-size.rst .. raw:: html diff --git a/source/categories/icon.rst b/source/categories/icon.rst index fe24fd56..ae7a62e8 100644 --- a/source/categories/icon.rst +++ b/source/categories/icon.rst @@ -23,8 +23,7 @@ ガイドライン [MUST] アイコンにはテキストのラベルを併せて表示し、それが難しい場合はアイコンの目的（表している状態、操作の結果）が分かるような代替テキストを付与する。 チェック内容 - * |visual|、|markup|： すべてのアイコンにはテキストのラベルが付けられていて表示されている。または - * |visual|、|markup|： アイコンの役割や意味が分かるテキスト情報が付与されている。 (例： ``alt`` 属性の使用) + .. include:: ../checks/inc/gl-icon-visible-label.rst .. raw:: html @@ -55,7 +54,7 @@ ガイドライン [MUST] アイコンに付与されているラベルが非表示のテキストの場合は、形状、サイズが同じで色だけが違う複数のアイコンを用いない。 チェック内容 - * |visual|： テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。 + .. include:: ../checks/inc/gl-icon-color-only.rst .. raw:: html @@ -86,7 +85,7 @@ ガイドライン [MUST] 同じ目的で用いられるアイコンには、サイト内で一貫性のある画像とテキストを用いる。 チェック内容 - * |visual|： テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。 + .. include:: ../checks/inc/gl-icon-consistent.rst .. raw:: html @@ -117,7 +116,7 @@ ガイドライン [MUST] 背景色とのコントラスト比を3:1以上にする。 チェック内容 - * |visual|： アイコンの背景色とのコントラスト比が3:1以上になっている。 + .. include:: ../checks/inc/gl-icon-contrast.rst .. raw:: html @@ -158,7 +157,7 @@ - モバイル向けは44 x 44 CSS px以上 チェック内容 - * |visual|： 開発者ツールを用いて、想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。 + .. include:: ../checks/inc/gl-icon-target-size.rst .. raw:: html diff --git a/source/categories/image.rst b/source/categories/image.rst index 5186b1b9..7f005c5b 100644 --- a/source/categories/image.rst +++ b/source/categories/image.rst @@ -21,8 +21,7 @@ ガイドライン [MUST] 画像に関する過不足のない説明をテキストで提供する。 チェック内容 - * |markup|： 画像に関する簡潔で過不足ない説明が ``alt`` 属性や ``aria-label`` 属性で付加されている。かつ - * |markup|： 短いテキストでは充分に説明できない場合には、aria-describedby属性を使うなどして、詳細な説明が提供されている。 + .. include:: ../checks/inc/gl-image-description.rst .. raw:: html @@ -53,7 +52,7 @@ ガイドライン [MUST] 純粋な装飾目的の画像は、スクリーン・リーダーなどの支援技術が無視するようにする。 チェック内容 - * |markup|： 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げさせたとき、画像の存在が分からないようになっている。（空の ``alt`` 属性、 ``role="img"`` などの使用） + .. include:: ../checks/inc/gl-image-decorative.rst .. raw:: html @@ -91,7 +90,7 @@ ガイドライン [MUST] 特定の色に何らかの意味を持たせている場合、形状、模様など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。 チェック内容 - * |visual|： グレースケール表示でも意図が伝わるようになっている。 + .. include:: ../checks/inc/gl-image-color-only.rst .. raw:: html @@ -128,7 +127,7 @@ ガイドライン [MUST] 画像の隣接領域の色とのコントラスト比を3:1以上にする。 チェック内容 - * |visual|： 画像の隣接領域の色とのコントラストが3:1以上になっている。 + .. include:: ../checks/inc/gl-image-adjacent-contrast.rst .. raw:: html @@ -170,7 +169,7 @@ - その他の場合： 4.5:1以上（[SHOULD] 7:1以上） チェック内容 - * |visual|： 画像内のテキストや、重要な情報を伝える視覚的要素の色と背景の色に、十分なコントラストが確保されている。 + .. include:: ../checks/inc/gl-image-text-contrast.rst .. raw:: html diff --git a/source/categories/images_of_text.rst b/source/categories/images_of_text.rst index 7e8c83ba..5b3ae06a 100644 --- a/source/categories/images_of_text.rst +++ b/source/categories/images_of_text.rst @@ -7,7 +7,7 @@ たとえば写真に写っている人物の名札にある名前、図中のテキスト・ラベルなど、文字情報以外の視覚的情報が、コンテンツのより重要な要素となっているようなものは、このガイドラインの対象外です。 -注： WCAG 2.1では ``images of text`` という用語が用いられ、WCAG 2.1日本語訳では「文字画像」という訳語が当てられています。 +注： WCAG 2.1では "images of text" という用語が用いられ、WCAG 2.1日本語訳では「文字画像」という訳語が当てられています。 参考： :ref:`exp-iot-usage` @@ -24,7 +24,7 @@ ガイドライン [MUST] 画像化されたテキストを用いないと実現できない表現が不可欠な場合（例： ロゴ）を除いて、文字情報は画像化せず、テキスト・データで提供する。画像化されたテキストを用いる場合は、以下に示すコントラスト比に関する要件と、代替情報に関する要件を満たす。 チェック内容 - * |visual|、|markup|： 画像化されたテキストは、自社および他社のロゴ、バナー以外には用いられていない。 + .. include:: ../checks/inc/gl-iot-avoid-usage.rst .. raw:: html @@ -62,7 +62,7 @@ ガイドライン [MUST] 画像に含まれる文字情報をテキストでも提供する。 チェック内容 - * |markup|： 画像化されているテキストと同じ内容がスクリーン・リーダーなとで確認できる。 + .. include:: ../checks/inc/gl-iot-provide-text.rst .. raw:: html @@ -98,7 +98,7 @@ ガイドライン [MUST] 隣接領域の色とのコントラスト比を3:1以上にする。 チェック内容 - * |visual|： 画像化されたテキストの隣接領域の色とのコントラストが3:1以上になっている。 + .. include:: ../checks/inc/gl-iot-adjacent-contrast.rst .. raw:: html @@ -140,7 +140,7 @@ - その他の場合： 4.5:1以上（[SHOULD] 7:1以上） チェック内容 - * |visual|： 画像化されたテキストにおいて、画像内のテキストの色と背景の色に十分なコントラストが確保されている。 + .. include:: ../checks/inc/gl-iot-text-contrast.rst .. raw:: html diff --git a/source/categories/input_device.rst b/source/categories/input_device.rst index 2457897b..9be3cc07 100644 --- a/source/categories/input_device.rst +++ b/source/categories/input_device.rst @@ -10,14 +10,15 @@ キーボードのみでの操作を可能にする ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +.. _gl-input-device-keyboard-operable: + [MUST] キーボード操作を可能にする ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ガイドライン [MUST] マウスまたはタッチUIを使わないと実行できないような機能を作らず、キーボードによる操作を可能にする。 チェック内容 - * |behavior|： 何らかの操作を受け付けるすべてのコンポーネント（リンク、ボタン、フォーム・コントロール、ウィジェットなど）にTab/Shift+Tabキーでフォーカスを移動させることができる。かつ - * |behavior|： フォーカスされたコンポーネントに対する操作がキーボードのみで可能。 + .. include:: ../checks/inc/gl-input-device-keyboard-operable.rst .. raw:: html @@ -63,7 +64,7 @@ ガイドライン [MUST] Tab/Shift+Tabキーなどでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。 チェック内容 - * |behavior|： Tab/Shift+Tabキーを使ってリンク、フォーム・コントロール、その他のコンポーネント間でフォーカスを移動させたとき、レイアウト的にも文脈的にも自然な順序でフォーカスが移動する。 + .. include:: ../checks/inc/gl-input-device-focus.rst .. raw:: html @@ -104,7 +105,7 @@ ガイドライン [MUST] キーボードで操作可能な要素について、フォーカス・インジケーターを消さない。 チェック内容 - * |visual|、|behavior|： Tab/Shift+Tabキーでフォーカスを移動したとき、フォーカス可能なすべての要素でフォーカス・インジケーターまたはそれを代替する表示がある。 + .. include:: ../checks/inc/gl-input-device-focus-indicator.rst .. raw:: html @@ -140,7 +141,7 @@ ガイドライン [MUST] 動画プレイヤーなど、特定のコンポーネントにフォーカスした状態から、Tabキー、矢印キー、Escキーで抜け出すことができるようにする。 チェック内容 - * |behavior|： 埋め込まれたコンポーネントにフォーカスがある状態で、Tab/Shift+Tabキー、矢印キー、Escキーのいずれかの操作で、そのコンポーネントの外のリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。 + .. include:: ../checks/inc/gl-input-device-no-trap.rst .. raw:: html @@ -175,8 +176,6 @@ 参考： :ref:`exp-input-device-various` -.. _gl-input-device-keyboard-operable: - .. _gl-input-device-use-up-event: [MUST] ダウン・イベントをトリガーにしない @@ -185,7 +184,7 @@ ガイドライン [MUST] クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベントを使わず、アップ・イベントやクリック・イベントを使い、誤った操作を中断できるようにする。 チェック内容 - * |behavior|： マウス操作を受け付けるコンポーネント上にマウス・ポインターがある状態でマウス・ボタンを押下し、マウス・ポインターをそのコンポーネントから外したうえでボタンを放した場合、その機能が実行されない。 + .. include:: ../checks/inc/gl-input-device-use-up-event.rst .. raw:: html @@ -219,8 +218,7 @@ ガイドライン [MUST] キーボード以外の特定の入力ディバイスを使用しないと実行できない機能がない。 チェック内容 - * |functionality|：特定の入力ディバイスで発生するイベントのみをトリガーにした機能がない。かつ - * |functionality|：使用できる入力ディバイスを、特定の時点で検出されたものに限定していない。 + .. include:: ../checks/inc/gl-input-device-independent.rst .. raw:: html @@ -264,9 +262,7 @@ - 操作対象にフォーカスがあるときのみショートカットキーが有効になるようにする。 チェック内容 - * |functionality|、|behavior|： プロダクト側でショートカットキーを提供している場合、ショートカットキーを無効にする設定がある。または - * |functionality|、|behavior|： ショートカットキーの割り当て変更ができる。または - * |functionality|、|behavior|： 操作対象のコンポーネントからフォーカスを外した状態でショートカットキーを押してもなにも起こらない。 + .. include:: ../checks/inc/gl-input-device-shortcut-keys.rst .. raw:: html diff --git a/source/categories/link.rst b/source/categories/link.rst index dfd42f6e..5b291dd6 100644 --- a/source/categories/link.rst +++ b/source/categories/link.rst @@ -22,7 +22,7 @@ ガイドライン [MUST] クリッカブルであることを、色だけで表現しない。 チェック内容 - * |visual|： グレースケール表示にしたとき、どの部分がリンクか判別できる。（例： リンクに下線があるなど） + .. include:: ../checks/inc/gl-link-color-only.rst .. raw:: html @@ -59,8 +59,7 @@ ガイドライン [MUST] リンク・テキスト（``a`` 要素の中身、アイコンのラベルなど）は、そのリンクの目的を判断できるものにする。 チェック内容 - * |visual|： 「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または - * |visual|： リンク・テキストの意図がマークアップで明確になっている。（事例参照） + .. include:: ../checks/inc/gl-link-text.rst .. raw:: html @@ -110,7 +109,7 @@ ガイドライン [MUST] 同じ機能を実行するリンクは、サイト内で一貫性のあるリンク・テキストを付与する。 チェック内容 - * |visual|： 同じ目的で設置されているリンクには、サイト内で一貫したリンク・テキストが用いられている。 + .. include:: ../checks/inc/gl-link-consistent-text.rst .. raw:: html @@ -141,7 +140,7 @@ ガイドライン [MUST] Tab/Shift+Tabキーでフォーカスを移動させたとき、コンテンツの意味に合った適切な順序でフォーカスを移動させる。 チェック内容 - * |behavior|： Tab/Shift+Tabキーを使ってリンク間でフォーカスを移動させたとき、レイアウト的にも文脈的にも自然な順序でフォーカスが移動する。 + .. include:: ../checks/inc/gl-link-tab-order.rst .. raw:: html diff --git a/source/categories/login_session.rst b/source/categories/login_session.rst index c8d0ca1d..936c8d45 100644 --- a/source/categories/login_session.rst +++ b/source/categories/login_session.rst @@ -3,10 +3,6 @@ ログイン・セッション ---------------------------------------- -.. todo:: 制限時間について、現実的なところを検討する。 - -.. todo:: 制限時間のチェック内容を検討 - これらのガイドラインは、ログイン・セッション管理に関するものです。 .. _login-session-timeout: @@ -31,7 +27,7 @@ - 20時間の例外： タイムアウトが20時間よりも長い。 チェック内容 - * |functionality|： + .. include:: ../checks/inc/gl-login-session-timing.rst .. raw:: html @@ -62,7 +58,7 @@ ガイドライン [SHOULD] ログイン・セッションにタイムアウトを設けない。 チェック内容 - * |functionality|： + .. include:: ../checks/inc/gl-login-session-no-timing.rst .. raw:: html @@ -93,7 +89,7 @@ ガイドライン [SHOULD] ログイン・セッションが切れた場合は、再認証後でもデータを失うことなくユーザーが操作を継続できるようにする。 チェック内容 - * |functionality|： + .. include:: ../checks/inc/gl-login-session-continue.rst .. raw:: html diff --git a/source/categories/markup.rst b/source/categories/markup.rst index c4c15dea..c6d9e208 100644 --- a/source/categories/markup.rst +++ b/source/categories/markup.rst @@ -20,7 +20,7 @@ ガイドライン [MUST] 文書構造などのセマンティクスを表す適切なマークアップをする。 チェック内容 - * |markup|： 見出し、段落、箇条書きなどが適切にマークアップされている。（事例参照） + .. include:: ../checks/inc/gl-markup-semantics.rst .. raw:: html @@ -37,7 +37,6 @@ 参考 ```` -* .. todo:: セマンティクス事例集を作ってリンク * :ref:`exp-markup-semantics` 対応するWCAG 2.1の達成基準 @@ -60,7 +59,7 @@ ガイドライン [MUST] 文法的に正しい、仕様に準拠したマークアップを行う。 チェック内容 - * |markup|： validatorやlinterでチェックが通る。 + .. include:: ../checks/inc/gl-markup-valid.rst .. raw:: html @@ -107,7 +106,7 @@ - 支援技術を含むユーザー・エージェントが、コンポーネントの状態、プロパティー、ユーザーが設定可能な値を設定でき、これらの変更を認知できるようにする。 チェック内容 - * |markup|： Reactコンポーネントなど、標準的なHTML以外を用いて実装されているコンポーネントについて、スクリーン・リーダーで問題なく利用できることを確認している。 + .. include:: ../checks/inc/gl-markup-component.rst .. raw:: html diff --git a/source/categories/multimedia.rst b/source/categories/multimedia.rst index 5feac5c4..e62daf50 100644 --- a/source/categories/multimedia.rst +++ b/source/categories/multimedia.rst @@ -18,8 +18,7 @@ ガイドライン [MUST] 音声・映像コンテンツの存在を認知できるようにする。 チェック内容 - * |visual|、|markup|： ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または - * |visual|、|markup|： 前後のテキストから、そこにプレイヤーがあることが推測できる。 + .. include:: ../checks/inc/gl-multimedia-perceivable.rst .. raw:: html @@ -60,8 +59,7 @@ ガイドライン [MUST] 3秒以上の長さの音声を自動再生しない。 チェック内容 - * |visual|： 自動再生される音声はない。または - * |visual|： 自動再生される音声は3秒以内の長さになっている。 + .. include:: ../checks/inc/gl-multimedia-operable.rst .. raw:: html @@ -98,8 +96,7 @@ [MUST] 自動的に開始し5秒以上継続する、アニメーションや動画のなどの視覚的な動きを伴うコンテンツを作らない。 そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。 チェック内容 - * |visual|、|behavior|：自動的に開始し5秒以上続く動画、アニメーションがない。または - * 動画やアニメーションを呈し、一時停止、または非表示にすることができる。 + .. include:: ../checks/inc/gl-multimedia-pause-movement.rst .. raw:: html @@ -130,7 +127,7 @@ ガイドライン [MUST] 音声/動画のプレイヤーをページに埋め込む場合、そのコンポーネントにフォーカスした状態から、Tabキー、矢印キー、Escキーなどで抜け出すことができるようにする。 チェック内容 - * |behavior|： 音声/動画プレイヤーにフォーカスがある状態で、Tab/Shift+Tabキー、矢印キー、Escキーのいずれかの操作で、フォーカスをプレイヤーから外すことができる。 + .. include:: ../checks/inc/gl-multimedia-no-trap.rst .. raw:: html @@ -174,7 +171,7 @@ ガイドライン [MUST] テキスト情報の代替情報として音声・映像コンテンツを用い、そのコンテンツがテキスト情報の代替であることを明示する。 チェック内容 - * |visual|： 音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。 + .. include:: ../checks/inc/gl-multimedia-text-alternative.rst .. raw:: html @@ -223,7 +220,7 @@ ただしライブ配信の場合は [SHOULD] チェック内容 - * |visual|： 音声を含むコンテンツには、同期したキャプションが提供されている。 + .. include:: ../checks/inc/gl-multimedia-caption.rst .. raw:: html @@ -261,9 +258,7 @@ ガイドライン [MUST] テキストの代替情報ではない音声・映像コンテンツにおいて、映像がある収録済みコンテンツの場合、映像の内容が分かるような同期した音声情報、またはテキストによる説明を提供する。 チェック内容 - * |visual|： 動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または - * |visual|： 動画には音声解説が含まれている。または - * |visual|： 映像に関するテキストによる説明が提供されている。 + .. include:: ../checks/inc/gl-multimedia-video-description.rst .. raw:: html @@ -296,7 +291,7 @@ ガイドライン [MUST] テキストの代替情報ではない、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。 チェック内容 - * |visual|： 映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。 + .. include:: ../checks/inc/gl-multimedia-transcript.rst .. raw:: html @@ -329,7 +324,7 @@ ガイドライン [SHOULD] 収録済みコンテンツの音声情報には、同期した手話通訳を提供する。 チェック内容 - * |visual|： 動画の音声情報には同期した手話通訳が提供されている。 + .. include:: ../checks/inc/gl-multimedia-sign-language.rst .. raw:: html @@ -360,8 +355,7 @@ ガイドライン [SHOULD] 映像がなく音声のみの収録済みコンテンツの場合で主たる発話音声があるとき、背景音がない、もしくは主たる発話音声に対して背景音の音量が少なくとも20db小さい状態にする。 チェック内容 - * |visual|： 音声コンテンツについて、充分に聴き取りやすい。 - + .. include:: ../checks/inc/gl-multimedia-background-sound.rst .. raw:: html diff --git a/source/categories/page.rst b/source/categories/page.rst index a3645854..27466c07 100644 --- a/source/categories/page.rst +++ b/source/categories/page.rst @@ -20,8 +20,7 @@ ガイドライン [MUST] ``title`` 要素に、ページの主題又は目的を説明したタイトルを 記述する。 チェック内容 - * |behavior|：そのページの目的を示すタイトルが付けられている。（ブラウザーのタイトルバー/タブバーに表示されている。） - * |behavior|： 複数のページに同じタイトルが付いていない。 + .. include:: ../checks/inc/gl-page-title.rst .. raw:: html @@ -55,8 +54,7 @@ ガイドライン [MUST] ページ内のリージョンを示すマークアップをする。 チェック内容 - * |markup|： ``header``, ``nav``, ``main``, ``footer`` の各要素が適切に用いられている。または - * |markup|： ``role`` 属性で適切にリージョンが明示されている。 + .. include:: ../checks/inc/gl-page-landmark.rst .. raw:: html @@ -91,8 +89,7 @@ ガイドライン [MUST] 本文が始まる位置を示すマークアップをする。 チェック内容 - * |markup|： ``main`` 要素が本文の開始位置を反映している。 - * |markup|： 本文やその画面の先頭部分に適切なレベルの ``h?`` 要素のテキストがある。 + .. include:: ../checks/inc/gl-page-markup-main.rst .. raw:: html @@ -104,7 +101,7 @@ 視覚障害者が、容易に本文の先頭を見つけられるようにする。 - 多くのスクリーン・リーダーには、リージョン間を移動する機能、見出し間を移動する機能がある。 -- スクリーン・リーダーのユーザーは、リージョン間を移動する機能で ``main`` 要素の先頭に移動したり、見出し間う移動する機能で本文の直前に移動して、迅速に本文を読む始めることができる。 +- スクリーン・リーダーのユーザーは、リージョン間を移動する機能で ``main`` 要素の先頭に移動したり、見出し間を移動する機能で本文の直前に移動して、迅速に本文を読む始めることができる。 対応するWCAG 2.1の達成基準 @@ -127,7 +124,7 @@ ガイドライン [MUST] 最初から順に読み進めた場合に、コンテンツの意味が正しく伝わるような順序でHTMLの各要素を記述する。 チェック内容 - * |behavior|、|markup|： スクリーン・リーダーで読み上げさせたとき、内容的、および視覚的に自然な順序で読み上げられる。 + .. include:: ../checks/inc/gl-page-markup-order.rst .. raw:: html @@ -161,7 +158,7 @@ ガイドライン [SHOULD] コンテンツを適切にセクション分けし、 ``h?`` 要素を使って見出しを付ける。 チェック内容 - * |visual|、|markup|： ページ内の機能や内容の区切り、本分の先頭部分などに適切に見出しが配置されていて、スクリーン・リーダーが見出しとして認識する。 + .. include:: ../checks/inc/gl-page-headings.rst .. raw:: html @@ -200,7 +197,7 @@ ガイドライン [MUST] 特定の画面方向（縦置き/横置き）での利用を強制しない。 チェック内容 - * |visual|、|behavior|： 画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。 + .. include:: ../checks/inc/gl-page-orientation.rst .. raw:: html @@ -243,8 +240,7 @@ ガイドライン [MUST] ナビゲーション・メニューなど、複数のページに共通して用いられるコンポーネントは、すべてのページで同じ出現順序にし、コンポーネント内でのリンクの出現順序も同じにする。 チェック内容 - * |visual|、|markup|： グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページで用いられているコンポーネントは、すべてのページで同じ出現順序になっている。かつ - * |visual|、|markup|： これらのコンポーネント内のリンクやボタンの出現順序はすべてのページで同じになっている。 + .. include:: ../checks/inc/gl-page-consistent-navigation.rst .. raw:: html @@ -277,7 +273,7 @@ ガイドライン [SHOULD] そのページへの到達手段を複数提供する。ただし、そのページが何らかの手順の実行の過程や結果としてしか表示されない場合は除く。 チェック内容 - * |functionality|： そのページが複数の手段で到達できるようになっている。（事例有り） + .. include:: ../checks/inc/gl-page-redundant-navigation.rst .. raw:: html @@ -299,9 +295,7 @@ 例 `` -- ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。 -- 特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。 -- ヘルプ・ページ中のリンクからも遷移できる。 +.. include:: ../checks/inc/0811-example.rst .. raw:: html @@ -315,8 +309,7 @@ ガイドライン [SHOULD] そのページが、サイト構造のどこに位置しているかが分かるようにする。 チェック内容 - * |functionality|、|markup|： いわゆるパンくずリストで現在位置が明示されている。 - * |functionality|、|markup|： ``aria-current`` 属性で現在位置が明示されている。 + .. include:: ../checks/inc/gl-page-location.rst .. raw:: html diff --git a/source/categories/text.rst b/source/categories/text.rst index 38c57b46..18bfe5bf 100644 --- a/source/categories/text.rst +++ b/source/categories/text.rst @@ -20,7 +20,7 @@ ガイドライン [MUST] 特定の感覚だけを前提とした表現を用いない。 チェック内容 - * |visual|： 形状、色、大きさ、視覚的な位置、方向、音などが分からないと理解できないような説明をしていない。（例示参照） + .. include:: ../checks/inc/gl-text-multiple-modality.rst .. raw:: html @@ -42,14 +42,7 @@ 例 `` -避けるべき表現： - * 赤字の項目は必須項目です - * 右の表を参照してください - * 青いボタンを押してください -問題のない表現： - * 赤い※印のついた項目は必須項目です - * 右の表（表3）を参照してください - * 青い「保存」ボタンを押してください +.. include:: ../checks/inc/0032-example.rst .. raw:: html @@ -63,7 +56,7 @@ ガイドライン [MUST] 強調、引用など、何らかの意図を文字色を変えることによって表現している場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。 チェック内容 - * |visual|： テキストはグレースケール表示でも意図が伝わるような文言になっている。 + .. include:: ../checks/inc/gl-text-color-only.rst .. raw:: html @@ -100,7 +93,7 @@ ガイドライン [MUST] 主題又は目的を説明する見出しを付ける。 チェック内容 - * |visual|： 見出し、画像やフォーム・コントロールに付くラベルは、内容を適切に示す文言になっている。 + .. include:: ../checks/inc/gl-text-heading-label.rst .. raw:: html @@ -143,7 +136,7 @@ ガイドライン [MUST] html要素に適切にlang属性を指定する。 チェック内容 - * |markup|： 日本語のページには、 ```` の記述がある。 + .. include:: ../checks/inc/gl-text-page-lang.rst .. raw:: html @@ -174,7 +167,7 @@ ガイドライン [SHOULD] 段落単位など、比較的長いテキストの言語がhtml要素のlang属性で指定したものと異なる場合は、その部分に対して適切にlang属性を指定する。 チェック内容 - * |behavior|、|markup|： 複数の言語が含まれているテキストについて、iOS VoiceOverのように多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。 + .. include:: ../checks/inc/gl-text-phrase-lang.rst .. raw:: html @@ -212,7 +205,7 @@ ガイドライン [MUST] コンテンツや機能を損なうことなくブラウザーのズーム機能で200パーセントまで拡大できるようにする。 チェック内容 - * |visual|、|behavior|： 200パーセントまで拡大しても、テキストの理解を妨げるようなレイアウト崩れが起こらない。 + .. include:: ../checks/inc/gl-text-zoom.rst .. raw:: html @@ -243,7 +236,7 @@ ガイドライン [SHOULD] 4倍に拡大表示したときでも、縦スクロールを前提としたコンテンツては横スクロールが、横スクロールを前提としたコンテンツでは縦スクロールが必要にならないようにする。 チェック内容 - * |visual|、|behavior|： 4倍の拡大表示をしたときにも適切にリフローされ、読み取れない内容や利用できない機能がない。 + .. include:: ../checks/inc/gl-text-zoom-reflow.rst .. raw:: html @@ -279,7 +272,7 @@ ガイドライン [MUST] ユーザーがline-heightを1.5em以上、段落感の空白を2em以上、letter-spacingを0.12em以上に変更し、その他のプロパティーを一切変更していない状況において、コンテンツおよび機能に損失が生じないようにする。 チェック内容 - * |behavior|： line-heightを1.5em以上、段落感の空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を途中で読めなくなるなど、コンテンツおよび機能に損失が生じない。 + .. include:: ../checks/inc/gl-text-customize.rst .. raw:: html @@ -320,7 +313,7 @@ - その他の場合： 4.5:1以上（[SHOULD] 7:1以上） チェック内容 - * |visual|： テキストは、文字色と背景色に十分なコントラストが確保されている。 + .. include:: ../checks/inc/gl-text-contrast.rst .. raw:: html diff --git a/source/checks/inc/0032-example.rst b/source/checks/inc/0032-example.rst new file mode 100644 index 00000000..0e4d9e42 --- /dev/null +++ b/source/checks/inc/0032-example.rst @@ -0,0 +1,9 @@ + +避けるべき表現 + * 赤字の項目は必須項目です + * 右の表を参照してください + * 青いボタンを押してください +問題のない表現 + * 赤い※印のついた項目は必須項目です + * 右の表（表3）を参照してください + * 青い「保存」ボタンを押してください \ No newline at end of file diff --git a/source/checks/inc/0811-example.rst b/source/checks/inc/0811-example.rst new file mode 100644 index 00000000..444e2a98 --- /dev/null +++ b/source/checks/inc/0811-example.rst @@ -0,0 +1,4 @@ + +* ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。 +* 特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。 +* ヘルプ・ページ中のリンクからも遷移できる。 \ No newline at end of file diff --git a/source/checks/inc/allchecks.rst b/source/checks/inc/allchecks.rst new file mode 100644 index 00000000..a20b675d --- /dev/null +++ b/source/checks/inc/allchecks.rst @@ -0,0 +1,1708 @@ + +.. _check-0001: + +チェックID: 0001 +~~~~~~~~~~~~~~~~~~ + +充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + +* アイコンと背景色 +* 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 +* 画像および画像化されたテキストとその隣接領域 +* テキストと背景色 + +対象 + デザイン +関連ガイドライン + * アイコン： :ref:`gl-icon-contrast` + * 画像： :ref:`gl-image-adjacent-contrast` + * 画像： :ref:`gl-image-text-contrast` + * 画像化されたテキスト： :ref:`gl-iot-adjacent-contrast` + * 画像化されたテキスト： :ref:`gl-iot-text-contrast` + * テキスト： :ref:`gl-text-contrast` +参考情報 + * :ref:`exp-check-contrast` + * :ref:`exp-contrast` + + +.. _check-0021: + +チェックID: 0021 +~~~~~~~~~~~~~~~~~~ + +充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + +* アイコンと背景色 +* 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 +* 画像および画像化されたテキストとその隣接領域 +* テキストと背景色 + +対象 + プロダクト +関連ガイドライン + * アイコン： :ref:`gl-icon-contrast` + * 画像： :ref:`gl-image-adjacent-contrast` + * 画像： :ref:`gl-image-text-contrast` + * 画像化されたテキスト： :ref:`gl-iot-adjacent-contrast` + * 画像化されたテキスト： :ref:`gl-iot-text-contrast` + * テキスト： :ref:`gl-text-contrast` +参考情報 + * :ref:`exp-check-contrast` + * :ref:`exp-contrast` + + +.. _check-0031: + +チェックID: 0031 +~~~~~~~~~~~~~~~~~~ + +グレイスケール表示でも利用に支障が出ない: + +* リンク箇所を判別できる +* 画像、テキストの意図が伝わる +* 入力フォームの必須項目、エラーを認知できる + +対象 + デザイン +関連ガイドライン + * リンク： :ref:`gl-link-color-only` + * 画像： :ref:`gl-image-color-only` + * テキスト： :ref:`gl-text-color-only` + * フォーム： :ref:`gl-form-color-only` +参考情報 + * :ref:`exp-grayscale` + + +.. _check-0032: + +チェックID: 0032 +~~~~~~~~~~~~~~~~~~ + +形状、色、大きさ、視覚的な位置、方向、音などが分からないと理解できないような説明をしていない。 + +例： + +避けるべき表現 + * 赤字の項目は必須項目です + * 右の表を参照してください + * 青いボタンを押してください +問題のない表現 + * 赤い※印のついた項目は必須項目です + * 右の表（表3）を参照してください + * 青い「保存」ボタンを押してください + +対象 + デザイン +関連ガイドライン + * テキスト： :ref:`gl-text-multiple-modality` +参考情報 + * :ref:`exp-color-only` + + +.. _check-0051: + +チェックID: 0051 +~~~~~~~~~~~~~~~~~~ + +グレイスケール表示でも利用に支障が出ない: + +* リンク箇所を判別できる +* 画像、テキストの意図が伝わる +* 入力フォームの必須項目、エラーを認知できる + +対象 + プロダクト +関連ガイドライン + * リンク： :ref:`gl-link-color-only` + * 画像： :ref:`gl-image-color-only` + * テキスト： :ref:`gl-text-color-only` + * フォーム： :ref:`gl-form-color-only` +参考情報 + * :ref:`exp-grayscale` + + +.. _check-0071: + +チェックID: 0071 +~~~~~~~~~~~~~~~~~~ + +マウス・ボタンのdownイベントをトリガーにしていない。 + +対象 + コード +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-use-up-event` +参考情報 + * :ref:`exp-input-device-various` + + +.. _check-0081: + +チェックID: 0081 +~~~~~~~~~~~~~~~~~~ + +マウス・クリックを受け付けるリンクやボタンなどは、マウス・ボタンを押下した状態でマウス・ポインターを外し、マウス・ボタンを放した場合、その機能が実行されない。（ドラッグ&ドロップは対象外） + +対象 + プロダクト +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-use-up-event` +参考情報 + * :ref:`exp-input-device-various` + + +.. _check-0091: + +チェックID: 0091 +~~~~~~~~~~~~~~~~~~ + +ホバーで表示されるすべてのコンテンツは、以下のすべてを満たしている: + +* ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。（ESCキーで消える、など） +* ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。 +* ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。 + +対象 + デザイン +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-hover` +参考情報 + * :ref:`exp-dynamic-content-hover` + + +.. _check-0111: + +チェックID: 0111 +~~~~~~~~~~~~~~~~~~ + +ホバーで表示されるすべてのコンテンツは、以下のすべてを満たしている: + +* ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。（ESCキーで消える、など） +* ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。 +* ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。 + +対象 + プロダクト +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-hover` +参考情報 + * :ref:`exp-dynamic-content-hover` + + +.. _check-0141: + +チェックID: 0141 +~~~~~~~~~~~~~~~~~~ + +ショートカットキーを提供していて、それが画面のどこにフォーカスがあっても作動する仕様である場合、以下のいずれかを満たしている： + +* ユーザーがショートカットキーを無効にできる +* ユーザーがショートカットキーの割当を変更できる + +対象 + プロダクト +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-shortcut-keys` +参考情報 + * :ref:`exp-input-device-various` + + +.. _check-0151: + +チェックID: 0151 +~~~~~~~~~~~~~~~~~~ + +デフォルトのフォーカス・インジケーターを用いない場合、代替となるフォーカス・インジケーターを明示している。 + +対象 + デザイン +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-focus-indicator` +参考情報 + * :ref:`exp-tab-order-check` + + +.. _check-0152: + +チェックID: 0152 +~~~~~~~~~~~~~~~~~~ + +Tab/Shift+Tabキーでフォーカスを移動しているときに、以下のような変化が引き起こされない： + +* フォームの送信 +* レイアウトの変更 +* ページの遷移 +* モーダル・ダイアログの表示 +* 表示内容の大幅な変更、など + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-dynamic-content-focus` + * 動的コンテンツ： :ref:`gl-dynamic-content-focus` +参考情報 + * :ref:`exp-tab-order-check` + * :ref:`exp-form-dynamic-content` + + +.. _check-0171: + +チェックID: 0171 +~~~~~~~~~~~~~~~~~~ + +Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている： + +* フォーカス・インジケーターまたはそれを代替する表示がある +* 自動的に次のような挙動が発生しない： + + - フォームの送信 + - レイアウトの変更 + - ページの遷移 + - モーダル・ダイアログの表示 + - 表示内容の大幅な変更など + +対象 + プロダクト +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-focus-indicator` + * フォーム： :ref:`gl-form-dynamic-content-focus` + * 動的コンテンツ： :ref:`gl-dynamic-content-focus` +参考情報 + * :ref:`exp-tab-order-check` + * :ref:`exp-form-dynamic-content` + + +.. _check-0172: + +チェックID: 0172 +~~~~~~~~~~~~~~~~~~ + +Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。 + +* リンクとボタン +* フォーム・コントロール +* その他、マウスやキーボードによる操作を受け付けるすべてのもの + +対象 + プロダクト +関連ガイドライン + * リンク： :ref:`gl-link-tab-order` + * 入力ディバイス： :ref:`gl-input-device-focus` + * 入力ディバイス： :ref:`gl-input-device-keyboard-operable` + * フォーム： :ref:`gl-form-tab-order` +参考情報 + * :ref:`exp-tab-order-check` + * :ref:`exp-input-device-various` + + +.. _check-0201: + +チェックID: 0201 +~~~~~~~~~~~~~~~~~~ + +動画プレイヤーのような、何らかの機能を提供するためにページ中に埋め込まれているプログラムなどにフォーカスがある状態のとき、Tab, Shift+Tab, 矢印キー、ESCキーのいずれかの操作で、埋め込まれているものの外の領域にあるリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。 + +対象 + プロダクト +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-no-trap` + * 音声・映像コンテンツ： :ref:`gl-multimedia-no-trap` +参考情報 + * :ref:`exp-keyboard-notrap` + + +.. _check-0211: + +チェックID: 0211 +~~~~~~~~~~~~~~~~~~ + +クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。 + +対象 + デザイン +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-keyboard-operable` +参考情報 + * :ref:`exp-input-device-various` + + +.. _check-0231: + +チェックID: 0231 +~~~~~~~~~~~~~~~~~~ + +クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。 + +対象 + プロダクト +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-keyboard-operable` +参考情報 + * :ref:`exp-input-device-various` + + +.. _check-0241: + +チェックID: 0241 +~~~~~~~~~~~~~~~~~~ + +リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。 + +対象 + デザイン +関連ガイドライン + * リンク： :ref:`gl-link-text` + +.. _check-0242: + +チェックID: 0242 +~~~~~~~~~~~~~~~~~~ + +同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。 + +対象 + デザイン +関連ガイドライン + * リンク： :ref:`gl-link-consistent-text` + * アイコン： :ref:`gl-icon-consistent` + +.. _check-0261: + +チェックID: 0261 +~~~~~~~~~~~~~~~~~~ + +* 「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または +* リンク・テキストの意図がマークアップで明確になっている。 + +対象 + プロダクト +関連ガイドライン + * リンク： :ref:`gl-link-text` + +.. _check-0262: + +チェックID: 0262 +~~~~~~~~~~~~~~~~~~ + +同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。 + +対象 + プロダクト +関連ガイドライン + * リンク： :ref:`gl-link-consistent-text` + * アイコン： :ref:`gl-icon-consistent` + +.. _check-0271: + +チェックID: 0271 +~~~~~~~~~~~~~~~~~~ + +見出しのテキストは、内容を適切に示す文言になっている。 + +対象 + デザイン +関連ガイドライン + * テキスト： :ref:`gl-text-heading-label` +参考情報 + * :ref:`exp-text-wording` + + +.. _check-0321: + +チェックID: 0321 +~~~~~~~~~~~~~~~~~~ + +200パーセントまで拡大しても、テキストの理解を妨げるようなレイアウト崩れが起こらない。 + +対象 + プロダクト +関連ガイドライン + * テキスト： :ref:`gl-text-zoom` +参考情報 + * :ref:`exp-magnification` + + +.. _check-0322: + +チェックID: 0322 +~~~~~~~~~~~~~~~~~~ + +4倍の拡大表示をしたときにも適切にリフローされ、読み取れない内容や利用できない機能がない。 + +対象 + プロダクト +関連ガイドライン + * テキスト： :ref:`gl-text-zoom-reflow` +参考情報 + * :ref:`exp-magnification` + + +.. _check-0331: + +チェックID: 0331 +~~~~~~~~~~~~~~~~~~ + +ボタンなどのサイズが充分に大きいことを確認している。 + +対象 + デザイン +関連ガイドライン + * アイコン： :ref:`gl-icon-target-size` + * フォーム： :ref:`gl-form-target-size` +参考情報 + * :ref:`exp-target-size` + + +.. _check-0351: + +チェックID: 0351 +~~~~~~~~~~~~~~~~~~ + +想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。 + +対象 + プロダクト +関連ガイドライン + * アイコン： :ref:`gl-icon-target-size` + * フォーム： :ref:`gl-form-target-size` +参考情報 + * :ref:`exp-target-size` + + +.. _check-0361: + +チェックID: 0361 +~~~~~~~~~~~~~~~~~~ + +* 特定の入力ディバイスで発生するイベントのみをトリガーにした機能がない。かつ +* 使用できる入力ディバイスを、特定の時点で検出されたものに限定していない。 + +対象 + デザイン +関連ガイドライン + * 入力ディバイス： :ref:`gl-input-device-independent` +参考情報 + * :ref:`exp-input-device-various` + + +.. _check-0391: + +チェックID: 0391 +~~~~~~~~~~~~~~~~~~ + +* アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または +* テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ +* 役割や意味がわかる alt 属性の値を設計資料で明示している。 + +対象 + デザイン +関連ガイドライン + * アイコン： :ref:`gl-icon-visible-label` + * アイコン： :ref:`gl-icon-color-only` + +.. _check-0401: + +チェックID: 0401 +~~~~~~~~~~~~~~~~~~ + +* アイコンの役割や示している状態を表すテキストが表示されていて、 ``aria-labelledby`` 属性で関連付けられている。または +* ``alt`` 属性または ``aria-label`` 属性で、そのようなテキストが指定されている。 +* 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。 + +対象 + コード +関連ガイドライン + * アイコン： :ref:`gl-icon-visible-label` + +.. _check-0411: + +チェックID: 0411 +~~~~~~~~~~~~~~~~~~ + +アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。 + +対象 + プロダクト +関連ガイドライン + * アイコン： :ref:`gl-icon-visible-label` + +.. _check-0412: + +チェックID: 0412 +~~~~~~~~~~~~~~~~~~ + +テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。） + +対象 + プロダクト +関連ガイドライン + * アイコン： :ref:`gl-icon-color-only` + +.. _check-0421: + +チェックID: 0421 +~~~~~~~~~~~~~~~~~~ + +* 画像に関する簡潔で過不足ない説明（ ``alt`` 属性値）が、設計資料で明示されている。かつ +* 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。 + +対象 + デザイン +関連ガイドライン + * 画像： :ref:`gl-image-description` +参考情報 + * :ref:`exp-image-text-alternative` + + +.. _check-0431: + +チェックID: 0431 +~~~~~~~~~~~~~~~~~~ + +* 画像に関する簡潔で過不足ない説明が ``alt`` 属性や ``aria-label`` 属性で付加されている。かつ +* 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または ``aria-describedby`` 属性で関連付けられている。 + +対象 + コード +関連ガイドライン + * 画像： :ref:`gl-image-description` +参考情報 + * :ref:`exp-image-text-alternative` + + +.. _check-0441: + +チェックID: 0441 +~~~~~~~~~~~~~~~~~~ + +画像の説明が適切に読み上げられる。 + +対象 + プロダクト +関連ガイドライン + * 画像： :ref:`gl-image-description` +参考情報 + * :ref:`exp-image-text-alternative` + + +.. _check-0451: + +チェックID: 0451 +~~~~~~~~~~~~~~~~~~ + +情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。 + +対象 + デザイン +関連ガイドライン + * 画像： :ref:`gl-image-decorative` +参考情報 + * :ref:`exp-image-text-alternative` + + +.. _check-0461: + +チェックID: 0461 +~~~~~~~~~~~~~~~~~~ + +情報や機能性を一切持たない画像には、空の ``alt`` 属性（ ``alt=""`` ）や ``role="presentation"`` が付与されていて、スクリーン・リーダーで読み上げられない。 + +対象 + コード +関連ガイドライン + * 画像： :ref:`gl-image-decorative` +参考情報 + * :ref:`exp-image-text-alternative` + + +.. _check-0471: + +チェックID: 0471 +~~~~~~~~~~~~~~~~~~ + +情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。 + +対象 + プロダクト +関連ガイドライン + * 画像： :ref:`gl-image-decorative` +参考情報 + * :ref:`exp-image-text-alternative` + + +.. _check-0481: + +チェックID: 0481 +~~~~~~~~~~~~~~~~~~ + +自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストがない。 + +対象 + デザイン +関連ガイドライン + * 画像化されたテキスト： :ref:`gl-iot-avoid-usage` +参考情報 + * :ref:`exp-iot-usage` + + +.. _check-0501: + +チェックID: 0501 +~~~~~~~~~~~~~~~~~~ + +自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストがない。 + +対象 + プロダクト +関連ガイドライン + * 画像化されたテキスト： :ref:`gl-iot-avoid-usage` +参考情報 + * :ref:`exp-iot-usage` + + +.. _check-0521: + +チェックID: 0521 +~~~~~~~~~~~~~~~~~~ + +画像化されているテキストと同じ内容が ``alt`` 属性または ``aria-label`` 属性で示されていて、スクリーン・リーダーなとで確認できる。 + +対象 + コード +関連ガイドライン + * 画像化されたテキスト： :ref:`gl-iot-provide-text` +参考情報 + * :ref:`exp-iot-usage` + + +.. _check-0531: + +チェックID: 0531 +~~~~~~~~~~~~~~~~~~ + +画像化されているテキストと同じ内容がスクリーン・リーダーなとで確認できる。 + +対象 + プロダクト +関連ガイドライン + * 画像化されたテキスト： :ref:`gl-iot-provide-text` +参考情報 + * :ref:`exp-iot-text-alternative` + + +.. _check-0541: + +チェックID: 0541 +~~~~~~~~~~~~~~~~~~ + +見出し（ ``h1`` ～ ``h6`` ）、箇条書き（ ``ul``, ``ol``, ``dl`` ）、表（ ``table`` ）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。 + +対象 + デザイン +関連ガイドライン + * マークアップ全般： :ref:`gl-markup-semantics` + +.. _check-0551: + +チェックID: 0551 +~~~~~~~~~~~~~~~~~~ + +見出し（ ``h1`` ～ ``h6`` ）、箇条書き（ ``ul``, ``ol``, ``dl`` ）、表（ ``table`` ）などを用いてセマンティクスが適切にマークアップされている。 + +対象 + コード +関連ガイドライン + * マークアップ全般： :ref:`gl-markup-semantics` + +.. _check-0571: + +チェックID: 0571 +~~~~~~~~~~~~~~~~~~ + +validatorやlinterでチェックが通る。 + +対象 + コード +関連ガイドライン + * マークアップ全般： :ref:`gl-markup-valid` +参考情報 + * :ref:`exp-check-tools` + + +.. _check-0591: + +チェックID: 0591 +~~~~~~~~~~~~~~~~~~ + +静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。 + +対象 + プロダクト +関連ガイドライン + * マークアップ全般： :ref:`gl-markup-component` +参考情報 + * :ref:`exp-markup-component` + + +.. _check-0611: + +チェックID: 0611 +~~~~~~~~~~~~~~~~~~ + +日本語のページには、 ```` の記述がある。 + +対象 + コード +関連ガイドライン + * テキスト： :ref:`gl-text-page-lang` +参考情報 + * :ref:`exp-text-lang` + + +.. _check-0631: + +チェックID: 0631 +~~~~~~~~~~~~~~~~~~ + +そのページの目的を示し、かつ他のページとは異なる ページ・タイトル（ ``title`` 要素）が設計資料で定義されている。 + +対象 + デザイン +関連ガイドライン + * ページ全体： :ref:`gl-page-title` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0651: + +チェックID: 0651 +~~~~~~~~~~~~~~~~~~ + +そのページの目的を示し、かつ他のページとは異なるページ・タイトルが付けられている。（ブラウザーのタイトルバー/タブバーに表示されている。） + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-title` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0661: + +チェックID: 0661 +~~~~~~~~~~~~~~~~~~ + +ページのどの部分がそれぞれ ``header``, ``nav``, ``main``, ``footer`` 要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。 + +対象 + デザイン +関連ガイドライン + * ページ全体： :ref:`gl-page-landmark` + * ページ全体： :ref:`gl-page-consistent-navigation` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0671: + +チェックID: 0671 +~~~~~~~~~~~~~~~~~~ + +* ``header``, ``main``, ``nav``, ``footer`` の各要素が適切に用いられている。または +* これらが ``role`` 属性で明示されている。 + +対象 + コード +関連ガイドライン + * ページ全体： :ref:`gl-page-landmark` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0672: + +チェックID: 0672 +~~~~~~~~~~~~~~~~~~ + +* ``main`` 要素が本文の開始位置を反映している。または +* 本文の先頭部分に ``h1`` 要素や ``h2`` 要素でマークアップされた見出しがある。 + +対象 + コード +関連ガイドライン + * ページ全体： :ref:`gl-page-markup-main` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0681: + +チェックID: 0681 +~~~~~~~~~~~~~~~~~~ + +スクリーン・リーダーの見出しジャンプ機能やリージョン間ジャンプ機能で本文の開始位置を見つけることができる。 + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-markup-main` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0711: + +チェックID: 0711 +~~~~~~~~~~~~~~~~~~ + +ページの状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。 + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-markup-order` + * 動的コンテンツ： :ref:`gl-dynamic-content-maintain-dom-tree` +参考情報 + * :ref:`exp-dynamic-content-maintain-dom-tree` + + +.. _check-0721: + +チェックID: 0721 +~~~~~~~~~~~~~~~~~~ + +ページ内の機能や内容の区切り、本分の先頭部分などに適切に見出しが配置されている。 + +対象 + デザイン +関連ガイドライン + * ページ全体： :ref:`gl-page-headings` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0731: + +チェックID: 0731 +~~~~~~~~~~~~~~~~~~ + +``h1`` ～ ``h6`` 要素で見出しが適切にマークアップされている。 + +対象 + コード +関連ガイドライン + * ページ全体： :ref:`gl-page-headings` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0741: + +チェックID: 0741 +~~~~~~~~~~~~~~~~~~ + +スクリーン・リーダーが見出しを適切に見出しとして認識している。 + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-headings` +参考情報 + * :ref:`exp-page-structure` + + +.. _check-0751: + +チェックID: 0751 +~~~~~~~~~~~~~~~~~~ + +特定の画面方向に固定した使用を前提としたデザインになっていない。 + +対象 + デザイン +関連ガイドライン + * ページ全体： :ref:`gl-page-orientation` +参考情報 + * :ref:`exp-page-orientation` + + +.. _check-0771: + +チェックID: 0771 +~~~~~~~~~~~~~~~~~~ + +画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。 + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-orientation` +参考情報 + * :ref:`exp-page-orientation` + + +.. _check-0781: + +チェックID: 0781 +~~~~~~~~~~~~~~~~~~ + +* グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページで共通に用いられているページの構成要素は、すべてのページで同じ出現順序になっている。かつ +* これらの構成要素の中でのリンクやボタンの出現順序はすべてのページで同じになっている。 + +対象 + デザイン +関連ガイドライン + * ページ全体： :ref:`gl-page-consistent-navigation` +参考情報 + * :ref:`exp-page-navigation` + + +.. _check-0801: + +チェックID: 0801 +~~~~~~~~~~~~~~~~~~ + +* グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページで共通に用いられているページの構成要素は、すべてのページで同じ出現順序になっている。かつ +* これらの構成要素の中でのリンクやボタンの出現順序はすべてのページで同じになっている。 + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-consistent-navigation` +参考情報 + * :ref:`exp-page-navigation` + + +.. _check-0811: + +チェックID: 0811 +~~~~~~~~~~~~~~~~~~ + +そのページへの到達手段が複数ある。 + +例： + +* ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。 +* 特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。 +* ヘルプ・ページ中のリンクからも遷移できる。 + +対象 + デザイン +関連ガイドライン + * ページ全体： :ref:`gl-page-redundant-navigation` +参考情報 + * :ref:`exp-page-navigation` + + +.. _check-0841: + +チェックID: 0841 +~~~~~~~~~~~~~~~~~~ + +グローバル・ナビゲーション内の表示やいわゆるパンくずリストで、そのページのサイト内での位置が明示されている。 + +対象 + デザイン +関連ガイドライン + * ページ全体： :ref:`gl-page-location` +参考情報 + * :ref:`exp-page-navigation` + + +.. _check-0851: + +チェックID: 0851 +~~~~~~~~~~~~~~~~~~ + +``aria-current`` 属性を用いて、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が明示されている。 + +対象 + コード +関連ガイドライン + * ページ全体： :ref:`gl-page-location` +参考情報 + * :ref:`exp-page-navigation` + + +.. _check-0861: + +チェックID: 0861 +~~~~~~~~~~~~~~~~~~ + +スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。 + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-location` +参考情報 + * :ref:`exp-page-navigation` + + +.. _check-0862: + +チェックID: 0862 +~~~~~~~~~~~~~~~~~~ + +グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような表示がされている。 + +対象 + プロダクト +関連ガイドライン + * ページ全体： :ref:`gl-page-location` +参考情報 + * :ref:`exp-page-navigation` + + +.. _check-0891: + +チェックID: 0891 +~~~~~~~~~~~~~~~~~~ + +line-heightを1.5em以上、段落感の空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を途中で読めなくなるなど、コンテンツおよび機能に損失が生じない。 + +対象 + プロダクト +関連ガイドライン + * テキスト： :ref:`gl-text-customize` +参考情報 + * :ref:`exp-text-custom-css` + + +.. _check-0911: + +チェックID: 0911 +~~~~~~~~~~~~~~~~~~ + +複数の言語が含まれているテキストについて、適切に ``lang`` 属性が指定されている。 + +対象 + コード +関連ガイドライン + * テキスト： :ref:`gl-text-phrase-lang` +参考情報 + * :ref:`exp-text-lang` + + +.. _check-0921: + +チェックID: 0921 +~~~~~~~~~~~~~~~~~~ + +複数の言語が含まれているテキストについて、iOS VoiceOverのように多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。 + +対象 + プロダクト +関連ガイドライン + * テキスト： :ref:`gl-text-phrase-lang` +参考情報 + * :ref:`exp-text-lang` + + +.. _check-0931: + +チェックID: 0931 +~~~~~~~~~~~~~~~~~~ + +* フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または +* ``aria-label`` 属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。 + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-label` + * フォーム： :ref:`gl-form-hidden-label` +参考情報 + * :ref:`exp-form-labeling` + + +.. _check-0941: + +チェックID: 0941 +~~~~~~~~~~~~~~~~~~ + +* フォーム・コントロールは、ラベルとなるテキストまたは画像と ``label`` 要素または ``aria-labelledby`` 属性で関連付けられている。または +* ``aria-label`` 要素で適切なラベルが付けられている。 +* 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。 + +対象 + コード +関連ガイドライン + * フォーム： :ref:`gl-form-label` + * フォーム： :ref:`gl-form-hidden-label` +参考情報 + * :ref:`exp-form-labeling` + + +.. _check-0951: + +チェックID: 0951 +~~~~~~~~~~~~~~~~~~ + +* フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または +* スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。 + +対象 + プロダクト +関連ガイドライン + * フォーム： :ref:`gl-form-label` + * フォーム： :ref:`gl-form-hidden-label` +参考情報 + * :ref:`exp-form-labeling` + + +.. _check-0961: + +チェックID: 0961 +~~~~~~~~~~~~~~~~~~ + +フォームの入力に制限時間を設ける場合： + +* 事前にユーザーがその制限時間を解除することができる。又は、 +* 事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、 +* 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、 +* リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、 +* 制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、 +* 制限時間が20時間よりも長い。 + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-timing` +参考情報 + * :ref:`exp-timing` + + +.. _check-0991: + +チェックID: 0991 +~~~~~~~~~~~~~~~~~~ + +フォーム入力に制限時間が設けられていない。 + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-no-timing` +参考情報 + * :ref:`exp-timing` + + +.. _check-1021: + +チェックID: 1021 +~~~~~~~~~~~~~~~~~~ + +制限時間が設定されているフォームの入力中に制限時間が超過した場合、それまでの入力内容を失うことなく入力を再開できるようになっている。 + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-continue` +参考情報 + * :ref:`exp-timing` + + +.. _check-1051: + +チェックID: 1051 +~~~~~~~~~~~~~~~~~~ + +フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こらない。 + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-dynamic-content-change` +参考情報 + * :ref:`exp-form-dynamic-content` + + +.. _check-1071: + +チェックID: 1071 +~~~~~~~~~~~~~~~~~~ + +フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こらない。 + +対象 + プロダクト +関連ガイドライン + * フォーム： :ref:`gl-form-dynamic-content-change` +参考情報 + * :ref:`exp-form-dynamic-content` + + +.. _check-1081: + +チェックID: 1081 +~~~~~~~~~~~~~~~~~~ + +フォーム入力でエラーが発生したとき、エラー内容が分かる具体的な表示文言が設計資料で定義されている + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-errors-identify` +参考情報 + * :ref:`exp-form-errors` + + +.. _check-1101: + +チェックID: 1101 +~~~~~~~~~~~~~~~~~~ + +フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。 + +対象 + プロダクト +関連ガイドライン + * フォーム： :ref:`gl-form-errors-identify` +参考情報 + * :ref:`exp-form-errors` + + +.. _check-1111: + +チェックID: 1111 +~~~~~~~~~~~~~~~~~~ + +フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。 + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-errors-correction` +参考情報 + * :ref:`exp-form-errors` + + +.. _check-1131: + +チェックID: 1131 +~~~~~~~~~~~~~~~~~~ + +フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。 + +対象 + プロダクト +関連ガイドライン + * フォーム： :ref:`gl-form-errors-correction` +参考情報 + * :ref:`exp-form-errors` + + +.. _check-1141: + +チェックID: 1141 +~~~~~~~~~~~~~~~~~~ + +法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能になっている。 + +対象 + デザイン +関連ガイドライン + * フォーム： :ref:`gl-form-errors-cancel` +参考情報 + * :ref:`exp-form-errors` + + +.. _check-1171: + +チェックID: 1171 +~~~~~~~~~~~~~~~~~~ + +ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時に自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。 + +対象 + デザイン +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-status` +参考情報 + * :ref:`exp-dynamic-content-status` + + +.. _check-1181: + +チェックID: 1181 +~~~~~~~~~~~~~~~~~~ + +操作の結果などを伝えるステータス・メッセージには適切に ``aria-live`` 属性が付与されている。 + +対象 + コード +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-status` +参考情報 + * :ref:`exp-dynamic-content-status` + + +.. _check-1191: + +チェックID: 1191 +~~~~~~~~~~~~~~~~~~ + +操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。 + +対象 + プロダクト +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-status` +参考情報 + * :ref:`exp-dynamic-content-status` + + +.. _check-1201: + +チェックID: 1201 +~~~~~~~~~~~~~~~~~~ + +点滅、スクロールを伴うコンテンツがない。 + +対象 + デザイン +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-pause-movement` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1221: + +チェックID: 1221 +~~~~~~~~~~~~~~~~~~ + +点滅、スクロールを伴うコンテンツがない。 + +対象 + プロダクト +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-pause-movement` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1231: + +チェックID: 1231 +~~~~~~~~~~~~~~~~~~ + +* 自動更新されるコンテンツがない。または +* ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。 + +対象 + デザイン +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-pause-refresh` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1251: + +チェックID: 1251 +~~~~~~~~~~~~~~~~~~ + +* 自動更新されるコンテンツがない。または +* ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。 + +対象 + プロダクト +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-pause-refresh` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1261: + +チェックID: 1261 +~~~~~~~~~~~~~~~~~~ + +1秒間に3回以上光るコンテンツがない。 + +対象 + デザイン +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-no-flashing` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1281: + +チェックID: 1281 +~~~~~~~~~~~~~~~~~~ + +1秒間に3回以上光るコンテンツがない。 + +対象 + プロダクト +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-no-flashing` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1291: + +チェックID: 1291 +~~~~~~~~~~~~~~~~~~ + +ユーザーが予期しない形で発生する、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。 + +対象 + デザイン +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-no-interrupt` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1311: + +チェックID: 1311 +~~~~~~~~~~~~~~~~~~ + +ユーザーが予期しない形で発生する、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。 + +対象 + プロダクト +関連ガイドライン + * 動的コンテンツ： :ref:`gl-dynamic-content-no-interrupt` +参考情報 + * :ref:`exp-dynamic-content-auto-updated` + + +.. _check-1321: + +チェックID: 1321 +~~~~~~~~~~~~~~~~~~ + +ログイン・セッションにタイムアウトを設ける場合： + +* ログイン時などに、ユーザーがセッション・タイムアウトの設定を解除することができる。又は、 +* ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、大幅なタイムアウト設定値の調整をすることができる。又は、 +* 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーがタイムアウトを10回以上延長することができる。又は、 +* タイムアウトが必要不可欠なもので、タイムアウトを延長することがコンテンツの動作を無効にすることになる。又は、 +* タイムアウトが20時間よりも長い。 + +対象 + デザイン +関連ガイドライン + * ログイン・セッション： :ref:`gl-login-session-timing` +参考情報 + * :ref:`exp-timing` + + +.. _check-1351: + +チェックID: 1351 +~~~~~~~~~~~~~~~~~~ + +ログイン・セッションに有効期限が設定されていない。 + +対象 + デザイン +関連ガイドライン + * ログイン・セッション： :ref:`gl-login-session-no-timing` +参考情報 + * :ref:`exp-timing` + + +.. _check-1381: + +チェックID: 1381 +~~~~~~~~~~~~~~~~~~ + +ログイン・セッションがタイムアウトした場合、再認証後にデータを失うことなくユーザーが操作を継続できるようになっている。 + +対象 + デザイン +関連ガイドライン + * ログイン・セッション： :ref:`gl-login-session-continue` +参考情報 + * :ref:`exp-timing` + + +.. _check-1411: + +チェックID: 1411 +~~~~~~~~~~~~~~~~~~ + +* ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または +* 前後のテキストから、そこにプレイヤーがあることが推測できる。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-perceivable` +参考情報 + * :ref:`exp-multimedia-perceivable` + + +.. _check-1421: + +チェックID: 1421 +~~~~~~~~~~~~~~~~~~ + +3秒以上の長さの自動再生される音声コンテンツがない。 + +対象 + デザイン +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-operable` +参考情報 + * :ref:`exp-multimedia-autoplay` + + +.. _check-1441: + +チェックID: 1441 +~~~~~~~~~~~~~~~~~~ + +3秒以上の長さの自動再生される音声コンテンツがない。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-operable` +参考情報 + * :ref:`exp-multimedia-autoplay` + + +.. _check-1451: + +チェックID: 1451 +~~~~~~~~~~~~~~~~~~ + +* 自動的に開始し5秒以上続く動画、アニメーションがない。または +* 動画やアニメーションを呈し、一時停止、または非表示にすることができる。 + +対象 + デザイン +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-pause-movement` + +.. _check-1471: + +チェックID: 1471 +~~~~~~~~~~~~~~~~~~ + +* 自動的に開始し5秒以上続く動画、アニメーションがない。または +* 動画やアニメーションを呈し、一時停止、または非表示にすることができる。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-pause-movement` + +.. _check-1481: + +チェックID: 1481 +~~~~~~~~~~~~~~~~~~ + +音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。 + +対象 + デザイン +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-text-alternative` +参考情報 + * :ref:`exp-multimedia-content-access` + + +.. _check-1501: + +チェックID: 1501 +~~~~~~~~~~~~~~~~~~ + +音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-text-alternative` +参考情報 + * :ref:`exp-multimedia-content-access` + + +.. _check-1531: + +チェックID: 1531 +~~~~~~~~~~~~~~~~~~ + +音声を含むコンテンツには、同期したキャプションが提供されている。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-caption` +参考情報 + * :ref:`exp-multimedia-content-access` + + +.. _check-1561: + +チェックID: 1561 +~~~~~~~~~~~~~~~~~~ + +* 動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または +* 動画には音声解説が含まれている。または +* 映像に関するテキストによる説明が提供されている。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-video-description` +参考情報 + * :ref:`exp-multimedia-content-access` + + +.. _check-1591: + +チェックID: 1591 +~~~~~~~~~~~~~~~~~~ + +映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-transcript` +参考情報 + * :ref:`exp-multimedia-content-access` + + +.. _check-1621: + +チェックID: 1621 +~~~~~~~~~~~~~~~~~~ + +動画の音声情報には同期した手話通訳が提供されている。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-sign-language` +参考情報 + * :ref:`exp-multimedia-content-access` + + +.. _check-1651: + +チェックID: 1651 +~~~~~~~~~~~~~~~~~~ + +音声コンテンツについて、充分に聴き取りやすい。 + +対象 + プロダクト +関連ガイドライン + * 音声・映像コンテンツ： :ref:`gl-multimedia-background-sound` +参考情報 + * :ref:`exp-multimedia-content-access` + diff --git a/source/checks/inc/gl-dynamic-content-focus.rst b/source/checks/inc/gl-dynamic-content-focus.rst new file mode 100644 index 00000000..3e2b170b --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-focus.rst @@ -0,0 +1,19 @@ +デザイン（:ref:`check-0152`） + * Tab/Shift+Tabキーでフォーカスを移動しているときに、以下のような変化が引き起こされない： + + * フォームの送信 + * レイアウトの変更 + * ページの遷移 + * モーダル・ダイアログの表示 + * 表示内容の大幅な変更、など +プロダクト（:ref:`check-0171`） + * Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている： + + * フォーカス・インジケーターまたはそれを代替する表示がある + * 自動的に次のような挙動が発生しない： + + - フォームの送信 + - レイアウトの変更 + - ページの遷移 + - モーダル・ダイアログの表示 + - 表示内容の大幅な変更など diff --git a/source/checks/inc/gl-dynamic-content-hover.rst b/source/checks/inc/gl-dynamic-content-hover.rst new file mode 100644 index 00000000..cdcc830b --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-hover.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0091`）、プロダクト（:ref:`check-0111`） + * ホバーで表示されるすべてのコンテンツは、以下のすべてを満たしている: + + * ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。（ESCキーで消える、など） + * ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。 + * ホバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、ホバーで表示されたコンテンツを非表示にする。 diff --git a/source/checks/inc/gl-dynamic-content-maintain-dom-tree.rst b/source/checks/inc/gl-dynamic-content-maintain-dom-tree.rst new file mode 100644 index 00000000..64b493cf --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-maintain-dom-tree.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0711`） + * ページの状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。 diff --git a/source/checks/inc/gl-dynamic-content-no-flashing.rst b/source/checks/inc/gl-dynamic-content-no-flashing.rst new file mode 100644 index 00000000..db398e0e --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-no-flashing.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1261`）、プロダクト（:ref:`check-1281`） + * 1秒間に3回以上光るコンテンツがない。 diff --git a/source/checks/inc/gl-dynamic-content-no-interrupt.rst b/source/checks/inc/gl-dynamic-content-no-interrupt.rst new file mode 100644 index 00000000..f3070ce5 --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-no-interrupt.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1291`）、プロダクト（:ref:`check-1311`） + * ユーザーが予期しない形で発生する、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。 diff --git a/source/checks/inc/gl-dynamic-content-pause-movement.rst b/source/checks/inc/gl-dynamic-content-pause-movement.rst new file mode 100644 index 00000000..02d13c09 --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-pause-movement.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1201`）、プロダクト（:ref:`check-1221`） + * 点滅、スクロールを伴うコンテンツがない。 diff --git a/source/checks/inc/gl-dynamic-content-pause-refresh.rst b/source/checks/inc/gl-dynamic-content-pause-refresh.rst new file mode 100644 index 00000000..675a9011 --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-pause-refresh.rst @@ -0,0 +1,3 @@ +デザイン（:ref:`check-1231`）、プロダクト（:ref:`check-1251`） + * 自動更新されるコンテンツがない。または + * ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。 diff --git a/source/checks/inc/gl-dynamic-content-status.rst b/source/checks/inc/gl-dynamic-content-status.rst new file mode 100644 index 00000000..273d61c3 --- /dev/null +++ b/source/checks/inc/gl-dynamic-content-status.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-1171`） + * ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時に自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。 +コード（:ref:`check-1181`） + * 操作の結果などを伝えるステータス・メッセージには適切に ``aria-live`` 属性が付与されている。 +プロダクト（:ref:`check-1191`） + * 操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。 diff --git a/source/checks/inc/gl-form-color-only.rst b/source/checks/inc/gl-form-color-only.rst new file mode 100644 index 00000000..0a3f4acc --- /dev/null +++ b/source/checks/inc/gl-form-color-only.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0031`）、プロダクト（:ref:`check-0051`） + * グレイスケール表示でも利用に支障が出ない: + + * リンク箇所を判別できる + * 画像、テキストの意図が伝わる + * 入力フォームの必須項目、エラーを認知できる diff --git a/source/checks/inc/gl-form-continue.rst b/source/checks/inc/gl-form-continue.rst new file mode 100644 index 00000000..db0f27e4 --- /dev/null +++ b/source/checks/inc/gl-form-continue.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1021`） + * 制限時間が設定されているフォームの入力中に制限時間が超過した場合、それまでの入力内容を失うことなく入力を再開できるようになっている。 diff --git a/source/checks/inc/gl-form-dynamic-content-change.rst b/source/checks/inc/gl-form-dynamic-content-change.rst new file mode 100644 index 00000000..ab6169d2 --- /dev/null +++ b/source/checks/inc/gl-form-dynamic-content-change.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1051`）、プロダクト（:ref:`check-1071`） + * フォーム中のフィールドの値の変更や、値変更後のフォーカス移動がトリガーとなって、ページ全体に及ぶような大幅な表示内容の変更、ページ遷移、別のフィールドの値の変更が起こらない。 diff --git a/source/checks/inc/gl-form-dynamic-content-focus.rst b/source/checks/inc/gl-form-dynamic-content-focus.rst new file mode 100644 index 00000000..3e2b170b --- /dev/null +++ b/source/checks/inc/gl-form-dynamic-content-focus.rst @@ -0,0 +1,19 @@ +デザイン（:ref:`check-0152`） + * Tab/Shift+Tabキーでフォーカスを移動しているときに、以下のような変化が引き起こされない： + + * フォームの送信 + * レイアウトの変更 + * ページの遷移 + * モーダル・ダイアログの表示 + * 表示内容の大幅な変更、など +プロダクト（:ref:`check-0171`） + * Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている： + + * フォーカス・インジケーターまたはそれを代替する表示がある + * 自動的に次のような挙動が発生しない： + + - フォームの送信 + - レイアウトの変更 + - ページの遷移 + - モーダル・ダイアログの表示 + - 表示内容の大幅な変更など diff --git a/source/checks/inc/gl-form-errors-cancel.rst b/source/checks/inc/gl-form-errors-cancel.rst new file mode 100644 index 00000000..c268f888 --- /dev/null +++ b/source/checks/inc/gl-form-errors-cancel.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1141`） + * 法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正が可能になっている。 diff --git a/source/checks/inc/gl-form-errors-correction.rst b/source/checks/inc/gl-form-errors-correction.rst new file mode 100644 index 00000000..3fdb3f40 --- /dev/null +++ b/source/checks/inc/gl-form-errors-correction.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1111`）、プロダクト（:ref:`check-1131`） + * フォーム入力に関するエラー・メッセージには、エラーの修正方法が示されている。 diff --git a/source/checks/inc/gl-form-errors-identify.rst b/source/checks/inc/gl-form-errors-identify.rst new file mode 100644 index 00000000..292d9738 --- /dev/null +++ b/source/checks/inc/gl-form-errors-identify.rst @@ -0,0 +1,4 @@ +デザイン（:ref:`check-1081`） + * フォーム入力でエラーが発生したとき、エラー内容が分かる具体的な表示文言が設計資料で定義されている +プロダクト（:ref:`check-1101`） + * フォーム入力に関するエラー発生時には、エラーの内容が具体的に分かるテキスト情報が表示される。 diff --git a/source/checks/inc/gl-form-hidden-label.rst b/source/checks/inc/gl-form-hidden-label.rst new file mode 100644 index 00000000..628c19c7 --- /dev/null +++ b/source/checks/inc/gl-form-hidden-label.rst @@ -0,0 +1,10 @@ +デザイン（:ref:`check-0931`） + * フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または + * ``aria-label`` 属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。 +コード（:ref:`check-0941`） + * フォーム・コントロールは、ラベルとなるテキストまたは画像と ``label`` 要素または ``aria-labelledby`` 属性で関連付けられている。または + * ``aria-label`` 要素で適切なラベルが付けられている。 + * 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。 +プロダクト（:ref:`check-0951`） + * フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または + * スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。 diff --git a/source/checks/inc/gl-form-label.rst b/source/checks/inc/gl-form-label.rst new file mode 100644 index 00000000..628c19c7 --- /dev/null +++ b/source/checks/inc/gl-form-label.rst @@ -0,0 +1,10 @@ +デザイン（:ref:`check-0931`） + * フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または + * ``aria-label`` 属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。 +コード（:ref:`check-0941`） + * フォーム・コントロールは、ラベルとなるテキストまたは画像と ``label`` 要素または ``aria-labelledby`` 属性で関連付けられている。または + * ``aria-label`` 要素で適切なラベルが付けられている。 + * 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。 +プロダクト（:ref:`check-0951`） + * フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または + * スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。 diff --git a/source/checks/inc/gl-form-no-timing.rst b/source/checks/inc/gl-form-no-timing.rst new file mode 100644 index 00000000..ca3ef998 --- /dev/null +++ b/source/checks/inc/gl-form-no-timing.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-0991`） + * フォーム入力に制限時間が設けられていない。 diff --git a/source/checks/inc/gl-form-tab-order.rst b/source/checks/inc/gl-form-tab-order.rst new file mode 100644 index 00000000..aa79628d --- /dev/null +++ b/source/checks/inc/gl-form-tab-order.rst @@ -0,0 +1,6 @@ +プロダクト（:ref:`check-0172`） + * Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。 + + * リンクとボタン + * フォーム・コントロール + * その他、マウスやキーボードによる操作を受け付けるすべてのもの diff --git a/source/checks/inc/gl-form-target-size.rst b/source/checks/inc/gl-form-target-size.rst new file mode 100644 index 00000000..f1e0b3f5 --- /dev/null +++ b/source/checks/inc/gl-form-target-size.rst @@ -0,0 +1,4 @@ +デザイン（:ref:`check-0331`） + * ボタンなどのサイズが充分に大きいことを確認している。 +プロダクト（:ref:`check-0351`） + * 想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。 diff --git a/source/checks/inc/gl-form-timing.rst b/source/checks/inc/gl-form-timing.rst new file mode 100644 index 00000000..68107ba6 --- /dev/null +++ b/source/checks/inc/gl-form-timing.rst @@ -0,0 +1,9 @@ +デザイン（:ref:`check-0961`） + * フォームの入力に制限時間を設ける場合： + + * 事前にユーザーがその制限時間を解除することができる。又は、 + * 事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、 + * 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、 + * リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、 + * 制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、 + * 制限時間が20時間よりも長い。 diff --git a/source/checks/inc/gl-icon-color-only.rst b/source/checks/inc/gl-icon-color-only.rst new file mode 100644 index 00000000..7a62e226 --- /dev/null +++ b/source/checks/inc/gl-icon-color-only.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0391`） + * アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または + * テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ + * 役割や意味がわかる alt 属性の値を設計資料で明示している。 +プロダクト（:ref:`check-0412`） + * テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。） diff --git a/source/checks/inc/gl-icon-consistent.rst b/source/checks/inc/gl-icon-consistent.rst new file mode 100644 index 00000000..e255f911 --- /dev/null +++ b/source/checks/inc/gl-icon-consistent.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-0242`）、プロダクト（:ref:`check-0262`） + * 同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。 diff --git a/source/checks/inc/gl-icon-contrast.rst b/source/checks/inc/gl-icon-contrast.rst new file mode 100644 index 00000000..a6ab53d0 --- /dev/null +++ b/source/checks/inc/gl-icon-contrast.rst @@ -0,0 +1,7 @@ +デザイン（:ref:`check-0001`）、プロダクト（:ref:`check-0021`） + * 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + + * アイコンと背景色 + * 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 + * 画像および画像化されたテキストとその隣接領域 + * テキストと背景色 diff --git a/source/checks/inc/gl-icon-target-size.rst b/source/checks/inc/gl-icon-target-size.rst new file mode 100644 index 00000000..f1e0b3f5 --- /dev/null +++ b/source/checks/inc/gl-icon-target-size.rst @@ -0,0 +1,4 @@ +デザイン（:ref:`check-0331`） + * ボタンなどのサイズが充分に大きいことを確認している。 +プロダクト（:ref:`check-0351`） + * 想定環境におけるクリッカブルなエリアのサイズが充分に大きいことを確認できている。 diff --git a/source/checks/inc/gl-icon-visible-label.rst b/source/checks/inc/gl-icon-visible-label.rst new file mode 100644 index 00000000..914797ee --- /dev/null +++ b/source/checks/inc/gl-icon-visible-label.rst @@ -0,0 +1,10 @@ +デザイン（:ref:`check-0391`） + * アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または + * テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ + * 役割や意味がわかる alt 属性の値を設計資料で明示している。 +コード（:ref:`check-0401`） + * アイコンの役割や示している状態を表すテキストが表示されていて、 ``aria-labelledby`` 属性で関連付けられている。または + * ``alt`` 属性または ``aria-label`` 属性で、そのようなテキストが指定されている。 + * 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。 +プロダクト（:ref:`check-0411`） + * アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。 diff --git a/source/checks/inc/gl-image-adjacent-contrast.rst b/source/checks/inc/gl-image-adjacent-contrast.rst new file mode 100644 index 00000000..a6ab53d0 --- /dev/null +++ b/source/checks/inc/gl-image-adjacent-contrast.rst @@ -0,0 +1,7 @@ +デザイン（:ref:`check-0001`）、プロダクト（:ref:`check-0021`） + * 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + + * アイコンと背景色 + * 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 + * 画像および画像化されたテキストとその隣接領域 + * テキストと背景色 diff --git a/source/checks/inc/gl-image-color-only.rst b/source/checks/inc/gl-image-color-only.rst new file mode 100644 index 00000000..0a3f4acc --- /dev/null +++ b/source/checks/inc/gl-image-color-only.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0031`）、プロダクト（:ref:`check-0051`） + * グレイスケール表示でも利用に支障が出ない: + + * リンク箇所を判別できる + * 画像、テキストの意図が伝わる + * 入力フォームの必須項目、エラーを認知できる diff --git a/source/checks/inc/gl-image-decorative.rst b/source/checks/inc/gl-image-decorative.rst new file mode 100644 index 00000000..a6573c11 --- /dev/null +++ b/source/checks/inc/gl-image-decorative.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0451`） + * 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。 +コード（:ref:`check-0461`） + * 情報や機能性を一切持たない画像には、空の ``alt`` 属性（ ``alt=""`` ）や ``role="presentation"`` が付与されていて、スクリーン・リーダーで読み上げられない。 +プロダクト（:ref:`check-0471`） + * 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。 diff --git a/source/checks/inc/gl-image-description.rst b/source/checks/inc/gl-image-description.rst new file mode 100644 index 00000000..1528bd17 --- /dev/null +++ b/source/checks/inc/gl-image-description.rst @@ -0,0 +1,8 @@ +デザイン（:ref:`check-0421`） + * 画像に関する簡潔で過不足ない説明（ ``alt`` 属性値）が、設計資料で明示されている。かつ + * 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。 +コード（:ref:`check-0431`） + * 画像に関する簡潔で過不足ない説明が ``alt`` 属性や ``aria-label`` 属性で付加されている。かつ + * 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、または ``aria-describedby`` 属性で関連付けられている。 +プロダクト（:ref:`check-0441`） + * 画像の説明が適切に読み上げられる。 diff --git a/source/checks/inc/gl-image-text-contrast.rst b/source/checks/inc/gl-image-text-contrast.rst new file mode 100644 index 00000000..a6ab53d0 --- /dev/null +++ b/source/checks/inc/gl-image-text-contrast.rst @@ -0,0 +1,7 @@ +デザイン（:ref:`check-0001`）、プロダクト（:ref:`check-0021`） + * 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + + * アイコンと背景色 + * 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 + * 画像および画像化されたテキストとその隣接領域 + * テキストと背景色 diff --git a/source/checks/inc/gl-input-device-focus-indicator.rst b/source/checks/inc/gl-input-device-focus-indicator.rst new file mode 100644 index 00000000..5adfd580 --- /dev/null +++ b/source/checks/inc/gl-input-device-focus-indicator.rst @@ -0,0 +1,13 @@ +デザイン（:ref:`check-0151`） + * デフォルトのフォーカス・インジケーターを用いない場合、代替となるフォーカス・インジケーターを明示している。 +プロダクト（:ref:`check-0171`） + * Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている： + + * フォーカス・インジケーターまたはそれを代替する表示がある + * 自動的に次のような挙動が発生しない： + + - フォームの送信 + - レイアウトの変更 + - ページの遷移 + - モーダル・ダイアログの表示 + - 表示内容の大幅な変更など diff --git a/source/checks/inc/gl-input-device-focus.rst b/source/checks/inc/gl-input-device-focus.rst new file mode 100644 index 00000000..aa79628d --- /dev/null +++ b/source/checks/inc/gl-input-device-focus.rst @@ -0,0 +1,6 @@ +プロダクト（:ref:`check-0172`） + * Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。 + + * リンクとボタン + * フォーム・コントロール + * その他、マウスやキーボードによる操作を受け付けるすべてのもの diff --git a/source/checks/inc/gl-input-device-independent.rst b/source/checks/inc/gl-input-device-independent.rst new file mode 100644 index 00000000..bbfa3f53 --- /dev/null +++ b/source/checks/inc/gl-input-device-independent.rst @@ -0,0 +1,3 @@ +デザイン（:ref:`check-0361`） + * 特定の入力ディバイスで発生するイベントのみをトリガーにした機能がない。かつ + * 使用できる入力ディバイスを、特定の時点で検出されたものに限定していない。 diff --git a/source/checks/inc/gl-input-device-keyboard-operable.rst b/source/checks/inc/gl-input-device-keyboard-operable.rst new file mode 100644 index 00000000..d4c6d5c4 --- /dev/null +++ b/source/checks/inc/gl-input-device-keyboard-operable.rst @@ -0,0 +1,8 @@ +プロダクト（:ref:`check-0172`） + * Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。 + + * リンクとボタン + * フォーム・コントロール + * その他、マウスやキーボードによる操作を受け付けるすべてのもの +デザイン（:ref:`check-0211`）、プロダクト（:ref:`check-0231`） + * クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。 diff --git a/source/checks/inc/gl-input-device-no-trap.rst b/source/checks/inc/gl-input-device-no-trap.rst new file mode 100644 index 00000000..7920d68d --- /dev/null +++ b/source/checks/inc/gl-input-device-no-trap.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0201`） + * 動画プレイヤーのような、何らかの機能を提供するためにページ中に埋め込まれているプログラムなどにフォーカスがある状態のとき、Tab, Shift+Tab, 矢印キー、ESCキーのいずれかの操作で、埋め込まれているものの外の領域にあるリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。 diff --git a/source/checks/inc/gl-input-device-shortcut-keys.rst b/source/checks/inc/gl-input-device-shortcut-keys.rst new file mode 100644 index 00000000..348c9387 --- /dev/null +++ b/source/checks/inc/gl-input-device-shortcut-keys.rst @@ -0,0 +1,5 @@ +プロダクト（:ref:`check-0141`） + * ショートカットキーを提供していて、それが画面のどこにフォーカスがあっても作動する仕様である場合、以下のいずれかを満たしている： + + * ユーザーがショートカットキーを無効にできる + * ユーザーがショートカットキーの割当を変更できる diff --git a/source/checks/inc/gl-input-device-use-up-event.rst b/source/checks/inc/gl-input-device-use-up-event.rst new file mode 100644 index 00000000..8269dff5 --- /dev/null +++ b/source/checks/inc/gl-input-device-use-up-event.rst @@ -0,0 +1,4 @@ +コード（:ref:`check-0071`） + * マウス・ボタンのdownイベントをトリガーにしていない。 +プロダクト（:ref:`check-0081`） + * マウス・クリックを受け付けるリンクやボタンなどは、マウス・ボタンを押下した状態でマウス・ポインターを外し、マウス・ボタンを放した場合、その機能が実行されない。（ドラッグ&ドロップは対象外） diff --git a/source/checks/inc/gl-iot-adjacent-contrast.rst b/source/checks/inc/gl-iot-adjacent-contrast.rst new file mode 100644 index 00000000..a6ab53d0 --- /dev/null +++ b/source/checks/inc/gl-iot-adjacent-contrast.rst @@ -0,0 +1,7 @@ +デザイン（:ref:`check-0001`）、プロダクト（:ref:`check-0021`） + * 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + + * アイコンと背景色 + * 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 + * 画像および画像化されたテキストとその隣接領域 + * テキストと背景色 diff --git a/source/checks/inc/gl-iot-avoid-usage.rst b/source/checks/inc/gl-iot-avoid-usage.rst new file mode 100644 index 00000000..0554764a --- /dev/null +++ b/source/checks/inc/gl-iot-avoid-usage.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-0481`）、プロダクト（:ref:`check-0501`） + * 自社および他者のロゴ、バナー、図や写真の中の文字列を除いて、画像化されたテキストがない。 diff --git a/source/checks/inc/gl-iot-provide-text.rst b/source/checks/inc/gl-iot-provide-text.rst new file mode 100644 index 00000000..3dd53fef --- /dev/null +++ b/source/checks/inc/gl-iot-provide-text.rst @@ -0,0 +1,4 @@ +コード（:ref:`check-0521`） + * 画像化されているテキストと同じ内容が ``alt`` 属性または ``aria-label`` 属性で示されていて、スクリーン・リーダーなとで確認できる。 +プロダクト（:ref:`check-0531`） + * 画像化されているテキストと同じ内容がスクリーン・リーダーなとで確認できる。 diff --git a/source/checks/inc/gl-iot-text-contrast.rst b/source/checks/inc/gl-iot-text-contrast.rst new file mode 100644 index 00000000..a6ab53d0 --- /dev/null +++ b/source/checks/inc/gl-iot-text-contrast.rst @@ -0,0 +1,7 @@ +デザイン（:ref:`check-0001`）、プロダクト（:ref:`check-0021`） + * 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + + * アイコンと背景色 + * 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 + * 画像および画像化されたテキストとその隣接領域 + * テキストと背景色 diff --git a/source/checks/inc/gl-link-color-only.rst b/source/checks/inc/gl-link-color-only.rst new file mode 100644 index 00000000..0a3f4acc --- /dev/null +++ b/source/checks/inc/gl-link-color-only.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0031`）、プロダクト（:ref:`check-0051`） + * グレイスケール表示でも利用に支障が出ない: + + * リンク箇所を判別できる + * 画像、テキストの意図が伝わる + * 入力フォームの必須項目、エラーを認知できる diff --git a/source/checks/inc/gl-link-consistent-text.rst b/source/checks/inc/gl-link-consistent-text.rst new file mode 100644 index 00000000..e255f911 --- /dev/null +++ b/source/checks/inc/gl-link-consistent-text.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-0242`）、プロダクト（:ref:`check-0262`） + * 同じ文脈において、遷移先が同じリンク、目的が同じボタンには、一貫したテキストやアイコンが使われている。 diff --git a/source/checks/inc/gl-link-tab-order.rst b/source/checks/inc/gl-link-tab-order.rst new file mode 100644 index 00000000..aa79628d --- /dev/null +++ b/source/checks/inc/gl-link-tab-order.rst @@ -0,0 +1,6 @@ +プロダクト（:ref:`check-0172`） + * Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。 + + * リンクとボタン + * フォーム・コントロール + * その他、マウスやキーボードによる操作を受け付けるすべてのもの diff --git a/source/checks/inc/gl-link-text.rst b/source/checks/inc/gl-link-text.rst new file mode 100644 index 00000000..b27099df --- /dev/null +++ b/source/checks/inc/gl-link-text.rst @@ -0,0 +1,5 @@ +デザイン（:ref:`check-0241`） + * リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。 +プロダクト（:ref:`check-0261`） + * 「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または + * リンク・テキストの意図がマークアップで明確になっている。 diff --git a/source/checks/inc/gl-login-session-continue.rst b/source/checks/inc/gl-login-session-continue.rst new file mode 100644 index 00000000..53db98f3 --- /dev/null +++ b/source/checks/inc/gl-login-session-continue.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1381`） + * ログイン・セッションがタイムアウトした場合、再認証後にデータを失うことなくユーザーが操作を継続できるようになっている。 diff --git a/source/checks/inc/gl-login-session-no-timing.rst b/source/checks/inc/gl-login-session-no-timing.rst new file mode 100644 index 00000000..b94e4b09 --- /dev/null +++ b/source/checks/inc/gl-login-session-no-timing.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1351`） + * ログイン・セッションに有効期限が設定されていない。 diff --git a/source/checks/inc/gl-login-session-timing.rst b/source/checks/inc/gl-login-session-timing.rst new file mode 100644 index 00000000..d001edf3 --- /dev/null +++ b/source/checks/inc/gl-login-session-timing.rst @@ -0,0 +1,8 @@ +デザイン（:ref:`check-1321`） + * ログイン・セッションにタイムアウトを設ける場合： + + * ログイン時などに、ユーザーがセッション・タイムアウトの設定を解除することができる。又は、 + * ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、大幅なタイムアウト設定値の調整をすることができる。又は、 + * 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーがタイムアウトを10回以上延長することができる。又は、 + * タイムアウトが必要不可欠なもので、タイムアウトを延長することがコンテンツの動作を無効にすることになる。又は、 + * タイムアウトが20時間よりも長い。 diff --git a/source/checks/inc/gl-markup-component.rst b/source/checks/inc/gl-markup-component.rst new file mode 100644 index 00000000..616417d6 --- /dev/null +++ b/source/checks/inc/gl-markup-component.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0591`） + * 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。 diff --git a/source/checks/inc/gl-markup-semantics.rst b/source/checks/inc/gl-markup-semantics.rst new file mode 100644 index 00000000..f7532469 --- /dev/null +++ b/source/checks/inc/gl-markup-semantics.rst @@ -0,0 +1,4 @@ +デザイン（:ref:`check-0541`） + * 見出し（ ``h1`` ～ ``h6`` ）、箇条書き（ ``ul``, ``ol``, ``dl`` ）、表（ ``table`` ）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。 +コード（:ref:`check-0551`） + * 見出し（ ``h1`` ～ ``h6`` ）、箇条書き（ ``ul``, ``ol``, ``dl`` ）、表（ ``table`` ）などを用いてセマンティクスが適切にマークアップされている。 diff --git a/source/checks/inc/gl-markup-valid.rst b/source/checks/inc/gl-markup-valid.rst new file mode 100644 index 00000000..ef6c2be7 --- /dev/null +++ b/source/checks/inc/gl-markup-valid.rst @@ -0,0 +1,2 @@ +コード（:ref:`check-0571`） + * validatorやlinterでチェックが通る。 diff --git a/source/checks/inc/gl-multimedia-background-sound.rst b/source/checks/inc/gl-multimedia-background-sound.rst new file mode 100644 index 00000000..900ec2a6 --- /dev/null +++ b/source/checks/inc/gl-multimedia-background-sound.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-1651`） + * 音声コンテンツについて、充分に聴き取りやすい。 diff --git a/source/checks/inc/gl-multimedia-caption.rst b/source/checks/inc/gl-multimedia-caption.rst new file mode 100644 index 00000000..30f88771 --- /dev/null +++ b/source/checks/inc/gl-multimedia-caption.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-1531`） + * 音声を含むコンテンツには、同期したキャプションが提供されている。 diff --git a/source/checks/inc/gl-multimedia-no-trap.rst b/source/checks/inc/gl-multimedia-no-trap.rst new file mode 100644 index 00000000..7920d68d --- /dev/null +++ b/source/checks/inc/gl-multimedia-no-trap.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0201`） + * 動画プレイヤーのような、何らかの機能を提供するためにページ中に埋め込まれているプログラムなどにフォーカスがある状態のとき、Tab, Shift+Tab, 矢印キー、ESCキーのいずれかの操作で、埋め込まれているものの外の領域にあるリンクなどにフォーカスを移動することができ、自動的にフォーカスが元の位置に戻されない。 diff --git a/source/checks/inc/gl-multimedia-operable.rst b/source/checks/inc/gl-multimedia-operable.rst new file mode 100644 index 00000000..5b7295af --- /dev/null +++ b/source/checks/inc/gl-multimedia-operable.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1421`）、プロダクト（:ref:`check-1441`） + * 3秒以上の長さの自動再生される音声コンテンツがない。 diff --git a/source/checks/inc/gl-multimedia-pause-movement.rst b/source/checks/inc/gl-multimedia-pause-movement.rst new file mode 100644 index 00000000..46dc9a7a --- /dev/null +++ b/source/checks/inc/gl-multimedia-pause-movement.rst @@ -0,0 +1,3 @@ +デザイン（:ref:`check-1451`）、プロダクト（:ref:`check-1471`） + * 自動的に開始し5秒以上続く動画、アニメーションがない。または + * 動画やアニメーションを呈し、一時停止、または非表示にすることができる。 diff --git a/source/checks/inc/gl-multimedia-perceivable.rst b/source/checks/inc/gl-multimedia-perceivable.rst new file mode 100644 index 00000000..4280d248 --- /dev/null +++ b/source/checks/inc/gl-multimedia-perceivable.rst @@ -0,0 +1,3 @@ +プロダクト（:ref:`check-1411`） + * ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または + * 前後のテキストから、そこにプレイヤーがあることが推測できる。 diff --git a/source/checks/inc/gl-multimedia-sign-language.rst b/source/checks/inc/gl-multimedia-sign-language.rst new file mode 100644 index 00000000..b6f7db2a --- /dev/null +++ b/source/checks/inc/gl-multimedia-sign-language.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-1621`） + * 動画の音声情報には同期した手話通訳が提供されている。 diff --git a/source/checks/inc/gl-multimedia-text-alternative.rst b/source/checks/inc/gl-multimedia-text-alternative.rst new file mode 100644 index 00000000..95a17e4a --- /dev/null +++ b/source/checks/inc/gl-multimedia-text-alternative.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-1481`）、プロダクト（:ref:`check-1501`） + * 音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。 diff --git a/source/checks/inc/gl-multimedia-transcript.rst b/source/checks/inc/gl-multimedia-transcript.rst new file mode 100644 index 00000000..f774f424 --- /dev/null +++ b/source/checks/inc/gl-multimedia-transcript.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-1591`） + * 映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。 diff --git a/source/checks/inc/gl-multimedia-video-description.rst b/source/checks/inc/gl-multimedia-video-description.rst new file mode 100644 index 00000000..02897a04 --- /dev/null +++ b/source/checks/inc/gl-multimedia-video-description.rst @@ -0,0 +1,4 @@ +プロダクト（:ref:`check-1561`） + * 動画は、元々収録されている音声トラックの内容から容易に映像を推測できる。または + * 動画には音声解説が含まれている。または + * 映像に関するテキストによる説明が提供されている。 diff --git a/source/checks/inc/gl-page-consistent-navigation.rst b/source/checks/inc/gl-page-consistent-navigation.rst new file mode 100644 index 00000000..9f517e65 --- /dev/null +++ b/source/checks/inc/gl-page-consistent-navigation.rst @@ -0,0 +1,5 @@ +デザイン（:ref:`check-0661`） + * ページのどの部分がそれぞれ ``header``, ``nav``, ``main``, ``footer`` 要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。 +デザイン（:ref:`check-0781`）、プロダクト（:ref:`check-0801`） + * グローバル・ナビゲーション、ヘッダー、フッター、パンくずリスト、サポートUIなど、複数のページで共通に用いられているページの構成要素は、すべてのページで同じ出現順序になっている。かつ + * これらの構成要素の中でのリンクやボタンの出現順序はすべてのページで同じになっている。 diff --git a/source/checks/inc/gl-page-headings.rst b/source/checks/inc/gl-page-headings.rst new file mode 100644 index 00000000..5e941903 --- /dev/null +++ b/source/checks/inc/gl-page-headings.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0721`） + * ページ内の機能や内容の区切り、本分の先頭部分などに適切に見出しが配置されている。 +コード（:ref:`check-0731`） + * ``h1`` ～ ``h6`` 要素で見出しが適切にマークアップされている。 +プロダクト（:ref:`check-0741`） + * スクリーン・リーダーが見出しを適切に見出しとして認識している。 diff --git a/source/checks/inc/gl-page-landmark.rst b/source/checks/inc/gl-page-landmark.rst new file mode 100644 index 00000000..367c01a7 --- /dev/null +++ b/source/checks/inc/gl-page-landmark.rst @@ -0,0 +1,5 @@ +デザイン（:ref:`check-0661`） + * ページのどの部分がそれぞれ ``header``, ``nav``, ``main``, ``footer`` 要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。 +コード（:ref:`check-0671`） + * ``header``, ``main``, ``nav``, ``footer`` の各要素が適切に用いられている。または + * これらが ``role`` 属性で明示されている。 diff --git a/source/checks/inc/gl-page-location.rst b/source/checks/inc/gl-page-location.rst new file mode 100644 index 00000000..ea23a727 --- /dev/null +++ b/source/checks/inc/gl-page-location.rst @@ -0,0 +1,8 @@ +デザイン（:ref:`check-0841`） + * グローバル・ナビゲーション内の表示やいわゆるパンくずリストで、そのページのサイト内での位置が明示されている。 +コード（:ref:`check-0851`） + * ``aria-current`` 属性を用いて、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が明示されている。 +プロダクト（:ref:`check-0861`） + * スクリーン・リーダーで、グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような読み上げがされる。 +プロダクト（:ref:`check-0862`） + * グローバル・ナビゲーションやパンくずリスト内でそのページの位置が分かるような表示がされている。 diff --git a/source/checks/inc/gl-page-markup-main.rst b/source/checks/inc/gl-page-markup-main.rst new file mode 100644 index 00000000..4cb058b7 --- /dev/null +++ b/source/checks/inc/gl-page-markup-main.rst @@ -0,0 +1,5 @@ +コード（:ref:`check-0672`） + * ``main`` 要素が本文の開始位置を反映している。または + * 本文の先頭部分に ``h1`` 要素や ``h2`` 要素でマークアップされた見出しがある。 +プロダクト（:ref:`check-0681`） + * スクリーン・リーダーの見出しジャンプ機能やリージョン間ジャンプ機能で本文の開始位置を見つけることができる。 diff --git a/source/checks/inc/gl-page-markup-order.rst b/source/checks/inc/gl-page-markup-order.rst new file mode 100644 index 00000000..64b493cf --- /dev/null +++ b/source/checks/inc/gl-page-markup-order.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0711`） + * ページの状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。 diff --git a/source/checks/inc/gl-page-orientation.rst b/source/checks/inc/gl-page-orientation.rst new file mode 100644 index 00000000..46d2ad0c --- /dev/null +++ b/source/checks/inc/gl-page-orientation.rst @@ -0,0 +1,4 @@ +デザイン（:ref:`check-0751`） + * 特定の画面方向に固定した使用を前提としたデザインになっていない。 +プロダクト（:ref:`check-0771`） + * 画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。 diff --git a/source/checks/inc/gl-page-redundant-navigation.rst b/source/checks/inc/gl-page-redundant-navigation.rst new file mode 100644 index 00000000..1a0af605 --- /dev/null +++ b/source/checks/inc/gl-page-redundant-navigation.rst @@ -0,0 +1,3 @@ +デザイン（:ref:`check-0811`） + * そのページへの到達手段が複数ある。 + （例示有り） diff --git a/source/checks/inc/gl-page-title.rst b/source/checks/inc/gl-page-title.rst new file mode 100644 index 00000000..0d261355 --- /dev/null +++ b/source/checks/inc/gl-page-title.rst @@ -0,0 +1,4 @@ +デザイン（:ref:`check-0631`） + * そのページの目的を示し、かつ他のページとは異なる ページ・タイトル（ ``title`` 要素）が設計資料で定義されている。 +プロダクト（:ref:`check-0651`） + * そのページの目的を示し、かつ他のページとは異なるページ・タイトルが付けられている。（ブラウザーのタイトルバー/タブバーに表示されている。） diff --git a/source/checks/inc/gl-text-color-only.rst b/source/checks/inc/gl-text-color-only.rst new file mode 100644 index 00000000..0a3f4acc --- /dev/null +++ b/source/checks/inc/gl-text-color-only.rst @@ -0,0 +1,6 @@ +デザイン（:ref:`check-0031`）、プロダクト（:ref:`check-0051`） + * グレイスケール表示でも利用に支障が出ない: + + * リンク箇所を判別できる + * 画像、テキストの意図が伝わる + * 入力フォームの必須項目、エラーを認知できる diff --git a/source/checks/inc/gl-text-contrast.rst b/source/checks/inc/gl-text-contrast.rst new file mode 100644 index 00000000..a6ab53d0 --- /dev/null +++ b/source/checks/inc/gl-text-contrast.rst @@ -0,0 +1,7 @@ +デザイン（:ref:`check-0001`）、プロダクト（:ref:`check-0021`） + * 充分なコントラスト比 ([MUST]3:1以上、[SHOULD]4.5:1以上) が確保されている。 + + * アイコンと背景色 + * 画像化されたテキスト、その他の画像内のテキストや重要な情報と背景色 + * 画像および画像化されたテキストとその隣接領域 + * テキストと背景色 diff --git a/source/checks/inc/gl-text-customize.rst b/source/checks/inc/gl-text-customize.rst new file mode 100644 index 00000000..7c418938 --- /dev/null +++ b/source/checks/inc/gl-text-customize.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0891`） + * line-heightを1.5em以上、段落感の空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を途中で読めなくなるなど、コンテンツおよび機能に損失が生じない。 diff --git a/source/checks/inc/gl-text-heading-label.rst b/source/checks/inc/gl-text-heading-label.rst new file mode 100644 index 00000000..10d62fa1 --- /dev/null +++ b/source/checks/inc/gl-text-heading-label.rst @@ -0,0 +1,2 @@ +デザイン（:ref:`check-0271`） + * 見出しのテキストは、内容を適切に示す文言になっている。 diff --git a/source/checks/inc/gl-text-multiple-modality.rst b/source/checks/inc/gl-text-multiple-modality.rst new file mode 100644 index 00000000..06a9cdee --- /dev/null +++ b/source/checks/inc/gl-text-multiple-modality.rst @@ -0,0 +1,3 @@ +デザイン（:ref:`check-0032`） + * 形状、色、大きさ、視覚的な位置、方向、音などが分からないと理解できないような説明をしていない。 + （例示有り） diff --git a/source/checks/inc/gl-text-page-lang.rst b/source/checks/inc/gl-text-page-lang.rst new file mode 100644 index 00000000..142fb446 --- /dev/null +++ b/source/checks/inc/gl-text-page-lang.rst @@ -0,0 +1,2 @@ +コード（:ref:`check-0611`） + * 日本語のページには、 ```` の記述がある。 diff --git a/source/checks/inc/gl-text-phrase-lang.rst b/source/checks/inc/gl-text-phrase-lang.rst new file mode 100644 index 00000000..66411ff5 --- /dev/null +++ b/source/checks/inc/gl-text-phrase-lang.rst @@ -0,0 +1,4 @@ +コード（:ref:`check-0911`） + * 複数の言語が含まれているテキストについて、適切に ``lang`` 属性が指定されている。 +プロダクト（:ref:`check-0921`） + * 複数の言語が含まれているテキストについて、iOS VoiceOverのように多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。 diff --git a/source/checks/inc/gl-text-zoom-reflow.rst b/source/checks/inc/gl-text-zoom-reflow.rst new file mode 100644 index 00000000..e13f0bb6 --- /dev/null +++ b/source/checks/inc/gl-text-zoom-reflow.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0322`） + * 4倍の拡大表示をしたときにも適切にリフローされ、読み取れない内容や利用できない機能がない。 diff --git a/source/checks/inc/gl-text-zoom.rst b/source/checks/inc/gl-text-zoom.rst new file mode 100644 index 00000000..11b5bdb6 --- /dev/null +++ b/source/checks/inc/gl-text-zoom.rst @@ -0,0 +1,2 @@ +プロダクト（:ref:`check-0321`） + * 200パーセントまで拡大しても、テキストの理解を妨げるようなレイアウト崩れが起こらない。 diff --git a/source/checks/index.rst b/source/checks/index.rst new file mode 100644 index 00000000..1fa6e2c0 --- /dev/null +++ b/source/checks/index.rst @@ -0,0 +1,17 @@ +.. _check-index: + +アクセシビリティー・チェック・リスト +-------------------------------------- + +書くガイドラインの「チェック内容」に示したものを、チェックID順に掲載しています。 + +それぞれ、以下の項目を記しています。 + +* チェックID +* チェック内容 +* 対象：デザイン、コード、またはプロダクト +* 関連ガイドライン：そのチェックによって対応状況を確認することができるガイドライン +* 参考情報：そのチェックの意図や実施方法に関する情報（各関連ガイドラインで掲載しているものと同じです。） + + +.. include:: inc/allchecks.rst diff --git a/source/conf.py b/source/conf.py index 59397701..81f94980 100644 --- a/source/conf.py +++ b/source/conf.py @@ -20,9 +20,9 @@ project = 'freeeアクセシビリティー・ガイドライン' copyright = '2020, freee株式会社' author = 'freee株式会社' -version = 'Ver. 202007.0' +version = 'Ver. 202008.0' release = version -publishedDate = u'2020年7月10日' +publishedDate = u'2020年8月21日' if 'internal' in tags: publishedDate = datetime.datetime.now().strftime("%Y-%m-%d") @@ -37,7 +37,7 @@ # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom # ones. extensions = [ - 'japanesesupport', + 'sphinxcontrib.trimblank', 'sphinx.ext.todo', ] @@ -55,13 +55,15 @@ # List of patterns, relative to source directory, that match files and # directories to ignore when looking for source files. # This pattern also affects html_static_path and html_extra_path. -exclude_patterns = [] +exclude_patterns = [ + "checks/inc/*", + "intro/ChangeLog/*" +] # substitution definitions: rst_prolog = u""" .. |published_date| replace:: {pubdate} -.. include:: /defs.txt .. include:: /WCAG21-SC-defs.txt """.format( pubdate = publishedDate diff --git a/source/defs.txt b/source/defs.txt deleted file mode 100644 index c3a4d3c6..00000000 --- a/source/defs.txt +++ /dev/null @@ -1,8 +0,0 @@ -.. |functionality| replace:: 機能 - -.. |visual| replace:: ビジュアル - -.. |behavior| replace:: 挙動 - -.. |markup| replace:: マークアップ - diff --git a/source/explanations/dynamic_content-auto-updated.rst b/source/explanations/dynamic_content-auto-updated.rst index c846ade1..c383a9a6 100644 --- a/source/explanations/dynamic_content-auto-updated.rst +++ b/source/explanations/dynamic_content-auto-updated.rst @@ -1,4 +1,4 @@ -.. _exp-dynamic-content-auto-update: +.. _exp-dynamic-content-auto-updated: 自動的に変化するコンテンツの問題点 ------------------------------------ diff --git a/source/explanations/dynamic_content-hover.rst b/source/explanations/dynamic_content-hover.rst index 67019436..8b9bb7ae 100644 --- a/source/explanations/dynamic_content-hover.rst +++ b/source/explanations/dynamic_content-hover.rst @@ -1,4 +1,4 @@ -.. _exp-hover-content: +.. _exp-dynamic-content-hover: ホバーで表示されるコンテンツと拡大表示 ---------------------------------------- diff --git a/source/explanations/target-size.rst b/source/explanations/target-size.rst index eee4f70d..b144b2ba 100644 --- a/source/explanations/target-size.rst +++ b/source/explanations/target-size.rst @@ -1,9 +1,7 @@ .. _exp-target-size: -小さすぎるクリックやタッチのターゲット・サイズの問題点 --------------------------------------------------------- - -.. todo:: 開発者ツールを使ったターゲット・サイズの確認方法を追加 +クリックやタッチのターゲット・サイズに関連する問題とターゲット・サイズの確認方法 +----------------------------------------------------------------------------------- 上肢が不自由なユーザーは、細かい操作が苦手な場合があります。 また、ロービジョンのユーザーの中にも細かいマウス操作が苦手なユーザーがいます。 @@ -12,6 +10,36 @@ なおフォームにおいては、フォーム・フィールドのラベルを適切にマークアップすることで、ラベルもクリック/タッチのターゲットの一部になります。 +クリック/タッチのターゲット・サイズの確認方法 +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +クリックやタッチを受け取る要素のサイズは、ブラウザーの開発者ツールを用いれば確認することができます。 +ただ、この方法の場合、サイズを確認する要素を正確に指定する必要があることに加えて、複雑な方法でサイズが制御されているような場合もあるため、正確に判断することが容易ではない場合もあります。 + +そこで、1辺が44pxの正方形を画面上に表示し、この正方形とターゲットのサイズを比較するという簡易的な方法を併用すると良いでしょう。 + +具体的には、以下のブックマークレットを利用することで、1辺が44pxの赤枠の正方形の内側に、1辺が24pxの青枠の正方形をマウスに追従する形で表示することができます。 + +#. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。 + + .. raw:: html + +
コードを表示 + + .. code-block:: javascript + + javascript:(function(){var d = document,e=d.createElement('div'),g=d.createElement('div'),w=window;d.body.appendChild(e);e.appendChild(g);e.setAttribute('style','position:absolute;top:0;left:0;z-index:2147483647;box-sizing:border-box;width:44px;height:44px;border:1px solid #f00;background:#fff;opacity:0.5;transform: translate(-50%,-50%);pointer-events:none;');g.setAttribute('style','position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:24px;height:24px;border:1px solid #00f;');w.onmousemove=(function(v){e.style.left=w.scrollX+v.clientX+'px';e.style.top=w.scrollY+v.clientY+'px'})})() + + .. only:: html + + .. raw:: html + +
+ 44x44 pxの4角形を表示するブックマークレット + +#. チェック対象のページを表示した状態で、このブックマークレットを実行。 + + 関連ガイドライン ~~~~~~~~~~~~~~~~ diff --git a/source/index.rst b/source/index.rst index b67c070c..5d025807 100644 --- a/source/index.rst +++ b/source/index.rst @@ -10,7 +10,9 @@ freeeアクセシビリティー・ガイドライン .. toctree:: :maxdepth: 2 + :titlesonly: intro/index categories/index + checks/index explanations/index diff --git a/source/intro/ChangeLog/202004.0.rst b/source/intro/ChangeLog/202004.0.rst new file mode 100644 index 00000000..bd8ddaa6 --- /dev/null +++ b/source/intro/ChangeLog/202004.0.rst @@ -0,0 +1,7 @@ +.. _ver-202004.0: + +`Ver. 202004.0 (2020年4月30日) `_ +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +* 初版公開 + diff --git a/source/intro/ChangeLog/202005.0.rst b/source/intro/ChangeLog/202005.0.rst new file mode 100644 index 00000000..959e0a0b --- /dev/null +++ b/source/intro/ChangeLog/202005.0.rst @@ -0,0 +1,33 @@ +.. _ver-202005.0: + +`Ver. 202005.0 (2020年5月21日、Global Accessibility Awareness Day) `_ +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +* 一部文言を修正 +* 色に関するガイドラインについて、色弱者に加えて視覚障害者のアクセスに影響することを「意図」に明記 +* 参考情報の追加: + + - :ref:`exp-dynamic-content-auto-updated` + - :ref:`exp-form-labeling` + - :ref:`exp-color-only` + - :ref:`exp-form-dynamic-content` + - :ref:`exp-form-errors` + - :ref:`exp-target-size` + - :ref:`exp-iot-usage` + - :ref:`exp-iot-text-alternative` + - :ref:`exp-contrast` + - :ref:`exp-text-custom-css` + - :ref:`exp-keyboard-notrap` + - :ref:`exp-input-device-various` + - :ref:`exp-multimedia-perceivable` + - :ref:`exp-multimedia-autoplay` + - :ref:`exp-multimedia-content-access` + - :ref:`exp-tab-order-check` + +* 参考情報の更新: + + - :ref:`exp-markup-component` : AccessibleNameとroleについて加筆 + +* 誤字修正 +* CSSなど修正 + diff --git a/source/intro/ChangeLog/202005.1.rst b/source/intro/ChangeLog/202005.1.rst new file mode 100644 index 00000000..04d3c9f3 --- /dev/null +++ b/source/intro/ChangeLog/202005.1.rst @@ -0,0 +1,8 @@ +.. _ver-202005.1: + +`Ver. 202005.1 (2020年5月26日) `_ +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +* `日本翻訳連盟 `_ が公開している `JTF日本語標準スタイルガイド(翻訳用） `_ に基づき表記揺れなど修正 +* 誤字修正 + diff --git a/source/intro/ChangeLog/202006.0.rst b/source/intro/ChangeLog/202006.0.rst new file mode 100644 index 00000000..4962e18f --- /dev/null +++ b/source/intro/ChangeLog/202006.0.rst @@ -0,0 +1,15 @@ +.. _ver-202006.0: + +`Ver. 202006.0 (2020年6月18日) `_ +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +* ガイドライン部分の文書構造を見直し +* :ref:`category-input-device` に関するガイドラインの構成を一部変更（内容に変更無し） +* コントラスト関連のガイドラインで、文字サイズの表記をpxとptを併記するように変更 +* :ref:`category-dynamic-content` に関するガイドラインにガイドラインを1項目追加： :ref:`gl-dynamic-content-maintain-dom-tree` +* その他内容の変更を伴わないガイドライン文言の変更 +* 「チェック内容」と「チェック対象」を対にして表記するように変更 +* チェック内容の追加と文言変更 +* 「意図」について、一部内容の変更を伴わない文言変更と追記 + + diff --git a/source/intro/ChangeLog/202007.0.rst b/source/intro/ChangeLog/202007.0.rst new file mode 100644 index 00000000..2835415e --- /dev/null +++ b/source/intro/ChangeLog/202007.0.rst @@ -0,0 +1,64 @@ +.. _ver-202007.0: + +`Ver. 202007.0 (2020年7月10日) `_ +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +* 参考情報追加： :ref:`exp-screen-reader-check` +* 参考情報更新 + + - :ref:`exp-input-device-various`： :ref:`gl-input-device-use-up-event` に関する説明で、クリック・イベントについての記述を追加 + +* 動的コンテンツの :ref:`gl-dynamic-content-pause-movement` から「動きを伴うコンテンツ」の記述を削除し、音声・映像コンテンツにアニメーションや動画を対象とした新ガイドラインを追加： :ref:`gl-multimedia-pause-movement` +* リンクのターゲット・サイズに関するガイドラインについて、テキスト・リンクについてはWCAGで例外とされているので、アイコンの場合の基準のみ記し、アイコンのカテゴリーに移動： :ref:`gl-icon-target-size` +* フォームのターゲット・サイズに関するガイドラインについて、アイコンと同じ基準を明記： :ref:`gl-form-target-size` +* 入力ディバイスのガイドライン2項目をマージ： :ref:`gl-input-device-independent` + + マージ対象ガイドライン： + + [MUST] 入力ディバイスのサポート + OSがサポートしている入力ディバイスの使用を妨げない。 + [MUST] ユーザーの動きだけをトリガーにしない + 加速度センサー、モーション・キャプチャーなどを活用した、ユーザーの動きをトリガーにする機能は、他のインターフェースによっても実行できるようにする。 + +* ガイドラインの文言を一部変更（下表参照） + +.. list-table:: Ver. 202007.0でのガイドライン文言変更箇所 + :header-rows: 1 + + * - 該当箇所 + - 変更前 + - 変更後 + - 補足 + * - ページ全体： :ref:`gl-page-headings` + - ``h?`` 要素を使って適切に見出しを付ける。 + - コンテンツを適切にセクション分けし、 ``h?`` 要素を使って見出しを付ける。 + - 意図が明確になるように同ガイドラインの見出しも変更しています。 + * - 入力ディバイス： :ref:`gl-input-device-use-up-event` + - 操作の実行、完了のトリガーにはダウン・イベントを使わず、アップ・イベントを使う。 + - クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベントを使わず、アップ・イベントやクリック・イベントを使い、誤った操作を中断できるようにする。 + - 意図の項にも追記して、ドラッグ&ドロップがこのガイドラインに抵触しないことを明示しています。 + * - テキスト： :ref:`gl-text-heading-label` + - 主題又は目的を説明する見出しおよびラベルを付ける。 + - 主題又は目的を説明する見出しを付ける。 + - 「ラベル」はフォーム・コントロールと画像の説明を意図したものでしたが、これらはそれぞれ別カテゴリーでカバーされているため削除しました。併せて見出しも変更しています。 + * - テキスト： :ref:`gl-text-color-only` + - 文字色に何らかの意味を持たせている場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。 + - 強調、引用など、何らかの意図を文字色を変えることによって表現している場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。 + - ガイドラインの意図を考慮して、掲載セクションを変更しています。 + * - 音声・映像コンテンツ： :ref:`gl-multimedia-transcript` + - テキストの代替情報ではない音声・映像コンテンツにおいて、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。 + - テキストの代替情報ではない、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。 + - + * - 動的コンテンツ： :ref:`gl-dynamic-content-pause-movement` + - 自動的に開始し5秒以上継続する、点滅、スクロールまたは動きを伴うコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるようにする。 + - 同じページ上に、自動的に開始し5秒以上継続する、点滅やスクロールを伴うコンテンツと、他のコンテンツを一緒に配置しない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。 + - + * - 動的コンテンツ： :ref:`gl-dynamic-content-pause-refresh` + - 自動的に内容が更新されるコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。 + - 予め設定された間隔で自動的に内容が更新されたり非表示になったりするコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。 + - + * - フォーム： :ref:`gl-form-errors-cancel` + - 誤った操作が確定することでユーザーに不利益が生じる可能性がある機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。 + - 法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。 + - + diff --git a/source/intro/ChangeLog/202008.0.rst b/source/intro/ChangeLog/202008.0.rst new file mode 100644 index 00000000..1466fa9d --- /dev/null +++ b/source/intro/ChangeLog/202008.0.rst @@ -0,0 +1,16 @@ +.. _ver-202008.0: + +`Ver. 202008.0 (2020年8月21日) `_ +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +* チェック内容の見直し + + - チェック対象を「デザイン」、「コード」、「プロダクト」に変更 + - 全ガイドラインに対するチェック内容の見直しと整理 + - すべてのチェック内容をまとめた章を追加： :ref:`check-index` + +* 参考情報更新 + + - クリック/タッチ・ターゲットのサイズの確認方法についての記述を追加： :ref:`exp-target-size` + +* 誤字修正 diff --git a/source/intro/index.rst b/source/intro/index.rst index e5511f35..4e2ca116 100644 --- a/source/intro/index.rst +++ b/source/intro/index.rst @@ -56,19 +56,20 @@ WCAG 2.1は、WCAG 2.0策定後の状況の変化などを反映した項目追 チェック内容 ^^^^^^^^^^^^^^ -そのガイドラインを満たしているかどうかを判断するために行うチェックの例を、チェック対象と共に示しています。 +そのガイドラインを満たしているかどうかを判断するために行うチェックの例を示しています。 ここに示しているのはあくまでも例で、他により適切なチェック方法が存在する可能性もあります。 +チェック内容には、チェック対象とチェックIDを併記しています。 +すべてのチェックは :ref:`check-index` にまとめてあり、「チェックID」からリンクしています。 + チェック対象は、「チェック内容」の種類に応じて、以下のように分類しています。 -|functionality| - 主に仕様を決める時点で確認すべき項目 -|visual| - 視覚的なデザイン、ワーディングなど、主にUXの設計段階で確認すべき項目 -|behavior| - 実際に操作してみたときの挙動で判断できる項目 -|markup| - マークアップやコーディングを確認しなければ判断が難しい項目 +デザイン + 主に仕様を決める時点や設計段階で確認すべき項目 +コード + マークアップやコーディングを確認しなければ判断が難しく、主に実装時に確認すべき項目 +プロダクト + 実際に操作してみたときの挙動で判断でき、主に実装後に確認する項目 これ以下の項目は、各ガイドラインの「詳細」の中に記述しています。 @@ -140,133 +141,17 @@ Copyright © 2020, freee株式会社 更新履歴 ~~~~~~~~~~ -.. _ver-202007.0: - -`Ver. 202007.0 (2020年7月10日) `_ -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -* 参考情報追加： :ref:`exp-screen-reader-check` -* 参考情報更新 - - - :ref:`exp-input-device-various`： :ref:`gl-input-device-use-up-event` に関する説明で、クリック・イベントについての記述を追加 - -* 動的コンテンツの :ref:`gl-dynamic-content-pause-movement` から「動きを伴うコンテンツ」の記述を削除し、音声・映像コンテンツにアニメーションや動画を対象とした新ガイドラインを追加： :ref:`gl-multimedia-pause-movement` -* リンクのターゲット・サイズに関するガイドラインについて、テキスト・リンクについてはWCAGで例外とされているので、アイコンの場合の基準のみ記し、アイコンのカテゴリーに移動： :ref:`gl-icon-target-size` -* フォームのターゲット・サイズに関するガイドラインについて、アイコンと同じ基準を明記： :ref:`gl-form-target-size` -* 入力ディバイスのガイドライン2項目をマージ： :ref:`gl-input-device-independent` - - マージ対象ガイドライン： - - [MUST] 入力ディバイスのサポート - OSがサポートしている入力ディバイスの使用を妨げない。 - [MUST] ユーザーの動きだけをトリガーにしない - 加速度センサー、モーション・キャプチャーなどを活用した、ユーザーの動きをトリガーにする機能は、他のインターフェースによっても実行できるようにする。 - -* ガイドラインの文言を一部変更（下表参照） - -.. list-table:: Ver. 202007.0でのガイドライン文言変更箇所 - :header-rows: 1 - - * - 該当箇所 - - 変更前 - - 変更後 - - 補足 - * - ページ全体： :ref:`gl-page-headings` - - ``h?`` 要素を使って適切に見出しを付ける。 - - コンテンツを適切にセクション分けし、 ``h?`` 要素を使って見出しを付ける。 - - 意図が明確になるように同ガイドラインの見出しも変更しています。 - * - 入力ディバイス： :ref:`gl-input-device-use-up-event` - - 操作の実行、完了のトリガーにはダウン・イベントを使わず、アップ・イベントを使う。 - - クリックやタップで実行される機能の実行、完了のトリガーには、ダウン・イベントを使わず、アップ・イベントやクリック・イベントを使い、誤った操作を中断できるようにする。 - - 意図の項にも追記して、ドラッグ&ドロップがこのガイドラインに抵触しないことを明示しています。 - * - テキスト： :ref:`gl-text-heading-label` - - 主題又は目的を説明する見出しおよびラベルを付ける。 - - 主題又は目的を説明する見出しを付ける。 - - 「ラベル」はフォーム・コントロールと画像の説明を意図したものでしたが、これらはそれぞれ別カテゴリーでカバーされているため削除しました。併せて見出しも変更しています。 - * - テキスト： :ref:`gl-text-color-only` - - 文字色に何らかの意味を持たせている場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。 - - 強調、引用など、何らかの意図を文字色を変えることによって表現している場合、書体など他の視覚的な要素も併せて用い、色が判別できなくてもその意味を理解できるようにする。 - - ガイドラインの意図を考慮して、掲載セクションを変更しています。 - * - 音声・映像コンテンツ： :ref:`gl-multimedia-transcript` - - テキストの代替情報ではない音声・映像コンテンツにおいて、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。 - - テキストの代替情報ではない、映像がなく音声のみの収録済みコンテンツの場合は、書き起こしテキストを提供する。 - - - * - 動的コンテンツ： :ref:`gl-dynamic-content-pause-movement` - - 自動的に開始し5秒以上継続する、点滅、スクロールまたは動きを伴うコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるようにする。 - - 同じページ上に、自動的に開始し5秒以上継続する、点滅やスクロールを伴うコンテンツと、他のコンテンツを一緒に配置しない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。 - - - * - 動的コンテンツ： :ref:`gl-dynamic-content-pause-refresh` - - 自動的に内容が更新されるコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。 - - 予め設定された間隔で自動的に内容が更新されたり非表示になったりするコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。 - - - * - フォーム： :ref:`gl-form-errors-cancel` - - 誤った操作が確定することでユーザーに不利益が生じる可能性がある機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。 - - 法的行為、経済的取引、データの変更や削除を生じる機能については、取り消し、送信前の確認・修正、または送信時のエラー・チェックと修正を可能にする。 - - - -.. _ver-202006.0: - -`Ver. 202006.0 (2020年6月18日) `_ -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -* ガイドライン部分の文書構造を見直し -* :ref:`category-input-device` に関するガイドラインの構成を一部変更（内容に変更無し） -* コントラスト関連のガイドラインで、文字サイズの表記をpxとptを併記するように変更 -* :ref:`category-dynamic-content` に関するガイドラインにガイドラインを1項目追加： :ref:`gl-dynamic-content-maintain-dom-tree` -* その他内容の変更を伴わないガイドライン文言の変更 -* 「チェック内容」と「チェック対象」を対にして表記するように変更 -* チェック内容の追加と文言変更 -* 「意図」について、一部内容の変更を伴わない文言変更と追記 - - -.. _ver-202005.1: - -`Ver. 202005.1 (2020年5月26日) `_ -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -* `日本翻訳連盟 `_ が公開している `JTF日本語標準スタイルガイド(翻訳用） `_ に基づき表記揺れなど修正 -* 誤字修正 - -.. _ver-202005.0: - -`Ver. 202005.0 (2020年5月21日、Global Accessibility Awareness Day) `_ -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -* 一部文言を修正 -* 色に関するガイドラインについて、色弱者に加えて視覚障害者のアクセスに影響することを「意図」に明記 -* 参考情報の追加: - - - :ref:`exp-dynamic-content-auto-update` - - :ref:`exp-form-labeling` - - :ref:`exp-color-only` - - :ref:`exp-form-dynamic-content` - - :ref:`exp-form-errors` - - :ref:`exp-target-size` - - :ref:`exp-iot-usage` - - :ref:`exp-iot-text-alternative` - - :ref:`exp-contrast` - - :ref:`exp-text-custom-css` - - :ref:`exp-keyboard-notrap` - - :ref:`exp-input-device-various` - - :ref:`exp-multimedia-perceivable` - - :ref:`exp-multimedia-autoplay` - - :ref:`exp-multimedia-content-access` - - :ref:`exp-tab-order-check` - -* 参考情報の更新: - - - :ref:`exp-markup-component` : AccessibleNameとroleについて加筆 - -* 誤字修正 -* CSSなど修正 - -.. _ver-202004.0: - -`Ver. 202004.0 (2020年4月30日) `_ -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -* 初版公開 +.. include:: ChangeLog/202008.0.rst + +.. include:: ChangeLog/202007.0.rst + +.. include:: ChangeLog/202006.0.rst + +.. include:: ChangeLog/202005.1.rst + +.. include:: ChangeLog/202005.0.rst +.. include:: ChangeLog/202004.0.rst .. _WCAG20: https://www.w3.org/TR/WCAG20/ .. _WCAG21: https://www.w3.org/TR/WCAG21/ diff --git a/source/japanesesupport.py b/source/japanesesupport.py deleted file mode 100644 index 971c58a5..00000000 --- a/source/japanesesupport.py +++ /dev/null @@ -1,15 +0,0 @@ -def trunc_whitespace(app, doctree, docname): - from docutils.nodes import Text, paragraph - if not app.config.japanesesupport_trunc_whitespace: - return - for node in doctree.traverse(Text): - if isinstance(node.parent, paragraph): - newtext = node.astext() - for c in "\n\r\t": - newtext = newtext.replace(c, "") - newtext = newtext.strip() - node.parent.replace(node, Text(newtext)) - -def setup(app): - app.add_config_value('japanesesupport_trunc_whitespace', True, True) - app.connect("doctree-resolved", trunc_whitespace)