{"id":264,"date":"2026-09-24T10:12:10","date_gmt":"2026-09-24T02:12:10","guid":{"rendered":"https:\/\/yykcj.com\/?p=264"},"modified":"2026-09-24T10:12:10","modified_gmt":"2026-09-24T02:12:10","slug":"web-%e6%97%a0%e9%9a%9c%e7%a2%8d-a11y-%e6%9c%80%e4%bd%b3%e5%ae%9e%e8%b7%b5%ef%bc%9a%e4%bb%8e%e8%af%ad%e4%b9%89%e5%8c%96%e5%88%b0%e9%94%ae%e7%9b%98%e5%af%bc%e8%88%aa%e7%9a%84%e5%ae%8c%e6%95%b4","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=264","title":{"rendered":"Web \u65e0\u969c\u788d (A11y) \u6700\u4f73\u5b9e\u8df5\uff1a\u4ece\u8bed\u4e49\u5316\u5230\u952e\u76d8\u5bfc\u822a\u7684\u5b8c\u6574\u6307\u5357"},"content":{"rendered":"<h2>\u4e3a\u4ec0\u4e48\u4f60\u7684\u4e0b\u4e00\u4e2a\u9879\u76ee\u5fc5\u987b\u8003\u8651\u65e0\u969c\u788d<\/h2>\n<p>\u60f3\u8c61\u4e00\u4e0b\uff1a\u4f60\u6b63\u5728\u4f7f\u7528\u4e00\u4e2a\u7535\u5546\u7f51\u7ad9\uff0c\u4f46\u65e0\u6cd5\u7528\u9f20\u6807\u70b9\u51fb\u201c\u52a0\u5165\u8d2d\u7269\u8f66\u201d\u6309\u94ae\uff0c\u53ea\u80fd\u9760\u952e\u76d8 Tab \u952e\u5bfc\u822a\u3002\u5f53\u4f60\u7ec8\u4e8e\u627e\u5230\u6309\u94ae\u65f6\uff0c\u5c4f\u5e55\u9605\u8bfb\u5668\u5374\u53ea\u8bfb\u51fa\u201c\u6309\u94ae\u201d\u4e24\u4e2a\u5b57\uff0c\u4f60\u6839\u672c\u4e0d\u77e5\u9053\u8fd9\u662f\u54ea\u4e2a\u5546\u54c1\u7684\u6309\u94ae\u3002\u8fd9\u4e0d\u662f\u5047\u8bbe\u2014\u2014\u5168\u7403\u6709\u8d85\u8fc7 10 \u4ebf\u4eba\u5b58\u5728\u67d0\u79cd\u5f62\u5f0f\u7684\u6b8b\u75be\uff0c\u800c\u7cdf\u7cd5\u7684\u65e0\u969c\u788d\u8bbe\u8ba1\u6bcf\u5929\u90fd\u5728\u5c06\u4ed6\u4eec\u62d2\u4e4b\u95e8\u5916\u3002<\/p>\n<p>Web \u65e0\u969c\u788d\uff08Accessibility\uff0c\u7b80\u79f0 A11y\uff09\u4e0d\u662f\u53ef\u9009\u9879\uff0c\u800c\u662f\u73b0\u4ee3 Web \u5f00\u53d1\u7684\u57fa\u672c\u8981\u6c42\u3002\u5b83\u4e0d\u4ec5\u80fd\u5e2e\u52a9\u6b8b\u969c\u7528\u6237\uff0c\u8fd8\u80fd\u63d0\u5347\u6240\u6709\u7528\u6237\u7684\u4f53\u9a8c\uff1a\u66f4\u6e05\u6670\u7684\u8bed\u4e49\u3001\u66f4\u597d\u7684\u952e\u76d8\u652f\u6301\u3001\u66f4\u5065\u58ee\u7684\u4ee3\u7801\u3002\u672c\u6587\u5c06\u4ece\u5b9e\u6218\u89d2\u5ea6\u51fa\u53d1\uff0c\u5e26\u4f60\u638c\u63e1 A11y \u7684\u6838\u5fc3\u6700\u4f73\u5b9e\u8df5\u3002<\/p>\n<h2>1. \u8bed\u4e49\u5316 HTML\uff1a\u65e0\u969c\u788d\u7684\u57fa\u77f3<\/h2>\n<p>\u5f88\u591a\u5f00\u53d1\u8005\u4e60\u60ef\u7528 <code><\/p>\n<div><\/code> \u548c <code><span><\/code> \u642d\u5efa\u4e00\u5207\uff0c\u7136\u540e\u901a\u8fc7 CSS \u7f8e\u5316\u3002\u4f46\u5c4f\u5e55\u9605\u8bfb\u5668\u65e0\u6cd5\u7406\u89e3\u8fd9\u4e9b\u201c\u65e0\u8bed\u4e49\u201d\u7684\u5bb9\u5668\u3002<strong>\u6b63\u786e\u7684\u505a\u6cd5\u662f\u4f18\u5148\u4f7f\u7528\u539f\u751f HTML \u5143\u7d20<\/strong>\uff0c\u5b83\u4eec\u81ea\u5e26\u89d2\u8272\uff08role\uff09\u3001\u72b6\u6001\u548c\u952e\u76d8\u884c\u4e3a\u3002<\/p>\n<h3>\u9519\u8bef\u793a\u8303<\/h3>\n<pre><code class=\"language-html\">\n&lt;div class=&quot;btn&quot; onclick=&quot;submitForm()&quot;&gt;\u63d0\u4ea4&lt;\/div&gt;\n<\/code><\/pre>\n<p>\u5c4f\u5e55\u9605\u8bfb\u5668\u53ea\u4f1a\u8bfb\u4f5c\u201c\u63d0\u4ea4\u201d\uff0c\u4e0d\u4f1a\u544a\u77e5\u7528\u6237\u8fd9\u662f\u4e00\u4e2a\u6309\u94ae\uff0c\u4e5f\u65e0\u6cd5\u901a\u8fc7\u952e\u76d8 Enter \u6216 Space \u89e6\u53d1\u3002<\/p>\n<h3>\u6b63\u786e\u793a\u8303<\/h3>\n<pre><code class=\"language-html\">\n&lt;button type=&quot;submit&quot;&gt;\u63d0\u4ea4&lt;\/button&gt;\n<\/code><\/pre>\n<p><code><button><\/code> \u81ea\u5e26 <code>role=\"button\"<\/code>\u3001\u952e\u76d8\u7126\u70b9\u3001Enter\/Space \u89e6\u53d1\u70b9\u51fb\u4e8b\u4ef6\u3002<strong>\u6c38\u8fdc\u4e0d\u8981\u7528 div \u6a21\u62df\u6309\u94ae<\/strong>\uff0c\u9664\u975e\u4f60\u624b\u52a8\u8865\u5168\u6240\u6709\u884c\u4e3a\uff08\u4e0d\u63a8\u8350\uff09\u3002<\/p>\n<h3>\u5e38\u7528\u8bed\u4e49\u5143\u7d20\u901f\u67e5<\/h3>\n<p>| \u573a\u666f | \u63a8\u8350\u5143\u7d20 | \u907f\u514d | |&#8212;&#8212;|&#8212;&#8212;&#8212;-|&#8212;&#8212;| | \u5bfc\u822a | <code><\/p>\n<nav><\/code> | <code><\/p>\n<div class=\"nav\"><\/code> | | \u4e3b\u8981\u5185\u5bb9 | <code><main><\/code> | <code><\/p>\n<div id=\"content\"><\/code> | | \u6587\u7ae0 | <code><\/p>\n<article><\/code> | <code><\/p>\n<div class=\"post\"><\/code> | | \u6309\u94ae | <code><button><\/code> | <code><\/p>\n<div role=\"button\"><\/code> | | \u8868\u5355\u6807\u7b7e | <code><label for=\"id\"><\/code> | <code><span><\/code> + \u5360\u4f4d\u7b26 |<\/p>\n<p><strong>\ud83d\udca1 \u63d0\u793a<\/strong>\uff1aHTML5 \u8bed\u4e49\u5143\u7d20\u5728 IE9+ \u4e2d\u652f\u6301\u826f\u597d\uff0c\u653e\u5fc3\u4f7f\u7528\u3002<\/p>\n<h2>2. ARIA \u5c5e\u6027\uff1a\u589e\u5f3a\u800c\u975e\u66ff\u4ee3<\/h2>\n<p>ARIA\uff08Accessible Rich Internet Applications\uff09\u662f\u4e00\u7ec4\u5c5e\u6027\uff0c\u7528\u4e8e\u8865\u5145 HTML \u7684\u8bed\u4e49\u3002\u4f46\u8bf7\u8bb0\u4f4f\u7b2c\u4e00\u6761\u89c4\u5219\uff1a<strong>\u5982\u679c\u539f\u751f HTML \u80fd\u5b9e\u73b0\uff0c\u5c31\u4e0d\u8981\u7528 ARIA<\/strong>\u3002<\/p>\n<h3>\u5e38\u89c1 ARIA \u4f7f\u7528\u573a\u666f<\/h3>\n<h4>2.1 \u52a8\u6001\u5185\u5bb9\u66f4\u65b0<\/h4>\n<p>\u5f53\u9875\u9762\u5c40\u90e8\u5237\u65b0\u65f6\uff0c\u5c4f\u5e55\u9605\u8bfb\u5668\u53ef\u80fd\u4e0d\u4f1a\u81ea\u52a8\u64ad\u62a5\u3002\u4f7f\u7528 <code>aria-live<\/code> \u533a\u57df\uff1a<\/p>\n<pre><code class=\"language-html\">\n&lt;div aria-live=&quot;polite&quot; id=&quot;status-message&quot;&gt;&lt;\/div&gt;\n&lt;script&gt;\n  function updateStatus(msg) {\n    document.getElementById(&#x27;status-message&#x27;).textContent = msg;\n  }\n  \/\/ \u8c03\u7528\u540e\u5c4f\u5e55\u9605\u8bfb\u5668\u4f1a\u6717\u8bfb\u65b0\u5185\u5bb9\n  updateStatus(&#x27;\u6570\u636e\u52a0\u8f7d\u5b8c\u6210&#x27;);\n&lt;\/script&gt;\n<\/code><\/pre>\n<ul>\n<li><code>aria-live=\"polite\"<\/code>\uff1a\u7b49\u5f85\u7528\u6237\u7a7a\u95f2\u65f6\u64ad\u62a5\uff08\u9002\u5408\u72b6\u6001\u66f4\u65b0\uff09<\/li>\n<li><code>aria-live=\"assertive\"<\/code>\uff1a\u7acb\u5373\u6253\u65ad\u64ad\u62a5\uff08\u9002\u5408\u9519\u8bef\u63d0\u793a\uff09<\/li>\n<\/ul>\n<h4>2.2 \u81ea\u5b9a\u4e49\u7ec4\u4ef6<\/h4>\n<p>\u5982\u679c\u4f60\u5fc5\u987b\u5b9e\u73b0\u81ea\u5b9a\u4e49\u4e0b\u62c9\u83dc\u5355\uff0c\u9700\u8981\u6dfb\u52a0\u89d2\u8272\u548c\u72b6\u6001\uff1a<\/p>\n<pre><code class=\"language-html\">\n&lt;div role=&quot;combobox&quot; aria-expanded=&quot;false&quot; aria-haspopup=&quot;listbox&quot;&gt;\n  &lt;input type=&quot;text&quot; aria-autocomplete=&quot;list&quot; aria-controls=&quot;listbox&quot; \/&gt;\n  &lt;ul id=&quot;listbox&quot; role=&quot;listbox&quot; hidden&gt;\n    &lt;li role=&quot;option&quot; tabindex=&quot;-1&quot;&gt;\u9009\u9879\u4e00&lt;\/li&gt;\n    &lt;li role=&quot;option&quot; tabindex=&quot;-1&quot;&gt;\u9009\u9879\u4e8c&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p><strong>\u6ce8\u610f<\/strong>\uff1aARIA \u53ea\u6539\u53d8\u8bed\u4e49\uff0c\u4e0d\u63d0\u4f9b\u952e\u76d8\u4ea4\u4e92\u3002\u4f60\u5fc5\u987b\u624b\u52a8\u5b9e\u73b0\u65b9\u5411\u952e\u5bfc\u822a\u3001Enter \u9009\u62e9\u7b49\u884c\u4e3a\u3002<\/p>\n<h3>\u5e38\u89c1 ARIA \u5751\u70b9<\/h3>\n<ul>\n<li><code>aria-hidden=\"true\"<\/code> \u4f1a\u5b8c\u5168\u9690\u85cf\u5143\u7d20\uff0c\u4f46\u5143\u7d20\u4ecd\u53ef\u805a\u7126\u2014\u2014\u9700\u914d\u5408 <code>tabindex=\"-1\"<\/code>\u3002<\/li>\n<li>\u4e0d\u8981\u7ed9 <code><button><\/code> \u52a0 <code>role=\"button\"<\/code>\uff0c\u591a\u6b64\u4e00\u4e3e\u3002<\/li>\n<li><code>aria-label<\/code> \u4f1a\u8986\u76d6\u5143\u7d20\u5185\u7684\u6587\u672c\uff0c\u786e\u4fdd\u63cf\u8ff0\u51c6\u786e\u3002<\/li>\n<\/ul>\n<h2>3. \u952e\u76d8\u5bfc\u822a\uff1a\u8ba9\u6240\u6709\u529f\u80fd\u53ef\u89e6\u8fbe<\/h2>\n<p>\u952e\u76d8\u7528\u6237\uff08\u5305\u62ec\u4f7f\u7528\u5c4f\u5e55\u9605\u8bfb\u5668\u3001\u8fd0\u52a8\u969c\u788d\u8005\uff09\u4f9d\u8d56 Tab \u952e\u3001\u65b9\u5411\u952e\u3001Enter\/Space \u64cd\u4f5c\u3002\u4f60\u7684\u7f51\u7ad9\u5fc5\u987b\u652f\u6301\u5b8c\u6574\u7684\u952e\u76d8\u64cd\u4f5c\u3002<\/p>\n<h3>3.1 \u7126\u70b9\u7ba1\u7406<\/h3>\n<ul>\n<li><strong>\u53ef\u89c1\u7126\u70b9<\/strong>\uff1a\u6c38\u8fdc\u4e0d\u8981\u7528 <code>outline: none<\/code> \u79fb\u9664\u7126\u70b9\u6837\u5f0f\uff0c\u9664\u975e\u4f60\u63d0\u4f9b\u4e86\u66ff\u4ee3\u65b9\u6848\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-css\">\n\/* \u9519\u8bef\uff1a\u5b8c\u5168\u79fb\u9664\u7126\u70b9 *\/\nbutton:focus { outline: none; }\n\n\/* \u6b63\u786e\uff1a\u81ea\u5b9a\u4e49\u66f4\u660e\u663e\u7684\u7126\u70b9\u6837\u5f0f *\/\nbutton:focus-visible {\n  outline: 3px solid #1a73e8;\n  outline-offset: 2px;\n}\n<\/code><\/pre>\n<ul>\n<li><strong>\u8df3\u8fc7\u5bfc\u822a\u94fe\u63a5<\/strong>\uff1a\u5728\u9875\u9762\u9876\u90e8\u6dfb\u52a0\u201c\u8df3\u5230\u4e3b\u5185\u5bb9\u201d\u94fe\u63a5\uff0c\u65b9\u4fbf\u952e\u76d8\u7528\u6237\u8df3\u8fc7\u91cd\u590d\u7684\u5bfc\u822a\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-html\">\n&lt;a href=&quot;#main&quot; class=&quot;skip-link&quot;&gt;\u8df3\u5230\u4e3b\u5185\u5bb9&lt;\/a&gt;\n&lt;style&gt;\n.skip-link {\n  position: absolute;\n  left: -9999px;\n  top: 0;\n  background: #fff;\n  padding: 8px;\n  z-index: 100;\n}\n.skip-link:focus {\n  left: 0;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n<h3>3.2 \u7126\u70b9\u9677\u9631\uff08\u6a21\u6001\u6846\uff09<\/h3>\n<p>\u6253\u5f00\u6a21\u6001\u6846\u65f6\uff0c\u7126\u70b9\u5e94\u88ab\u9650\u5236\u5728\u6846\u5185\uff0c\u5173\u95ed\u540e\u8fd4\u56de\u89e6\u53d1\u5143\u7d20\u3002<\/p>\n<pre><code class=\"language-javascript\">\nfunction trapFocus(modal) {\n  const focusable = modal.querySelectorAll(&#x27;button, [href], input, select, textarea, [tabindex]:not([tabindex=&quot;-1&quot;])&#x27;);\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  modal.addEventListener(&#x27;keydown&#x27;, (e) =&gt; {\n    if (e.key === &#x27;Tab&#x27;) {\n      if (e.shiftKey &amp;&amp; document.activeElement === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey &amp;&amp; document.activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  });\n}\n<\/code><\/pre>\n<p><strong>\ud83d\udca1 \u63d0\u793a<\/strong>\uff1a\u73b0\u4ee3\u6d4f\u89c8\u5668\u652f\u6301 <code><dialog><\/code> \u5143\u7d20\uff0c\u81ea\u5e26\u7126\u70b9\u9677\u9631\u548c Esc \u5173\u95ed\uff0c\u4f18\u5148\u4f7f\u7528\u3002<\/p>\n<h2>4. \u989c\u8272\u4e0e\u5bf9\u6bd4\u5ea6\uff1a\u4e0d\u53ea\u662f\u7f8e\u89c2<\/h2>\n<p>\u4f4e\u5bf9\u6bd4\u5ea6\u6587\u5b57\u5bf9\u89c6\u529b\u969c\u788d\u8005\u3001\u8001\u5e74\u4eba\u4ee5\u53ca\u5f3a\u5149\u4e0b\u7684\u6240\u6709\u7528\u6237\u90fd\u662f\u707e\u96be\u3002WCAG 2.1 \u8981\u6c42\uff1a<\/p>\n<ul>\n<li>\u666e\u901a\u6587\u672c\u5bf9\u6bd4\u5ea6\u81f3\u5c11 <strong>4.5:1<\/strong><\/li>\n<li>\u5927\u6587\u672c\uff0818pt+ \u6216 14pt \u7c97\u4f53\uff09\u81f3\u5c11 <strong>3:1<\/strong><\/li>\n<li>\u975e\u6587\u672c\u5143\u7d20\uff08\u56fe\u6807\u3001\u8fb9\u6846\uff09\u81f3\u5c11 <strong>3:1<\/strong><\/li>\n<\/ul>\n<h3>\u68c0\u67e5\u5de5\u5177<\/h3>\n<ul>\n<li>Chrome DevTools\uff1aElements \u9762\u677f \u2192 \u989c\u8272\u9009\u62e9\u5668\u663e\u793a\u5bf9\u6bd4\u5ea6<\/li>\n<li>\u5728\u7ebf\u5de5\u5177\uff1aWebAIM Contrast Checker<\/li>\n<\/ul>\n<h3>\u4e0d\u8981\u53ea\u4f9d\u8d56\u989c\u8272\u4f20\u8fbe\u4fe1\u606f<\/h3>\n<pre><code class=\"language-html\">\n&lt;!-- \u9519\u8bef\uff1a\u4ec5\u7528\u7ea2\u8272\u8868\u793a\u9519\u8bef --&gt;\n&lt;input style=&quot;border-color: red&quot; \/&gt;\n\n&lt;!-- \u6b63\u786e\uff1a\u989c\u8272 + \u56fe\u6807 + \u6587\u672c --&gt;\n&lt;input aria-invalid=&quot;true&quot; aria-describedby=&quot;error-msg&quot; \/&gt;\n&lt;span id=&quot;error-msg&quot; style=&quot;color: red&quot;&gt;\n  &lt;span aria-hidden=&quot;true&quot;&gt;\u26a0\ufe0f&lt;\/span&gt; \u90ae\u7bb1\u683c\u5f0f\u4e0d\u6b63\u786e\n&lt;\/span&gt;\n<\/code><\/pre>\n<h2>5. \u56fe\u7247\u4e0e\u591a\u5a92\u4f53<\/h2>\n<h3>5.1 \u56fe\u7247\u66ff\u4ee3\u6587\u672c<\/h3>\n<ul>\n<li>\u6709\u610f\u4e49\u7684\u56fe\u7247\uff1a<code><img decoding=\"async\" src=\"chart.png\" alt=\"2023\u5e74\u9500\u552e\u989d\u589e\u957f20%\"><\/code><\/li>\n<li>\u88c5\u9970\u6027\u56fe\u7247\uff1a<code><img decoding=\"async\" src=\"divider.png\" alt=\"\"><\/code>\uff08\u7a7a alt\uff0c\u5c4f\u5e55\u9605\u8bfb\u5668\u8df3\u8fc7\uff09<\/li>\n<li>\u590d\u6742\u56fe\u8868\uff1a\u63d0\u4f9b\u8be6\u7ec6\u63cf\u8ff0\uff0c\u53ef\u7528 <code>aria-describedby<\/code> \u5173\u8054\u3002<\/li>\n<\/ul>\n<h3>5.2 \u89c6\u9891\u5b57\u5e55\u4e0e\u97f3\u9891\u63cf\u8ff0<\/h3>\n<ul>\n<li>\u4e3a\u89c6\u9891\u63d0\u4f9b <code><track kind=\"captions\"><\/code> \u5b57\u5e55<\/li>\n<li>\u4e3a\u7eaf\u97f3\u9891\u5185\u5bb9\u63d0\u4f9b\u6587\u5b57\u7a3f<\/li>\n<li>\u81ea\u52a8\u64ad\u653e\u89c6\u9891\u5fc5\u987b\u9759\u97f3\uff0c\u4e14\u63d0\u4f9b\u6682\u505c\u6309\u94ae<\/li>\n<\/ul>\n<h2>6. \u8868\u5355\u65e0\u969c\u788d<\/h2>\n<p>\u8868\u5355\u662f\u65e0\u969c\u788d\u95ee\u9898\u7684\u91cd\u707e\u533a\u3002\u786e\u4fdd\u6bcf\u4e2a\u8f93\u5165\u90fd\u6709\u53ef\u8bbf\u95ee\u7684\u6807\u7b7e\u3002<\/p>\n<pre><code class=\"language-html\">\n&lt;form&gt;\n  &lt;div&gt;\n    &lt;label for=&quot;name&quot;&gt;\u59d3\u540d&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; required aria-required=&quot;true&quot; \/&gt;\n  &lt;\/div&gt;\n  &lt;div&gt;\n    &lt;label for=&quot;email&quot;&gt;\u90ae\u7bb1&lt;\/label&gt;\n    &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; aria-describedby=&quot;email-hint&quot; \/&gt;\n    &lt;small id=&quot;email-hint&quot;&gt;\u6211\u4eec\u4e0d\u4f1a\u516c\u5f00\u4f60\u7684\u90ae\u7bb1&lt;\/small&gt;\n  &lt;\/div&gt;\n  &lt;button type=&quot;submit&quot;&gt;\u63d0\u4ea4&lt;\/button&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n<p><strong>\u6ce8\u610f<\/strong>\uff1a<\/p>\n<ul>\n<li>\u4e0d\u8981\u7528 <code>placeholder<\/code> \u4ee3\u66ff <code><label><\/code>\uff0c\u5360\u4f4d\u7b26\u5728\u8f93\u5165\u540e\u6d88\u5931\u3002<\/li>\n<li>\u9519\u8bef\u63d0\u793a\u9700\u7528 <code>aria-describedby<\/code> \u5173\u8054\u5230\u8f93\u5165\u6846\uff0c\u5e76\u8bbe\u7f6e <code>aria-invalid=\"true\"<\/code>\u3002<\/li>\n<li>\u5206\u7ec4\u76f8\u5173\u63a7\u4ef6\u7528 <code><br \/>\n<fieldset><\/code> \u548c <code><\/p>\n<legend><\/code>\u3002<\/li>\n<\/ul>\n<h2>7. \u6d4b\u8bd5\u4e0e\u5de5\u5177<\/h2>\n<h3>7.1 \u81ea\u52a8\u5316\u6d4b\u8bd5<\/h3>\n<ul>\n<li><strong>axe DevTools<\/strong>\uff1a\u6d4f\u89c8\u5668\u6269\u5c55\uff0c\u5feb\u901f\u626b\u63cf\u5e38\u89c1\u95ee\u9898\u3002<\/li>\n<li><strong>Lighthouse<\/strong>\uff1aChrome DevTools \u5185\u7f6e\uff0c\u751f\u6210\u65e0\u969c\u788d\u62a5\u544a\u3002<\/li>\n<li><strong>Pa11y<\/strong>\uff1a\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u53ef\u96c6\u6210\u5230 CI\u3002<\/li>\n<\/ul>\n<pre><code class=\"language-bash\">\nnpm install -g pa11y\npa11y https:\/\/example.com\n<\/code><\/pre>\n<h3>7.2 \u624b\u52a8\u6d4b\u8bd5<\/h3>\n<ul>\n<li><strong>\u952e\u76d8\u6d4b\u8bd5<\/strong>\uff1a\u62d4\u6389\u9f20\u6807\uff0c\u53ea\u7528 Tab\u3001Shift+Tab\u3001Enter\u3001Space\u3001\u65b9\u5411\u952e\u64cd\u4f5c\u6574\u4e2a\u9875\u9762\u3002<\/li>\n<li><strong>\u5c4f\u5e55\u9605\u8bfb\u5668<\/strong>\uff1aWindows \u7528 NVDA\uff08\u514d\u8d39\uff09\uff0cmacOS \u7528 VoiceOver\uff08\u5185\u7f6e\uff09\u3002<\/li>\n<li><strong>\u653e\u5927\u6d4b\u8bd5<\/strong>\uff1a\u6d4f\u89c8\u5668\u653e\u5927\u5230 200%\uff0c\u68c0\u67e5\u5e03\u5c40\u662f\u5426\u9519\u4e71\u3002<\/li>\n<\/ul>\n<p><strong>\ud83d\udca1 \u63d0\u793a<\/strong>\uff1a\u81ea\u52a8\u5316\u5de5\u5177\u53ea\u80fd\u53d1\u73b0\u7ea6 30% \u7684\u95ee\u9898\uff0c\u624b\u52a8\u6d4b\u8bd5\u5fc5\u4e0d\u53ef\u5c11\u3002<\/p>\n<h2>8. \u5e38\u89c1\u8bef\u533a\u4e0e\u6700\u4f73\u5b9e\u8df5\u603b\u7ed3<\/h2>\n<p>| \u8bef\u533a | \u6b63\u786e\u505a\u6cd5 | |&#8212;&#8212;|&#8212;&#8212;&#8212;-| | \u7528 div \u505a\u6309\u94ae | \u4f7f\u7528 <code><button><\/code> | | \u79fb\u9664\u7126\u70b9\u8f6e\u5ed3 | \u81ea\u5b9a\u4e49\u66f4\u660e\u663e\u7684\u7126\u70b9\u6837\u5f0f | | \u4ec5\u7528\u989c\u8272\u8868\u793a\u72b6\u6001 | \u989c\u8272+\u56fe\u6807+\u6587\u672c | | \u6240\u6709\u56fe\u7247\u90fd\u52a0 alt | \u88c5\u9970\u56fe\u7247\u7528 <code>alt=\"\"<\/code> | | \u5ffd\u7565\u952e\u76d8\u5bfc\u822a | \u786e\u4fdd\u6240\u6709\u529f\u80fd\u53ef\u952e\u76d8\u64cd\u4f5c | | \u6ee5\u7528 ARIA | \u4f18\u5148\u539f\u751f HTML |<\/p>\n<h2>\u7ed3\u8bed<\/h2>\n<p>Web \u65e0\u969c\u788d\u4e0d\u662f\u4e00\u6b21\u6027\u7684\u4efb\u52a1\uff0c\u800c\u662f\u6301\u7eed\u7684\u8fc7\u7a0b\u3002\u4ece\u4eca\u5929\u5f00\u59cb\uff0c\u5728\u4f60\u7684\u9879\u76ee\u4e2d\uff1a<\/p>\n<ol>\n<li>\u4f7f\u7528\u8bed\u4e49\u5316 HTML<\/li>\n<li>\u786e\u4fdd\u952e\u76d8\u53ef\u64cd\u4f5c<\/li>\n<li>\u68c0\u67e5\u989c\u8272\u5bf9\u6bd4\u5ea6<\/li>\n<li>\u4e3a\u56fe\u7247\u6dfb\u52a0\u6070\u5f53\u7684 alt<\/li>\n<li>\u7528\u5c4f\u5e55\u9605\u8bfb\u5668\u6d4b\u8bd5\u5173\u952e\u6d41\u7a0b<\/li>\n<\/ol>\n<p>\u8bb0\u4f4f\uff1a<strong>\u65e0\u969c\u788d\u8bbe\u8ba1\u60e0\u53ca\u6240\u6709\u4eba<\/strong>\u3002\u5f53\u4f60\u4e3a\u89c6\u969c\u7528\u6237\u4f18\u5316\u65f6\uff0c\u4f60\u4e5f\u8ba9\u6240\u6709\u7528\u6237\u5728\u5f3a\u5149\u4e0b\u3001\u5728\u5608\u6742\u73af\u5883\u4e2d\u3001\u5728\u4e34\u65f6\u53d7\u4f24\u65f6\u53d7\u76ca\u3002<\/p>\n<h3>\u5ef6\u4f38\u9605\u8bfb<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/\">WCAG 2.1 \u5feb\u901f\u53c2\u8003<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/Accessibility\">MDN \u65e0\u969c\u788d\u6307\u5357<\/a><\/li>\n<li><a href=\"https:\/\/www.a11yproject.com\/checklist\/\">A11y Project \u68c0\u67e5\u6e05\u5355<\/a><\/li>\n<\/ul>\n<p>\u73b0\u5728\uff0c\u6253\u5f00\u4f60\u7684\u9879\u76ee\uff0c\u8fd0\u884c\u4e00\u6b21 Lighthouse \u65e0\u969c\u788d\u5ba1\u8ba1\uff0c\u770b\u770b\u80fd\u53d1\u73b0\u591a\u5c11\u6539\u8fdb\u70b9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u7cfb\u7edf\u8bb2\u89e3 Web \u65e0\u969c\u788d\u5f00\u53d1\u7684\u6838\u5fc3\u5b9e\u8df5\uff0c\u6db5\u76d6\u8bed\u4e49\u5316 HTML\u3001ARIA \u5c5e\u6027\u3001\u952e\u76d8\u5bfc\u822a\u3001\u989c\u8272\u5bf9\u6bd4\u5ea6\u4e0e\u5c4f\u5e55\u9605\u8bfb\u5668\u6d4b\u8bd5\u3002\u901a\u8fc7\u53ef\u8fd0\u884c\u7684\u4ee3\u7801\u793a\u4f8b\u548c\u5e38\u89c1\u5751\u70b9\u5206\u6790\uff0c\u5e2e\u52a9\u5f00\u53d1\u8005\u6784\u5efa\u4eba\u4eba\u53ef\u7528\u7684 Web \u5e94\u7528\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[68,69,71,246,36,70],"class_list":["post-264","post","type-post","status-publish","format-standard","hentry","category-3","category-4","tag-a11y","tag-aria","tag-wcag","tag-web","tag-36","tag-70"],"_links":{"self":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=264"}],"version-history":[{"count":0,"href":"https:\/\/yykcj.com\/index.php?rest_route=\/wp\/v2\/posts\/264\/revisions"}],"wp:attachment":[{"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yykcj.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}