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 – Success Criterion 2.4.11, Focus Not Obscured

Published: February 2, 2024

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.

Resources

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.

The ‘cast iron’ business case for accessible website design

Published: January 17, 2017

Just a quick follow up from my New Year Newsletter in which I gently encouraged you to think about your website and online marketing strategy. One area I mentioned in my newsletter was website accessibility. As I am sure you already know, it is considered a form of discrimination if disabled people are not able to access website content (the Equalities Act 2010). So with that in mind I thought I’d take the opportunity to look at the benefits of accessible website design from a slightly different perspective, i.e. the business case.

The business case for accessible website design

In September last year I spoke at the Accessibility Scotland conference and an audience member asked whether there was a ‘cast iron’ business case for making a website accessible? They were having trouble trying to get their managers to prioritise accessibility or put any resources into ensuring the website was accessible to disabled people. 

‘Off the top of my head’ I could not remember any statistics to quote, though I did mention the usual stuff about a more accessible site generating more traffic, being easier to use and having reduced maintenance costs.

However, it seems that these logical arguments do not ‘cut any ice’ when it comes to making the case; what people want are facts, figures and case studies showing increased traffic and increased sales.

So with that in mind here are three major case studies showing the benefits of accessible website design in real terms. 

  • CNET: there was a 30% increase in traffic from Google after CNET started providing transcripts (reported AST(.ppt) “We saw a significant increase in SEO referrals when we launched an HTML version of our site, the major component of which was our transcripts.” – Justin Eckhouse, CNET, 2009.
  • Legal & General Group: visitor numbers doubled, maintenance costs were cut by two thirds, natural search traffic increased by 50%. .
  • Tesco:  ‘the site now attracts a much wider audience, spending £13 million a year, which is a fraction of the original cost of £35,000 to develop the accessible site’ (John Browett, Tesco Chief Executive). Read the Tesco case study. (2004, UK).

These case studies clearly show that an accessible website design reduces maintenance costs, increases usability and increases traffic. In short, accessible website design is good for your business.

Web Accessibility Auditing Service :

Even if you are not planning a brand new website from scratch I can help you realise some of the benefits outlined above by making your existing website more accessible. The first step in that process is to have your website audited to see if there are any aspects that are inaccessible to disabled peoples. You will then be in a position to have those issues addressed; thus increasing the accessibility and usability of your website.

As an website accessibility auditor since 1996 I am one of the most experienced and skilled practitioners in the UK. I will check your site against the WCAG 2.0 guidelines to ensure that your site is compliant with the BS8878 Web Accessibility Code of Practice.

An audit by myself goes way beyond tick box checks; I will check that your site is accessible and usable to the real people who visit your site.

Contact me today to take advantage of this unique expertise to utilise my expertise to attract more visitors to your website and make it easier to use by everyone. No matter what your budget or how big or small your website is I will be able to provide an audit that fits with your needs.

Introduce yourself to the Web Content Accessibility Guidelines

Published: August 8, 2014

The Web Accessibility Guidelines and associated documents published by the The World Wide Web Consortiums (W3C) are a fantastic resource, and recognised as the ‘standard’ reference documents for those building accessible sites.

However, they can be difficult for the beginner to understand, and can seem rather overwhelming in the breadth of issues they cover.

In this tip, I suggest an alternative ‘entry point’ to learning the guidelines; the ‘WAI Web Content Accessibility Curriculum‘, a website created by Chuck Letourneau and Geoff Freed.

On the above site you will find lots of examples and explanations for each checkpoint – plenty of help to get you started.

Now I know that WCAG 2 has been released, but I also know that it is just trying to do the exactly the same job as WCAG 1 – just using a different approach. Making your website accessible is the key point; use whatever set of guidelines you find most helpful in achieving that task; and don’t feel that you are missing something if those guidelines are the WCAG 1 guidelines.

Another resource worth checking out is the WCAG 1 training course I wrote a while back for the Guild of Accessible Website Designers.

Links

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