WCAG AA-level requirements for publications

Perceptibility

Contents available for everyone to see or hear

Images and other non-text content

All images and non-text contents have readable text alternatives with the same content. This can be indicated in the content text or as the ‘alt’ attribute of images, for example.

Audio and video (pre-recorded)

In addition to audio, the content of pre-recorded video and audio recordings (non-live broadcasts) is also available in a readable form.

Video captions (pre-recorded)

In addition to an audio track, pre-recorded videos have captions for the hearing impaired.

Audio description or media alternative (pre-recorded)

The content of videos in which audio is part of the information is also provided through an alternative method, e.g. as a readable text.

Content structure and presentation method

The contents of the pages are implemented with HTML elements in a manner that is logical and clear to users.

Content order

The order of the contents is logical and sensible in terms of understanding the subject matter.

Sensory perception of content

All items of the user interface – buttons, lists, links and elements active to the user – are implemented visually so that they can easily be perceived and understood.

Using colours

The meaning of the content must not be based exclusively on the use of colours. Colour alone must not be used to assign meaning to selections, items or errors, for example.

Automatic audio file playback

Do not set audio files to play automatically as the page is loaded. If any audio plays automatically for more than 3 seconds, a control system must be available for the user to pause or stop the audio and adjust the audio volume.

Live broadcast captions (live)

Captions are provided for all live audio content as synchronised alternative media, such as text that is displayed simultaneously with the audio.

Audio description (pre-recorded)

The content of the audio track can also be read on the page.

The content of the audio track can also be read on the page.

The contrast ratio between the text and the background is at least 4.5:1. Differently sized texts have different contrast requirements. Check the contrast with a suitable tool or online service (e.g. https://webaim.org/resources/contrastchecker/).

Text and content scaling

The content must be scalable to at least 200% without the structure or functions of the page being broken.

Do not present any texts as image files on the pages

Do not use any images to show or replace texts.

Operability

Contents and functions easy to use with all technologies

Using the page with a keyboard

The contents must be accessible with only a keyboard. Access to any content elements must not require a mouse or other pointer device.

Avoid keyboard traps

Users must be able to exit contents accessed with a keyboard by using a keyboard. A keyboard trap refers to content embedded into the page from which users cannot return to the main level of the page by using a keyboard.

Flexibility of time-limited functions

When a function has a time limit, the user must have at least one of the following options: stopping the clock (timer), adjusting the time limit or requesting a time extension at the end of the time limit. Exceptions to this are certain real-time events and time limits longer than 20 hours.

Pause, stop, hide moving or auto-updating content

The user must be able to control any moving, blinking, scrolling or auto-updating contents. The user must be able to stop, pause or hide such contents.

No blinking content

No content must blink/flash more frequently than three times per second.

Jump links to the top of the page

Add jump links directly to navigation options and contents onto the pages. Make it possible for users to move directly to the content they need, bypassing any elements repeating on the page.

Page titles

The page must have a descriptive title. The title must describe the contents or purpose of the page.

Focus order

Moving between elements happens in a logical order when using a keyboard. The order of the elements must be sensible in terms of the contents and functions of the page.

Indicating the purpose of links on the page

The purpose of every link in the content of the page must be indicated by the link text itself and the title.

Implement alternative ways to find contents on the website

Provide several alternative ways to find contents on the website; navigation, site map, search, etc.

Subheadings and form titles descriptive of their purpose and content

Use clear and descriptive title texts to indicate the content of the subject matter and the input fields of a form.

Indicate the active element by highlighting it visually (focus)

Make sure that the element activated with a keyboard is clearly visible and distinguishable from the other elements of the page. The active element must be indicated with the CSS-style ‘focus’ attribute.

Understandability

The content and functions must be understandable

Indicating the language of the page

The HTML root element of the pages features the ‘lang’ attribute to indicate the language of the content of the page.

Form field selection

The element does not change the contents of the page when activated.

Form field content, content change

The contents of the page must not change when the content of a form field changes, unless the user has been informed that this will happen.

Indication of errors

When the automatic input check detects an error, the form field containing the error must be indicated clearly and the error must be described to the user in an understandable manner.

Titles and user instructions on pages that request information from the user

On pages and page sections that require input from the user, the fields are titled clearly and the user is provided with instructions for submitting the correct information.

The language of page sections must be indicated if it differs from the default language of the page

Tell the user if the language of a page section changes.

Consistent navigation

Implement the navigation system identically and in the same place on all pages.

Consistent visual style of elements and user interface components

Design the user interface elements, functions activated by the user (e.g. links) and other elements to follow a consistent format across the entire website. Always use assistive symbols, etc. in the same meaning.

Error correction instructions

If the user fills out a form field incorrectly, present a clear error notification and suggest the correct way to correct the information. Use examples.

Error prevention (legal, financial, other)

Minimise the potential of errors occurring when information (especially confidential information) is submitted. Enable the user to check the correctness of the information that they have submitted and correct it if necessary.

Robustness

The website must be compatible with different terminal devices and assistive technologies

Page structure and the formation of contents on a browser (parsing)

Use error-free HTML code. The HTML element structure of the pages and the attributes used must conform to the use method determined in the relevant specifications.

Correct use of the ‘name’, ‘role’ and ‘value’ attributes

Add program-readable attributes for browsers and screen readers to user interface elements (e.g. form fields and links). Follow suitable instructions in the use of these attributes.