Beginner (Level A) Archives - Page 2 of 4

Your website has no major code errors

Parsing is the way software like web browsers and assistive technology read and understand a website. It’s important that the different technologies your users use to view your website don’t have trouble parsing your website. Parsing is all about your website’s code.

All your users will benefit from a website built on clean and modern HTML. Your website will work properly in all web browsers and on all kinds of devices, from computers to tablets to smartphones.

Your users who rely on assistive technology will benefit from a well-made website as the technology often relies on HTML parsing. Bad or broken HTML is more likely to cause parsing problems for assistive technology and so increase the chance of users leaving your website.

What to do

This is a wide-ranging guideline, one that changes with time as standards evolve. Your best protection is hiring a web designer who knows parsing well. Find one through recommendations and ask them about their approach to web standards and accessibility.

Here are the most common issues to watch out for:

Ensure HTML elements have complete start ( < > ) and end ( </ > ) tags where needed.
Nest all HTML elements correctly (for example, list objects within an ordered or unordered list).
Use unique Ids.
Check that HTML elements don’t contain duplicate attributes.

Tips

A good – though not foolproof – way to test your website is a HTML validator tool. A validator gives you an idea of how well technology can parse your website. Use it to create a list of priorities.

Introduction

Most websites have at least some elements that require user input. For example, these might be controls or forms. It’s essential to label controls such as radio buttons and checkboxes so that users understand what they are selecting.

It can also be useful to provide users with clear instructions around forms and controls, especially if there are validation rules around inputs. Be wary that overdoing instructions can make controls harder to understand.

How to Pass ‘Labels or Instructions’

Use descriptive labels on form fields and controls.
Provide text instructions at the beginning of a form or section of a form.
Show users the expected format of free text entries.
Indicate required fields.
Use text to identify required fields that have been missed.

‘Labels or Instructions’ Tips

Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine.

The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.

Think about how your use of colour affects things like required fields if you want to highlight them by colour. Don’t highlight by colour alone, pick a symbol too.

Consider error identification as well, and make sure that you give helpful instructions when your users make mistakes on forms.

Introduction

Users of all kinds will make mistakes when using your website, so it’s important to clearly identify and describe errors. Input errors include users not providing required information as well as providing informating that doesn’t meet validation criteria.

Be as specific as possible when highlighting an error, so a user has the best chance of fixing their mistake and continuing. This means doing more than adding a red box around a missed field for example.

How to Pass ‘Error Identification’

Identify and explain to the user any mistakes that you can detect automatically.
Add error explanation close to the error, showing what is wrong and how to fix it.

‘Error Identification’ Tips

If a form requires input in a certain format, show and describe the required format.
If a mandatory field is empty, highlight the field and explain what’s required.
Build forms to be forgiving, accepting variations on the formats you prefer.
Don’t ask for too much information, just what you need.
Be specific. Use clear, concise instruction and form field labels.
Highlight mistakes in forms with colours and symbols.
Don’t clear a form if a user makes a mistake. Save the information and allow the user to edit their error and continue.
Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.

Introduction

As we saw with On Focus, all users need predictability when navigating a website. If elements don’t act as they expect, they may become disorientated.

This is also true when elements receive input, they shouldn’t automatically change. For example, forms shouldn’t skip to another field or auto-submit without confirmation from the user.

A change on input is especially troublesome for users who navigate by keyboard, as well as those with visual disabilities or cognitive limitations.

How to Pass

Ensure no elements change on input.

Here are some examples of the kinds of things to look out for:

Forms must not auto-submit when all fields are filled – this prevents your users from checking and editing what they have written.
Focus (the field where the user will input next) must not automatically jump to the next field in a form once a field is complete.
Using a control (like selecting yes or no) must not automatically perform the action (for example, selecting to subscribe to a newsletter in a check box must not automatically subscribe your user, they should be able to click a submit button to confirm their decision).

Exceptions

Elements can change on input if you inform the user of the change before they have the chance to input their data or make their selection. For example, you may have seen websites with options in the header to choose a text size. Once you click on the size you want, the website changes without giving you the chance to confirm your choice.

Controls like that don’t need to have a submit button if it’s clear from the text before the element what will happen when you input.

Tips

The easiest way to pass is to use submit buttons and avoid jumping your users between fields. It’s all about leaving the control with your users, where it belongs.

Introduction

All users need predictability when navigating a website. If elements doesn’t act as they expect, they may become disorientated.

