May 2023

June 2023

July 2023

August 2023

September 2023

October 2023

November 2023

December 2023

January 2024

February 2024

March 2024

April 2024

May 2024

June 2024

July 2024

August 2024

September 2024

October 2024

November 2024

December 2024

Adair County, Missouri

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

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

All controls on the page - including links, buttons, and fields - should show when 
they have been selected by the keyboard.

You can confirm this yourself by loading a webpage and using the Tab key to navigate 
through it. Anything you can select should alter its appearance when selected. 
For example, a text field might change color, or have a distinctive border applied. 

This is default behavior for all standard web controls, and so if this issue is appearing
it is because this default behavior has been disabled. Or alternatively, if you have written
your own custom controls, these will need styling to support focus states.

## How to fix

Links and form controls typically define an `outline` CSS style, which ensures
they are highlighted automatically, for example:

```css
input:focus (outline: 2px solid red);
``` 

If you choose to override or disable the default `outline`, you should specify an accessible 
alternative, such as a border or background color.

### Elements appear to change in the browser

Focus states should be defined in CSS alone, and not require JavaScript to work.

Try disabling JavaScript on the page, and see if focus is still visible. If it not,
then the focus state won't work with assistive technologies that don't have a physical
keyboard, e.g. mobile phones.

Some more unusual means of implementing a focus state cannot be detected or measured
automatically. These include:

* Focus implemented via pseudo-elements - such as `::after` or `::before`.
* Focus using `:focus-within` (JavaScript current provides no way to access these).
* Focus cascaded to child elements, e.g. a `<span>` inside an `<a>` tag. We detect
  some of these cases, but there are variations that we cannot detect.

Currently, there is no practical way to assess these focus states automatically.

### Unexpected elements are focusable

You may be surprised to see tags like `<div>` or `<span>` being shown as focusable.
If an element has a `tabindex` of 0 or higher, it becomes focusable. Any HTML tag can be made 
focusable in this way, this is so that custom controls (e.g. your own drop-down menus, or 
sliders) can support keyboard navigation. [Learn more about tabindex on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).

## Further reading

* [WCAG 2.4.7](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)

ensure-focus-is-visible

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

Forms should always contain a submit button, otherwise some people using
accessible technologies may not be able to submit the form.

Submit buttons are `<input>` elements with a type attribute of `submit` or
`image`, or `<button>` elements with type `submit`. 

## Rationale 

Many users expect to be able to press enter in a form to submit it. However,
this is not always possible.

Users of some assistive technologies may (depending on the technology) only
be able to press a button to submit the form. In the absence of a submit
button, the user may not be able to submit the form.

In addition, the absence of a submit button suggests that the form may 
provide an automatic 'change of context', i.e. major change to the user 
interface without the user choosing to do so. This can be highly disorientating
to some users.

## Further reading

See [Technique H32](https://www.w3.org/TR/WCAG20-TECHS/H32.html).

form-submit-required

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

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

Bookmarks (also known as outline entries) should be applied to long PDFs to 
provide a hierarchical overview of the document to help aid navigation. 

WCAG guidelines do not specify how many pages are required to be classified as a 
long PDF. Because of this Silktide treats PDFs of 21 or more pages as long. 
This matches [Adobe Acrobat](https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html?trackingid=KACNN#Bookmarks) 
interpretation.  

See [WCAG](https://www.w3.org/TR/WCAG20-TECHS/pdf.html#PDF2) for advice.

pdf-long-document-requires-bookmarks

PDFs should have a default document language set to help render text accurately and help screen readers pronounce words correctly. 
See [WCAG](https://www.w3.org/TR/WCAG20-TECHS/pdf.html#PDF16) for reference.

pdf-missing-default-language

PDF files should have headings.
 See [WCAG](https://www.w3.org/TR/WCAG20-TECHS/pdf.html#PDF9)

pdf-missing-headings

PDFs need to be tagged in a valid reading order for accessibility. See [Adobe's guide](https://helpx.adobe.com/uk/acrobat/using/creating-accessible-pdfs.html#tag_the_pdf) and [WCAG](https://www.w3.org/TR/WCAG20-TECHS/pdf.html#PDF3) for advice.

pdf-must-be-tagged

All PDFs must define a valid title. This must not be confused with the file name. 
See [PDF 18](https://www.w3.org/TR/WCAG20-TECHS/PDF18.html) for details.

pdf-no-title

PDFs need to be machine readable for accessibility software to be able to access them. 
Scanned documents or password protected ones are usually not machine readable.

pdf-not-machine-readable

wcag-22.score

wcag-22-a.score

wcag-22-aa.score

wcag-22-aaa.score

website.pages

website.documents

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)

Priority	Recommendation	Progress
	Ensure controls change appearance when they are selected WCAG 2.0 AA 2.4.7	20%
	Tag all PDFs WCAG 2.0 A 1.3.1	20%
	Ensure PDFs are machine readable WCAG 2.0 A 1.1.1	30%
	Ensure PDFs have a title WCAG 2.0 A 2.4.2	15%
	Fix duplicate IDs WCAG 2.0 A 4.1.1	0%

Adair County, Missouri

Accessibility

WCAG Levels

Recommendations

The best free accessibility checker