Publishing compliance guidelines

Accessible Text

The typeface used for main body text information is sans serif (i.e. Arial or Clan). [back]

Serifs change the shapes of words by changing the shapes of letters. They can extend bases and can connect together letters in ligatures. People with limited vision need predictable shapes and can find typefaces which have large serifs confusing, difficult and sometimes illegible.

When this occurs, those with low vision find that letters appear to change shape and become confusing. For example, H begins to resemble II and e becomes c.

The typeface used should have distinctly different shapes for letters and numbers: (e.g. clear differences between n and h; 3 and 8).

The Scottish Government typeface is Clan or Arial.

If for any reason you wish to use a different (sans-serif) font, please consider letters such as c, o, and a, which can look the same to people with limited vision. This can also be the case for numbers such as 3, 5, 6, 8, and 9. Typefaces which make it difficult to distinguish between particular letters or numbers should be avoided.

In an accessible publication the main body of text is set in a 12 point (minimum) typeface with a large x-height (the height of the lowercase “x”). [back]

12 to 14 point, well-proportioned typefaces serve a range of people who have some learning disabilities that affect reading skills and also a range of people with moderate vision loss or limited sight such as the elderly.

Using a minimum size of 12 point type in Scottish Government publications will improve overall access for the majority of the general public. However, if people have a more severe vision loss, a large-print version in 16 to 18 point type may be more appropriate.

For character proportions sans-serif faces most often meet the requirements for accessible type and this is why they are recommended for all Scottish Government publications.

Contrast [back]

Contrast and colour use are vital to accessibility. Users, including those with visual disabilities, must be able to perceive content on the page and make distinctions between background and text for the purpose of clarity.

Gradients, background images and transparencies, text over gradients, semi.transparent colours and background images still need to meet contrast accessibility requirements.

Foreground vs. Background

People who have visual impairments benefit from high colour contrast between text and background. Visual impairments make reading difficult in a variety of ways. Some reduce the amount of light that enters the eye. Others blur the retinal image. High contrast between foreground and background is one way to improve the accessibility of information for people with different visual impairments.

The colour contrast of type to background is high.

Some people with vision loss and other reading-related disabilities prefer light on dark; some prefer dark on light.

Exaggerate lightness differences between foreground and background colours. Avoid using colours of similar lightness adjacent to one another, even if they technically differ in their make-up. Choose dark shades of the colours with hues from the bottom half of the colour wheel (blue, violet, purple and red) against light shades of the colours from the top half of the wheel (blue-green, green, yellow, orange).

The colour contrast within drawings or other illustrations – the main foreground figures or information against background colour or image – should be consistent with the type contrast.

Type or illustrations are not printed over other designs, photographs, graphics, or text. Solid background is essential for legibility; patterned backgrounds distract and reduce legibility for people with visual and learning disabilities.

Image Tags (Alt tags) and descriptive text [back]

Alt text (Alternative text) is a basic principle of helping to make content accessible. Its original (and still primary) purpose is to describe images to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image.

Including alt text with your images ensures all users, regardless of visual ability, can appreciate the content within your document. Alt text (alternative text), also known as “alt attributes”, “alt descriptions”, or technically incorrectly as “alt tags,” and are used within the Scottish Government HTML code to describe the appearance and function of an image on a page.

Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand the on-page image. Alt tags will be displayed in place of an image if an image file cannot be loaded. Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly.

Photographs and Illustrations

Photographs and illustrations can be highly valuable tools for improving the accessibility of publications because they provide alternative ways for people to gather information.

It is essential, however, that the quality of these graphics be examined carefully. Poor quality graphics and/or poor quality reproduction of graphics increases the frustration level for people already having difficulty reading.

Simple drawings with bold lines and minimal, essential information best assist those with low vision.

Icons should be limited to those that are readily understood by the majority of people. Even those listed as recognized international symbols (e.g. the people in a box = an elevator) may be unknown and incomprehensible to many.

Icons should be large enough and clear enough to be read by people with low vision. Icons on a floor plan are frequently illegible to people with less than average vision. Consider using a key as a supplement or replacement for icons.

