Dealing with accessibility can often feel confusing and overwhelming. With numerous checklists, trainings, and talks available, finding a straightforward starting point to create your own accessibility system can be complex. To help simplify this process, here are a few key recommendations:
1. Keep it the design simple and effective in terms of elements
- Avoid using complex decorative elements, as they can distract from the main content and make the page larger and more difficult to navigate with assistive technologies.
- Avoid using complex components such as sliders, carousels, pop-ups, overlays, animations.
In addition to using responsive design, consider how the content will be accessed by screen readers and other assistive technologies for each section.
2. Use a clear heading structure that follows a hierarchical format:
- One H1 for the main title of the page,
- Multiple H2s for the main sections of the page
- Multiple H3s for subsections.
- If you use a decorative text before a heading, it’s best to use a `<span>` rather than a heading tag (H1, H2, H3, etc.). Decorative elements shouldn’t be read as headings by screen readers, so using a `<span>` ensures that the focus remains on the actual headings that organize your content effectively.
This structured hierarchy is one of the most essential aspects that screen reader users greatly appreciate.
3. Use semantic elements properly to provide proper context to screen-reader users:
<header>,<nav>,<main>,<article>,<section>, and<footer>to define the layout to the page;- <ul> or <ol> for related items;
- <blockquote> for longer quote and <q> for inline quote;
- Make sure to use <button> for actions (like submitting form or toggling element) and links <a> for navigating. Don’t use <a> with role=”button” as it may confuse screen-reader users.
4. Use Alt-Text for informative images
Although some users prefer a much simpler page without any alt-image descriptions, the best practice is to use descriptive alt text that helps screen reader users understand more about the content. If an image doesn’t have alt text, it may cause confusion.
5. Use High-contrast color combinations for text and background to enhance readability
According to WACAG guidelines, proper contrast should have a ratio of 4.5:1 for normal text and 3:1 for larger text.
Here are three different tools for checking the contrast:
- Contrast-finder (Tanaguru) is an useful tool for checking the color combinations before applying them to your website,
- Wave.webaim is an online checker that analyzes the contrast of live websites,
- Equalize Digital Accessibility Checker is helpful plugin for checking contrast while building a WordPress website.
6. Use a Skip Link
The skip link means skip to content link and this is the first link / focusable element on a page when you navigate the website using a tab. It helps screen-reader users and keyboard-only users to bypass the navigation menu or other elements in the header and is hidden by sight users.
Usually, the skip content is included in the page structure by an acceesible-ready theme. If it’s not added by the theme, it can be added by a ”helper” plugin – WP Accessibility Plugin.
7. Test with tab and a Screen-Reader to have a basic understanding of how your website is navigating without a mouse.
- Use the tab key to navigate through all interactive elements on your website (links, buttons, forms) and ensure the focus is clear and the order is logical as you move through elements.
- Use popular screen reader like NVDA (Windows) or VoiceOver (macOS) to listen how content is read
The core idea of creating an accessible website is to understand how users navigate your site and to help them easily find the information they need. It goes beyond simply following checklists; it’s about genuinely caring for others and ensuring that information is available across various technologies.