July 2024

November 2024

Ecco

Screen reader users will see links on a page listed without context, 
so you should ensure the same link text is not used to point to different web
addresses.

For example:

```html
<p>
    Learn the latest about our products: 
    <a href="/products/news">News</a>
</p>

<p>
    Learn the latest about our services: 
    <a href="/company/news">News</a>
</p>
``` 

To a screen reader who is listing links, they will only hear:

* News
* News

These links appear to be the same, but they both behave differently. 
One solution, which doesn't require the page design to change, is to add an 
`aria-label` for each link:

```html
<p>
    Learn the latest about our products: 
    <a href="/products/news" aria-label="Product news">News</a>
</p>

<p>
    Learn the latest about our services: 
    <a href="/company/news" aria-label="Company news">News</a>
</p>
``` 

Which will be heard as:

* Product news
* Company news

To pass this checkpoint, make sure that links which point to different pages 
have distinct text inside them, or that they specify ARIA labels (`aria-labelledby` or
`aria-label`), or they use hidden text only visible to screen readers
(e.g. `<span class="sr-only">...</span>`) to distinguish them from each 
other.

If links point to the same page (e.g., they redirect or use tracking
parameters, but are functionally equivalent to the user) you can ignore
this issue.

a-duplicate-link-text-for-different-destinations

To comply with the strictest accessibility standard (WCAG AAA), the colour of text must 
strongly contrast with its background color, so that people with significant visual impairments 
can read it.

The [contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef)
must be at least 7:1 for body text, and 4.5:1 for large text.

A far less demanding version of this check (1.4.3) exists for WCAG AA. All websites should aim to 
meet the easier AA standard at a minimum. The AAA standard is desirable but far more challenging,
and may not be practical for your website.

aaa-text-contrast

Links must be defined in a specific way to be accessed by screen readers, which are used by 
blind and the partially-sighted.

To work with accessibility technologies, links must contain both machine-readable text, and 
a `href` attribute. If a link is not actually
pointing to a page or part of a page, it should be replaced with another semantic element, such
as a `button`, or the `<a>` tag should have a role of `button`. 

For example:

```html
<a href="/about">About us</a>
```

If the link contains _nothing but an image_, that image should specify alternative text, e.g.

```html
<a href="/apple">
    <img src="apple.png" alt="Apple">
</a>
```

Before HTML5, an anchor was often used to create a target to link to, e.g.

```html
<a name="example"></a>
```

This is not supported in HTML5, and the use of anchors for targets is discouraged. Use an `id`
attribute on a non-anchor tag instead, e.g.

```html
<div id="example"> ... </div>
```

Empty links (e.g. `<a></a>`) are often incorrectly used for buttons or controls in a
JavaScript application. In these cases, you should usually define the link as having a more appropriate
role, e.g. as a button. To do this, use the `role` attribute (e.g `<a role="button">`), or replace 
the `<a>` tag with a more appropriate tag, such as `<button>`.

For more details, see [Technique H91](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H91)
and learn about [ARIA roles](https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/).

bad-anchor

When selecting a user interface component with the keyboard, the focus indicator must 
not be partly obscured by anything in front of it. This is the stricter version of this check for 
Level AAA.

## Why this matters

When using a keyboard, it is important that the user can see where they are on the page.
If the focus indicator is obscured, the user may not know where they are, and may not
be able to interact with the page.

## Examples

Most common examples include:

* Banners at the top or bottom of the page, such as cookie banners
* Fixed navigation bars
* Fixed footers
* Popup modals, such as cookie consent modals

## How to fix

With elements that cover part of the screen, such as cookie banners, ensure
that the user can scroll to see any content behind the banner, without having to close
the banner.

