---

Imagine you run a bakery in Toa Payoh and a customer in a wheelchair cannot read your menu or place an order online because your website requires a mouse to navigate. Or imagine someone with poor eyesight cannot read your promotions because the text is too small. These are not edge cases - in Singapore, about 8% of the population lives with some form of disability, and accessibility laws are tightening. If your website is not accessible, you are not just excluding potential customers - you may also be breaking the law. The Web Content Accessibility Guidelines, commonly known as WCAG, are the international standard for website accessibility. The latest version, WCAG 2.2, introduced new requirements that every Singapore business owner with a website needs to understand. This guide will walk you through what changed in WCAG 2.2, why it matters for your business, and exactly what steps you need to take to bring your website up to standard.

The Ministry of Digital Development in Singapore has been increasingly focused on digital accessibility. Under the amended Prevention of Disabilities Act and related government initiatives, public-facing websites for businesses - especially those receiving government grants or operating in regulated industries - may soon face mandatory accessibility requirements. Even if your website is not yet legally required to be fully accessible, search engines like Google now treat accessibility as a ranking factor. Websites that are easier for everyone to use - including people with disabilities - tend to rank higher in search results. This means accessibility is not just about doing the right thing; it directly impacts your visibility on Google and your bottom line. Whether you operate a small retail shop, a professional services firm, or an e-commerce store, making your website accessible expands your potential customer base and protects your business from future compliance risks.

What is WCAG 2.2 and How Does It Differ from WCAG 2.1

WCAG stands for Web Content Accessibility Guidelines. These guidelines are developed by the World Wide Web Consortium (W3C) and are the global standard for making website content accessible to people with disabilities. WCAG 2.1 was released in 2018 and introduced 17 new success criteria. WCAG 2.2, released in October 2023, builds on version 2.1 by adding 9 new success criteria and removing 1, bringing the total to 50 success criteria across four main principles: Perceivable, Operable, Understandable, and Robust (often remembered by the acronym POUR).

The key new additions in WCAG 2.2 focus on cognitive accessibility and mobile usability. Several new criteria specifically address users with cognitive disabilities, including requirements for consistent navigation, consistent help mechanisms, and not removing focus unless the user intentionally hides it. There are also new requirements around the size of interactive targets on mobile devices and authentication processes that do not rely solely on cognitive function tests. Understanding these changes is essential for any business owner who wants to stay ahead of accessibility compliance and serve all customers effectively.

Step 1: Check Your Current Accessibility Status

Before you can improve your website accessibility, you need to know where you currently stand. The best way to do this is to run an accessibility audit using free or low-cost tools available online.

Start by visiting the WAVE Web Accessibility Evaluation Tool at wave.webaim.org. This free tool allows you to enter your website URL and instantly see accessibility errors highlighted directly on your page. WAVE will identify issues like missing alt text on images, empty links, missing form labels, contrast problems, and many other common accessibility violations. For Singapore business owners, WAVE is an excellent starting point because it is free, requires no technical knowledge to use, and gives you immediate visual feedback about what needs fixing on each page of your website.

Another excellent free tool is the Google Lighthouse accessibility audit, which is built directly into the Chrome web browser. Simply open your website in Chrome, right-click anywhere on the page, and select Inspect to open the developer tools. Click on the Lighthouse tab in the developer tools panel. Select Accessibility as the category you want to audit, leave the other categories unchecked, and click Analyze page load. Within seconds, Google Lighthouse will give your website an accessibility score out of 100 and list specific issues you need to address. This score tells you approximately how accessible your website is today and serves as a useful benchmark to measure your progress against after you make improvements.

A third tool worth using is the axe DevTools browser extension by Deque Systems. This is a free browser extension available for Chrome and Firefox that performs comprehensive accessibility audits as you browse. Unlike WAVE which works on a single URL at a time, axe DevTools can scan individual sections or components of your page and give you detailed information about each accessibility violation, including which WCAG success criterion is being violated and why it matters. Installing and running these three tools across your key website pages will give you a comprehensive understanding of your current accessibility status before you begin making changes.

Step 2: Fix Images and Media to Meet Perceivability Standards

One of the most common accessibility issues found on Singapore business websites is missing or poor quality alt text on images. Alt text, which stands for alternative text, is a written description of an image that is read aloud by screen reader software used by visually impaired visitors. Every image on your website that conveys information must have descriptive alt text. This includes photographs of your products, infographics showing data, diagrams explaining processes, and any other image that carries meaning beyond pure decoration.