In particular, once an element receives focus from a user, whether with a mouse or keyboard, the element must not automatically change (known as ‘changing on focus’). This can disorientate users.

A change of focus is especially troublesome for users who navigate by keyboard, as well as those with visual disabilities or cognitive limitations.

How to Pass ‘On Focus’

Ensure no element changes purely by receiving focus.
Avoid both behavioural and visual modifications.

Ensure that:

Links don’t open automatically on focus; and
Forms don’t submit without the user acting (such as clicking the ‘Submit’ button); and
There are no automatic pop-ups; and
Focus never jumps to another element automatically; and
No other action that occurs on focus alone causes the page to change.

‘On Focus’ Tips

Most well-made websites will not have any of these errors by default, you would need to choose to add in change on focus.
A great way to test this guideline is to unplug your mouse and navigate your way round your website. If anything moves, submits or changes on focus, fix it!

Exceptions

Elements can change on focus if the context doesn’t change. For example, you can use a dynamic menu on your website, the kind where navigation options drop down when you hover over an item. This is not a change of context.

Another example would be a hover status on a link, again, this this isn’t a change of context.

Introduction

For both users who rely on conventional web browsers and those who prefer assistive technologies, assigned a webpage’s language is essential for understanding.

Among the benefits, text is rendered more accurately, screen readers will use the correct pronunciation rules and captions will load correctly.

How to Pass ‘Language of Page’

Set the default language of each webpage using the lang HTML attribute.

‘Language of Page’ Tips

Set the language in your site template so you only have to do this once (unless your website has pages in different languages).

If a webpage has content in more than one language, set the page to the language used most.

If a webpage uses multiple languages equally, set the page to the language used first.

When using English, be aware of the three options “en”, “en-gb” and “en-us”. If in doubt, stick with “en” as this lets users set their preference.

Introduction

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.

How to Pass ‘Link Purpose (In Context)’

Make sure that for each link on your website:

The purpose of the link is clear from the link text (for example, ‘My blog’); or
The purpose of the link is clear from the surrounding content, meaning the same sentence, paragraph or cell in a table (for example, ‘Visit my blog’); or
If the link is an image, the alt text of the image makes the link purpose clear (for example, ‘Luke McGrath – Visit my blog’); and
Links with the same destination have the same description (but links don’t share a description if they point to different places).

Exceptions

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.

‘Link Purpose (In Context)’ Tips

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.

Introduction

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.

How to Pass ‘Focus Order’

Ensure the focus order of each web page follows a sequence that preserves the meaning and functionality of the page.

Exceptions

Complex items like tree diagrams do not have to be exactly programmed to a specific order if your users can reach every element.
You don’t need to set an order if your page doesn’t need to be navigated in a particular sequence to be understood. For example, a random collage of links or images.

‘Focus Order’ Tips

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.

Introduction

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.

How to Pass ‘Page Titled’

Give each page on your website a unique and descriptive meta title.

‘Page Titled’ Tips

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.

Introduction

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:

screen readers often announce all of the elements on the page to the user in order;
users who navigate by keyboard might have to key past each link in a menu; and
users who browse with a lot of zoom can get lost on a page.

To help these users navigate your website, provide a way for them to bypass the repetitive parts of each page.

How to Pass ‘Bypass Blocks’

Add a visible ‘Skip to Content’ link to all pages on your website that sends users to the start of the main content on each page; or
Add a link at the start of any repeated content to skip it; or
Add links at the start of a page to each area of content.

‘Bypass Blocks’ Tips

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.

What to do

Tips

See also

Introduction

How to Pass ‘Labels or Instructions’

‘Labels or Instructions’ Tips

See Also

Introduction

How to Pass ‘Error Identification’

‘Error Identification’ Tips

See Also

Introduction

How to Pass

Exceptions

Tips

See Also

Introduction

How to Pass ‘On Focus’

‘On Focus’ Tips

Exceptions

See Also

Introduction

How to Pass ‘Language of Page’

‘Language of Page’ Tips

See Also

Introduction

How to Pass ‘Link Purpose (In Context)’

Exceptions

‘Link Purpose (In Context)’ Tips

See Also

Introduction

How to Pass ‘Focus Order’

Exceptions

‘Focus Order’ Tips

See Also

Introduction

How to Pass ‘Page Titled’

‘Page Titled’ Tips

See also

Introduction

How to Pass ‘Bypass Blocks’

‘Bypass Blocks’ Tips

See Also

Start here

Boring pages

Security

Search Wuhcag