Making the web accessible and addressing common errors
An individual is sitting in the middle of their couch while they use their laptop which is resting on their legs.An individual is sitting in the middle of their couch while they use their laptop which is resting on their legs.
Zonja St.ClairZonja St.ClairSenior CRO & UX Specialist

27.09.202211 mins read

What do we mean when we talk about web accessibility? According to the World Wide Web Consortium (W3C),  it is about ensuring that people with disabilities can perceive, understand, navigate, and interact with the web and that they can contribute to the web. 

  • Web accessibility also benefits others, including older people with changing abilities due to ageing, or people with temporary disabilities such as a broken arm or lost glasses. 

  • Common myths about accessibility

    One of the most pervasive misconceptions about accessibility is that it only affects a small number of people. Another one that is quite popular is it’s just about helping the visually impaired.  

    The truth, as usual,  is quite a bit different.  

    • The World Bank estimates that 15% of the earth's population experience some form of disability. That’s over 1 billion people worldwide.
    • The number of people with disabilities is dramatically increasing due to health factors and chronic health conditions.
    • Almost everyone is likely to experience some form of disability – temporary or permanent – at some point in life.
    • Approximately 8% of men and 0.5% of women are colour blind 
    • 10% of the Irish population are dyslexic
    • Over 1.5 people globally live with hearing loss. 
An individual is reading from their tablet screen while sitting in their home.An individual is reading from their tablet screen while sitting in their home.

Accessibility affects a large number of people. For instance, 10% of the Irish population are dyslexic

  • Who makes the rules on web accessibility?

    The W3C is the main association working towards establishing an international framework. They produce the Web Content Accessibility Guidelines (WCAG), which are now in their third iteration. They also run the Web Accessibility Initiative (WIP) to develop standards and support materials to help organisations understand and implement accessibility. 

  • Why should you care about web accessibility?

    Apart from the fact that it is the right thing that the web is accessible for all, there is the issue of compliance. The European Union (Accessibility of Websites and Mobile Applications of Public Sector Bodies) Regulations 2020, which came into effect in September 2020, decrees that all public sector bodies must ensure that their websites and mobile apps are accessible to all people. In Ireland, the National Disability Authority monitors public sector websites and works with organisations to review and check for compliance with regulatory requirements.

    While this law only covers public-state bodies, which is a common practice worldwide, the requirement for all online services to be accessible for all is an expectation for modern web users. Also, regardless of whether you are a private body and therefore not subject to the EU ruling doesn’t mean you will avoid a lawsuit. In fact, over the last decade, many lawsuits have been filed by individuals with disabilities claiming that businesses' websites are not accessible to them.

    In 2020 Bruce Maguire, blind since birth, brought a case against the Sydney Organising Committee for the Olympic Games (SOCOG)  to the Human Rights and Equal Opportunities Commission(HREOC). The HREOC found in his favour and as a result, the Australian government adopted W3C Guidelines, the Commonwealth Government required all agency websites to pass accessibility tests by the end of 2020 and the SOCOG has to pay Bruce damages of 20,000 AUD. 

An individual is talking to someone on their mobile phone while they sit in front of their desk and use their laptop at the same time.An individual is talking to someone on their mobile phone while they sit in front of their desk and use their laptop at the same time.

The European Union’s accessibility regulations decrees that all public sector bodies must ensure that website and mobile apps are accessible for all

  • What are the accessibility guidelines?

    The WC3 has developed the standards that if followed will help ensure that websites are open to all. WCAG 3.0  is the latest working draft of the guidelines which are grouped under 4 main principles: Perceivable, Operable, Understandable and Robust.

  • 1. Perceivable

    Visitors must be able to understand the content and information that’s presented on your website. Perceivable doesn’t necessarily mean “see with one’s eyes” — users who are blind or have low vision often use screen reader software, which converts printed text into synthesised speech or braille characters.

    Perceivable Guidelines:

    • Make it simpler for users to see and hear content 
    • Present text alternatives for non-text content
    • Give captions and other alternatives for multimedia
    • Create content that can be presented without losing meaning using assistive technologies.
An individual is sitting at their desk while using their laptop. A video is open with subtitles underneath, ready to be played.An individual is sitting at their desk while using their laptop. A video is open with subtitles underneath, ready to be played.

