Improve Website Accessibility Without Compromising Design

Website accessibility ensures everyone — including people with disabilities — can use and interact with your site. But a common misconception is that accessible websites must sacrifice visual appeal. At ALF Design Group, we believe that great design and accessibility go hand-in-hand.

In this guide, we’ll walk you through how to improve website accessibility without losing your brand’s aesthetic edge. Whether you're designing with Webflow or managing UX/UI in Figma, this article aligns with WCAG 2.1 AA guidelines, tailored for a Singapore audience.

Why Website Accessibility Matters

Accessibility improves the user experience for all users, not just those with permanent disabilities. In Singapore, accessible websites:

• Improve SEO rankings
• Reach a wider audience
• Comply with potential future regulations
• Show brand inclusivity and credibility

"15% of the world’s population lives with some form of disability" – World Health Organization

Read more about how UX improves conversions.

Understanding WCAG 2.1 Guidelines

WCAG (Web Content Accessibility Guidelines) is the international standard for digital accessibility. The 2.1 AA level is widely accepted for compliance.

The 4 main principles are:

• Preceivable: Users can perceive the content
• Operable: Users can navigate and interact
• Understandable: Information is clear and predictable
• Robust: Content works well across devices and assisstive technologies

Learn more from the official W3C WCAG Documentation.

Design Considerations for Accessibility

Colour Contrast

Ensure at least a 4.5:1 contrast ratio between text and background. This applies to buttons, links, and body text.

Tools: Stark Plugin for Figma, WebAIM Contrast Checker

Typography

• User a minimum of 16px for body text
• Stick to readable typefaces (sans-serif like Inter or Roboto)
• Maintain good line height (1.5x) for readability

See our recommendations on best Google Fonts for readability

Responsive Layouts

Avoid fixed widths. Use relative units (em/rem) and media queries to ensure legibility across screen sizes.

Visual Hierarchy

Use proper heading tags (<h1> to <h6>) for structure, not just styling. This aids screen readers and SEO.

Interactive & Navigation Accessibility

Keyboard Navigation

Ensure all interactive elements can be accessed via tab, arrow keys and enter/spacebar. Avoid hover-only menus.

Focus States

Highlight focused elements using visible outlines or styling. Never remove outline: none unless replaced properly.

Skip Links

Allow users to skip directly to main content, especially those using screen readers or keyboards.

Accessible Menus

• Use semantic HTML (<nav>, <ul>, <li>)
• Ensure dropdowns are accessible via keyboard

Check out our UX-focused post on sidebar navigation design

Content Accessibility

Alt Text for Images

Every non-decorative image must have descriptive alt text. Decorative elements should have alt="".

Form Accessibility

• Use <label> for every <input>
• Provide error messages with clear instructions
• Highlight focused fields visually

For tips on optimising user input, read out post on sign-up form design best practices

ARIA Labels & Roles

User ARIA (Accessible Rich Internet Applications) attributes for dynamic content like modals, tabs and sliders

Example: aria-expanded, aria-labelledby, role="dialog"

Multimedia: Captions and Transcripts

• Add captions to all videos
• Provide transcripts for audio-only content
• Avoid autoplaying media

Testing Tools and Best Practices

• Lighthouse (Chrome DevTools)
• axe DevTools (By Deque Systems)
• WAVE (Web Accessibility Evaluation Tool)
• NVDA/JAWS (Screen readers)
• VoiceOver (Mac)

Conduct manual testing + automated scanning regularly to ensure compliance.

Local Accessibility Context: Singapore & IMDA Guidelines

Singapore’s Infocomm Media Development Authority (IMDA) encourages digital inclusion through its Digital Accessibility Toolkit.

While not mandatory for private companies yet, it’s wise to:

• Follow IMDA's advisory on accessible web design
• Prepare for future legislation inspired by WCAG

How ALF Can Help with Accessible Web Design

At ALF Design Group, accessibility is a core component of our UX/UI design process. Whether it’s a full website build in Webflow or a design prototype in Figma, we:

• Audit existing websites for accessibility gaps
• Provide remediation services
• Build accessible designs from day one

Explore our article on web design best practices

Frequently Asked Questions (FAQs)

What is WCAG compliance?

WCAG stands for Web Content Accessibility Guidelines. Compliance ensures your site is usable by people with disabilities.

How do I check my website’s accessibility?

Use tools like Lighthouse, axe, or WAVE, and supplement with manual screen reader testing.

Can I make my Webflow site accessible?

Yes. Webflow supports semantic HTML, ARIA tags, and custom accessibility scripts. Our team specialises in this.

Is accessibility legally required in Singapore?

It’s not mandatory for all businesses yet, but following IMDA guidelines ensures your site is future-proof and inclusive.

Will accessibility affect my SEO?

Positively! Accessible sites are better structured for search engines and improve user engagement.

Conclusion

Accessibility is not just about compliance — it’s about inclusion, usability, and better design. At ALF Design Group, we believe accessible websites can be visually stunning, high-converting, and future-ready.

Looking to improve your website's accessibility? Contact us to book a free audit or consultation.

{{build-better-experience="/directory"}}