diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md index 1ef1ae801e..149603dcf9 100644 --- a/site/content/docs/05-accessibility-warnings.md +++ b/site/content/docs/05-accessibility-warnings.md @@ -2,15 +2,15 @@ title: Accessibility warnings --- -Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup. +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. -Here is a list of accessibility checks Svelte will do it for you. +Here is a list of accessibility checks Svelte will do for you. --- ### `a11y-accesskey` -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 screenreader and keyboard only users create accessibility complications so to avoid complications, access keys should not be used. +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. ```sv @@ -32,7 +32,7 @@ Certain reserved DOM elements do not support ARIA roles, states and properties. ### `a11y-autofocus` -Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users, alike. +Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike. ```sv @@ -56,32 +56,32 @@ The following elements are visually distracting: `` and ``. ### `a11y-hidden` -Certain DOM elements are useful for screen readers navigation and should not be hidden. +Certain DOM elements are useful for screen reader navigation and should not be hidden. ```sv -

invisible header

+ ``` --- ### `a11y-img-redundant-alt` -Enforce img alt attribute does not contain the word image, picture, or photo. Screenreaders already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_. +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_. ```sv Foo eating a sandwich. -Picture of me taking a photo of an image + - + Photo of foo being weird. - + Image of me at a bar! - + Picture of baz fixing a bug. ``` @@ -89,7 +89,7 @@ Enforce img alt attribute does not contain the word image, picture, or photo. Sc ### `a11y-invalid-attribute` -Enforce that accessibility attribute should have valid value +Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`. ```sv @@ -105,7 +105,7 @@ 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 `for` to a label and assigning it a DOM ID string that indicates an input on the page. +- Adding `for` to a label and assigning it the ID of an input on the page. ```sv @@ -151,18 +151,26 @@ Certain reserved DOM elements do not support ARIA roles, states and properties. ### `a11y-misplaced-scope` -The scope scope should be used only on `` elements. +The scope attribute should only be used on `` elements. ```sv -
+
``` --- ### `a11y-missing-attribute` -Enforce that element should have required accessibility attribute +Enforce that attributes required for accessibility are present on an element. This includes the following checks: + +- `` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697)) +- `` should have alt, aria-label, or aria-labelledby +- `` should have lang +- `