Checking your own website

One important part of the quality assurance process is to take a step back and test how your solution works. By testing it yourself, you will find many of the problems that users might encounter. Testing the solution yourself makes it easier to do something about the findings.

On this page

The tests we suggest below do not cover every legal requirement, but they will give you a solid head start. You can also use external resources for the more complicated issues.

Several of the points below require a basic knowledge of HTML.

1. Keyboard navigation

Many users rely on keyboards to navigate, including users with motor disabilities and users with screen readers. A lot of users also prefer to use keyboards in some contexts, for example when filling in forms.

To test how your solution works with a keyboard, press the Tab key repeatedly and evaluate the following:

Is there a shortcut link from the start of the page to the main content?
Is the focus marking clear for all steps?
Does the Tab order make sense? Common errors include the focus starting far down the page, zigzagging between columns when the Tab key is pressed, and related objects not being grouped together.
Can you access all of the objects that have functions, such as links and fields in forms, and do they act as expected when you press the Enter key?
When the user activates interface changes, such as maximise/minimise or modal boxes, does the focus move to the form’s first field or, alternatively, does one press of the Tab key move the focus to the form’s first field or the first link in the new area?

2. Magnification and responsive design

Web browser magnification is an easy way to enlarge text on a web page for users with moderately impaired vision. If the web page is set up with responsive design, this will also activate when the browser window is enlarged or the size of the window changes. Therefore, the responsive layout should function as well as possible across the entire range of window sizes.

You can do the following to test whether magnification is working properly:

Change your browser to full screen on the largest screen you have access to, then use your browser’s zoom function (Ctrl and +/- or Cmd and +/-) to go step-by-step up to at least 200%, preferably up to 400%. Check that all of the contents and functions are accessible and understandable.
Set magnification to 100%, and gradually change your browser’s window width from full screen to the narrowest you can get. Check whether the order, grouping and general layout work properly across the entire range.
On a mobile phone or tablet, check that you can also magnify pages with a responsive layout.

3. Colours and contrast

Good contrast between text and background is especially important for users with impaired vision, reading difficulties and impaired cognition, and for all users in difficult lighting conditions. It is also important that, for the sake of those with impaired colour vision, colour is not used as the only means of conveying information.

You can use a free application for some of the tests, Colour Contrast Analyzer (CCA).

Are links in body text highlighted by more than just being a different colour to the surrounding text?
You can use CCA’s pipette function to measure the contrast between the text and background in all texts. This tool will tell you if the requirements are not met. The minimum requirement is 3:1 for large text and 4.5:1 for regular text.
You may also want to test icon contrast, even though this is not covered by WCAG.
In the Windows version of CCA, you can select Image > Screen and then different types of colour blindness. You can then check small sections of your web page using simulated colour blindness. This is particularly relevant if you use any type of colour coding, such as in diagrams.

4. Headings

Headings make it easier for all users to orient themselves in your text. Correctly coding headings is of major help for users who use screen readers because it allows them to navigate between the headings on the web page.

Pull up a selection of pages on your website, preferably ones with different page templates, and read through the texts. Are there any points where you are tempted not to read on or you are missing some kind of overview of what the text contains? If so, there should perhaps be more subheadings.

Coding headings

You can quickly check whether headings are correctly coded on your pages using a browser extension. Relevant extensions are:

If there are subheadings, use the extension to check whether the code defines subheadings using heading tags. Headings are defined using the tags <h1> to <h6> in HTML. Do the following:

In WAT select Structure > Headings
In WD select Outline > Headings

Correct heading level

You can also check to see whether any headings hop over levels, for example by going directly from level 2 to 5 without passing through levels 3 and 4. Hopping over levels is not good for search engine optimisation and many users with a screen reader may find themselves losing track of the content.

5. Links

Highlighting links

It must be possible to see links regardless of colour vision, lighting conditions and browser settings. To confirm that links are in fact links, the focus must also be visible when using a keyboard to navigate and preferably also when the mouse pointer is hovering over the links.

Are links in body text underlined or do they stand out from the body text thanks to more than just a different colour?
If the links in body text are underlined, you can test them by turning off the browser's setting that automatically underlines links. In Internet Explorer select Tools > Internet Options > Advanced and then scroll down the list and set the Underline Links setting to Never. Are the links still underlined?
Are links not included in body text clearly visible thanks to their design, use of icons or similar such that you can easily see that the links are clickable?
If you point a mouse at the links, does their appearance change to confirm that they are clickable?

Link text

The link text should tell you where the link leads and be fully descriptive. The user must be clearly able to see where they will end up by clicking the link.

Can you tell which page the link will take you to just by reading the link text?
When you follow the link, do the link text and page heading match?

6. Images

Images must have alternative text so that users who cannot see them can understand the motifs in the images and where linked images lead. An easy way to check this is to use the Web Accessibility Toolbar (WAT) for Internet Explorer toolbar.

Do the following on a selection of pages, preferably ones with different page templates, to check alt texts:

In WAT, select Images > Show Images.
If you see a dialogue box saying the image has no alt attribute, there is an error in the framework. All images in HTML must have an alt attribute. Review the page and identify all of instances of ‘No alt!’ and make sure these are corrected.
Review the alt texts for all images without links and check whether the motif is properly described.
Review the alt texts for all linked images and check whether they provide a good description of where the link leads.

7. Forms

Correctly coding forms is especially important for the sake of users who cannot see the interface and in many cases also for users with impaired motor precision or cognitive impairments.

You can do the following to test your form coding:

Check that text fields, drop-down lists and so on have visible labels.

For form fields: Click on the label with the mouse and see whether the corresponding field becomes active. This normally means that the link between the form label and the form field is correct.
For radio buttons and checkboxes: Click on the label with the mouse and see if the radio button or checkbox is checked. This normally means that the link between the form label and the form element is correct.

8. Search

For many, the search function is the most frequently used option for finding the information they want. Therefore, it is important that search works well.

The search statistics will show you what users search for. You can use this as a basis for testing:

Test the most common search phrases and see whether the search results show what the user should be presented with.
Review your search statistics and see if there are any trends, such as the same type of information being searched for in different ways. Do such searches provide good results?
Search for words you know there are dedicated pages for on your website. Is the main page for this word shown at the top of the search results?
Search for combinations of words. Does this produce fewer and more precise matches, or more and less precise matches?
Can the results be filtered in any way?
Does the search function provide help when keywords are misspelled?

9. Page titles

The page title is shown at the top of the window or in the browser tab, and helps the user find the right browser tab. The page title is also the name suggested when you save a bookmark or the page as a favourite in your browser.

Open a selection of pages, preferably ones with different page templates, and see whether the browser tab starts with a description of the page’s specific content and, preferably, ends with the name of your website or organisation.

10. Code validation

Making sure code is correct is important for ensuring that your web page functions correctly using different web browsers and assistive technology. Some coding errors are more critical than others. When a web page has few coding errors, it is easier to detect the serious errors.

You can use the W3C code validator to check your web page’s code. You should check all the different page templates used on your website. While the goal should be error-free code, you should particularly check for these errors:

That all elements are correctly nested.
That all elements are started and terminated correctly.
That no elements have duplicate attributes.
That no elements have identical values in their ID attribute.