Accessibility in Design

As we build products and services for Singaporeans, no one should be left behind. Whether it means building public kiosks for those who don't have internet access, ensuring legibility of content or writing things in an understandable manner.


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

Implementing UI Design

Most accessibility principles can be implemented very easily and will not impact the overall "look and feel" of a web site.

Provide sufficient contrast between foreground and background

Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements.

This does not apply for logos, or incidental text, such as text that happens to be in a photograph. Minimum contrast ratio (level AA) should be 4.5:1 and enhanced contrast ratio (level AAA) should be at least 7:1.

Do not use color alone to convey information

While color can be useful to convey information, color should not be the only way information is conveyed.

When using color to differentiate elements, also provide additional identification that does not rely on color perception. For example, use an asterisk in addition to color to indicate required form fields, and use labels to distinguish areas on graphs.

Ensure that interactive elements are easy to identify

Provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation. Ensure that styles and naming for interactive elements are used consistently throughout the website.

Provide clear and consistent navigation options

Ensure that navigation across pages within a website has consistent naming, styling, and positioning. Provide more than one method of website navigation, such as a site search or a site map. Help users understand where they are in a website or page by providing orientation cues, such as breadcrumbs and clear headings.

Ensure that form elements include clearly associated labels

Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right. Avoid having too much space between labels and fields.

Provide easily identifiable feedback

Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the page. Instructions should be easy to identify. Important feedback that requires user action should be presented in a prominent style.

Use headings and spacing to group related content

Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter, and make it easier to scan and understand.

Create designs for different viewport sizes

Consider how page information is presented in different sized viewports, such as mobile phones or zoomed browser windows. Position and presentation of main elements, such as header and navigation can be changed to make best use of the space. Ensure that text size and line width are set to maximize readability and legibility.

Display in a wide window with small text uses multiple columns for primary content, visible navigation options, and visible secondary information.

Display in a narrow window, such as a mobile phone, or with large text uses single column for primary content, navigation options are revealed using an icon, and secondary information is also revealed via icon.

Include image and media alternatives in your design

Provide a place in your design for alternatives for images and media. For example, you might need:

  • 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 controls for content that starts automatically

Provide visible controls to allow users to stop any animations or auto-playing sound. This applies to carousels, image sliders, background sound, and videos.


Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team