SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Accessibility for Content

Overview

As we continue to build and develop products for Singapore, we want to ensure that no one is left behind. Whether it means including video captions to help people with hearing difficulties, ensuring legibility of content through high-contrast text, or even presenting information in an understandable manner. Designing for accessibility means your digital products can be used and enjoyed by the majority.


Implementing accessible content design

There are many ways for you and your agency to achieve accessibility, without impacting the overall look and feel of your digital services.

Use informative and unique page titles

  • Use a short yet catchy title for each webpage.
  • Title should describe the content well and distinguish it from other pages.
  • The page title is often the same as the main heading of the page.
  • Put the unique and most relevant information first, e.g. put the name of the page before the name of the organization
  • For pages that are part of a multi-step process, include the current step in the page title.

Use headings to convey meaning & structure

  • Short headings should be used to group related paragraphs and clearly describe each section.
  • Good headings should provide an outline of the content.

Make link text meaningful

  • Write link text so that it clearly describes the content of the link target.
  • Avoid using ambiguous link text, e.g. 'click here' or 'read more'.
  • Indicate relevant information about the link target, such as document type and size, e.g. 'Proposal Documents (RTF, 20MB)'.

Write meaningful text alternatives for images

For every image, write alternative text that provides the information or function of the image. For purely decorative images, there is no need to write alternative text.

Create transcripts & captions for multimedia

  • Provide transcripts for audio-only content, e.g. Podcasts.
  • Provide captions for audio and visual content, e.g. Training Videos.
  • Provide transcripts and captions for important information and sounds e.g. ‘Door Creaks’.
  • Provide descriptions of important visual content for video transcripts e.g. ‘Ethan leaves the room’.

Provide easily identifiable feedback

  • Visible links to transcripts of audio.
  • Visible links to audio described versions of videos.
  • Text along with icons and graphical buttons.
  • Captions and descriptions for tables or complex graphs.

Provide clear instructions

  • Ensure that instructions, guidance, and error messages are clear and easy-to-understand.
  • Avoid excessive technical language.
  • Describe input requirements, such as date formats.
  • Instructions communicate what information the user should provide.
  • Errors indicate what the problem is and, possibly, how to fix it.

Keep content clear & concise

Use simple language and formatting, as appropriate for the context.

  • Write in short, clear sentences and paragraphs.
  • Avoid using unnecessarily complex words and phrases.
  • Expand acronyms on first us e.g. Web Content Accessibility Guidelines (WCAG).
  • Consider providing a glossary for terms readers may not know.
  • Use list formatting whenever appropriate.
  • Consider using images, illustrations, video, audio, and symbols to help clarify the meaning of the text.

Guidelines

The Web Content Accessibility Guidelines (WCAG), developed by the Worldwide Web Consortium (W3C), provide an international set of guidelines which form the basis of most web accessibility laws in the world.

Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies.

Text alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language

Time-based media: Provide alternatives for time-based media

Adaptable: Create content that can be presented in different ways

Distinguishable: Make it easier for users to see and hear content including separating foreground from background

Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.

Keyboard accessible: Make all functionality available from a keyboard

Enough time: Provide users enough time to read and use content, no timing, interruptions can be postponed or suppressed by the user except interruptions involving an emergency, when an authenticated session expires, the user can continue the activity without loss of data after re-authenticating

Seizures: Do not design content in a way that is known to cause seizures, nothing that flashes more than three times in any one second period

Navigable: Provide ways to help users navigate, find content, and determine where they are, bypass blocks, page titles, focus order, link purpose from text alone, breadcrumbs

Content is clear and limits confusion and ambiguity.

Readable: Make text content readable and understandable, identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon, abbreviations, difficult pronunciations

Predictable: Make Web pages appear and operate in predictable ways, consistent navigation, consistent identification

Input assistance: Help users avoid and correct mistakes, error prevention – reversible, checked, confirmed

A wide range of technologies can access the content.

Compatible: Maximize compatibility with current and future user agents, including assistive technologies. Elements have complete start and end tags, no duplicate attributes, IDs are unique. For all UI components, the name and role can be programmatically determined


Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component