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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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 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.
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
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.
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.
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 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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.”
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.
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.
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.
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.
There are several things that website designers should keep in mind when designing an accessible website for people with visual impairments. These include:
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.
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.
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.
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:
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.
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:
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
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.
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.
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.
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.
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.
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