Skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible, Responsive Website Design
Jim Byrne Web Designer

WCAG 2.2 – 2.5.7 Dragging Movements (Level AA) – A Summary

The aim of this Success Criterion is to eliminate the need for precise dexterity when dragging dynamic elements on a web page. The reality is that not all users can accurately press, hold, and reposition a pointer simultaneously.

Those individuals who find such precise pointer movements problematic should get the same result as their dexterous colleagues, using just a single pointer. Individuals helped by this success criteria include website visitors using input devices like trackballs, head pointers, eye-gaze systems, or speech-controlled mouse emulators.

The WCAG 2.2 2.5.7 Success Criteria states:

This criterion excludes scrolling enabled by the user-agent (i.e., browser, screen reader, media players, mobile devices, and assistive technologies), and techniques like CSS overflow to create scrollable content sections. The CSS overflow property creates a scrollable content section with a webpage.

Alternatives for Dragging Movements on the Same Page

If an equivalent option allows single-pointer access without dragging, this Success Criterion is met. It doesn’t have to be the same component, as long as the functionality is equivalent. For instance, a colour wheel with a dragging indicator can be complemented by text fields for numerical input.

What is not included

The checkpoint does not include any scrollbars on the browser itself or draggle functionality that is native to the browser interface. It only applies to draggle content created by the website author.

Accessibility auditing and consultancy

I provide comprehensive digital content accessibility consultancy services, including an accessibility auditing of your websites and documents – measured against the WCAG 2.2 standard. Get in touch to ensure your content is accessible to your widest possible audience and meets equality legislation requirements.

WCAG 2.2 – Success Criterion 2.4.11, Focus Not Obscured

The release of WCAG 2.2 introduced two new level A success criteria and four new level AA success criteria.  In this post, I provide a summary of Success Criterion 2.4.11, Focus Not Obscured.

Success Criterion 2.4.11, Focus Not Obscured

The primary goal of this success criteria is to ensure that when an element has keyboard focus, it is at least partially visible. Clearly, if users can’t see the focused item, navigating forward is going to be difficult. This is particularly critical for those reliant on a keyboard, or any device operating via a keyboard interface – like a switch or voice input. It is also critical for users with cognitive or memory impairment.

Given the prevalence of complex responsive website designs today, this criterion acknowledges that there may well be times when a focused component is not fully visible; so, rather than saying that it must be fully visible, it stipulates that it must be at least partially visible. The ideal situation would, of course, be for all focus components to be entirely visible – and indeed this is required for WCAG 2.2 AAA compliance.

Sticky headers, footers and non-modal dialogs

Common culprits include sticky footers, headers, and non-modal dialogs (non-modal dialogs allow users to interact with other objects outside the dialog without closing it.). As visitors tab through the page, these layers can obstruct the item in focus, along with its focus indicator.

For example, a cookie banner would fail this Success Criterion if it completely obscures the focused component. Remedies could include requiring that the user dismiss the cookie banner before continuing to navigate the page. Or the issue can be remedied by incorporating scroll padding to prevent overlap with other content.

What is scroll padding?

By setting scroll padding, developers can ensure that when the browser scrolls to a specific section of the page, there is some additional space added around it. The additional space creates a buffer zone, preventing the content from being hidden behind fixed elements like headers. It ensures that the content is visible and not obscured by other elements on the page. You will find an example of how it works on the ‘CSS scroll-padding Property’ page of the W3 Schools website.

When the focus item is obscured by semi-transparent content

If the item obscuring the item in focus is semi-transparent, i.e. the user can still see the item in focus that that is not considered a checkpoint fail – unless the contrast between the item in focus on the visible background is below the minimum contrast ratio.

Exceptions to criteria: 2.4.11, Focus Not Obscured

There are some exceptions to this criteria. If the ‘in focus item’ is obscured because the user moved a content region over it – then that is not considered a fail.

Secondly, if the focus element is obscured by something the user opened themselves – and they can dismiss that item again – that is not a fail. For example, a drop-down menu on the navigation bar is opened by the visitor and is then dismissed when choosing an item from the menu closing the menu.


Further information can be found at W3C Focus Not Obscured (Minimum) (Level AA).

Accessibility auditing and consultancy

I provide comprehensive digital content accessibility consultancy services, including an accessibility auditing of your websites and documents – measured against the WCAG 2.2 standard. Get in touch to ensure your content is accessible to your widest possible audience and meets equality legislation requirements.

Understanding Website Accessibility in the UK

Website accessibility is not just on compliance; it is also about fostering inclusivity and adhering to legal mandates. In this article I explore the legal facets and basic principles that underscore website accessibility in the UK.

1. The Importance of Web Accessibility:

Making your website accessible is more than just a checkbox exercise. An accessible, usable site is a gateway to diverse audiences, enhanced user experiences, and legal compliance. Statistics from the Office for National Statistics (ONS) reveal that about 22% of the UK population reported having a disability in 2021. Taking heed of inclusivity is not just an ethical issue, it also ensures your content is available to the widest possible audience.

Statistics on Disability in the UK:

  • The ONS indicates that mobility issues affected approximately 11% of the UK population in 2021.
  • With disability prevalence increasing with age, it’s essential to cater to the diverse needs of the population.
  • The UK government’s “Family Resources Survey” reported that in 2019/20, approximately 8.3% of adults in the UK reported using some form of assistive technology.
  • A report by the “Click-Away Pound” survey estimates that in the UK, online retailers lose approximately £17.1 billion a year due to the barriers faced by disabled online shoppers.

2. Legal Implications of Non-Compliance in the UK:

In the UK, the Equality Act 2010 places a legal duty on service providers to make reasonable adjustments to ensure their digital services are accessible. Non-compliance not only invites legal repercussions but potentially puts up barriers to a significant portion of your audience. Accessibility is not just an option; it’s an ethical and legal necessity.

And if you don’t get it right the danger is that you will tarnish your reputation and your brand. The last thing you need is to find that a disabled person, backed up by the expertise of an organisation such as the RNIB, threatening to take you to court because your website was found to be inaccessible.

3. Key Principles of Accessibility (WCAG) and UK Standards:

To craft an inclusive digital space, the UK government looks to the Web Content Accessibility Guidelines (WCAG). These guidelines, backed by the Public Sector Bodies Accessibility Regulations 2018 (for public secor organisations and those recieving funding from the public sector), set the standard for accessibility. Embracing these principles ensures websites align not only with best practices but also with specific UK regulations.

Website accessibility isn’t just about ticking boxes, it’s about embracing diversity, it’s about your legal obligations and it’s about looking after your brand. The last thing you want is to be outed as an organisation that does not take its equality obligations seriously. Instead, you can be proactive by being a champion of accessibility and at the same time connect with a broader audience.

Get in touch if you need help ensuing your digital content is legally compliant and is accessible to your widest possible audience.

Accessibility is not a cost it is an investment: get more visitors, more conversions and protect your brand

Accessibility may be something you have felt reluctant to address because you regarded it as a cost. In this post, I set out to demonstrate that is in fact an investment that can bring you verifiable returns.

Accessibility is the right thing to do: it promotes inclusivity

Of course, making your content accessible is the right thing to do, it promotes inclusivity and it is a legal requirement under the Equality Act 2010. However, ensuring your digital content is accessible is not only good for your potential disabled visitors/service users, it is also good for your business/organisation. It gets you more clients/customers/service users, makes your content will be easier and it strengthens your brand.

“…embracing accessibility leads to multiple benefits – reducing legal risks, strengthening brand presence, improving customer experience and colleague productivity.” Paul Smyth, Head of Digital Accessibility, Barclays

Being accessible helps you reach more people: more services users, more customers and more clients

Disabled people make up a considerable proportion of the UK population. For example, 18% of people in the UK identify as disabled, which represents Over 4 million people. So, ensuring your content is accessible means these people are more likely to use your services, visit your website and download your documents. According to SCOPE, families with at least 1 disabled person spend an estimated £274 billion a year: if you ensure your content is accessible they are more likely to be directing their money towards your business or organisation rather than someone else’s.

Accessibility strengthens and protects your brand

Crucially, for the robustness of your brand, it is useful to know that disabled people are more likely to notice and report accessibility issues when they come across them.

“Disabled people were more likely to report finding access to products in person difficult compared with non-disabled people (41.6% compared with 15.8%)” Disabled people’s access to products and services, Great Britain: February to March 2022

I said earlier that your legal obligations is only one reason you should ensure your content is accessible. However, that being said, the last thing you want is for someone to pull you up because they can’t access your content, or worse, to make a public issue of it, or even worse, to take legal action against you. I don’t think that is likely, however, it is somewhere on is the line that goes from things that are bad for your business to things that are good for your business. So, you might as well take steps to remove the potential risk.

Accessibility leads to increased engagement, visitors spending more time on your site and improved satisfaction

The Inclusive Design Toolkit created by the Inclusive Design Research Centre includes case studies, research papers, and examples that illustrate how accessibility features benefit a wide range of users.

Accessible design helps with your search engine optimisation (SEO)

Accessible digital design will benefit your SEO: . The ‘accessibility checker’ websites carried out research on the topic and concluded, ‘Our analysis revealed a 12% average increase in overall traffic across the domains examined.

In short, accessible digital design is good for business

Accessible design gives you a competitive advantage, makes your content more flexible, in the ways it can be reformatted and it future proofs your content – simply because if you are creating accessible content, that means that you are following robust markup standards.

ISO 30071: 2019 Digital Accessibility Standard – What is it?

ISO 30071 is a standard and a set of guidelines for managing diversity in the workplace. It aims to help organisations create a more inclusive, and by implication, more productive environment, for employees from different cultural and linguistic backgrounds. In the UK, it replaces British Standard BS 8878.

The guidelines set out in ISO 30071 cover:

  • Language policy: How to develop a language policy that reflects the mix of languages within an organisation.
  • Recruitment and selection: This section is designed to ensure that recruitment and selection processes are inclusive, i.e., they do not discriminate against individuals based on their culture or their language.
  • Training and development: This section is about developing training and development programs tailored to the different needs of employees. For example, ensuring that cultural needs are being taken into account.
  • Communication and collaboration: How to promote effective communication and collaboration among employees from diverse cultural/linguistic backgrounds.
  • Performance management: This section is about ensuring processes related to the assessment of performance are fair and that they do not discriminate against employees based on their cultural and/or linguistic background.

What type of organisation does it apply to:

It applies to organisations of all sizes and types, regardless of their location or industry. It is particularly useful for those with a global workforce or those operating in multicultural environments.

ISO 30071 is a valuable resource for organizations that wish to create a more inclusive and diverse workplace.

By following the guidelines set out in the standard, organisations can create an environment where all employees feel valued and can contribute to the success of the organisation.

By following ISO 30071: 2019 guidelines, organisations can create an environment where all employees feel valued.

Tips for designing an accessible website for people who are deaf or have hearing problems

Why design an accessible website for people who are deaf or have hearing problems?

Website designers increasingly use videos to get their message across. That’s good, it is a powerful communication tool.  However, as you can imagine, that’s a problem for visitors who can’t hear the audio contained in your video. They miss out on your content, and you miss out on finding new customers for your services or products.

Here are some tips for ensuring your content is accessible to people who are deaf or have a hearing impairment.

People who are deaf or have hearing problems rely on text, captions, transcripts, and assistive technology to access digital content

1. Use simple and clear language

Avoid jargon or complex language. Many people who are deaf or have a hearing impairment use sign language to communicate. And the thing to remember is that sign language is not the same as written English, it is a language in its own right. For sign language users to understand your message, it must be clearly written.

2. Caption videos and audio content and provide a transcript

Captioning makes it possible for people with hearing impairments to follow the dialogue in videos and audio content. I recommend you also provide a transcript, i.e.,  a written version of your audio and video content. And if you have the resources, provide a sign-language interpreter via video or a signing avatar.

3. Audio and Video Player Controls

Ensure you provide visible controls for audio and video players. Visible controls make it possible for people for visitors to control the playback of audio and video content.

