{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/experience/accessibility","result":{"data":{"current":{"frontmatter":{"title":"Accessibility  无障碍","order":7,"brief":"无障碍设计是让所有人都可以轻松地与产品互动，包括那些残障人群，为每个人提供更好的体验。Semi 设计系统旨在消除障碍并创造适合所有人的包容性产品体验。","icon":"doc-a11y"},"fields":{"type":"experience"},"tableOfContents":{"items":[{"url":"#无障碍专用主题","title":"无障碍专用主题"},{"url":"#了解用户需求","title":"了解用户需求","items":[{"url":"#视觉障碍","title":"视觉障碍"},{"url":"#设备依赖","title":"设备依赖"},{"url":"#认知障碍","title":"认知障碍"}]},{"url":"#键盘和焦点","title":"键盘和焦点","items":[{"url":"#键盘快捷键","title":"键盘快捷键"},{"url":"#焦点原则","title":"焦点原则"}]},{"url":"#颜色和对比度","title":"颜色和对比度","items":[{"url":"#多种提示方式","title":"多种提示方式"},{"url":"#文字元素对比","title":"文字元素对比"},{"url":"#组件状态和对比","title":"组件状态和对比"},{"url":"#例外情况","title":"例外情况"}]},{"url":"#图片和视频","title":"图片和视频"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"体验增强\",\n  \"title\": \"Accessibility  无障碍\",\n  \"icon\": \"doc-a11y\",\n  \"localeCode\": \"zh-CN\",\n  \"order\": 7,\n  \"brief\": \"无障碍设计是让所有人都可以轻松地与产品互动，包括那些残障人群，为每个人提供更好的体验。Semi 设计系统旨在消除障碍并创造适合所有人的包容性产品体验。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar ImageBox = makeShortcode(\"ImageBox\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u65E0\\u969C\\u788D\\u4E13\\u7528\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u9488\\u5BF9\\u65E0\\u969C\\u788D\\u573A\\u666F\\uFF0C\\u4E13\\u95E8\\u5B9A\\u5236\\u4E86\\u4E00\\u5957\\u4E13\\u7528\\u7684 A11y \\u4E3B\\u9898 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm_store/theme?dsmID=2243\"\n  }, \"@semi-bot/semi-theme-a11y\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4E0E\\u9ED8\\u8BA4\\u4E3B\\u9898\\u76F8\\u6BD4\\uFF0CA11y \\u4E3B\\u9898\\u589E\\u52A0\\u4E86\\u57FA\\u7840\\u8272\\u76D8\\u5404\\u4E2A\\u989C\\u8272\\u7684\\u5BF9\\u6BD4\\u5EA6\\uFF0C\\u5E76\\u4E14\\u52A0\\u5927\\u4E86\\u5B57\\u4F53 token \\u7684\\u5B57\\u53F7\\uFF0C\\u5982\\u679C\\u5BF9\\u5BF9\\u6BD4\\u5EA6\\u6709\\u66F4\\u9AD8\\u8981\\u6C42\\u65F6\\uFF0C\\u5EFA\\u8BAE\\u9009\\u7528\\u8BE5\\u4E3B\\u9898\\u3002  \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"// \\u5B89\\u88C5\\nnpm i @semi-bot/semi-theme-a11y\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u63A5\\u5165\\u4F7F\\u7528\\u6B65\\u9AA4\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/zh-CN/start/customize-theme#%E6%8E%A5%E5%85%A5%E4%B8%BB%E9%A2%98\"\n  }, \"\\u5B9A\\u5236\\u4E3B\\u9898\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4E86\\u89E3\\u7528\\u6237\\u9700\\u6C42\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8981\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5305\\u5BB9\\u6027\\u4EA7\\u54C1\\uFF0C\\u9996\\u5148\\u9700\\u8981\\u4E86\\u89E3\\u4E0D\\u540C\\u7528\\u6237\\u7684\\u4E0D\\u540C\\u9700\\u6C42\\u5E76\\u8003\\u8651\\u4ED6\\u4EEC\\u4F7F\\u7528\\u7684\\u8F85\\u52A9\\u5DE5\\u5177\\u548C\\u65B9\\u6CD5\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u89C6\\u89C9\\u969C\\u788D\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u76F2\\u4EBA\\u7528\\u6237\\u4F9D\\u9760\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u6765\\u8BBF\\u95EE\\u7F51\\u7AD9\\u548C\\u5E94\\u7528\\u7A0B\\u5E8F\\u3002\\u901A\\u5E38\\uFF0C\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u7528\\u6237\\u4F1A\\u901A\\u8FC7\\u6D4F\\u89C8\\u7279\\u5B9A\\u5143\\u7D20\\uFF08\\u5982\\u6807\\u9898\\u3001\\u94FE\\u63A5\\u6216\\u8868\\u5355\\u5143\\u7D20\\uFF09\\u6765\\u5BFC\\u822A\\u9875\\u9762\\u3002\\n\\u56E0\\u6B64\\uFF0C\\u9700\\u8981\\u4F7F\\u7528\\u8BED\\u4E49\\u5143\\u7D20\\u5E76\\u68C0\\u67E5\\u6807\\u7B7E\\u5728\\u8131\\u79BB\\u4E0A\\u4E0B\\u6587\\u65F6\\u662F\\u5426\\u6709\\u610F\\u4E49\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F4E\\u89C6\\u529B\\u7528\\u6237\\u6839\\u636E\\u5176\\u89C6\\u529B\\u969C\\u788D\\u7684\\u6027\\u8D28\\u6709\\u4E0D\\u540C\\u7684\\u9700\\u6C42\\u3002\\u7528\\u6237\\u53EF\\u80FD\\u662F\\u5728\\u6CA1\\u6709\\u653E\\u5927\\u7684\\u60C5\\u51B5\\u4E0B\\u65E0\\u6CD5\\u533A\\u5206\\u6587\\u672C\\u6216\\u5176\\u4ED6\\u5185\\u5BB9\\uFF0C\\u5C24\\u5176\\u662F\\u5C0F\\u6587\\u672C\\uFF0C\\u6216\\u8005\\u96BE\\u4EE5\\u533A\\u5206\\u4F4E\\u8272\\u5F69\\u5BF9\\u6BD4\\u5EA6\\u7684\\u6587\\u672C\\u548C\\u56FE\\u50CF\\u7B49\\u3002\\n\\u8FD9\\u4E9B\\u9700\\u6C42\\u610F\\u5473\\u7740\\u754C\\u9762\\u4E0D\\u5E94\\u8BE5\\u4F9D\\u8D56\\u989C\\u8272\\u6765\\u4F20\\u8FBE\\u4FE1\\u606F\\uFF0C\\u8C03\\u8272\\u677F\\u9700\\u8981\\u6709\\u8DB3\\u591F\\u7684\\u5BF9\\u6BD4\\u5EA6\\uFF0C\\u5F53\\u5B57\\u4F53\\u5927\\u5C0F\\u589E\\u52A0\\u65F6\\uFF0C\\u5E03\\u5C40\\u5E94\\u8BE5\\u5177\\u6709\\u54CD\\u5E94\\u6027\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u5907\\u4F9D\\u8D56\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F9D\\u8D56\\u952E\\u76D8\\u7684\\u7528\\u6237\\uFF0C\\u9700\\u8981\\u80FD\\u591F\\u901A\\u8FC7\\u952E\\u76D8\\u8BBF\\u95EE\\u5C4F\\u5E55\\u5185\\u53EF\\u88AB\\u805A\\u7126\\u7684\\u7126\\u70B9\\u5143\\u7D20\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F9D\\u8D56\\u9F20\\u6807\\u6216\\u89E6\\u6478\\u7684\\u7528\\u6237\\u9700\\u8981\\u6709\\u8DB3\\u591F\\u5927\\u7684\\u76EE\\u6807\\u533A\\u57DF\\uFF0C\\u4EE5\\u4FBF\\u8F7B\\u677E\\u547D\\u4E2D\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BA4\\u77E5\\u969C\\u788D\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u96BE\\u4EE5\\u5904\\u7406\\u4FE1\\u606F\\u7684\\u7528\\u6237\\u5E94\\u5F53\\u53D7\\u76CA\\u4E8E\\u7CBE\\u5FC3\\u7F16\\u5199\\u7684\\u5185\\u5BB9\\u3002\\n\\u56E0\\u6B64\\uFF0C\\u5E94\\u7528\\u7A0B\\u5E8F\\u7684\\u4FE1\\u606F\\u5E94\\u5F53\\u6E05\\u6670\\u3001\\u7B80\\u6D01\\u4E14\\u6613\\u4E8E\\u6D4F\\u89C8\\uFF1B\\u540C\\u65F6\\u4E5F\\u9700\\u8981\\u8003\\u8651\\u89C6\\u89C9\\u5C42\\u6B21\\u7ED3\\u6784\\uFF0C\\u5C06\\u5185\\u5BB9\\u5206\\u6210\\u7B80\\u77ED\\u7684\\u76F8\\u5173\\u90E8\\u5206\\uFF0C\\u5E76\\u907F\\u514D\\u957F\\u6BB5\\u843D\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BB8\\u591A\\u7528\\u6237\\uFF08\\u5305\\u62EC\\u89C6\\u529B\\u969C\\u788D\\u8005\\uFF09\\u4F9D\\u9760\\u952E\\u76D8\\u5BFC\\u822A\\u6765\\u4F7F\\u7528\\u6211\\u4EEC\\u7684\\u4EA7\\u54C1\\u3002\\u56E0\\u6B64\\uFF0C\\u6240\\u6709\\u53EF\\u88AB\\u83B7\\u53D6\\u7126\\u70B9\\u7684\\u7EC4\\u4EF6\\u90FD\\u5E94\\u8BE5\\u53EF\\u4EE5\\u901A\\u8FC7\\u952E\\u76D8\\u8BBF\\u95EE\\uFF0C\\u5305\\u62EC\\u94FE\\u63A5\\u3001\\u6309\\u94AE\\u548C\\u8868\\u5355\\u63A7\\u4EF6\\u7B49\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u5FEB\\u6377\\u952E\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tab \\u952E\\u5207\\u6362\\u7126\\u70B9\\uFF1ATab \\u952E\\u987A\\u5E8F\\u5E94\\u9075\\u5FAA\\u53EF\\u9884\\u6D4B\\u7684\\u987A\\u5E8F\\u5C42\\u6B21\\u7ED3\\u6784\\uFF0C\\u5982\\uFF1A\\u4ECE\\u4E0A\\u5230\\u4E0B\\uFF0C\\u4ECE\\u5DE6\\u5230\\u53F3\\u3002\\u4E00\\u4E9B\\u5173\\u952E\\u5143\\u7D20\\u88AB\\u83B7\\u53D6\\u7126\\u70B9\\u65F6\\uFF0C\\u5E94\\u5F53\\u663E\\u793A\\u8BE5\\u5143\\u7D20\\u7684\\u63D0\\u793A\\u4FE1\\u606F\\uFF1B\\u5931\\u53BB\\u7126\\u70B9\\u540E\\uFF0C\\u63D0\\u793A\\u6D88\\u5931\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7BAD\\u5934\\uFF1A\\u5728\\u76F8\\u5173\\u7684\\u5355\\u9009\\u6309\\u94AE\\u3001\\u83DC\\u5355\\u9879\\u6216\\u5C0F\\u90E8\\u4EF6\\u9879\\u4E4B\\u95F4\\u5BFC\\u822A\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Enter\\uFF1A\\u6FC0\\u6D3B\\u6309\\u94AE\\uFF0C\\u63D0\\u4EA4\\u8868\\u5355\\u7B49\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7A7A\\u683C\\uFF1A\\u5C4F\\u5E55\\u5411\\u4E0B\\u7FFB\\u9875\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Esc\\uFF1A\\u9000\\u51FA\\u5404\\u7C7B\\u5F39\\u5C42\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5404\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6587\\u6863\\u4E2D\\u8FD8\\u63D0\\u4F9B\\u4E86\\u7EC4\\u4EF6\\u8BE6\\u7EC6\\u7684\\u952E\\u76D8\\u4EA4\\u4E92\\u3002\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7126\\u70B9\\u539F\\u5219\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7126\\u70B9\\u72B6\\u6001\\u662F\\u8BBE\\u8BA1\\u7684\\u91CD\\u8981\\u7EC4\\u6210\\u90E8\\u5206\\uFF0C\\u56E0\\u4E3A\\u5B83\\u4EEC\\u8BA9\\u952E\\u76D8\\u7528\\u6237\\u77E5\\u9053\\u7126\\u70B9\\u5F53\\u524D\\u5728\\u54EA\\u91CC\\u3002\\u7126\\u70B9\\u9700\\u8981\\u9075\\u5FAA\\u4EE5\\u4E0B\\u539F\\u5219\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u521D\\u59CB\\u7126\\u70B9\\uFF1A\\u4E3A\\u4E86\\u4F7F\\u7528\\u6237\\u80FD\\u591F\\u6709\\u6548\\u5730\\u5B8C\\u6210\\u4EFB\\u52A1\\uFF0C\\u8BF7\\u59CB\\u7EC8\\u4E3A\\u4EFB\\u52A1\\u8BBE\\u7F6E\\u521D\\u59CB\\u7126\\u70B9\\u3002\\u5C06\\u7126\\u70B9\\u8BBE\\u7F6E\\u4E3A\\u4EFB\\u52A1\\u4E2D\\u7684\\u7B2C\\u4E00\\u4E2A\\u903B\\u8F91\\u4EA4\\u4E92\\u5143\\u7D20\\u6216\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\\u3002\\u7126\\u70B9\\u5207\\u6362\\u65F6\\uFF0C\\u5982\\u679C\\u5F53\\u524D\\u7126\\u70B9\\u63A7\\u4EF6\\u88AB\\u8986\\u76D6\\uFF0C\\u7126\\u70B9\\u9700\\u8981\\u81EA\\u52A8\\u5207\\u6362\\u5230\\u65B0\\u9875\\u9762\\u7684\\u7B2C\\u4E00\\u4E2A\\u7126\\u70B9\\u533A\\u57DF\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5BFC\\u822A\\u53EF\\u9006\\uFF1A\\u7528\\u6237\\u901A\\u8FC7\\u3010tab \\u952E\\u3011\\u5207\\u6362\\u5230\\u4E0B\\u4E00\\u4E2A\\u7126\\u70B9\\uFF0C\\u5C31\\u4E00\\u5B9A\\u53EF\\u4EE5\\u901A\\u8FC7\\u3010shift + Tab\\u3011\\u5207\\u6362\\u4F1A\\u4E0A\\u4E00\\u4E2A\\u7126\\u70B9\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u8FD4\\u56DE\\uFF1A\\u5982\\u679C\\u5F53\\u524D\\u805A\\u7126\\u7684\\u5143\\u7D20\\u6D88\\u5931\\uFF0C\\u7126\\u70B9\\u72B6\\u6001\\u5E94\\u59CB\\u7EC8\\u8FD4\\u56DE\\u5230\\u4E4B\\u524D\\u7684\\u4F4D\\u7F6E\\u3002\\u4F8B\\u5982\\uFF0C\\u5173\\u95ED\\u6A21\\u6001\\u53EF\\u80FD\\u610F\\u5473\\u7740\\u60A8\\u7684\\u7126\\u70B9\\u5728\\u5173\\u95ED\\u6309\\u94AE\\u4E0A\\uFF1B\\u5F53\\u6A21\\u6001\\u5173\\u95ED\\u65F6\\uFF0C\\u60A8\\u5E94\\u8BE5\\u5C06\\u7126\\u70B9\\u8FD4\\u56DE\\u5230\\u6253\\u5F00\\u6A21\\u6001\\u7684\\u6309\\u94AE\\uFF1B\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u989C\\u8272\\u548C\\u5BF9\\u6BD4\\u5EA6\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u591A\\u79CD\\u63D0\\u793A\\u65B9\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E0D\\u5C06\\u989C\\u8272\\u4F5C\\u4E3A\\u4F20\\u9012\\u4FE1\\u606F\\u7684\\u552F\\u4E00\\u9014\\u5F84\\u3002\\u4F7F\\u7528\\u6DFB\\u52A0\\u56FE\\u6807\\u3001\\u6587\\u672C\\u3001\\u4E0B\\u5212\\u7EBF\\u7B49\\uFF0C\\u4EE5\\u786E\\u4FDD\\u6240\\u6709\\u4EBA\\u7FA4\\u90FD\\u80FD\\u6536\\u5230\\u76F8\\u540C\\u7684\\u4FE1\\u606F\\u3002\"), mdx(ImageBox, {\n    alt: \"\\u591A\\u79CD\\u63D0\\u793A\\u505A\\u548C\\u4E0D\\u8981\\u505A\\u793A\\u4F8B\",\n    url: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-do-and-donot.png\",\n    darkUrl: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-do-and-donot-dark.png\",\n    mdxType: \"ImageBox\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u5B57\\u5143\\u7D20\\u5BF9\\u6BD4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6839\\u636E WCAG \\u5EFA\\u8BAE\\u9608\\u503C\\uFF1A\\u6587\\u672C\\u5143\\u7D20\\u7684\\u6587\\u672C\\u548C\\u80CC\\u666F\\u989C\\u8272\\u4E4B\\u95F4\\u7684\\u5BF9\\u6BD4\\u5EA6\\u81F3\\u5C11\\u5E94\\u8FBE\\u5230 4.5:1\\uFF08\\u5305\\u542B\\u7EC4\\u4EF6\\u5185\\u7684\\u6587\\u672C\\uFF09\\uFF0C\\u5BF9\\u4E8E 18px \\u6216\\u66F4\\u5927\\u7684\\u6587\\u672C\\u5BF9\\u6BD4\\u5EA6\\u53EF\\u4EE5\\u964D\\u81F3 3:1\\uFF0C\\u4F46\\u5BF9\\u4E8E\\u7981\\u7528\\u6587\\u672C\\u53EF\\u4EE5\\u4E0D\\u53D7\\u5BF9\\u6BD4\\u5EA6\\u8981\\u6C42\\u7684\\u9650\\u5236\\u3002\"), mdx(ImageBox, {\n    alt: \"\\u6587\\u5B57\\u5143\\u7D20\\u5BF9\\u6BD4\\u793A\\u4F8B\",\n    url: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-color-contrast.png\",\n    darkUrl: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-color-contrast-dark.png\",\n    mdxType: \"ImageBox\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u4EF6\\u72B6\\u6001\\u548C\\u5BF9\\u6BD4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6240\\u6709\\u53EF\\u4EE5\\u64CD\\u4F5C\\u7684\\u7EC4\\u4EF6\\u90FD\\u9700\\u8981\\u6709\\u4E00\\u4E2A\\u7126\\u70B9\\u72B6\\u6001\\uFF08focus\\uFF09\\u3002\\u7EC4\\u4EF6\\u7684 active\\u3001hover\\u3001focus \\u72B6\\u6001\\u90FD\\u9700\\u8981\\u6EE1\\u8DB3\\u4E0E\\u76F8\\u90BB\\u989C\\u8272 3:1 \\u7684\\u5BF9\\u6BD4\\u5EA6\\u8981\\u6C42\\u3002\\u4F46\\u4E0D\\u540C\\u72B6\\u6001\\u4E4B\\u95F4\\u6CA1\\u6709\\u5BF9\\u6BD4\\u5EA6\\u8981\\u6C42\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u6709\\u63CF\\u8FB9\\u7684\\u7EC4\\u4EF6\\uFF0C\\u53EA\\u9700\\u6EE1\\u8DB3\\u63CF\\u8FB9\\u989C\\u8272\\u4E0E\\u5E95\\u8272\\u7684 3:1 \\u5BF9\\u6BD4\\u5373\\u53EF\\u3002\\u586B\\u5145\\u8272\\u4E0E\\u63CF\\u8FB9\\u8272\\u4E4B\\u95F4\\u4E0D\\u8981\\u6C42\\u5BF9\\u6BD4\\u5EA6\\u3002\"), mdx(ImageBox, {\n    alt: \"\\u7EC4\\u4EF6\\u72B6\\u6001\\u548C\\u5BF9\\u6BD4\\u793A\\u4F8B\",\n    url: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-component-state-contrast.png\",\n    darkUrl: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-component-state-contrast-dark.png\",\n    mdxType: \"ImageBox\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F8B\\u5916\\u60C5\\u51B5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u4E00\\u4E9B\\u4E3B\\u8981\\u4EE5\\u9605\\u8BFB\\u4E3A\\u4E3B\\u7684\\u7EC4\\u4EF6\\uFF0C\\u5982\\uFF1AMessage\\u3001banner \\u7B49\\uFF0C\\u53EF\\u4EE5\\u4E0D\\u7528\\u4E25\\u683C\\u6309\\u7167 AA \\u6807\\u51C6\\u3002\\u4F46\\u7EC4\\u4EF6\\u5185\\u7684\\u53EF\\u64CD\\u4F5C\\u9879\\u8FD8\\u662F\\u9700\\u8981\\u6EE1\\u8DB3\\u5BF9\\u6BD4\\u5EA6\\u8981\\u6C42\\u3002\"), mdx(ImageBox, {\n    alt: \"\\u4F8B\\u5916\\u60C5\\u51B5\\u793A\\u4F8B\",\n    url: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-color-contrast-special.png\",\n    darkUrl: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-color-contrast-special-dark.png\",\n    mdxType: \"ImageBox\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u56FE\\u7247\\u548C\\u89C6\\u9891\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E00\\u79CD\\u4E3A\\u6240\\u6709\\u56FE\\u50CF\\u3001\\u56FE\\u6807\\u548C SVG \\u63D0\\u4F9B\\u57FA\\u4E8E\\u6587\\u672C\\u7684\\u66FF\\u4EE3\\u65B9\\u6848\\u7684\\u65B9\\u6CD5\\uFF0C\\u4EE5\\u4FBF\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u53EF\\u4EE5\\u7B80\\u6D01\\u7684\\u63CF\\u8FF0\\u56FE\\u50CF\\u548C\\u89C6\\u9891\\uFF0C\\u5982\\uFF1A\\u5934\\u50CF\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5934\\u50CF\\u7EC4\\u4EF6\\u5982\\u679C\\u5305\\u542B\\u56FE\\u7247\\uFF0C\\u53EF\\u4EE5\\u7528 \\u201Calt\\u201D \\u6765\\u6807\\u8BC6\\uFF0C\\u8BA9\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u6355\\u6349\\u5230\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar\\n            alt=\\\"Person Name\\\"\\n            src=\\\"https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/a11y-img-alt-avatar.png\\\"\\n            style={{ margin: 4 }}\\n        />\\n    </div>\\n);\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/experience/accessibility","next":{"fields":{"slug":"en-US/experience/internationalization"},"id":"455e9add-7842-568e-bfdb-e84b55984bbb","frontmatter":{"title":"Internationalization","localeCode":"en-US","icon":"doc-internationalization","showNew":null}},"previous":{"fields":{"slug":"en-US/experience/accessibility"},"id":"15717e21-7784-50c9-ad96-f0173165d77e","frontmatter":{"title":"Accessibility","localeCode":"en-US","icon":"doc-a11y","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}