Don’t use capital letters in blocks. The main body of text should be set in a combination of uppercase and lowercase letters. [back]

Most people read the shapes or footprints of words, not the individual letters. Ascenders (the parts of letters that rise above the midline, as in d, h, and k) and descenders (the lower parts of letters that extend below the line, such as g, y, and p) give words their shape. Words set in all uppercase letters have no distinct, recognizable shapes and so are less legible. This means that text to speech readers spell out words as letters rather than seeing them as ‘words’.

Italics are used only for foreign words, quotations and publication references. [back]

The Scottish Government recommends that the use of italics be limited to foreign words and quotations.

By default, screen readers do not distinguish between regular text and italic text (or bold text, for that matter). Additionally, it will not distinguish the use of <strong> and <em> tags in the HTML either.

Italics change the shape of words and frequently are lighter weight and more decorative than the roman form of the typeface. This makes italics much more difficult for people to read.

No more than two different typefaces are used on a page.

The Scottish Government recommends that only one typeface is used on a page.

If it is a requirement to use two different typefaces this should be Clan and Arial.

People who have difficulty reading due to disability need limited distractions so as not to further complicate the struggle. Many different typefaces require continual readjustment to letter and word shapes.

By default, screen readers do not distinguish between regular text or italic text.

Try not to use Bold or Underlining. [back]

Bolding the text can, in some circumstances, make it easier for people with low vision to see and read.

However, if the typeface is small and heavy, characters that are then put into bold face become distorted and difficult to read (e.g. lower case “e” becomes indistinguishable from an “o” lower case “h” becomes indistinguishable from a “b”).

Underlining does not connect with the bases of the letters.

When underlining connects with the letters it can be visually confusing. It may cause blurring between the letters and the line, obscuring the individual letters and changing the appearance of the word.

By default, screen readers do not distinguish between regular text or bold text.

The margins are flush left and ragged right unless right justification can be accomplished without resulting in exaggerated spacing within the text line. [back]

Uneven spacing between words (which can be caused by full justification) can disrupt the flow of reading and confuse those with reading difficulties.

Left aligned margins assist those with learning disabilities and low vision to find the next line by providing a predictable beginning location.

Little or no hyphenation should be used at the ends of lines.

Hyphenation breaks up the flow of reading and understanding. When hyphenation occurs at the ends of lines, readers are forced to hold a part of a word or phrase in their minds until their eyes are able to find the next line. This is difficult for people who are reading word by word and already struggling with comprehension or having difficulty with short-term memory. It is important to minimise the amount of work that readers must do to understand the text.

Colour alone should not be used to convey information. [back]

It is important to know screen readers do not read aloud visual information. Therefore the screen reader does not read colour information. Non-visual and visual users who cannot access colour must be taken into account when using colour to emphasise elements.

Some people with colour deficit have trouble differentiating between specific colours, such as between red and green or red and black. Screen reader users do not access content visually, so they do not have access to colour information.

Colour is a powerful visual means of presenting or distinguishing information, but when you use colour to identify or distinguish information, make sure that this information is still available to people who can’t perceive colour.

Use unique and descriptive names for links [back]

When including links in your content, use text that properly describes where the link will go. Simply saying ‘click here’ is not helpful for a screen reader user. It is not descriptive and so provides no meaning when using a screen reader. Also, screen readers can be set to scan for links but does not read these links in the context of the page. If descriptive text is properly used, it will explain the context of the link to the screen reader user. For example:

Sighted users are able to scan a page for linked text. Screen reader users navigate using a variety of techniques. One of those is to pull up a list of links (a feature of most screen readers) and navigate through that list. Given this, link text should be able to stand alone independently of its context. For example, links like “click here” and “more” are meaningless out of context as, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.

The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter. Using our example:

Also, speech recognition users can click links with a voice command like “click” followed by the link text. Therefore, it’s helpful to keep link text short and easy to say.

Consider these additional guidelines when writing link text: