Prioritising web accessibility when building a website.
When designing a website, it’s important to prioritise web accessibility to ensure that people with visual impairments or other disabilities can easily access and use your content.
Below we break it down into manageable steps that everyone can action.
Add Alt Texts to Images
Alternative text is a description of an image that can be read by screen readers or other assistive technologies.
Alt text should be concise, descriptive, and provide relevant information about the image. It should focus on conveying the essential meaning and purpose of the image, whilst considering the context of the surrounding content.
Below are a few examples of effective alt text for different types of images:
- Decorative Image:
Alt Text: "Decorative border with floral patterns." - Informational Image:
Alt Text: "Pie chart showing sales distribution: 45% electronics, 30% clothing and 25% books." - Complex Image:
Alt Text: "Illustration of the solar system, showing the position of planets and their orbits around the sun." - Image with Text:
Alt Text: "Quote by Maya Angelou: 'If you don't like something, change it. If you can't change it, change your attitude." - Image with Action:
Alt Text: "Person using a wheelchair ramp to access a building entrance." - Image with Contextual Details:
Alt Text: "Group of friends having a picnic in the park on a sunny day, sitting on a checkered blanket and enjoying food and drinks."
Consider your colour scheme
Putting some thought into how you use colour on your website can make the world of difference to a lot of people.
Here are some guidelines to consider:
Contrast: Use sufficient contrast between text and background colours to ensure readability. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. This online tool can help you check the contrast ratio of your chosen colours: https://webaim.org/resources/contrastchecker/
Readability: Choose colours that provide good legibility. Dark text on a light background or vice versa tends to be the most readable combination. Avoid using colour combinations that may cause eye strain or make it difficult for users to read.
Colour Blindness: Take into account the needs of users with different types of colour blindness. Avoid relying solely on colour to convey information or meaning. Use other visual cues, such as patterns or labels, in addition to colour to ensure that information is distinguishable.
Take for instance this scenario: An ecommerce store using colour to indicate stock levels.
Mistake: Using only colour to indicate product status
-
- Available: The product is shown with a green background.
- Low stock: The product is shown with an orange background.
- Out of stock: The product is shown with a red background.
Problem: Relying solely on colour makes it difficult or even impossible for colour blind people to see the stock level.
Solution: Use additional visual cues by incorporating other visual cues to indicate the product status:
-
- Available: Display a green checkmark icon, along with the coloured background.
- Low stock: Display an exclamation mark icon, along with the coloured background.
- Out of stock: Display a red "Out of Stock" label, along with the coloured background.
By adding these visual cues in addition to colour, users can understand the product status based on the accompanying icon, label, or text, making the information accessible to a wider range of users regardless of their colour perception.
Use Headings to Structure Content
If you plan the structure of your website content ahead of time, assistive technologies will be able to navigate your site easily.
Semantic structure: Use HTML heading elements (<h1> to <h6>) to mark up your headings instead of using other styling techniques like increasing font size or making text bold. Semantic markup ensures that screen readers and assistive technologies can identify and convey the structure accurately.
Logical order: Arrange your headings in a logical order that reflects the content's hierarchy. The main heading of the page should be marked as <h1>, representing the top-level heading, followed by subheadings marked as <h2>, <h3>, and so on. This logical order helps users navigate the content sequentially.
One <h1> per page: Each web page should have only one <h1> heading, representing the main topic or purpose of the page. The <h1> heading provides context and sets the tone for the entire page.
Heading levels: Avoid skipping heading levels (e.g., going from <h2> to <h4> without using <h3>). Skipping levels can confuse users relying on headings for navigation. Ensure that your headings follow a clear and consistent hierarchy.
Descriptive and concise headings: Write headings that accurately describe the content within their sections. Clear and concise headings provide meaningful context, making it easier for users to understand the purpose and relevance of each section.
Using Descriptive URLs for posts and pages
Descriptive URLs, also known as "friendly URLs" or "slug URLs," are web addresses that provide clear and meaningful information about the content of a web page.
Screen readers: Screen reader software is commonly used by people with visual impairments to navigate websites. Descriptive URLs help screen readers provide more meaningful and informative context about the page content. When a user hears the URL read aloud, it can provide a clear indication of what to expect on that page.
Cognitive disabilities: Users with cognitive disabilities often benefit from clear and descriptive information. Descriptive URLs make it easier for these users to understand the purpose or topic of a web page before accessing it. This helps them make informed decisions about which pages to visit and navigate through a website more effectively.
Keyboard navigation: Users who rely on keyboard navigation may find descriptive URLs helpful. When users see descriptive URLs, they can better anticipate the content they will encounter when pressing the "Enter" key to visit a specific page. This improves their overall navigation experience.
To implement descriptive URLs, consider the following best practices:
Use keywords: Include relevant keywords in the URL that accurately describe the content of the page. Avoid generic or non-descriptive URLs such as "page1.html" or "article123".
Separate words with hyphens: Use hyphens (-) to separate words in the URL. This improves readability and makes it easier for users to understand the URL structure.
Keep it concise: While descriptive, the URL should also be concise and avoid unnecessary words or characters. Long URLs can be difficult to read and understand.
Avoid special characters: Use only alphanumeric characters and hyphens in URLs. Special characters can cause encoding issues and may be difficult to read for some users.
Avoid Small Font Sizes
Font size plays a crucial role in making your website readable for all users, including those with low vision. Here are some tips:
Use a legible font: Choose a font that is clear and easy to read, even at smaller sizes.
Set a minimum font size: Define a minimum font size to ensure that even if users zoom out or decrease the text size, the text remains legible.
Use relative values: Instead of using fixed pixel values, use relative units like percentages (%) or ems (em). This allows users to adjust the text size according to their preferences without breaking the layout or causing readability issues.
Responsive design: Ensure that your content remains accessible and readable across various platforms and devices.
Allow Keyboard Navigation
Allowing keyboard navigation ensures that individuals who rely on keyboard input or alternative devices can navigate and interact with web content.
To enable keyboard navigation in a website, you should follow these best practices:
Focus Management: Ensure that all interactive elements, such as links, buttons, form fields, and menus, can be accessed using the keyboard. Use the "tab" key to navigate through these elements in a logical order, and provide a visual indication of the currently focused element.
Skip Links: Include skip links at the beginning of your page to allow users to bypass repetitive navigation and directly access the main content. This helps users who rely on keyboards to quickly navigate to the relevant sections of the page. This can be added as an invisible skip link that can only be seen when it has focus. To see this in action please click on the link below and use the Tab key to navigate:
https://accessibility.psu.edu/skipnav/skiplinks/
Keyboard Support for Dropdown Menus: If your website uses dropdown menus, ensure that they can be triggered and navigated using the keyboard alone. Users should be able to open and close dropdown menus using the "Enter" or "Space" key, and navigate through the options using the arrow keys.
Visual Focus Indication: Provide a clear visual indication of the focused element so that users can easily see where they are on the page. This can be achieved by highlighting the focused element or applying a distinct border or background colour to it.
Once you have taken all these steps, it would be a good idea to check your site with one of the auto checkers or better yet, do some live testing if you know someone that uses assistive technologies.
And remember, doing something is better than nothing. If you are going to do it yourself, start with a few small steps and build on that, little by little, so that it is not such an overwhelming job.
Thank you for taking the time to read this series of emails. I would love to hear more about how you feel about the subject. Is it something you would consider doing yourself or would you prefer to pay someone to do it for you? Or maybe it is not something you feel is necessary at the moment? Let me know your thoughts!
