Operable Archives - Page 3 of 4 - Wuhcag
‘No timing’ requires no time limits on your website.
Users with visual, motor or cognitive impairments may need more time than others to understand and use your website. Any time controls or limits can make using your website difficult for these users.
Ensure there’s no time-limited content on your website.
The time limit is due to real-time events, like bidding in an auction or a livestream.
Keyboard (No Exception) requires that all functionality is accessible by keyboard with no exceptions.
Users with visual or motor impairment may navigate your website using only their keyboard or through assistive technology that relies on a keyboard-like interaction with your website.
This builds on 2.1.1 – Keyboard by removing the exceptions.
To test for this guideline, unplug your mouse and make sure you can fully use your website with only your keyboard – you might be surprised by what you can’t do.
Make sure no function on your website requires timed keystrokes (for example, ‘double tap on enter within two seconds’).
Don’t use ‘access keys’ (assigning a navigation link to a particular key) or page-specific key commands as they can conflict with assistive technology.
If you have something that, by its nature, must be mouse- controlled (like mouse testing software or a game) then do everything else you can to make your website accessible. Don’t panic because you can’t comply with this one guideline.
Keyboard focus is visible when used.
Where there are multiple elements on a webpage, it helps users to highlight which element has keyboard focus. This helps users who rely on a keyboard to navigate as it shows them which element the keyboard will interact with. Users with attention or short-term memory limitations will also benefit from a visual cue to where focus is located.
When an element has keyboard focus, show a visual indication.
For form fields, you might display a bar within the field or highlight the entire field.
For controls, you might display a border around the control.
Headings and labels describe topic or purpose.
A webpage can be broken up with headings where content changes topic, introduces a sub-topic or changes purpose. Where headings are used, they must be descriptive.
Users with slow reading ability or short-term memory issues benefit from headings for sections of content to make it clear what the section contains. People who use screen readers may also use headings to navigate to sections.
As well as headings, descriptive labels on form control help users know how to complete the form fields.
A single letter of the alphabet can be a good heading (for example, in an alphabetical index).
If you regularly produce similar content, keep headings consistent (for example, a website about film reviews might have ‘Plot’, ‘Characters’ and ‘Verdict’ on each individual page).
Make sure headings can be programmatically determined as required by Info and Relationships.
‘Multiple Ways’ requires you to offer at least two ways to find pages on your website.
All users benefit from a website that makes it easy to find and navigate to webpages. Some users will find certain methods easier than others, so it’s important to offer a range of options.
For example, users with visual impairments may prefer a search function, whereas those with cognitive impairments may find a sitemap easier to use.
Provide multiple ways for users to find your website’s pages by:
Though you only need at least two methods available to user, the three suggested above make a more comprehensive solution.
A good HTML sitemap will depend on the structure of your website. Design your sitemap so that it best reflects the structure of your website pages and contains all your pages.A ‘related pages’ section (which shows links to similar pages on your website) is a good way of helping users navigate around your website.
‘Link Purpose (In Context)’ requires that every link’s purpose is clear from its text or context.
It’s essential that you make your links clear and easy to understand, ideally from just the link text itself.
That’s because users with assistive technology, like a screen reader, often hear all the links on a page to help them find where they want to go. Others may view your website highly magnified or tab through links, so the user will only see the link text and a few words around it at any one time.
To help your users, your link text (the words that are linked, often called ‘anchor text’) must make the link destination clear, in the context of their surrounding content.
Make sure that for each link on your website:
You don’t need to make the link purpose clear if the purpose is ambiguous to all your users.
For example, if I link the word ‘blog’ in the phrase ‘I have a personal blog’ the link might go to my blog, or it might go to a Wikipedia page explaining what a blog is. No user would reliably know where the link goes before they follow the link.
Of course, it’s best to avoid ambiguous links as users should always know where they are going. Although, there are times when you might want to spring a fun surprise on everyone.
A good writer will only ever need the first option, making the link purpose clear for the link text. It is the most accessible solution and the best for your users. There is always a way to make your link accessible using link text alone.
At Level AAA, Link Purpose (Link Only) requires you to make links accessible using only the link text.
Where you link to another page on your website, it’s good practice to use the page title you set in Page Titled as the link text.
‘Focus Order’ requires that components receive focus in a logical sequence.
Your users need to find their way around your website in a sequential and meaningful order. You can control this with the ‘focus order’ of your website.
This is the sequence in which users access components on your website. Users with keyboard-only navigation or screen readers will follow the order you have set, so it’s essential your chosen order preserves meaning and usability.
Ensure the focus order of each web page follows a sequence that preserves the meaning and functionality of the page.
Unplug your mouse and verify that you can use the ‘Tab’ key to navigate to every part of your website and use every function, including search boxes and forms – make sure each page has a sensible order.
If you have complied with Keyboard, you may have already covered elements of this guideline.
‘Page Titled’ means using helpful and clear… page titles.
All users benefit from descriptive page titles. A good title tells your users which page they are on and what that page is for. This lets users quickly understand if they are on the right page.
Users with visual, cognitive and mobility impairments further benefit as the technology they use can more heavily rely on page titles.
Give each page on your website a unique and descriptive meta title.
A useful format for writing page titles is: ‘Page name – Page description – Website name’ ( ‘About Us – Learn our Secrets – ACME Corp’).
If pages are part of a process, such as a checkout, use the title to tell the user what stage they’re at (‘Checkout – Page 1 of 5 – ACME Corp’).
Don’t forget dynamic pages such as search results (‘Search Results for XXXX’) and 404 errors (Sorry, we can’t find that page).
In many cases, it makes sense to repeat the page title or a variation of it as the top heading on your page.
Type your page titles into a spreadsheet and review them. If they make sense out of context, they will work on your website.
Use these page titles in your sitemap (see Multiple Ways and Location) to make it more accessible.
‘Bypass Blocks’ requires you to provide a way for users to skip repeated blocks of content.
Websites often have the same, or very similar, content at the top of each page (for example the navigation menu, header and certain graphics). Some users with visual, motor or cognitive impairments who navigate sequentially through elements can struggle to get past this repetitive content.
For example:
To help these users navigate your website, provide a way for them to bypass the repetitive parts of each page.
While a ‘Skip to Content’ link will pass this guideline, there is a little more you can do. A standard in HTML5 allows you to label your navigation menu as a <nav> element. Some screen readers can use the <nav> element and provide a way for users to skip menus.
‘Three flashes or below threshold’ requires that no content flashes more than three times per second.
Flashing content on a website can cause difficulties for users with photosensitive seizure disorders such as epilepsy. Flashing content can cause these users to suffer a seizure.
Don’t add anything to your website that flashes more than three times per second.
There’s one exception to this guideline based on the size of the flashing content, but I recommend you ignore it and just don’t let anything flash more than three times per second.
“the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance.”
Understating Success Criterion 2.3.1
If you can understand that you’re smarter than me!
Remember, flashing is different to blinking (see Pause, Stop, Hide). Blinking can distract users but doesn’t cause seizures.
If blinking content occurs three times per second, it is considered flashing content.
The exception is removed at Level AAA in Three Flashes.
