WCAG Reference: This corresponds to WCAG 2.4
Requirement: You MUST provide a page title that describes the topic or purpose of the page.
Why is this required? This will help all users know which page they are on, but particularly screen reader users, who will hear the page title when the page loads.
Further reading: Further information on page titles can be found in the metadata standard.
WCAG Reference: This corresponds to WCAG 2.4.2
Requirement: You MUST provide a ‘skip’ link to enable users to quickly access the main content of the page, where there are blocks of content that are repeated on multiple pages (e.g. header bars, navigation).
Why is this required? People, who use the keyboard to access web pages, including those who use screen reading software, will need to tab through all content at the top of each new page until they reach the main content. This can be time consuming and can be avoided if there is a ‘Skip’ link which can take them directly to where the main content begins.
Note: Use of the standard OU Header and its associated tags provides this as standard.
WCAG Reference: This corresponds to WCAG 2.4.1
Why is this required? Screen reader users may tab through links to skim web pages or may use a command to list all links on a page. In these cases, the links will be read out of context and any ambiguous links (e.g. click here, read more) will be meaningless. Any erroneous text included in links make the links less meaningful for screen reader users.
WCAG Reference: This corresponds to WCAG 2.4.4
Requirement: A web page MUST be managed using style sheets for all presentational elements.
Why is this required? This allows users with their own specific visual requirements to apply their own styles sheets without losing any understanding of the structure of a page.
Requirement: You MUST use the appropriate HTML mark-up to organise the structure of your page
Why is this required? Sighted users can understand the structure of a page by looking at it – headings tend to be larger, and often in a different colour. Non-sighted and visually impaired users cannot perceive structure this way, so they rely on their assistive technologies to explain a page’s structure by translating the HTML tags.
Example: All headings are tagged with the correct heading tag appropriate to their level, tables are only used to display tabular information (not for presentational purposes), and so on.
Requirement: You MUST provide correct HTML mark-up for headings to convey the structure of your page.
Example: H1, H2, Table row headers, Table column headers.
Requirement: You MUST use the correct HTML mark-up to organise the sequence in which content is presented.
Why is this required? This allows users of assistive technologies to understand that some content is to be read in a particular order, and that the order is significant.
Example: In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.
WCAG Reference: This corresponds to WCAG: 1.3.2
Requirement: If a site uses dropdown menus, you MUST ensure that they work correctly for keyboard users in supported browsers.
Why is this required? Dropdown menus are an area of particular concern which often do not work properly or have browser differences.
Requirement: You MUST ensure an adequate colour contrast ratio for text.
Exception: Text that is part of a logo or brand name has no minimum contrast requirement.
Note - ‘Large scale’ is defined as 24px (18 point) text or 19px (14 point) bold text. It is acknowledged that point sizes are different for different fonts, but WCAG states ‘“18 point” and “bold” can both have different meanings in different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there are so many different fonts, the general measures are used and a note regarding fancy or thin fonts is included.’
Note: There are a number of online tools that can be used for checking colour contrast ratios, such as Juicy Studio.
WCAG Reference: This corresponds to WCAG: 1.4.3
Requirement: Text MUST be able to be resized up to 200% and remain readable without assistive technology.
It should be checked that up to this level of zoom adaptive layouts do not cause problems. For example: truncated words; words overlapping with other content; or only one word of a sentence fitting on each line, causing the sentence to be displayed as a vertical column of text that is difficult to read.
Why is this required? Many users benefit from being able to enlarge the display, for example through the browser zoom settings, or browser ‘largest font’ settings.
WCAG Reference: This corresponds to WCAG: 1.4.4
Requirement: You MUST ensure that blocks of text are aligned to either the left or the right, not justified.
Why is this required? People with dyslexia or some visual impairment find it much easier to read text when the spacing between words is consistent. Text that is justified can lead to “rivers of white” in the text which they may find particularly problematic.
Requirement: You MUST ensure that text that is hidden on the page is also hidden from screenreaders (OU) unless the text is included specifically for screen readers.
Why is this required? Screenreaders can sometimes access text that is intended to be hidden, for example answer text in quizzes, or page tabs.
Guidance on ways of hiding text from screenreaders is available from WebAIM.
Requirements: You MUST NOT use symbols or punctuation to convey meaning except for mathematical purposes (OU).
You MUST use punctuation appropriately (OU).
Why is this required? Screenreaders will use grammatically correct punctuation to read text in a meaningful way, e.g. a pause after a comma or full stop. However, under their default settings screenreaders may ignore symbols or punctuation such as asterisks, hyphens, slashes etc. that are intended to provide information or context.
Example: asterisks to indicate required form fields, or slashes used as breadcrumb separators may be ignored by a screenreader. Such symbols should be replaced with graphics with appropriate alternative text to indicate their function.
Exception: Symbols and punctuation should be used when required, e.g. for mathematics and for correct grammar.
Requirement: You SHOULD ensure that the width of a block of text (with default settings in common browsers) does not exceed 80 characters, or in the case of Chinese, Japanese or Korean character sets, 40 characters.
Why is this required? People with visual impairment and dyslexia find it difficult to keep their place in blocks of text displayed in long lines.
Requirement: Body text line spacing (leading) MUST be at least one and a half times the line height.
Why is this required? People with dyslexia find reading more difficult if lines of body text are too close together.
Requirement: You MUST specify the default human language of your web pages in the HTML header using the method recommended for the version of HTML you are using
Why is this required? This will allow assistive technologies to use the correct language.
WCAG Reference: This corresponds to WCAG 3.1.1
Requirement: You MUST also specify any changes to the language of paragraphs or phrases in the text, except for technical terms, proper names, or words and phrases that have become part of the general language of the immediately surrounding text.
Why is this required? Some screen readers can be configured with multiple languages and voices in the language indicated in the mark-up of the webpage. This is particularly important in the web pages of language modules.
Example: If you would pronounce a phrase in a different manner, then it should be marked. In an English text Place de Barcelona should be marked as Spanish to ensure that the accent is given correctly.
Requirement: Content MUST display in the orientation (portrait or landscape) preferred by the user. It should not be restricted in view or operation to a single orientation, unless a specific orientation is essential.
Why is this required? Users with dexterity impairments may have their devices mounted in a fixed orientation and can’t easily change the orientation of their device. Users with low-vision will be able to view content in the orientation that works best for them, for example to increase the text size by viewing content in landscape.
WCAG Reference: This corresponds to WCAG 1.3.4
Requirement: On a small display of 320 x 256 (CSS) pixels, page content MUST require scrolling only in one direction (usually vertically), not in both directions.
Why is this required? Some users need to enlarge content significantly which means that they effectively have a very small display. It is very hard to read text if you have to keep scrolling back and forth horizontally as well as vertically. (This also applies to users of mobile devices with small screens.)
Exceptions: Parts of the content which require two-dimensional layout for usage or meaning (such as tables, graphs, or diagrams) may require scrolling in both dimensions on a small screen.
Example: Ensure that decorative images ‘scale down’ to the width of the display, and do not force horizontal scrolling for the whole page. Where pages contain larger content such as a table, ensure this does not force horizontal scrolling for ordinary text elsewhere on the page.
WCAG Reference: This corresponds to WCAG 1.4.10
Requirement: If the user modifies text spacing from that defined by the page (by using browser developer tools, extensions, or a user stylesheet), the page MUST still be functional and show all content. This applies to the following settings:
Why is this required? Some people with low vision or dyslexia need to increase space between lines, paragraphs, letters, or words in order to make text easier to read. These changes do not benefit everyone, but it should work if users apply them.
Note: 1.5 line spacing is required for body text already without user modification (see point 2.10). The other styles should not usually be applied to the page itself, because they look bad and may reduce readability for most users.
Example: In the situation (best avoided wherever possible) where a page only allows a fixed amount of space for some text, then this fixed amount should include sufficient leeway so that the text is not cut off or overlapped when a user increases these spacing values.
WCAG Reference: This corresponds to WCAG 1.4.12
Requirement Any visual element used to understand the content, or the interface MUST have a contrast ratio of at least 3:1 against adjacent objects, including the background.
Example visual elements:
Why is this required? Low contrast controls are more difficult to see so may be missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality then it should be perceivable by people with low vision or other impairments without needing contrast-enhancing assistive technology.
Exceptions: Inactive components (e.g. disabled buttons) or where the appearance of the component is determined by the user agent and not modified by the author (e.g. native form controls as rendered on mobile devices).
WCAG Reference: This corresponds to WCAG 1.4.11
‘Web accessibility’ is defined as the practice of making websites usable by people of all abilities and disabilities.
...about MUST, SHOULD or MAY?
The Terminology section explains why each of these terms is used, and what they mean.