4. Design your website so that it is compatible with assistive technologies

Designing websites that are compatible with assistive technology ensures that people who are deaf or have hearing impairments can access your content. Ensure your code is written to comply with the appropriate (X)HTML markup standards and that you adhere to the most up-to-date WCAG guidelines – up to a least AA standard. WCAG stands for Web Content Accessibility Guidelines. They contain a huge amount of useful information for making your content accessible. They are also the defacto accessibility guidelines for online content.

Inclusion is not only important, but it is also the law

Designing an accessible website ensures that people who are deaf or have problems with their hearing can access your content. Designing your website so that is it accessible to the widest possible audience is not only the right thing to do, it is a legal requirement, under the Equality Act 2010.

Website Accessibility and Your Legal Obligations in the UK

The accessibility of websites plays a crucial role in ensuring equal access to information and services for all individuals, including disabled people. It is not just about ‘doing the right thing’, it is a legal requirement.

Website Accessibility and the Equality Act 2010

The Equality Act 2010 is the legal foundation in the UK designed to ensure equal access to goods, services, and information. Websites are included within the legislation. Organisations must make reasonable adjustments to accommodate disabled people. Non-compliance can lead to severe penalties, reaching up to 4% of worldwide turnover.

Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018

The Public Sector Bodies Accessibility Regulations (PSBAR) came into effect on September 23, 2018. It applies to public sector organisations. These regulations require public sector websites, including government agencies, educational institutions, and local authorities, to meet certain accessibility standards. Public sector websites should aim for at least Level AA conformance with WCAG guidelines and provide an accessibility statement to communicate their compliance level.

To ensure compliance with accessibility standards, organisations should conduct regular accessibility checks, engage in user testing with disabled people, and make necessary improvements to address any identified barriers. It is advisable to maintain an accessibility statement on the website, which outlines the organisation’s commitment to accessibility, known limitations, and contact information for reporting issues.

How to ensure compliance with your legal requirements

ISO 30071-1 international information technology standard

The ISO 30071-1 is international information technology standard was published in 2019. It contains good practice guidelines and advice that will be useful to all organisations seeking to make their content accessible. Part 1 is about embedding good accessibility practice into the values of a company – to ensure the ICT products and services they design are accessible.

The development of the ISO 30071-1 standard was lead by Johnathan Hassell who wrote the following:

“It provides a framework around standards like WCAG 2.0 and 2.1 to help integrate accessibility within organisations and into software development lifecycles.”

Web Content Accessibility Guidelines (WCAG) 2.1

To achieve accessibility standards, organisations can adhere to the internationally recognised Web Content Accessibility Guidelines (WCAG) 2.1, developed by the World Wide Web Consortium (W3C). They provide a framework for web developers and designers to create websites accessible to all, including disabled people.

In conclusion: Website Accessibility and Your Legal Obligations in the UK

Website accessibility is not just a matter of social responsibility, it is a legal obligation. By adhering to the Equality Act 2010, and relevant legislation such as the Public Sector Bodies Accessibility Regulations organisations you can ensure equal access to your websites and services for disabled people. Taking accessibility seriously means you not only to avoid potential penalties but also make your content more accessible and enhance the user experience for all visitors to your websites.

Photo by DPP Law.

How to Design an Accessible Website for People with Visual Impairments and People Who Are Blind

Many disabled people, including people with visual impairments, and people who are blind, face significant challenges when using websites – when they are not designed with accessibility in mind. Website accessibility is crucial for ensuring that everyone, regardless of their abilities can access online content, in our increasingly digitised world.

It is not only important for creating an inclusive digital environment, but it is also a legal requirement under the Equality Act 2010. Thankfully though, there are website accessibility guidelines we can use to ensure our websites are accessible to people who are blind or who have a visual impairment.

Understanding visual impairments:

Visual impairments refer to a wide range of conditions that affect the eyes or the brain’s ability to process visual information. Some common visual impairments include low vision, color blindness, and total blindness. It doesn’t take much imagination to understand that reading text, navigating web pages, and interpreting images are all going to be more difficult if you can see web page content very well, or not at all.