To add alt text to images on your website, log into your website content management system. If you use WordPress, go to the Media Library, click on any image, and look for the Alt Text field in the attachment details panel on the right side. Enter a clear, concise description of what the image shows. For example, if you run a restaurant and have a photo of your signature Hainanese chicken rice, the alt text should read something like "A plate of Hainanese chicken rice with sliced cucumber, coriander, and chili sauce on a restaurant plate." If you use Shopify, go to Products in your admin panel, click on a product, and you will find the Alt Text field in the media section. For other platforms, look for image settings or attachment details where alt text can be entered. Do not leave alt text blank or fill it with keywords just for SEO purposes - screen reader users depend on accurate descriptions to understand your visual content.

Beyond alt text, you also need to ensure that any videos on your website have captions and audio descriptions. If you post promotional videos about your business on your website, those videos must include closed captions for deaf or hard-of-hearing users. Many video platforms like YouTube automatically generate captions, but you should always review and correct these auto-generated captions because they frequently contain errors, especially with Singapore-specific terms like "Laksa," "Char Kway Teow," or "HDB." If your video contains important visual information that is not explained in the audio track, you also need to provide audio descriptions, which is a separate audio track that describes visual elements for blind users. Captions and audio descriptions can typically be added through your video platform's settings or through your website's media management tools.

Step 3: Make Navigation and Interactive Elements Keyboard Accessible

A critical accessibility requirement that many Singapore business owners overlook is keyboard accessibility. Many users with motor disabilities cannot use a mouse and rely entirely on their keyboard to navigate websites. They use the Tab key to move between links and interactive elements, the Enter key to activate them, and arrow keys to navigate within menus and form controls. If your website requires a mouse to access important content or complete transactions, these users cannot use your site.

To test if your website is keyboard accessible, simply unplug your mouse or turn off your trackpad and try to navigate your entire website using only your keyboard. Can you access the main menu? Can you open and close dropdown menus? Can you fill out and submit your contact form? Can you add items to your shopping cart and checkout? If the answer to any of these questions is no, you have a keyboard accessibility problem. Common fixes include ensuring all interactive elements like buttons, links, and form fields have visible focus indicators (usually a colored outline that appears when you tab to an element), making sure dropdown menus can be opened and closed with the keyboard, and ensuring that no interaction requires simultaneous key presses or complex gestures.

Focus indicators are particularly important. When a keyboard user tabs to a link or button, there must be a visible highlight showing which element is currently active. If your website uses custom CSS that removes the default browser focus outline, you may be breaking keyboard navigation for your users. Check your website stylesheet and ensure that focus states are defined for all interactive elements. A simple CSS rule like adding "outline: 3px solid #0056b3" to your focus styles can make a significant difference for keyboard users. Many WordPress themes and website builders now include built-in accessibility features for keyboard navigation, so check your theme settings before making manual CSS changes.

Step 4: Address the New WCAG 2.2 Requirements Specifically

WCAG 2.2 introduced several new success criteria that were not part of WCAG 2.1. Understanding these new requirements is essential for bringing your website fully up to date with current accessibility standards.

The first new criterion is Focus Not Obscured (Minimum), which requires that when a component receives keyboard focus, it must not be completely hidden by sticky headers, pop-ups, or other overlapping content. Imagine a user tabs to a form field but a floating cookie consent banner completely covers it - this violates this criterion. Check your website for any fixed or sticky elements like navigation bars, cookie banners, or chat widgets that might be covering focused elements. Reposition these elements so they do not block interactive components when users navigate with the keyboard.

The second new criterion is Focus Appearance, which goes a step further and requires that the visible focus indicator must be at least 3 pixels thick and must have a contrast ratio of at least 3:1 against the background. Many websites have subtle focus indicators that are barely visible, which creates problems for users with low vision. Review your CSS focus styles and ensure they meet these minimum size and contrast requirements. This is a common issue even on professionally designed websites and may require adjustments to your theme's stylesheet.

The third important new criterion relates to target size, particularly for mobile users. WCAG 2.2 requires that interactive targets like buttons and links on mobile or touch devices must be at least 24 by 24 pixels in size. Many Singapore business websites have tiny buttons on their mobile versions - small "Add to Cart" buttons or cramped menu items that are difficult for users with motor impairments to tap accurately. Check your website on a mobile device and ensure all buttons and interactive elements are large enough to be tapped easily without accidentally triggering adjacent elements. This is especially important for e-commerce websites where small buttons can directly impact your ability to convert mobile customers.

Step 5: Improve Color Contrast Across Your Website

Color contrast is one of the most frequently violated accessibility requirements on Singapore business websites. Contrast refers to the difference in brightness between your text color and the background color behind that text. If your text is too similar in brightness to its background, users with low vision, color blindness, or simply aging eyes will struggle to read your content. WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18 point font or 14 point bold font).

To check color contrast on your website, use the WebAIM Contrast Checker at webaim.org/resources/contrastchecker. Enter your text color hex code and your background color hex code, and the tool will instantly tell you whether your contrast meets WCAG standards. You can find hex color codes in your website's stylesheet or by using a color picker tool in your browser's developer tools. Common contrast problems on Singapore business websites include light gray text on white backgrounds, dark blue text on slightly lighter blue backgrounds, and colored text over colored backgrounds without sufficient distinction. Use the contrast checker to audit your key pages, especially your homepage, service pages, and any promotional content where readability is critical for converting visitors into customers.

Fixing contrast issues typically involves adjusting your website's color palette. If your brand colors do not meet contrast requirements, you may need to use darker shades for text or lighter shades for backgrounds. Tools like Coolors.co can help you generate accessible color palettes that meet WCAG contrast requirements while still looking professional. Many website builders and WordPress themes also include accessibility settings that can automatically adjust contrast, so check your platform's documentation before manually editing CSS files.

Step 6: Add Proper Labels and Instructions to All Forms

Forms are where many Singapore business websites fail accessibility checks. Whether it is a contact form, a newsletter signup, a booking request, or an e-commerce checkout, forms are essential interactive elements that must be accessible to all users. Screen reader users rely on form labels to understand what information they need to enter in each field. Without properly associated labels, a screen reader might just announce "text field" without telling the user what that field is for - like "email address," "phone number," or "message."

Every form field on your website must have a visible text label that is programmatically associated with the input field. In HTML, this means using a label element with a "for" attribute that matches the "id" attribute of the input element. If you use a website builder or WordPress contact form plugin, look for settings that allow you to add labels to each field. Many form builders have a "label" field where you enter the description that will be shown to users. Never use placeholder text as a substitute for labels - placeholder text disappears when users start typing, which creates confusion, and screen readers may not read placeholder text reliably.

Additionally, forms should include clear error messages and instructions. If a user makes a mistake filling out your form - like entering an invalid email address or leaving a required field empty - the error message should clearly explain what went wrong and how to fix it. Avoid technical error messages like "Invalid input" or "Error 402." Instead, use friendly, specific messages like "Please enter a valid email address including the @ symbol" or "This field is required, please enter your phone number." Form validation should be both visual and programmatic so that screen reader users are also alerted to errors when they occur.

Step 7: Create an Accessibility Statement and Keep It Updated

While not technically required under WCAG for all websites, having a clearly written accessibility statement demonstrates your commitment to serving all customers, including those with disabilities. An accessibility statement should explain your website's accessibility features, known limitations if any, and contact information so users can report issues or request assistance.

Your accessibility statement should include a list of which WCAG success criteria your website currently meets, information about any assistive technologies your website is designed to work with, contact details for your website administrator or support team, and the date when the accessibility statement was last reviewed. Many government and large corporate websites now publish accessibility statements as a standard practice, and doing so for your Singapore business website shows professionalism and social responsibility.

Keep your accessibility statement up to date by reviewing it every time you make significant changes to your website, such as launching a new design, adding new functionality, or publishing new content types. If users report accessibility problems to you, take those reports seriously and update your statement to reflect any known issues or planned fixes. Treating accessibility as an ongoing commitment rather than a one-time project will help you maintain an inclusive website that serves all your customers effectively over time.

Making your website accessible is not just about compliance with international guidelines - it is about ensuring that every potential customer in Singapore can access your products, services, and information regardless of their abilities. The steps in this guide may seem technical, but many of them can be implemented without coding knowledge, especially if you use a modern website builder or content management system with built-in accessibility features. Start with the free audit tools mentioned in Step 1 to understand your current status, then work through each area systematically. If you encounter technical challenges or need hands-on help implementing accessibility fixes, WebCareSG offers free website health checks to identify and resolve accessibility issues. Making your website accessible is an investment that expands your customer base, improves your search engine rankings, and demonstrates that your business values every customer equally.

If you still need help, feel free to contact us at https://webcare.sg/contact for a free website health check.

---