February 2020

March 2020

April 2020

May 2020

June 2020

July 2020

August 2020

September 2020

October 2020

November 2020

December 2020

January 2021

February 2021

March 2021

April 2021

May 2021

June 2021

July 2021

August 2021

September 2021

October 2021

November 2021

December 2021

January 2022

February 2022

March 2022

April 2022

May 2022

June 2022

July 2022

August 2022

September 2022

October 2022

November 2022

December 2022

January 2023

University of Gloucestershire

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 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

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

All `id` attributes on a page must be unique, or accessible technologies used by the page 
can stop working.

## Example

The duplicate `id` here makes it unclear which label belongs to which input field:

```html
<label for="name">Your name</label>
<input id="name">

<label for="name">Company name</label>
<input id="name">
```

As a result, accessible technologies like screen readers can fail to read out the 
correct text, or may read out no text at all.

Similar issues can occur when using `aria-labelledby` and `aria-describedby`.

## How to fix

Ensure all `id` attributes on a page are unique. 

## More information

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

duplicate-id

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

Most content should be written so people with a lower secondary level of education can understand it.
Where this is not possible, supplemental content or an alternative version should be provided.

This check highlights pages with a reading age of 16 years or higher. Only pages with at least 100 words
of content (excluding navigation, footers, etc) are considered.  

For more information, see [WCAG SC 3.1.5](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html).

ensure-reading-ability-is-not-advanced

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 proceeded 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

People using screen readers are not able to see the layout of a form. To make forms
accessible, they must define explicit text labels for each form control. 

Usually the best solution is to use a `<label>` element. The label may be linked to 
by the form control:

```html
<label for="name">Full name</label>
<input type="name" id="name">
```

or the `<label>` can be wrapped around the form control:

```html
<label>
    Full name <input type="name">
</label>
```

Buttons are different, as their labels are specified by the code for the button, e.g.

```html
<input type="submit" value="Send message">
<button>Send message</button>
```

Alternatively ARIA attributes, such as `aria-label` may be used, but this information
will not be conveyed to visual users. For more information, see [W3C's guide to labeling controls](https://www.w3.org/WAI/tutorials/forms/labels/).

Hidden input fields (`<input type="hidden">`) do not require labels.
Note that the `placeholder` attribute 
[should not be used as an alternative to a label](https://www.w3.org/TR/html/sec-forms.html#the-placeholder-attribute),
nor should the `title` attribute.

## Custom roles

Note that this check considers the underlying accessible role of an element, which can be 
different from the tag itself.

For example, this `<div>` has a `role` of `button`, and so is expected to have a label, like
a button would.

```html
<div role="button"></div>
```

form-control-labels

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

Do not link to an anchor on the page that does not exist. For example:
linking to `#content` without a valid destination such as `<body id="content"></body>`.

A common web design pattern is to use a named anchor to show an element via JavaScript, e.g.

```html
<a href="#foo" onclick="$('.bar').toggle();">Click me</a>
<div class="bar">
    This is some content.
</div>
``` 

In these cases, the anchor (`#foo`) should point to the `id` of the hidden element:

```html
<a href="#foo" onclick="$('#foo').toggle();">Click me</a>
<div id="foo">
    This is some content.
</div>
```

This way the semantic intent of the link is preserved, even without JavaScript. 
Note that doing so may require modification to your script, to prevent automatic 
scrolling to the named anchor.

linking-to-anchor-on-page-that-does-not-exist

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

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.

Priority	Recommendation	Progress
	Avoid linking to anchors that do not exist WCAG 2.0 A 2.4.1	33.3%
	Fix duplicate IDs WCAG 2.0 A 4.1.1	0%
	Ensure links explain they open in a new tab WCAG 2.0 AAA 3.2.5	0%
	Ensure text has sufficient contrast (AA) WCAG 2.0 AA 1.4.3	97.8%
	Ensure focus is not partly obscured WCAG 2.2 AAA 2.4.13	48.6%

University of Gloucestershire

Accessibility

Accessibility recommendations