Key considerations for designing an accessible website for people with visual impairments:

There are several things that website designers should keep in mind when designing an accessible website for people with visual impairments. These include:

  1. Color contrast and font size: Good contrast between text and background colors is important, and font sizes should be adjustable. Here is an article to help you understand the basics of colour contrast.
  2. Alternative text for images: All images should have alternative text that describes the content of the image for screen readers.
  3. Screen reader compatibility: Websites should be compatible with screen readers, which are software programs that read web content aloud. JAWS from Freedom Scientific is probably the most well know screen reader but it is quite expensive. Here is a list of free screen readers that you can use to get a sense of how a blind or visually impaired person accesses website content.
  4. Keyboard navigation: Websites should be designed with keyboard navigation in mind. Visitors should be able to navigate the site using only their keyboard.
  5. Audio descriptions and transcripts: Video content should have audio descriptions and transcripts.

Tips for testing website accessibility:

Designers should use accessibility tools such as WAVE to get a quick sense of accessibility problems that might exist. However, it is also important conduct user testing with disabled people. Disabled people will provide valuable insight into how accessible the website is ‘in the real world’. Website accessibility is an ongoing process, and designers should regularly review and update accessibility features. Providing accessible alternatives for inaccessible content, such as video transcripts for video audio can help maintain website accessibility.

Designing an accessible website is not only important for creating an inclusive digital environment but as I mentioned earlier, it is also a legal requirement. By considering the needs of people with visual impairments and following WCAG 2.1 website accessibility guidelines, designers can ensure that their websites are accessible to everyone. As website designers, we have a responsibility to our site visitors. We should take action towards making the internet a more inclusive place for disabled people, particularly for people with visual impairments and people who are blind.

The Future of Accessible Web Design for Charities – including the Impact of Artificial Intelligence and ChatGPT and Similar Services

Charities play a vital role in society, their websites are often the first point of contact for potential donors and volunteers. Therefore, it is crucial that these websites are accessible to everyone, including disabled people.

The Current State of Accessible Web Design for Charities:

Charities face unique accessibility challenges when it comes to web design. For example, they often have limited resources and may not have access to the latest technology or design expertise. Additionally, they often serve a diverse audience with a range of impairments, making it challenging to design a site that meets everyone’s needs.

Despite these challenges, many charities are recognizing the importance of accessibility and working to make their websites more inclusive.

The impact of artificial intelligence (AI), ChatGT and similar technologies

As technology continues to evolve, there is great potential for the use of AI, ChatGT, and similar technologies to make charity websites more accessible, more intuitive and personalised to individual users’ needs.

The following list shows some of the ways that Artificial intelligence, ChatGPT and similar services can help charities:

  • Assistive Technology: AI can be integrated into assistive technology, such as screen readers and voice recognition software. This can help disabled users navigate the website more easily making them more accessible to visually impaired individuals.
  • Natural Language Processing: AI-powered natural language processing (NLP) can help improve the website’s readability and comprehension for users with cognitive disabilities. This can help the organization ensure that all users can understand the content on the website.
  • Chatbots: AI-powered chatbots can provide instant support to disabled users who may have difficulty navigating the website. Chatbots can answer frequently asked questions, provide assistance with filling out forms, and even provide emotional support.
  • Captioning and Transcription: AI algorithms can be used to automatically generate captions and transcriptions for videos and audio files on the website. This can help make the content more accessible to users who are deaf or hard of hearing.

As you can see, AI and ChatGPT have the potential to help. It can do this by identifying barriers to access, empowering assistive technology, improving readability, providing instant support, and generating captions and transcriptions for multimedia content. Bear in mind that automatically generated captions and transcripts are not always accurate so you will still have to check and edit the text generated.

Best Practices for Accessible Web Design for Non-Profits and Charities:

AI will help, however, it is essential to build an accessible website to start with. This means involving disabled people early in the design process, conducting user testing and feedback, and ensuring that accessibility is a priority throughout the development process. Here are some of the basic principles charities should follow:

  • Ensure clear navigation: Ensure that your website’s navigation is clear and easy to use, with descriptive labels and logical order.
  • Use of Alt text: Alt text is used to describe images for users who cannot see them. Use descriptive, concise language to ensure that all users can understand the content.
  • Ensure your design is flexible enough to accommodate the needs of visitors with different Impairments, For example, people with visual impairments may need larger text or high contrast colors – however, that does not mean designing the website just for that audience – what it means is ensure that this audience can change these design elements it to suit their own needs.
  • User Testing and Feedback: Conduct user testing and gather feedback from disabled people to ensure that your website is accessible and meets their needs.

Accessible web design is crucial for charities because it ensures that everyone has access to their valuable content. As technology continues to evolve, there is great potential for AI, ChatGPT and similar technologies, but it is not the full picture; it is essential for charities to design their websites with accessibility in mind from the outset. A website that is inclusive, user-friendly, and accessible to everyone, including disabled people, is what every organisation should be aiming for.

Get in touch today: Tel: 07810 098 119


The Role of Color Contrast in Accessible Web Design

Color Contrast is an important issue because Website accessibility is an important issue. Websites must be designed to be accessible to everyone, including disabled people – otherwise, you losing part of your audience – and you are breaking the law. I.e., The Equality Act 2010, which states that you are not allowed to discriminate against disabled people. So, a critical aspect of website accessibility is color contrast. In this blog post, I will explore the role of color contrast in accessible web design and outline tips and strategies to improve color contrast on your website.

What is color contrast?

Color contrast refers to the difference in color between two elements, such as text and its background. It is measured using a ratio, between the text’s color and the background color. The higher the ratio, the better the color contrast. For example, 1:1 is white on white and 21:1 is white on black. Color contrast is essential in web design because it affects the readability and legibility of content. For some general background information, read my introduction to colour and accessibility on LinkedIn.

Why is color contrast important for accessibility?

People with visual impairments, such as color blindness, rely on color contrast to navigate and understand content on websites. If the color contrast is insufficient, they may not be able to distinguish between different elements on the page, making it challenging to complete tasks or access information. Additionally, color contrast is essential for people with cognitive impairments, who may find it difficult to read or understand content with low color contrast.

Accessibility guidelines and laws related to color contrast

Many countries have accessibility laws that require websites to be designed with accessibility in mind. In the UK, the Equality Act 2010 requires businesses to ensure their websites are accessible to people with disabilities. The Web Content Accessibility Guidelines (WCAG) outline the standards for website accessibility, including color contrast. The UK also has British Standard 8878 (BS 8878) is the Web Accessibility Code of Practice developed by the British Standards Institution, which is a standard aiming to introduce website accessibility to non-technical professionals, including.

How to check color contrast

Several tools are available online to check color contrast, such as the WebAIM Contrast Checker and the Contrast Ratio Checker. These tools provide a ratio between the text and background colors, indicating whether the color contrast is sufficient.

Tips for improving color contrast

  1. Use high-contrast color schemes: High-contrast color schemes, such as black and white, are easier to read and understand for people with visual impairments. Avoid using low-contrast color schemes, such as light gray text on a white background.
  2. Avoid color combinations that are difficult to distinguish: Some color combinations, such as red and green, can be challenging for people with color blindness to distinguish. Use color palettes that are accessible, such as blue and yellow.
  3. Use text alternatives for non-text content: Non-text content, such as images and videos, should have text alternatives, such as alt tags, that describe the content. This allows people with visual impairments to understand the content.

Color contrast is an essential aspect of accessible web design. Use higher-contrast color schemes, avoid color combinations that are difficult to distinguish, and provide text alternatives for non-text content. By making your website accessible, you are ensuring that more people can access your content including disabled people.

Get in touch today to chat about how I can help you ensure your website is accessible to a wider audience: Tel: 07810 098 119


Other posts in this category

View a list of all blog posts.

Let's Chat

07810 098 119

Alternative access to client feedback ››

“The audit was extremely comprehensive, clear and demonstrated Jim’s expertise in the area of accessible web design.” Peter Madden, Project Manager, Sealed Envelope Ltd