Website accessibility is about creating online spaces that are usable and enjoyable for everyone.
Here are eight practical examples to illustrate how simple changes can make a big difference in making websites more accessible.
1. Color Contrast
A good color contrast between text and background is fundamental for readability.
It significantly enhances the visibility of the text making reading less straining for everyone – but especially individuals with visual impairments and color blindness.
Tip: Use WebAim’s colour contrast checker to check the colours you select.
CSS example:
body {
color: #333; /* dark text */
background-color: #fff; /* light background */
}
2. Hover States
Interactive elements with clear hover states indicate to users what can be interacted with.
This visual feedback is valuable for all users, especially beneficial for those who navigate with keyboards.
Tip: Make sure all interactive elements include a clear hover state – such as menus, buttons, links, etc.
CSS example:
button:hover {
background-color: #008CBA; /* change background color on hover */
}
3. Alt Text for Images
Providing alternative text for images describes the content of the image, aiding screen readers and serving as a placeholder when the image fails to load.
Tip: Make sure the image alt text is a clear description of the image, aiding in understanding the content better.
HTML example:
<img src="image.jpg" alt="Description of image">
4. Accessible Forms
Well-labeled form fields guide users on the type of information required, making it easier for everyone to fill out forms, and provide the necessary context for screen reader users.
Tip: Make sure that all input fields have a label. If the label does not seem necessary in the design, use CSS to position the label off screen.
HTML example:
<label for="name">Name:</label> <input type="text" id="name" name="name">
5. Keyboard Accessibility
Ensuring that all interactive elements on a website are accessible via keyboard caters to users who rely on keyboards due to motor disabilities.
Tip: The use of tabindex is contentious, use it sparingly! Ideally, the HTML layout and order in the Document Object Model (DOM) should reflect the content order, eliminating the need for the tabindex attribute. If you do use tabindex test to ensure the link is accessed by the keyboard in the appropriate order.
HTML example:
<a href="example.com" tabindex="0">Click here</a>
6. Aria Labels
ARIA labels provide context to assistive technologies, offering additional information that enhances the user experience for individuals relying on these technologies.
Tip: When writing the aria-label consider what the intent of the element is. For example, a button that closes a window could use “Close” or “Close window” or a more specific description.
HTML example:
<button aria-label="Close" onclick="closeWindow()">X</button>
7. Readable Font Sizes and Styles
Readable font sizes and styles is a key step for making websites more accessible, reducing strain on the eyes and ensuring that content is easy to understand.
Tip: Keep font selection simple – use a single font, consider carefully the right font for your website content and if possible choose a sans-serif font like Arial. Browser native fonts are best.
CSS example:
body {
font-size: 16px;
font-family: Arial, sans-serif;
}
8. Skip to Content Links
Providing a ‘Skip to Content’ link at the top of the page allows users to bypass navigation and go straight to the main content, aiding those who navigate with keyboards or screen readers.
Tip: Make sure the ‘skip’ link is the first content in the website body, and that it does not skip any important content. Typically it is used to skip past a website’s header and navigation.
HTML example:
<a href="#main-content" class="skip-link">Skip to main content</a> ... <div id="main-content"> <!-- Main content goes here --> </div>
Final Thoughts
These practical examples show the ease of incorporating accessibility features on websites.
Minor adjustments can provide a big impact on user experience and inclusivity, creating a welcoming and usable website for all.