To be clear about accessibility, these 5 considerations are the absolute minimum that any website needs to provide. Many aspects of accessibility are fairly easy to understand and implement. This simple checklist of steps is a simple overview of the must-haves so that accessibility is addressed in the most basic way.
1 - Every page needs a page title
Each page needs its own unique title that start with the most specific information. Page titles help with orientation by letting people know where they are and making it easier to move between pages open within their browser. The page title is the first thing that a screen reader says when a user calls up a page.
2 - Text alternatives for every image
Text alternatives ("alt-text") describe & convey the purpose of an image, picture, illustration, chart, etc. An alt-text should be concise yet descriptive. Charts and graphs need particularly detailed descriptions of the data they represent. Screen readers read out the alt-text to people who cannot see the image, but also to people who have turned off images to speed up their download or to save bandwidth.
3 - Proper semantic markup
The proper use of HTML tags (h1, h2, h3 headings, lists, links etc.) structures content in a logical and meaningful way. This creates a clear document outline and helps assistive technologies, like but not limited to screen readers, to understand the relationship between different pieces of content. Using semantic HTML also improves SEO and makes your code more maintainable.
4 - Colour and contrast
Sufficient colour contrast between text and background makes content readable for users with visual impairments, but also for those users viewing screens in bright sunlight. The WCAG guidelines recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Avoiding colour dependency means not relying solely on colour to convey meaning, so that all elements, not just text and background, work in grayscale and are identifiable & readable for users with visual impairments, but also for those users viewing screens in bright sunlight.
5 - Keyboard usage
Not everyone can or wishes to use a mouse. The most popular alternative is the keyboard. That means that all functionality must also be accessed and navigated using only a keyboard - using the Tab key. Interactive elements should be reachable in a logical order using the Tab key, and custom widgets should implement standard keyboard patterns.
Navigating with the keyboard moves the focus through the interactive elements of the website. The style of the visual focus should make it clear which elements have keyboard focus, thus enhancing the experience for keyboard-users. Focus styles should be highly visible and consistent throughout the interface, with sufficient contrast against the background. Various visual indicators are available: Outlines, background colours, or underlines etc.
6 - Design of forms
Best practices for form design include clear labels, appropriate handling of validation errors, and ensuring that form controls are keyboard-operable. Required fields should be visually and programmatically indicated. Use error messaging that doesn't rely solely on colour (aka colour independence).
