Skip to content Skip to footer

Essentials

All of the basic ingredients you need to get started in the world of accessibility. These are the basics which every developer should consider essential to building an accessible website.

The role of the focus and how to style it.

Illustration of keyboard tab key.

This article defines the focus pseudo class and it’s role in keyboard navigation, and best practices for styling it responsibly.

Font size and content width.

Illustration of Ruler. When it comes to making your content accessible size matters.

This article will describe how to manage legibility through selecting the right font size and width. Including looking at applying Max-Width.

How to style hover

Illustration of computer mouse which is used for hovering over a link.

This will describe in detail the methods of how to style the hover element accessibly including enlarging elements with scale.

How to enable accessible keyboard navigation.

Illustration of a keyboard used as a tool to navigate a website by many users.

Keyboard use is fundamental for many people navigating a website. This article describes how to style with the focus element and get started using tab index.

How to make links accessible

Compass illustration. This reflects how accessible links should function as reliable guides.

How to code links accessibly , including anchor text and appropriate order and styling for selectors e.g focus, hover, visited etc.

Aria

An illustration of a person speaking, representing how an aria-label is used to talk to the user.

This article will help give you an insight into the basics of aria. Covering the function of aria labels, roles, live and more.

How to ensure Typography is legible

London Underground sign illustration, a famous example of a sign with a legible font.

This article will set out the principles behind selecting the font and it’s impact on accessibility covering the basics of typography.

How to develop an accessible colour scheme.

Illustration of a colour wheel with the different shades in a circle.

How you can achieve getting colour contrast right. Why it is all about the planning and learning colour theory.

Introduction to colour contrast

An illustration of 3D film glasses, reflecting the disorientating effect of poor color contrast.

An introduction to colour contrast why it’s important and the grading system which is used to access their accessibility level.

Alt Tags and the value of good labelling

An illustration of a Jam Jar with a label. Alt-tags function as labels for the contents of an image.

Alt tags are a fundamental component of an accessible website. This article sets out why they matter and what makes a good Alt Tag.

Semantic Code. Why meaning is important.

A broken-down car illustration. Your website could be in the same poor state without semantic code.

How to use Semantic code and why you should use it to make websites more functional and accessible for all users.