With popup modals, it should usually be impossible to focus anything behind the modal.
Most common modal frameworks will automatically trap focus within the modal, so that
this is impossible. Example: [Bootstrap Modal](https://getbootstrap.com/docs/5.2/components/modal/#live-demo).

## Further reading

This is part of the draft WCAG 2.2 specification and is subject to change.

* [WCAG 2.4.13](https://w3c.github.io/wcag/understanding/focus-not-obscured-enhanced.html)

ensure-focus-is-not-obscured-enhanced

When selecting a user interface component with the keyboard, the focus indicator must 
not be completely obscured by anything in front of it.

## Why this matters

When using a keyboard, it is important that the user can see where they are on the page.
If the focus indicator is obscured, the user may not know where they are, and may not
be able to interact with the page.

## Examples

Most common examples include:

* Banners at the top or bottom of the page, such as cookie banners
* Fixed navigation bars
* Fixed footers
* Popup modals, such as cookie consent modals

## How to fix

With elements that cover part of the screen, such as cookie banners, ensure
that the user can scroll to see any content behind the banner, without having to close
the banner.

With popup modals, it should usually be impossible to focus anything behind the modal.
Most common modal frameworks will automatically trap focus within the modal, so that
this is impossible. Example: [Bootstrap Modal](https://getbootstrap.com/docs/5.2/components/modal/#live-demo).

## Further reading

This is part of the draft WCAG 2.2 specification and is subject to change.

* [WCAG 2.4.12](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured.html)

ensure-focus-is-not-obscured-minimum

All interactive components on a page, such as buttons or menus, should be far enough apart 
from other interactive areas, to avoid them being used by mistake. 

This ensures people with motor impairments can easily click or tap on the right element.

## Methodology

This check is run on both the mobile and desktop versions of every page. Results
for each may differ.

1. All interactive elements are identified, including buttons, links, and form controls.
2. If an element is not normally visible, it is ignored. This includes elements which
   are positioned offscreen or cropped (e.g. for 'screen-reader only' text).
3. If an element is larger than 24 CSS pixels in both dimensions, it passes.
4. Otherwise, the element is compared to all other elements on the page.
5. The minimum horizontal gap between the element is calculated as 24 CSS pixels,  
   minus the width of the element.
6. The minimum vertical gap between the element is calculated as 24 CSS pixels,  
   minus the height of the element.
7. If another element falls within the minimum horizontal or vertical gap, the 
   element fails, unless both are links that point to the same place.

## Further reading

This is part of the draft WCAG 2.2 specification and is subject to change.

* [Target Size (Minimum)](https://w3c.github.io/wcag/understanding/target-size-minimum.html)

ensure-minimum-target-size

All interactive components on a page, such as buttons or fields, should ideally be large enough 
to be easily used by people with motor impairments. 

This ensures people with motor impairments can easily click or tap on the element.

The recommended size is 44 x 44 CSS pixels, with some exceptions:

* **Equivalent available** - the functionality provided by
  the control is available elsewhere, and large enough, on the same page.
* **Inline text** - the control appears inside a sentence or block of text. 
* **User Agent control** - the size of the target is determined by the user agent 
  and is not modified by the author. Generally this is not the case for web content.
* **Essential** - the size of the target is essential to the information being conveyed,
  e.g. a tutorial demonstrating what a small button looks like. This exception is rare.

## Applying this check

Nearly all websites will fail this check by default. The minimum size requirement
is larger than most links and controls on most websites.

This is the much stricter version of the WCAG 2.2 AA check for target size. Most websites
should focus on the AA check before considering this AAA check:

* [Target Size (Minimum)](https://w3c.github.io/wcag/understanding/target-size-minimum.html)

## Methodology

This check is run on both the mobile and desktop versions of every page. Results
for each may differ.

1. All interactive elements are identified, including buttons, links, and form controls. 
2. If an element is preceded or followed directly by a non-empty text node, the control
   is ignored.
3. If an element is not normally visible, it is ignored. This includes elements which 
   are positioned offscreen or cropped (e.g. for 'screen-reader only' text).
4. If an element is a link, and another visible link on the page points to the same URL, with 
   that other link meeting the size requirements, the element is ignored.
5. Otherwise, the element must have a minimum size of 44 x 44 CSS pixels.

## Troubleshooting

Silktide only records the first 100 instances of a failure on a page. Because failures
of this check are common, it is possible that your page has more than 100 failures, but
only the first 100 will be shown.

## Further reading

* [Target Size (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced)

ensure-reasonable-target-size

When viewed on small screens (like mobile phones) content should be large enough to 
read without being zoomed-into and scrolled in two dimensions.

WCAG 2.1 specifically requires this for:

+ Vertical scrolling content at a width equivalent to 320 CSS pixels
+ Horizontal scrolling content at a height equivalent to 256 CSS pixels

This issue almost always indicates that the webpage has not been designed
to work on mobile devices at all.

extreme-zoom-scrolling

All frames must define a readable title, which briefly described the contents of that frame.

Note that this is not the same as a `<title>` tag inside the iframe, which is insufficient.
You must provide a meaningful description for the frame using the `title` attribute.

Examples:

```html
<iframe title="Advertisement" src="ad.html">
```

```html
<frame title="Advertisement" src="ad.html">
```

# Why this matters

Accessible technologies such as screen readers rely on the `title` attribute to list
the frames on a given page. 

Without a title, it is impossible to know what the frame contains, and the user must
navigate inside it, and explore the contents of the frame to figure this out.

Often iframes are used for technologies like banner adverts, videos, or chat widgets. The 
absence of a `title` makes these areas of the page much harder to identify, understand, 
or use.

# How titles are tested

Frames which are not presented to screen readers are ignored. This includes invisible
frames, and frames marked with `aria-hidden`.

A `title` attribute must contain meaningful text, e.g. numbers / letters, to be considered
valid. A title containing just spaces, or non-readable text (e.g. an emoji) will
be flagged as invalid.

# More information

Learn about [Technique H64](https://www.w3.org/WAI/WCAG21/Techniques/html/H64)
as part of [SC 2.4.1 - Bypass Blocks](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks).

has-frame-title

Every page should precisely specify what language(s) it is written in. 

## Why this matters

Screen readers, which read out the text on a page, need to know the language to 
pronounce it correctly. Without the language, text may sound like gibberish. 

For example: imagine a computer pronouncing just one German word
"die" (pronounced "dee") using English pronunciation. Now extend that to every
word on the page.

Search engines may also use the language to classify pages, so this can have
an effect on SEO as well.

## How to fix

The `<html>` element should have a `lang` or `xml:lang` attribute which describes 
the language of the page.

You will usually want to use the `lang` attribute as follows:

```html
<html lang="en-US">
```

(Note this example won't work for XHTML, which is deprecated and highly discouraged).

Make sure you specify a [valid language code](http://www.rfc-editor.org/rfc/bcp/bcp47.txt).

## More information

See [Technique H57](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H57).

html-lang-required

To comply with WCAG 2.1, fields must identify what their purpose is _programmatically_. If done correctly,
this allows browsers to help users fill in forms with known information, such as their name and email address.

This is accomplished via the `autocomplete` attribute, which should be set to a 
[supported value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) wherever
appropriate, e.g. 

```html
<label for="name">
  First Name
</label>
<input id="name" type="text" autocomplete="given-name">
```

For fields where `autocomplete` is not appropriate, e.g. due to security, or the field not matching the
specification, the specific field should be ignored.

## Methodology

* All fields which could support `autocomplete` (e.g. text fields)
  are checked. Other fields - like dropdown menus - are ignored.
* The [accessible name](https://www.w3.org/TR/accname-1.2/) of each field is considered. In most cases this
  will be the `<label>` for the field.
* If the name matches a known pattern the field 
  must have an appropriate `autocomplete` value specified.
  For example, an `<input>` with type `text` with a label of 
  "First Name" would be expected to have an autocomplete value 
  of `given-name` or similar.

Note that using `autocomplete="on"` is not sufficient to pass this check, a
specific named autocomplete value must be used. See the
[supported values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

## Troubleshooting

If a field is a false positive, check whether the field has an 
appropriate accessible name (i.e. a `<label>` or `aria-label`).

If the label is incorrect, Silktide may assume that the field 
requires `autocomplete` where it does not. You should fix the 
label to avoid this.

Otherwise, you can simply ignore the specific field.

## More information

* [How to use HTML 5.2 attributes](https://www.w3.org/WAI/WCAG21/Techniques/html/H98)

identify-input-purpose

An `<img>` element inside a link must not specify alternative text that duplicates the
content of a text link inside or beside it.

For example, this code should be avoided:

```html
<a href="/apple">
    <img src="apple.png" alt="Apple">
    Apple
</a>
```

Accessible technologies will tend to see this as "Apple Apple". The correct behaviour is to
specify either a null (empty) `alt` attribute:

```html
<a href="/apple">
    <img src="apple.png" alt="">
    Apple
</a>
```

or to hide the image via `aria-hidden`:

```html
<a href="/apple">
    <img src="apple.png" aria-hidden="true">
    Apple
</a>
```

# Learn more

Read about [Technique H2](https://www.w3.org/TR/WCAG20-TECHS/H2) on how to combine
an adjacent image and texts links. 

See the [WAI Tutorial on decorative images](https://www.w3.org/WAI/tutorials/images/decorative/).

img-duplicate-alt

When an image is the only content of a link, it should specify alternative text, 
via an `alt` attribute. The alternative text should describe the purpose of the link.

Without this, some users will be unable to determine what a link does, for example anyone 
using a screen reader.

To fix this, simply add an `alt` attribute to the image inside the link, e.g.:

```html
<a href="/apple">
    <img src="apple.png" alt="Apple">
</a>
```

img-in-link-missing-alt

Links must be appear visually distinct from regular text. A common mistake is to make links
only differ subtly in color. Users with visual impairments cannot see these links.   

There are two ways to comply with this requirement:

1. You can make links appear differently from regular text without relying on color alone.
   For example, you can add an underline to your links. This makes links easy to identify, even
   to people who cannot see color at all.
2. You can make links a color which is very different from the surrounding text (a 3:1 ratio), 
   AND ensure that when the link is selected with the keyboard or mouse that it appears   
   differently from regular text without relying on color alone.

Unless you have disabled the `outline` CSS style, links will automatically appear visually distinct
when selected with the keyboard.

link-contrast

The purpose of a link should be clear from the text inside the link. Links like "learn more" are
not helpful to users with accessible technology.

Links should also avoid redundantly saying that they are links, e.g. "link to page" as screen
readers will read these out with the word "link" added, e.g. "link link to page".

Exceptions to these rules are allowed where the purpose of a link would be ambiguous to users 
in general.

link-purpose-a

Avoid opening links in a new tab or window. Where you must do this, include an explanation
in the text of the link.

## Why this matters

Opening links in a new tab or window breaks the back button and can be disorientating for 
novice web users, and the visually impaired. Generally you should avoid opening links in a
new tab or window, but if you have to, you should include text explaining that this will happen.

## How to fix

An explanation must be clear in the accessible text for the link. For example:

```html
<a href="products.html" target="_blank">
    Products (opens in new window)
</a>
```

Or, for an image inside a link:

```html
<a href="products.html" target="_blank">
    <img src="products.jpg" alt="Products (opens in new window)">
</a>
```

Rather than updating all of your links manually to do this, you can add a simple CSS
selector, such as:

```css
a[target="_blank"]:after {
    content: " (opens in new window)";
}
```

Note that doing this with an icon, is not sufficient to pass this check. The text must be
readable by screen readers.

Alternatively you can override the link text for accessible technologies (like screenreaders),
so that the appearance of the link does not change. For example:

```html
<a href="products.html" target="_blank" aria-label="Products (opens in new window)">
    Products
</a>
```

Note that if you do this, the `aria-label` will replace the text content of the link completely,
so it must still make sense in isolation.

## Terminology

Although it is common to say "opens in new window", almost all browsers now use tabs, and
so this terminology is potentially confusing. You may prefer: "opens in new tab".

## Methodology

1. Silktide considers all links on a page with a `target` attribute of `_blank`.
2. For each link, Silktide considers the screen-readable text of the link, which includes:
   * The text content of the link
   * Any `alt` text inside any images inside the link
   * Any `aria-label` or `aria-labelled-by` text
   * The `content` of the pseudo-elements `:before` and `:after`
3. This text is analysed for the presence of common text, including "opens new tab"
    and "opens new window". If the text is not found, the link fails the test.

## Further reading

Generally best practice is to avoid opening links in a new tab or window.  

The W3C provides detailed guidance on 
[when opening a link in a new window may be appropriate](https://www.w3.org/TR/WCAG20-TECHS/G200.html).

link-text-explains-open-in-new-window

Lists of related items should be written [semantically](https://html.com/semantic-markup/) as a 
list.

Usually this means rewriting these to use the `<ul>` or `<ol>` tags.

This allows assistive technologies to more easily navigate from item to
item, or past entire groups of links if the user wants to. 

## Examples 

### Navigation

This navigation:

```html
<a href="/about">About us</a>
<a href="/products">Products</a>
<a href="/contact">Contact us</a>
```

Should be rewritten as a list:

```html
<ul>
  <li><a href="/about">About us</a></li>
  <li><a href="/products">Products</a></li>
  <li><a href="/contact">Contact us</a></li>
</ul>
```

### Tables for content

This single-column table is redundant. There is no
value in placing the content in a table, which makes
it harder for screen reader users to interpret and interact
with.

```html
<table>
  <tr>
    <td>
      Banana
    </td>
  </tr>
  <tr>
    <td>
      Apple
    </td>
  </tr>
  <tr>
    <td>
      Pear
    </td>
  </tr>
</table>
```

Should be rewritten as a list:

```html
<ul>
  <li>Banana</li>
  <li>Apple</li>
  <li>Pear</li>
</ul>
```

## Justification

Users of assistive technologies, like screen readers, can skip an entire
list in one step. In some cases, they can even search inside a list. 

These aids are not available where links are written outside a list. 
Failing to use lists correctly can force users to have to step through
hundreds of items one at a time.

## Methodology

1. Any single-column tables are automatically considered 
   redundant lists. 
2. For non-table elements, recursively work down the page looking inside
   each element for links separated by minimal amounts of non-link text. 
   If the non-link text is below 30 characters 
   in length, we assume we're inside content that should be a list.
   Some exceptions are made, e.g. the presence of an `<hr>` would break
   out of the list.

## More information

See [Technique
H48](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H48) for
details.

mark-navigation-section-as-list

All images, video, audio and other media should specify appropriate
[alternative text](https://help.silktide.com/articles/alternative-text/).

For example:

```html
<img src="apple.png" alt="Apple">
```

Alternative text should be descriptive and useful. We recommend you read 
[this comprehensive guide to writing alternative text](https://webaim.org/techniques/alttext/)
by WebAIM.

The W3C also provide more information on how to satisfy this check in [Technique H37](https://www.w3.org/TR/WCAG20-TECHS/H37).

missing-alt

Every page should have a clearly defined heading, known as a "H1" (Heading 1).

A `H1` is the main heading of the page. It helps accessibility by allowing uses to
skip to the main content of the page. It helps all users identify what the page is about. 
It helps SEO by giving special emphasis to the topic of the page.

It is not enough to simply include large text. Headings must be coded 
[semantically](https://html.com/semantic-markup/) as `<h1>` tags, like so:

```html
<h1>This is a heading</h1>
```

Note that headings must contain some machine readable text to be considered valid. 
For example, this heading is not valid:

```html
<h1>
    <img src="company-logo.png">
</h1>
``` 

But with the addition of `alt` text, this heading is valid:

```html
<h1>
    <img src="company-logo.png" alt="About Company Inc.">
</h1>
``` 

Generally we recommend you just use plain text for your headings.
See [Technique H42](https://www.w3.org/TR/WCAG20-TECHS/H42) for more details.

missing-h1

Labels with a `for` attribute should point to a unique ID of a [labelable
control](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable)
that is used within the document fragment.

remove-for-attribute-in-fragment-which-does-not-exist

Webpages should provide a way to skip to the main content of the page. There are 
several ways to accomplish this.

The most common solution is a "Skip to content" link:

```html
<a href="#main">Skip to main content</a>
...
<div id="main">
<h1>Welcome to this page</h1>
```

This link is usually hidden from users unless selected, so it doesn't need to compromise the look of 
your page.

Alternatively, you can use the `<main>` HTML landmark:

```html
<main>
<h1>Welcome to this page</h1>
``` 

or an ARIA role of `main`:

```html
<div role="main">
<h1>Welcome to this page</h1>
``` 

Generally best practice is to combine these approaches, using `<main>` landmark with a link pointing to it:

```html
<a href="#main">Skip to main content</a>
...
<main id="main">
<h1>Welcome to this page</h1>
```

This approach will be most widely supported by screen readers and understood by the highest number of users.

# Justification

Many users of assistive technology are only able to experience content sequentially - that is, they must
step through each part of the page, one part at a time. Often this is a slow process, potentially 
hampered by a physical impediment.

Most web pages have a header containing branding and navigation on every page. Stepping through 
this repetitive part of the page can be hugely frustrating for users of assistive technology. For example, 
a blind user may have to listen to hundreds of navigation links before they can reach the content on a page.

Adding a means to skip directly to the page content massively enhances the experience for these users.

Skip to content links do not need to be visible to everyone. A common implementation means they are only 
experienced by users via the tab key or other assistive technology 
(see [skipping to navigation links](https://webaim.org/techniques/skipnav/) from WebAIM). 

# Methodology

It is not sufficient to include a "skip to content" link. The link must work, and it must appear early
enough in the page to be useful.

* If the page has less than 500 visible characters, it does not require a "skip to content" link.
* If the page has a main landmark (e.g. `<main>` or `role="main"`) it does not require a "skip to content" link.
* Silktide looks for a link with a fragment (e.g. `#main`) pointing to a lower part of the page. The link 
  must not be adjacent to other text nodes. 
* The fragment must point to an ID that exists, or this check will raise an error.
* The link must appear before 500 visible characters of text in the page, or this check will raise an error.

The text inside the link is not considered, as this test must support a wide range of languages.

# Learn more

More about [skipping to navigation links](https://webaim.org/techniques/skipnav/) from WebAIM and 
see [W3C's recommended technique](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G1).

skip-to-content

When viewed on small screens (like mobile phones) content must fit without 
requiring scrolling in two dimensions.

WCAG 2.1 specifically requires this for:

+ Vertical scrolling content at a width equivalent to 320 CSS pixels
+ Horizontal scrolling content at a height equivalent to 256 CSS pixels

Except for parts of the content which require two-dimensional layout for usage or meaning,
such as a maps application.

two-dimensional-scrolling

wcag-22.score

wcag-22-a.score

wcag-22-aa.score

wcag-22-aaa.score

website.pages

website.documents

To comply with WCAG AA, the colour of text must sufficiently contrast with
its background color, so that people with moderate visual impairments can read it.

The [contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef) 
must be at least 4.5:1 for body text, and 3:1 for large text.

A much more demanding version of this check (1.4.6) exists for WCAG AAA. Ignoring an issue in this check 
will also ignore it in that check, and vice versa.

aa-text-contrast

Heading elements (`<h1>`, `<h2>`, ...) must contain some machine-readable
text content. 

Heading should never be empty, or just contain whitespace:

```html
<h1>   </h1>
```

Headings which contain images or other media must specify alternative text:

```html
<h1>
    <img src="heading.png" alt="Press releases"> 
</h1>
```

See [Technique H42](https://www.w3.org/TR/WCAG20-TECHS/H42) for more details.

Priority	Recommendation	Progress
	Ensure pages don't require zooming and 2D scrolling on small screens WCAG 2.1 AA 1.4.10	0%
	Ensure pages don't scroll in two dimensions on small screens WCAG 2.1 AA 1.4.10	2%
	Ensure every page contains a top-level heading WCAG 2.0 A 1.3.1	2%
	Specify alternative text for images inside links WCAG 2.0 A 1.1.1	31%
	Allow users to quickly skip to content WCAG 2.0 A 2.4.1	92%

Ecco

Accessibility

WCAG Levels

Recommendations

The best free accessibility checker