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 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.
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">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.
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 appropriate mark-up for headings, lists, tables, etc. HTML5 provides additional elements, such as
nav and aside, to better structure your content.
<section>
<article>
<h2>Superbear saves the day</h2>
<time datetime="2015-08-07">7 Aug 2015</time>
<p>The city's favorite bear</p>
<aside>
<h3>Related Articles</h3>
<ul>
<li>
<a href="#">Bear receives key to city</a>
</li>
</ul>
</aside>
</article>
</section>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"
id="search"
aria-describedby="search-help">
<div id="search-help">
Search records by customer id or name
</div>
<button type="submit">Go</button>
</div>
</form>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"
name="phone"
type="tel" pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
aria-describedby="phone-desc">
<p id="phone-desc">For example, (02) 1234 1234</p>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.
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%;
}
}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">
<ul>
<li><a href="...">Home</a></li>
<li><a href="...">Shop</a></li>
<li class="has-submenu">
<a aria-expanded="false"
aria-haspopup="true"
href="...">SpaceBears</a>
<ul>
<li>
<a href="...">
SpaceBear 6
</a>
</li>
</ul>
</li>
<li><a href="...">MarsCars</a></li>
<li><a href="...">Contact</a></li>
</ul>
</nav>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) {
toggleMenu(document.getElementById('eg-button-menu'));
}
});
buttonEg.addEventListener('click', function(e) {
// Toggle the menu on mouse click
toggleMenu(document.getElementById('eg-button-menu'));
});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.
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