Give captions and other alternatives for multimedia

  • 2. Operable

    Operable websites ensure that components and navigation are accessible - from navigating to a page, to opening a link, playing audio, or pausing a video and available to all.

    Operable websites are generally straightforward with a limit on excess functionality that could impede users with disabilities.

    Operable Guidelines: 

    • Make all functionality accessible straight from a keyboard
    • Give users sufficient time to read and use the content
    • Don’t use content that might trigger seizures
    • Facilitate users to navigate and find content.
An individual is sitting at their desk while using their laptop. A video is open with subtitles underneath, ready to be played.An individual is sitting at their desk while using their laptop. A video is open with subtitles underneath, ready to be played.

Operable websites ensure that components and navigations are accessible

  • 3. Understandable

    All content on your website should be easily understood. This is particularly important for those with cognitive disabilities, and those who do not speak the primary language used on your site. This principle also applies to the structure of your content - ensuring navigation is consistent, headings are marked up with heading tags, and that content is presented in a semantic structure.

    Understandable Guidelines:

    • Build text that is understandable and readable.
    • Create content appear and operate in predictable manners.
    • Help users avoid and correct errors.
An individual is reading a well structured article on the Discover Ireland websiteAn individual is reading a well structured article on the Discover Ireland website

Content on websites should be well structured and easily understood

  • 4. Robust

    All content and functionality on your website can be interpreted by all users, regardless of assistive technologies and screen readers. This also means that content must remain accessible as technologies advance and evolve.

    Robust Guideline:

    • Maximise compatibility with present and future user tools.
An individual is reading content on the Discover Ireland website and the call to actions are easily accessible.An individual is reading content on the Discover Ireland website and the call to actions are easily accessible.

Content and functionality must be easily interpreted by all users

  • Most common accessibility issues

    There are a total of 78 guidelines to follow if you want to reach the highest level of accessibility. 

    As you start on this journey, there are several areas that can be addressed for quick wins. 

    Here are the top 5 mistakes that we see repeatedly:

  • 1. Not enough contrast between text and background colour

    Low contrast text is probably the most common accessibility issue across all the websites we review. According to WebAIM’s most recent analysis, 83.9% of the websites analysed did not have sufficient colour contrast on their home pages. Low contrast on text makes it incredibly hard for users with low visibility or those with various types of colour blindness to read or decipher your text.

    Solution: To ensure accessibility the text-to-background contrast ratio must be 4.5:1. You can test the contrast of your text with tools such as Webaim’s Contrast Checker. We’d recommend doing this at the design stage to prevent having to address these issues at the development stage.

A colour contrast accessibility tool is displayed on the laptop’s monitor.A colour contrast accessibility tool is displayed on the laptop’s monitor.

At All human we ensure that text-to-background contrast ratio is over 4.5:1

  • 2. Incorrect or missing alternative text on images that convey meaning

    Missing or incorrect alt text is one of the most common accessibility issues in web design.  According to WebAIM, 23.2% of home page images were missing alternative text.  

    Solution: Remember to always add a descriptive text alternative to any image that is not decorative, such as photos, banners, illustrations, and graphs.

A developer is inspecting the image code on the Discover Ireland website and checking if the alternative text is descriptive enough
A developer is inspecting the image code on the Discover Ireland website and checking if the alternative text is descriptive enough

Descriptive alternative text should always be added to non-decorative images

  • 3. Heading hierarchy and structure of content

    Heading tags markup and arrange the content on your page in a logical format from the most important heading on the page <h1> to those of lesser importance <h6>.

    People using assistive technologies, such as screenreaders, rarely read through all the content on your page, and use the heading structure to skip to the content they require. Semantic markup of headings is crucial to ensure visitors have no difficulties navigating your site.

    Solution: Use heading tags in a logical order and descriptive headings to help users with assistive technology navigate straight to the content they need.

An individual is reading an article on Discover Ireland that has a main heading and the reading content underneath.An individual is reading an article on Discover Ireland that has a main heading and the reading content underneath.

Heading hierarchy and structure of content needs to be applied in a logical order

  • 4. Ambiguous link text

    When creating links to any content on your website, it is important to use the link text to describe where the link will go. As with headings, some users will skip through content only reading the links on the page. If the text on your link is ‘Read more’, ‘More info’ or ‘View more’ and a user is just skipping through link text, these descriptions make no sense out of context.

    Solution: When creating your links, use descriptive and unique text that explains where the link will take you

