Acessibilidade (abreviada para a11y) nem sempre é fácil de fazer-se corretamente, mas a Svelte ajuda avisando-nos no momento da compilação se escrevemos marcação inacessível. No entanto, devemos lembrar-nos de que muitos problemas de acessibilidade apenas podem ser identificados no momento da execução usando outras ferramentas automatizadas e testando manualmente a nossa aplicação.
Alguns avisos podem estar incorretos no nosso caso de uso concreto. Nós podemos desligar tais falsos positivos colocando um comentário <!-- svelte-ignore a11y-<code> --> em cima da linha que causa o aviso. Exemplo:
<!-- svelte-ignore a11y-autofocus -->
<input autofocus />Eis uma lista de verificações de acessibilidade que a Svelte fará por nós.
a11y-accesskeypermalink
Não forçar nenhum accesskey sobre o elemento. As teclas de acesso são atributos de HTML que permite os programadores da Web atribuírem atalhos de teclado aos elementos. As inconsistências entre os atalhos de teclado e comandos do teclado usados pelo leitor de tela e utilizadores teclado criam complicações de acessibilidade. Para evitar complicações, as teclas de acesso não deveriam ser usadas:
<!-- A11y: Evitar usar a tecla de acesso -->
<div accessKey="z" />a11y-aria-activedescendant-has-tabindexpermalink
Um elemento com aria-activedescendant deve ser separável, então este deve ter um tabindex inerente ou declarar tabindex como atributo:
<!-- A11y: Os elementos com atributo aria-activedescendant devem ter o valor tabindex -->
<div aria-activedescendant="some-id" />a11y-aria-attributespermalink
Certos elementos do DOM reservados não suportam os papéis, estados e propriedades ARIA. Isto deve-se frequentemente ao fato de não serem visíveis, por exemplo meta, html, script, style. Esta regra força estes elementos do DOM a não terem as propriedades aria-*:
<!-- A11y: <meta> não deve ter atributos aria-* -->
<meta aria-hidden="false" />a11y-autofocuspermalink
O autofocus não deve ser usado sobre os elementos. O foco automático dos elementos pode causar problemas de usabilidade tanto utilizadores com visão como para os utilizadores sem visão:
<!-- A11y: Evitar usar foco automático -->
<input autofocus />a11y-click-events-have-key-eventspermalink
Enforce that visible, non-interactive elements with an on:click event are accompanied by a keyboard event handler.
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.
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={() => {}} />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.
The following elements are visually distracting: <marquee> and <blink>.
<!-- A11y: Avoid <marquee> elements -->
<marquee />a11y-hiddenpermalink
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
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
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
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:
- Wrapping a control in a label tag.
- Adding
forto a label and assigning it the ID of an input on the page.
<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
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).
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
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
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>should have an href (unless it's a fragment-defining tag)<area>should have alt, aria-label, or aria-labelledby<html>should have lang<iframe>should have title<img>should have alt<object>should have title, aria-label, or aria-labelledby<input type="image">should have alt, aria-label, or 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
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
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
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 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
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 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 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
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
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
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
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
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
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
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" />