The A to AAA guide to creating accessible websites


By Richard Dixon

 


Share


Over 1 billion people worldwide encounter barriers when trying to read and understand content online. This can be due to disabilities, learning difficulties, visual impairments, or if people speak English as a second language.

As a digital agency we often get asked by our clients about accessibility and how they can meet the required standards so here is our 3 step guide of how to navigate your way through accessibility requirements.

Accessibility standards

When first thinking about an accessible website, it is useful to familiarise yourself with the WCAG - Web Content Accessibility Guidelines. WCAG is a set of guidelines and standards developed by the World Wide Web Consortium (W3C) to ensure that web content is accessible to people with disabilities. WCAG provides a framework for making websites and web applications more accessible and usable for individuals with various disabilities, including visual, auditory, physical, speech, cognitive, and neurological disabilities.

WCAG is organised into 3 levels of conformance: Level A, Level AA, and Level AAA. Each has a set of success criteria that websites should meet to achieve that level of conformance. Level A includes the most basic accessibility features, while Level AAA represents the highest level of accessibility.

The WCAG guidelines cover a wide range of accessibility issues which are categorised into the following four aspects:

Perceivable content: Ensuring that users can perceive and access all information on the website, including text alternatives for non-text content, providing captions for multimedia, and making sure content is distinguishable from the background.

Operable interface: Making sure users can navigate and interact with the website using various input methods, such as keyboard-only navigation, providing enough time to read and use content, and avoiding design elements that could cause seizures.

Understandable information: Ensuring that the content and interface are presented in a clear and understandable manner, using plain language, organising content in a logical way, and providing assistance for input errors.

Robust technology: Ensuring that the website is compatible with a variety of assistive technologies and future web technologies by following standard HTML, CSS, and scripting practices.

Adhering to WCAG guidelines is considered a best practice for web development to create inclusive and accessible digital experiences for all users, regardless of their abilities.

Building an accessible website

Building an accessible website involves considering the needs of users with disabilities and ensuring in line with WCAG, that they can access and interact with your content effectively. Here are some key steps to help you build an accessible website:

  1. Use semantic HTML: Structure your web content using proper HTML elements to convey the meaning and hierarchy of the information. Use headings (h1, h2, etc.) to organise content and provide an outline of the page.
  2. Provide alternative text for images: Include descriptive alt text for images, allowing users with visual impairments to understand the content of the image. The alt text should convey the purpose and meaning of the image.
  3. Use descriptive link text: Make sure your hyperlinks have meaningful and descriptive text instead of generic phrases like "click here" or "read more." This helps screen reader users understand the purpose of the link.
  4. Ensure keyboard accessibility: Make sure all functionality on your website can be accessed and operated using a keyboard alone. Keyboard accessibility is crucial for users who cannot use a mouse, such as those with mobility impairments.
  5. Implement proper colour contrast: Ensure that there is sufficient contrast between text and background colours. This helps users with visual impairments or colour blindness to read and understand the content.
  6. Provide transcripts and captions for multimedia: If you have videos or audio content, provide captions or transcripts to make the information accessible to individuals who are deaf or hard of hearing.
  7. Design for resizable text: Users with visual impairments may need to increase the size of the text. Ensure that your website is responsive and can accommodate text resizing without causing layout or functionality issues.
  8. Make forms accessible: Ensure that form elements, such as input fields and checkboxes, are properly labelled and have clear instructions. Use HTML attributes like the "label" tag and the "aria-label" attribute to associate labels with form controls.
  9. Test with accessibility tools: Utilise accessibility evaluation tools and screen readers to test your website's accessibility. These tools can help identify potential issues and provide recommendations for improvement.
  10. Provide accessibility information: Include an accessibility statement on your website, outlining the steps you have taken to make it accessible and providing contact information for users to report any accessibility issues.

Remember, accessibility is an ongoing process, and it's important to regularly review and update your website to ensure it remains accessible as technologies and guidelines evolve.

Embedding accessibility tools

