You should read this article if you want to create apps that just work well. Not only for people with disabilities but for everyone. Accessibility is a powerful toolâlearn how OutSystems makes it easier to build inclusive applications and why accessibility needs to be part of the process from start to finish.
And in case you missed it, this is the second in a two-part series on accessibility. Read our first article here đ
But first, a recap.
You may have heard of ADA and WCAG in the context of digital accessibility.
ADA (Americans with Disabilities Act): This legislation ensures equal access to services and content for individuals with disabilities. WCAG (Web Content Accessibility Guidelines): The internationally recognized guidelines for making web content more accessible to a broader audience.
The WCAG guidelines reference four key principles: perceivable, operable, understandable, and robust (POUR). There are three levels of compliance: A, AA, and AAA.
Level AA is a common organizational target, addressing the most significant barriers. For example:
Colour Contrast: Text should have sufficient contrast with its background to ensure legibility.
Navigability: Provide multiple ways for users to locate content, such as search, breadcrumbs, or a clearly defined menu structure.
Adaptive Layout: Pages should adapt to various screen sizes and orientations to ensure cross-device functionality.
Content Structure: Proper use of semantic HTML, such as headings and lists, helps users with screen readers navigate content.
Reminder: accessibility benefits everyone.
Itâs a common assumption that accessibility is about making apps usable for people with permanent disabilities. But accessibility promotes usability in a variety of circumstances:
Permanent Disabilities
Temporary Disabilities
Situational Disabilities
Think about using an app while holding a baby. Larger clickable button and link areas make it easier to interact with less precision. This best practice enhances usability for everyone, particularly in situational contexts.
OutSystems promotes accessibility, and you should take advantage of it.
The OutSystems ecosystem provides a variety of tools enabling designers and developers to build fully accessible applications. By understanding these features, you can identify quick wins and implement best practices more consistently with minimal effort.
1. Out-of-the-box UI Framework
Perhaps most foundationally, the OutSystems UI framework promotes accessibility at the component level. All the patterns are built with accessibility in mind.
What OutSystems includes: Pre-built components such as buttons, forms, menus, and inputs designed with accessibility principles (colour contrast, font size, spacing, focus management, navigation, and responsiveness) are all built-in.
Benefits: Reduces dev time with accessibility-ready components, ensuring consistent adherence to accessibility standards.
đĄ A tip! OutSystems is still custom development. As you adapt pre-built patterns, test and validate that the components continue to meet accessibility standards. This could mean verifying sufficient font sizing, colour contrast ratios, keyboard navigability, proper form labelling, and component responsiveness.
2. Accessible Color Palettes & Contrast Ratios
The base OutSystems theme offers a broad range of colour palettes that conform to WCAG contrast ratios, ensuring text is legible for users with visual impairments.
What OutSystems includes: Pre-configured colour palettes that meet contrast requirements.
Benefits: Reduces guesswork when choosing accessible colour schemes.
đĄ A tip! When incorporating your own custom or brand colours, or pairing colours with different backgrounds in your designs, use colour contrast validation tools (e.g. WebAIM contrast checker) to verify that your choices meet the minimum contrast ratios for readability.
3. Responsive Design
Responsiveness is built into the platform, making it easier to create apps that work well across all devices. Itâs important to consider this throughout design and development to fully leverage the capabilities.
What OutSystems includes: CSS flexbox and grid layouts, adaptive columns with breakpoints, and automatic scaling for images and media. Pre-built widgets stretch to fit screen sizes, and the navigation menu adapts based on device. You can also apply device-specific CSS styles (using .desktop, .tablet, and .mobile attributes) for further customization.
Benefits: Help create a consistent experience across devices, making your app more usable for a broad audience.
đĄ A tip! It's generally best to use out-of-the-box components as much as possible. When creating a new screen, think about how those components should adapt across different devices. Establishing standard layouts and predefined behaviours for common screen sizes can also streamline the process and help promote consistency.
4. Warning, Error Messages, and System Feedback
Communicating warnings, errors, and system feedback is not just for accessibility but a general design best practice to ensure clarity and guide users through issues. OutSystems offers several patterns to promote this.
What OutSystems includes: Pre-built components for displaying warnings, errors, and system feedback. That includes toast notifications, inline error messages, and customizable modal dialogues. Forms also offer built-in validation to provide visual feedback for invalid inputs, helping users immediately fix mistakes.
Benefits: Clear feedback makes a big difference in how users experience your app. It keeps them informed about whatâs happening and can help guide them through obstacles.
đĄ A tip! When you write error messages or system feedback, keep them short, direct, and easy to understand. Use visual cues like semantic colours (green, yellow, red), but avoid relying on colour aloneâadd text labels or icons to help users who are colorblind.
5. Navigation and Findability
Good navigation ensures users can easily find what they need. Like many other items on this list, it is essential for both accessibility and general usability.
What OutSystems includes: A range of pre-built navigation patterns that follow best practices, including menus, sub-menus, breadcrumbs, and search functionalities.
Benefits: Clear and intuitive navigation makes it easier for users to find what they're looking for, complete tasks more efficiently, and improve the overall user experience.
đĄ A tip! Sometimes, it's okay to be redundant. Providing multiple pathways to the same destination can improve findability and give users flexibility in how they navigate, which can increase their chance of locating what they need.
6. Semantic HTML & ARIA Roles
OutSystems components are built with proper semantic HTML and ARIA roles, making it easier for assistive technologies to interpret content.
What OutSystems includes: Semantic HTML structures (e.g., headings, paragraphs, lists) and ARIA roles (e.g., button, navigation, main) are built into respective pre-built components by default.
Benefits: Ensures app compatibility with assistive technologies and gives users a logical, accessible structure.
đĄ A tip! When developing accessible content, remember to include alt text for images. Alt text helps screen readers communicate the meaning of images for visually impaired users. Itâs also a front-end best practice, for many reasons beyond accessibility.
7. Focus State, Skip-to-Content Links, and Enhanced Contrast
In addition to the core platform components mentioned above, OutSystems offers an additional set of built-in accessibility features that can be enabled.
What OutSystems includes: Focus indicators that highlight the active element, skip-to-content links for faster navigation, and customizable contrast options to improve visibility for users with low vision.
Benefits: These features ensure better navigation and overall usability, particularly for users who depend on assistive technologies.
đĄ A tip! Donât just activate these featuresâthink about how they integrate into the flow. For example, test how focus indicators help users move from one element to another and whether skip-to-content links really speed up navigation in a busy interface.
It's not just about tools, it's about the process.
While OutSystems provides excellent accessibility tools, remember that tools alone won't make your app fully accessible. If accessibility is a priority on your project, designers, developers, and QA testers need to incorporate it throughout the process.
During Design
A good way to make accessibility a fundamental part of design is to familiarize yourself with the WCAG checklist. This can help ensure you're addressing the full range of accessibility needs. Think about colour contrast and font sizes for readability, navigation (e.g., keyboard accessibility), feedback (e.g., error messages, system notifications), and responsiveness as you design components and screens so it doesn't become an afterthought.
đ ď¸ A tool! Comprehensive WCAG Checklist
During Development
Make building things properly the first time around part of your best practices. Ensure all interactive elements are keyboard navigable and have visible focus indicators. Maintain a logical focus order for easy navigation, especially in forms and dynamic content. Provide alt text for images and ensure content is responsive across devices. You can also leverage built-in or plug-in browser tools to identify and fix accessibility issues as you build.
đ ď¸ A tool! Chrome DevTools Accessibility Reference
During Testing
Testing is always incredibly important to identify barriers that may not have been obvious during design or development. Itâs often helpful to test by simulating real-world scenarios. Validate usability across different devices and browsers to ensure responsiveness. Verify that keyboard navigation works smoothly and all form errors are clearly identified. If required, test with assistive technologies like screen readers to verify that content is rendered as expected.
đ ď¸ A tool! WAVE (Web Accessibility Evaluation Tool)
The real value of accessibility is more than compliance.
Meeting ADA and WCAG requirements is important for legal reasons, but accessibility's real value lies in the user experience. By making your app more inclusive, you're ensuring that more people can use it, which can lead to increased engagement, a broader user base, and even better brand reputation.
Accessibility is a journey đââď¸! With OutSystems, you have the tools to get started, but it's up to you to make accessibility a core value throughout your design and development process.
