This Website is Accessible

High Contrast

Use WCAG compliant color palettes to improve readability. All code snippets on the website uses a11y-light. You should have a 4.5:1 contrast between the text color and the background. As well as a 3:1 contrast between the link text color and the surrounding non-link text color.

• 4.5:1 contrast between the non-link text color and the background.
• 4.5:1 contrast between the link text color and the background.
• 3:1 contrast between the link text color and the surrounding non-link text color.

Explicit Language Attribute

Specifying the intended language of the content of your website can help screen readers pronunciate more accurately.

<p lang="en-GB">British English</p>

Keyboard Navigation

Although you want your website to respect the accessibility features provided by the operating system. Implement custom keyboard navigation to help users who can't use pointer-based input if navigating your website is unreliable without one.

For example, you should be able to scroll with arrow keys on this page, that is default behavior, meaning people will expect this to happen when they press arrow keys. It can be confusing if it is rebinded to some other functionality.

Autofocus

Autofocus is often used in conjunction with forms and is performed the moment the user loads into the page. While autofocus spares users from an extra click and directs them to a starting location of your choice, visitors with screen readers might find it difficult to orient themselves within the layouts of your website as the focus changes without warning.

<!-- Use cautiously! -->

<input name="q" autofocus />

Unstyled List Quirks

Unstyled lists are not announced as lists by VoiceOver, you can fix this by specifying a role.

<ul role="list">

	<li>One</li>

	<li>Two</li>

	<li>Three</li>

</ul>

Which would render and appear as:

• One
• Two
• Three

Text Alternatives for Images

Images can be productive representations of information, so it is not recommanded to remove images for the sake of accessibility. Instead, provide detailed explanations of the images so that it can be read by a screen reader or transcribed into Braille.

<img alt="describe the image"></img>

Alt Text: a concrete road in between two long rows of bushes and trees with golden leaves underneath the sun.

Avoid Visual-Dependent Elements

Most screen readers do not react when content changes dynamically. Additionally, for toggle buttons such as the one below, do not update the text within the buttons at all.

Please never do something like this.

At the very least specify an aria attribute to indicate the state.

<button aria-pressed="true||false">

	Toggle

</button>

Text Readability

Ensure that visitors to your site can read everything with ease. Choose a font with readability in mind, although most default fonts provided by browsers can fulfill that role.

Certain fonts may help users with dyslexia, such as OpenDyslexic under the SIL-OFL license.

The quick brown fox jumps over the lazy dog