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

Accessibility in Code


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 design in code

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

Associate Label With Every Form Control

Use a for attribute on the label element linked to the id attribute of the form element, or using WAI-ARIA attributes. In specific situations, it may be acceptable to hide label elements visually, but in most cases labels are needed to help all readers understand the required input.

<label for="username">Username</label>
<input id="username" type="text" name="username">
Include Alternative Text For Images

Ensure that alternative text for images is added to all informational and functional images. Use empty alternative text, alt="" for decorative images, or include them in the CSS instead. Text alternatives are usually provided by those responsible for written content.

Identify Page Language & Language Changes

Indicate the primary language of every page by using the lang attribute in the html tag, for example html lang="en". Use the lang attribute on specific elements when the language of the element differs from the rest of the page.

Use Mark-Up To Convey Meaning & structure

Use appropriate mark-up for headings, lists, tables, etc. HTML5 provides additional elements, such as nav and aside, to better structure your content.

      <h2>Superbear saves the day</h2>
      <time datetime="2015-08-07">7 Aug 2015</time>
      <p>The city's favorite bear</p>
          <h3>Related Articles</h3>
                  <a href="#">Bear receives key to city</a>

WAI-ARIA roles can provide additional meaning, for example, using role="search" to identify search functionality.

<form action="#" method="post">
  <div role="search">
      <label for="search">Search for</label>
      <input type="search"
      <div id="search-help">
          Search records by customer id or name
      <button type="submit">Go</button>
Help Users Avoid & Correct Mistakes

Provide clear instructions, error messages, and notifications for users to complete forms on your site. When an error occurs:

  • Help users to identify where the problem is.
  • Provide specific and understandable explanations.
  • Suggest corrections.

When processing user inputs, be accepting of different formats and variations. For example, accept phone numbers that include spaces and delete the spaces if needed.

<label for="phone">Phone</label>
<input id="phone"
     type="tel" pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
<p id="phone-desc">For example, (02) 1234 1234</p>
Reflect The Reading Order In The Code

Ensure that the order of elements in the code matches the logical order of the information presented. One way to check this is to remove the CSS styling and review the content.

Write Code That Adapts To The User’s technology

Use responsive design to adapt the display to different zoom states and viewport sizes, such as on mobile devices and tablets. When font size is increased by at least 200%, avoid horizontal scrolling and prevent any clipping of content. Use progressive enhancement to help ensure that core functionality and content is available regardless of technology being used.

/*On narrow viewports, make the navigation full width*/
@media screen and (min-width: 25em) {
  #nav {
      float: none;
      width: auto;
  #main {
      margin-left: 0;
/*On wider viewports, put the navigation on the left*/
@media screen and (min-width: 43em) {
  #nav {
      float: left;
      width: 24%;
  #main {
      margin-left: 27%;
Provide Meaning For Non-Standard Interactive elements

Use WAI-ARIA to provide information on function and state for custom widgets, such as accordions and custom-made buttons. For example, role="navigation" and aria-expanded="true". Additional code is required to implement the behavior of such widgets, such as expanding and collapsing content or how the widget responds to keyboard events.

<nav aria-label="Main Navigation" role="navigation">
      <li><a href="...">Home</a></li>
      <li><a href="...">Shop</a></li>
      <li class="has-submenu">
          <a aria-expanded="false"
                  <a href="...">
                      SpaceBear 6
      <li><a href="...">MarsCars</a></li>
      <li><a href="...">Contact</a></li>
Ensure That All Interactive Elements Are Keyboard Accessible

Think about keyboard access, especially when developing interactive elements, such as menus, mouseover information, collapsable accordions, or media players. Use tabindex="0" to add an element that does not normally receive focus, such as div or span, into the navigation order when it is being used for interaction. Use scripting to capture and respond to keyboard events.

var buttonEg = document.getElementById('eg-button');
buttonEg.addEventListener('keydown', function(e) {
  // Toggle the menu when RETURN is pressed
  if(e.keyCode && e.keyCode == 13) {
buttonEg.addEventListener('click', function(e) {
  // Toggle the menu on mouse click
Avoid CAPTCHA Where Possible

CAPTCHAs create problems for many. We recommend that you adopt other verification methods, such as automatic detection or interface interactions.

If CAPTCHA needs to be included, you should ensure that it is simple to understand and user-friendly for those with disabilities, such as:

  • Provide more than 2 ways to solve the CAPTCHAs.
  • Provide access to a human representative who can bypass CAPTCHA.
  • Not requiring CAPTCHAs for authorized users.


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