Web Accessibility tips
Web Accessibility tips
Below are ten tips to assist you with making your website more accessible
Note: Tips 1 to 5 are a great place to start to if you are responsible for updating content on your website. Tips 6 to 10 are more technical and will probably need to be discussed with the web developers of your website or someone who knows how to code your website.
1. Colour contrast
- Use a colour contrast checker to check for optimal contrast on your documents.
- Ensure a a colour contrast of 4.5:1 between text and its background. For icons and controls, a contrast of 3:1 is recommended.
Who this benefits
- Individuals with low vision, dyslexia and/or colour blindness.
- Those who access websites in low-light conditions or when fatigued.
There are lots of free colour contrast checkers online. Find one you like or use the WebAIM Colour Contrast Checker
2. Alt text
- Include a concise, descriptive alternative text for each image, graph, or icon.
- When an image is purely decorative and doesn't convey information, use <alt="""> in the HTML code.
Who this benefits
- Individuals who use screen readers to access and interact with websites.
- Those with visual impairments, or others who may not be able to view images.
More information on alt text for images
3. Meaningful links
- Ensure that your links are descriptive and meaningful when read in isolation. Avoid vague phrases like "click here" or "read more."
- Create unique link descriptions that accurately convey the purpose and destination of the link. For example, use “Read about sport” rather than ”Click here for more info about sport”.
Who this benefits
- All users, especially those who rely on screen readers or have cognitive impairments.
More information on writing meaningful link text
4. Heading structure
- Create a consistent, well-structured heading hierarchy and match that in the HTML code.
- Use appropriate heading tags, such as <h1>, <h2>, and <h3>, in hierarchical order.
- Ensure that each heading accurately describes the content beneath it, which helps users understand the context and structure of the page.
- Do not use heading tags to create a specific visual appearance unless the content is a heading for the section that follows.
Who this benefits
- Users who rely on screen readers and/or have cognitive impairments.
- Sighted users who need to quickly scan a webpage for relevant information.
Read more about headings and titles including examples (CSUN.edu)
5. Plain language
- Ensure content is written in plain language (clear, straightforward, jargon-free).
- Ensure that micro content, such as button labels, uses clear verbs that indicate the intended action
Who this benefits
- All users, including those with cognitive disabilities, low literacy, and non-native English speakers.
6. Keyboard access
- Verify that your website is easy to navigate using keyboard commands alone.
- Implement a clear and noticeable focus indicator to show the current element in focus.
- Organise the tabbing order logically, so users can easily navigate through interactive elements.
Who this benefits
- People with motor disabilities or impairments that affect fine motor skills.
- Users that cannot use a mouse.
More information on keyboard access
7. Forms
- Create simple forms with a clear purpose that are easy to interact with.
- Each form element— input fields, radio buttons, and submit buttons—should possess clear labels. The state and role of each field must be correct in the code.
- To enhance form accessibility, adhere to WCAG2.1 success criteria related to forms.
- When designing forms, focus on proactive error prevention by using appropriate form field types and clearly differentiating between mandatory and optional fields.
Who this benefits
- All users, especially those who rely on screen readers.
8. Error messaging
- Clear error messages reduce user frustration, guide them toward resolution, and improve the overall user experience.
- Ensure that error messages are descriptive, concise, and offer guidance on how to rectify the issue.
- Place error messages near the erroneous field and use sufficient contrast and formatting to make them stand out.
- Ensure error messages are associated with their respective fields in the HTML code, so screen reader users can accurately identify and address the errors.
Who this benefits
- All users, especially those who rely on screen readers.
- Those with visual impairments or cognitive disabilities.
More on accessible error messaging
9. Landmarks
- Landmarks simplify page navigation and interaction, making the content more approachable.
- Ensure your vendor provides the means to include ARIA landmarks and use them to signal, at least, the three key areas: main, navigation, and search.
Who this benefits
- Individuals who rely on screen readers or have cognitive disabilities.
10. Check before publishing
- Check the accessibility of your webpage before publishing. This ensures it can be accessed by as many users as possible.
- Do an assessment to identify potential issues so you can rectify them before reaching your audience.
- Expert reviews and usability testing with individuals with access needs are highly recommended. If you are unable to do either of these, use a code checking tool online to receive instant feedback about your page’s accessibility.
Who this benefits
- All users
Share