An individual is using viewing the different link options on the Discover Ireland homepage An individual is using viewing the different link options on the Discover Ireland homepage

Descriptive text is needed when creating links

  • 5. Form labels

    When form inputs are missing descriptive form labels, it can make it very difficult for users using assistive technologies to know the content they are being asked for. If no label is present, or the label is not descriptive enough, the user has no idea what information is required.

    Solutions: Every field in the form should have an accurately positioned, descriptive label. Use the <label> tag to associate the label text with the form field. If a form field is asking for your name, the label associated with it should be ‘name’, similarly, if you are asking for an email add a label ‘email address’ or ‘your email’ should be present.

An individual is filling out a form on the Irish Life Health website and receiving error messages for incorrect information.An individual is filling out a form on the Irish Life Health website and receiving error messages for incorrect information.

Form fields should have accurately positioned, descriptive labels

  • Latest trends and tools for accessibility

    Our team is always geeking out on new tools, software, and resources to help us continue to improve and stay informed about the latest accessible technology for assisting web users with disabilities. 

    Here are a few that we’re currently swooning over:


  • Accessibility plugin for Figma

    At All human, we use Figma as our main design tool, and along with upskilling on the ever-evolving Figma tools, we have embraced some of the accessibility plugins. The Stark Suite plugin is a combination of integrated tools that help you streamline your accessibility workflow at the design phase.

    Tools like contrast checkers, focus order, alt-text annotations, touch targets, and vision simulators allow us to quickly analyse our designs and benchmark them against accessibility guidelines before going on to development. 


A designer is working on the An Post webpage and checking colour contrast using the Stark plugin. A designer is working on the An Post webpage and checking colour contrast using the Stark plugin.

At All human we use the Stark Suite plugin in Figma to check colour contrast

  • Axe accessibility plugin for designers

    Axe and the deque solutions have long been essential accessibility tools for web developers. This new Figma plugin allows designers to scan designs to ensure colour-contrast, touch target and heading structure all meet the required guidelines for accessibility.  

A designer is working on the All human website and scanning their design using the Axe accessibility plugin. A designer is working on the All human website and scanning their design using the Axe accessibility plugin.

Axe accessibility plugin allows designers to scan their designs

  • Dark mode and accessibility

    Creating a dark mode for your visitors has become an emerging trend in interface design, often considered better for your eyes or better to use in the evenings, but is it really more accessible for people with visual impairments? This great article debunks the myth that dark mode is more accessible than regular dark text on a white background.

  • Accessibility Not-Checklist

    The Accessibility not-checklist is a fun resource of what needs to be considered to build accessible and inclusive online experiences. You need to be already familiar with the guidelines, but it's a handy tool to check off all the considerations you need to make, and who’s responsible for it within your team. A great resource for teams!

  • Accessible Charts

    One of the challenges of data visualisation is to make your data accessible. The information can often be challenging for people with visual impairments, particularly for those who do not use assistive technology like screen readers.

    Kent Eisenhuth’s and Kai Chang’s case study explores how an accessibility-first approach led them to a better visual design. They highlight how they used WCAG in their chart design process.  This approach ensures that accessibility is a core to the chart’s visual design without sacrificing readability, making them accessible for all.

    Denis Kryukov also has a great article on the strategies and best practices on how to make your charts more accessible.

  • Accessibility is an All human priority

    Here at All human, accessibility is at the core of everything we design and build. All of our designers and developers are trained in how to build accessible digital products and services. We also have experience in auditing and enhancing existing websites to adhere to accessibility standards. To redress accessibility issues on several websites we have put together a team of digital experts and have developed an efficient process for ensuring and maintaining website accessibility.

    This team is comprised of a:

    • User interface(UI) designer
    • Front end engineer
    • Back end developer
    • Quality Assurance (QA) analyst 
    • Project manager.

    We also work closely with the NDA to ensure we are using the latest tools and technologies to monitor accessibility. Deque's axe Monitor is the tool recommended by the NDA for testing the accessibility of websites. The axe Monitor automatically scans web content and identifies violations of accessibility compliance - and gives the site an accessibility score.

    Two recent accessibility projects used this tool to pinpoint issues and address them. On one site we increased the accessibility score from 42% to 89%. The other site saw its score dramatically improve from 7% to 92%.  

    If you have any questions about accessible web design or evaluating the level of accessibility of your website, please get in touch.