辅助警告

可访问性（缩写为 a11y）并不总是那么容易做到，但如果你编写了不可访问的标记，Svelte 将在编译时向你发出警告，从而提供帮助。 但是，请记住，许多可访问性问题只能在运行时使用其他自动化工具并通过手动测试应用来识别。

英Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you at compile time if you write inaccessible markup. However, keep in mind that many accessibility issues can only be identified at runtime using other automated tools and by manually testing your application.

在你的具体用例中，某些警告可能不正确。 你可以通过在导致警告的行上方放置 `

英Some warnings may be incorrect in your concrete use case. You can disable such false positives by placing a <!-- svelte-ignore a11y-<code> --> 注释来禁用此类误报。 例子：

<!-- svelte-ignore a11y-autofocus -->
<input autofocus />

以下是 Svelte 将为你执行的辅助功能检查列表。

英Here is a list of accessibility checks Svelte will do for you.

a11y-accesskeypermalink

对元素强制不执行 accesskey。 访问键是 HTML 属性，允许 Web 开发者为元素分配键盘快捷键。 屏幕阅读器和仅使用键盘的用户使用的键盘快捷键和键盘命令之间的不一致会导致辅助功能变得复杂。 为了避免复杂化，不应使用访问键。

英Enforce no accesskey on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.

<!-- A11y: Avoid using accesskey -->
<div accessKey="z" />

a11y-aria-activedescendant-has-tabindexpermalink

具有 aria-activedescendant 的元素必须是可选项卡的，因此它必须具有固有的 tabindex 或将 tabindex 声明为属性。

英An element with aria-activedescendant must be tabbable, so it must either have an inherent tabindex or declare tabindex as an attribute.

<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
<div aria-activedescendant="some-id" />

a11y-aria-attributespermalink

某些保留的 DOM 元素不支持 ARIA 角色、状态和属性。 这通常是因为它们不可见，例如 meta、html、script、style。 此规则强制这些 DOM 元素不包含 aria-* 属性。

英Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example meta, html, script, style. This rule enforces that these DOM elements do not contain the aria-* props.

<!-- A11y: <meta> should not have aria-* attributes -->
<meta aria-hidden="false" />

a11y-autofocuspermalink

强制规定 autofocus 不用于元素。 自动对焦元素可能会导致视力正常和视力不佳的用户出现可用性问题。

英Enforce that autofocus is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.

<!-- A11y: Avoid using autofocus -->
<input autofocus />

a11y-click-events-have-key-eventspermalink

强制具有 on:click 事件的可见非交互式元素附有键盘事件处理程序。

英Enforce that visible, non-interactive elements with an on:click event are accompanied by a keyboard event handler.

用户应首先考虑交互元素是否更合适，例如用于操作的 <button type="button"> 元素或用于导航的 <a> 元素。 这些元素在语义上更有意义，并且将具有内置的键处理。 例如。 Space 和 Enter 将触发 <button>，Enter 将触发 <a> 元素。

英Users should first consider whether an interactive element might be more appropriate such as a <button type="button"> element for actions or <a> element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. Space and Enter will trigger a <button> and Enter will trigger an <a> element.

如果需要非交互式元素，则 on:click 应附带 on:keyup 或 on:keydown 处理程序，使用户能够通过键盘执行等效操作。 为了让用户能够触发按键，该元素还需要通过添加 tabindex 来实现聚焦。 虽然 on:keypress 处理程序也会消除此警告，但应该注意的是 keypress 事件已被弃用。

英If a non-interactive element is required then on:click should be accompanied by an on:keyup or on:keydown handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a tabindex. While an on:keypress handler will also silence this warning, it should be noted that the keypress event is deprecated.

<!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. -->
<div on:click={() => {}} />

键盘编码对于无法使用鼠标的主体残疾用户、AT 兼容性和屏幕阅读器用户非常重要。

英Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.

a11y-distracting-elementspermalink

强制不使用分散注意力的元素。 可能会分散视觉注意力的元素可能会导致视障用户出现可访问性问题。 这些元素很可能已被弃用，应该避免。

英Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.

以下元素会分散视觉注意力： <marquee> 和 <blink>。

英The following elements are visually distracting: <marquee> and <blink>.

<!-- A11y: Avoid <marquee> elements -->
<marquee />

a11y-hiddenpermalink

某些 DOM 元素对于屏幕阅读器导航很有用，不应隐藏。

英Certain DOM elements are useful for screen reader navigation and should not be hidden.

<!-- A11y: <h2> element should not be hidden -->
<h2 aria-hidden="true">invisible header</h2>

a11y-img-redundant-altpermalink

强制 img alt 属性不包含单词 image、picture 或 photo。 屏幕阅读器已将 img 元素宣布为图片。 无需使用图片、照片和/或图片等词语。

英Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce img elements as an image. There is no need to use words such as image, photo, and/or picture.

<img src="foo" alt="Foo eating a sandwich." />

<!-- aria-hidden, won't be announced by screen reader -->
<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Photo of foo being weird." />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="bar" alt="Image of me at a bar!" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Picture of baz fixing a bug." />

a11y-incorrect-aria-attribute-typepermalink

强制仅将正确类型的值用于 aria 属性。 例如，aria-hidden 应该只接收一个布尔值。

英Enforce that only the correct type of value is used for aria attributes. For example, aria-hidden should only receive a boolean.

<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
<div aria-hidden="yes" />

a11y-invalid-attributepermalink

强制对可访问性重要的属性具有有效值。 例如，href、'#' 或 javascript: 不应为空。

英Enforce that attributes important for accessibility have a valid value. For example, href should not be empty, '#', or javascript:.

<!-- A11y: '' is not a valid href attribute -->
<a href="">invalid</a>

a11y-interactive-supports-focuspermalink

强制具有交互角色和交互处理程序（鼠标或按键）的元素必须可聚焦或可选项卡。

英Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.

<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
<div role="button" on:keypress={() => {}} />

a11y-label-has-associated-controlpermalink

强制标签标记具有文本标签和关联的控件。

英Enforce that a label tag has a text label and an associated control.

有两种受支持的方法将标签与控件关联：

英There are two supported ways to associate a label with a control:

• 将控件封装在标签标记中。
• 将 for 添加到标签并为其分配页面上输入的 ID。

<label for="id">B</label>

<label>C <input type="text" /></label>

<!-- A11y: A form label must be associated with a control. -->
<label>A</label>

a11y-media-has-captionpermalink

为媒体提供字幕对于聋哑用户的跟随至关重要。 字幕应该是对话、音效、相关音乐提示和其他相关音频信息的转录或翻译。 这不仅对于可访问性很重要，而且在媒体不可用的情况下对所有用户也很有用（类似于图片无法加载时图片上的 alt 文本）。

英Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to alt text on an image when an image is unable to load).

标题应包含理解相应媒体的所有重要且相关的信息。 这可能意味着标题不是 1：1 媒体内容中对话的映射。 但是，对于具有 muted 属性的视频组件，字幕不是必需的。

英The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the muted attribute.

<video><track kind="captions" /></video>

<audio muted />

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video />

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video><track /></video>

a11y-misplaced-rolepermalink

某些保留的 DOM 元素不支持 ARIA 角色、状态和属性。 这通常是因为它们不可见，例如 meta、html、script、style。 此规则强制这些 DOM 元素不包含 role 属性。

英Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example meta, html, script, style. This rule enforces that these DOM elements do not contain the role props.

<!-- A11y: <meta> should not have role attribute -->
<meta role="tooltip" />

a11y-misplaced-scopepermalink

范围属性只能用在 <th> 元素上。

英The scope attribute should only be used on <th> elements.

<!-- A11y: The scope attribute should only be used with <th> elements -->
<div scope="row" />

a11y-missing-attributepermalink

强制元素上存在可访问性所需的属性。 这包括以下检查：

英Enforce that attributes required for accessibility are present on an element. This includes the following checks:

• <a> 应该有一个 href（除非它是 片段定义标签）
• <area> 应该有 alt、aria-label 或 aria-labelledby
• <html> 应该有 lang
• <iframe> 应该有标题
• <img> 应该有替代品
• <object> 应该有标题、aria-label 或 aria-labelledby
• <input type="image"> 应该有 alt、aria-label 或 aria-labelledby

<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
<input type="image" />

<!-- A11y: <html> element should have a lang attribute -->
<html />

<!-- A11y: <a> element should have an href attribute -->
<a>text</a>

a11y-missing-contentpermalink

强制标题元素（h1、h2 等）和锚点具有内容，并且屏幕阅读器可以访问该内容

英Enforce that heading elements (h1, h2, etc.) and anchors have content and that the content is accessible to screen readers

<!-- A11y: <a> element should have child content -->
<a href="/foo" />

<!-- A11y: <h1> element should have child content -->
<h1 />

a11y-mouse-events-have-key-eventspermalink

强制 on:mouseover 和 on:mouseout 分别伴随 on:focus 和 on:blur。 这有助于确保键盘用户也可以访问由这些鼠标事件触发的任何功能。

英Enforce that on:mouseover and on:mouseout are accompanied by on:focus and on:blur, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.

<!-- A11y: on:mouseover must be accompanied by on:focus -->
<div on:mouseover={handleMouseover} />

<!-- A11y: on:mouseout must be accompanied by on:blur -->
<div on:mouseout={handleMouseout} />

a11y-no-redundant-rolespermalink

某些 HTML 元素具有默认的 ARIA 角色。 为这些元素赋予 ARIA 角色，该角色已由浏览器 没有效果 设置，并且是多余的。

英Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser has no effect and is redundant.

<!-- A11y: Redundant role 'button' -->
<button role="button" />

<!-- A11y: Redundant role 'img' -->
<img role="img" src="foo.jpg" />

a11y-no-interactive-element-to-noninteractive-rolepermalink

WAI-ARIA 角色不应用于将交互元素转换为非交互元素。 非交互式 ARIA 角色包括 article、banner、complementary、img、listitem、main、region 和 tooltip。

英WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.

<!-- A11y: <textarea> cannot have role 'listitem' -->
<textarea role="listitem" />

a11y-no-noninteractive-element-interactionspermalink

非交互式元素不支持事件处理程序（鼠标和按键处理程序）。 非交互式元素包括 <main>、<area>、<h1>（、<h2> 等）、<p>、<img>、<li>、<ul> 和 <ol>。 非交互式 WAI-ARIA 角色 包括 article、banner、complementary、img、listitem、main、region 和 tooltip。

英A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <p>, <img>, <li>, <ul> and <ol>. Non-interactive WAI-ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.

<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->
<li on:click={() => {}} />

<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->
<div role="listitem" on:click={() => {}} />

a11y-no-noninteractive-element-to-interactive-rolepermalink

WAI-ARIA 角色不应用于将非交互元素转换为交互元素。 交互式 ARIA 角色包括 button、link、checkbox、menuitem、menuitemcheckbox、menuitemradio、option、radio、searchbox、switch 和 textbox。

英WAI-ARIA roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch and textbox.

<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
<h3 role="searchbox">Button</h3>

a11y-no-noninteractive-tabindexpermalink

Tab 键导航应仅限于页面上可交互的元素。

英Tab key navigation should be limited to elements on the page that can be interacted with.

<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
<div tabindex="0" />

a11y-no-static-element-interactionspermalink

诸如 <div> 之类的元素以及诸如 click 之类的交互式处理程序必须具有 ARIA 角色。

英Elements like <div> with interactive handlers like click must have an ARIA role.

<!-- A11y: <div> with click handler must have an ARIA role -->
<div on:click={() => ''} />

a11y-positive-tabindexpermalink

避免正 tabindex 属性值。 这会将元素移出预期的 Tab 键顺序，从而给键盘用户带来混乱的体验。

英Avoid positive tabindex property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.

<!-- A11y: avoid tabindex values above zero -->
<div tabindex="1" />

a11y-role-has-required-aria-propspermalink

具有 ARIA 角色的元素必须具有该角色所需的所有属性。

英Elements with ARIA roles must have all required attributes for that role.

<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
<span role="checkbox" aria-labelledby="foo" tabindex="0" />

a11y-role-supports-aria-propspermalink

定义了显式或隐式角色的元素仅包含该角色支持的 aria-* 属性。

英Elements with explicit or implicit roles defined contain only aria-* properties supported by that role.

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline />

<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required />

a11y-structurepermalink

强制某些 DOM 元素具有正确的结构。

英Enforce that certain DOM elements have the correct structure.

<!-- A11y: <figcaption> must be an immediate child of <figure> -->
<div>
	<figcaption>Image caption</figcaption>
</div>

a11y-unknown-aria-attributepermalink

强制仅使用已知的 ARIA 属性。 这是基于 WAI-ARIA 状态和属性规范。

英Enforce that only known ARIA attributes are used. This is based on the WAI-ARIA States and Properties spec.

<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
<input type="image" aria-labeledby="foo" />

a11y-unknown-rolepermalink

具有 ARIA 角色的元素必须使用有效的非抽象 ARIA 角色。 可以在 WAI-ARIA 站点找到角色定义的参考。

英Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at WAI-ARIA site.

<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
<div role="toooltip" />