There are also accessibility tools that you can embed within your website such as ReciteMe, and you can also use tools such as SiteImprove to check accessibility. These tools help ensure your website is accessible to the WCAG standard. When considering accessibility tools, it's important to assess their features, reliability, and compatibility with your website.

Here are a few factors to consider:

Feature Set: Look for tools that provide a comprehensive set of accessibility features, such as text-to-speech functionality, screen reading, font customisation, colour contrast adjustment, keyboard navigation, and alternative text management. The more inclusive and customizable the features, the beter the tool can cater to diverse user needs.

Compatibility: Ensure that the accessibility tool is compatible with your website's technology stack and content management system (CMS). Some tools may have limitations or require specific setups, so check if they integrate seamlessly with your existing website infrastructure.

User Experience: Evaluate the user experience of the tool. It should be intuitive and easy to use for both website administrators and end users. Consider factors such as ease of installation, configuration options, and overall usability.

Reliability and Performance: Look for tools that are reliable and provide consistent performance. Check user reviews, testimonials, or case studies to gauge the tool's performance and stability over time.

Support and Updates: Consider the availability of technical support and regular updates from the tool's developers. Regular updates are important to address security issues, compatibility with new browser versions, and to improve the tool's functionality.

Compliance with Standards: Ensure that the accessibility tool adheres to recognized accessibility standards such as WCAG. It should assist in meeting the accessibility guidelines rather than introducing new barriers or usability issues.

Cost: Evaluate the pricing structure and licensing terms of the tool. They vary in cost considerably, so consider carefully whether the cost aligns with the value it provides.

Ultimately, the effectiveness of an accessibility tool can vary based on your specific requirements and the tool's capabilities. It is advisable to conduct thorough research, read reviews, and even consider seeking expert advice or consulting with accessibility professionals to make an informed decision.


In summary

First, understand the WCAG standard. It has 3 levels of conformance from A (the most basic) to AAA (the most advanced). It has 4 categories:

1. Perceivable content – users can access all information

2. Operable interface – enabling users to navigate and interact with the
    website

3. Understandable information – presenting content in a clear way

4. Robust technology – so it is compatible with accessibility tools


Second, build your website considering the following top 10 factors:

1. Use semantic HTML

2. Provide alternative text for images

3. Use descriptive link text

4. Ensure keyboard accessibility

5. Implement proper colour contrast

6. Provide transcripts and captions for multimedia

7. Design for resizable text

8. Make forms accessible

9. Test with accessibility tools

10. Provide accessibility information


And finally, review accessibility tools to embed within your site to improve the user experience.


So to round up – the 3 simple steps to follow:
 

  • Familiarise yourself with the WCAG standard,
  • Build your site considering the factors outlined above, and
  • Determine if your site would benefit from the implementation of
      an accessibility tool to aid your users.

For more information, please get in touch with our Head of Business Development, Naomi Hawkins.



About Black Sun

Black Sun is a global group of strategic advisors, consultants and stakeholder engagement specialists. We believe that brands and businesses can have a big impact on our society  – they can shape more ethical practices, build more inclusive communities and deliver more sustainable performance. Ultimately, they can spark positive change in the world.

We partner with visionary companies to define and communicate their purpose, strategy and culture and bring to life their value creation story. Our services and solutions directly address the business-critical concerns of today;  best-practice disclosure and accountability through reporting;  protecting reputation and building trust with digital communications and helping businesses to effectively communicate their long-term responsibility and sustainability story.




Get in touch

Our use of cookies

We use necessary cookies to make our site work. We’d also like to set optional analytics cookies to help us improve it. We won’t set optional cookies unless you enable them. Using this tool will set a cookie on your device to remember your preferences.

For more detailed information about the cookies we use, see our Cookie policy


Analytics cookies

We’d like to set Google Analytics cookies to help us to improve our website by collecting and reporting information on how you use it. The cookies collect information in a way that does not directly identify anyone.

For more detailed information about the cookies we use, see our Cookie policy

: