The ODC Forge-athon 2024 brought together some of the brightest minds in the OutSystems community, resulting in the creation of innovative components designed to push the boundaries of digital transformation. Among the projects, one component stood out for its focus on inclusivity and accessibility: “a11y”.
Developed by a talented team at As Raparigas do Código (ARdC), a Portuguese community that promotes women inclusion in IT, “a11y” aims to make web content more accessible to individuals with disabilities, addressing a critical need in today’s digital world.
The team was composed of ARdC mentor Nuno Reis, and students Ana Nunes, Barbara Meira, Dierli Santos, Renata Ribeiro,with the guidance of PhoenixDX’s Raphael Ranieri & Leonardo Fernandes.
Their combined skills and dedication to promoting inclusivity led them to develop a component that adheres to the Web Content Accessibility Guidelines (WCAG), ensuring that web content is accessible to all users, including those with disabilities.
Addressing the Accessibility Challenge
According to the Australian Human Rights Commission, approximately 15% of the global population lives with some form of disability. Inaccessible web content can significantly hinder these individuals’ ability to access essential services and information. The “a11y” component addresses this issue by providing a suite of tools designed to improve web accessibility, making it easier for developers to create inclusive digital experiences.
The “a11y” Component
The “a11y” component is designed to simplify the process of making web content accessible. Here are some of its key features:
- Contrast Enhancement: The component uses WebAIM’s API to automatically increase the contrast of buttons and text, ensuring that content is readable for users with visual impairments, such as colour blindness or low vision.
- Alternative Text for Images: By integrating the Azure OpenAI Vision Connector, “a11y” ensures that all images on a webpage have descriptive alt text. This feature is crucial for screen readers used by visually impaired users, as it allows them to understand the content of images.
- Form Labels: Missing labels on form inputs can make it difficult for users to fill out forms correctly. The “a11y” component adds these labels, improving the usability and accessibility of forms.
- Proper Headings: Headings are essential for navigation, especially for users relying on screen readers. “a11y” uses ChatGPT to suggest appropriate titles and H1 headings, ensuring that content is structured logically and is easy to navigate.
- Skip to Main Content Links: Skip links allow users to bypass repetitive navigation and go directly to the main content of a page. “a11y” creates these links and uses ChatGPT to generate labels in the site’s primary language.
- Language Identification: Correctly defining the language of a webpage is vital for assistive technologies. The component uses ChatGPT to identify and set the primary language, enhancing the browsing experience for users relying on screen readers.
How “a11y” Works for Developers
The “a11y” component is designed with simplicity in mind. Developers can easily add a block to their application layouts, which will automatically run accessibility checks and improvements on each page. This streamlined process makes it easier to maintain high accessibility standards across all web pages without extensive manual effort.
Monitoring and Reporting
In addition to its front-end features, “a11y” includes a back-office module that allows developers to monitor the accessibility status of each page over time. This module provides valuable insights and suggestions, helping developers, designers, and content authors continuously improve their work and ensure compliance with accessibility standards.
Next Steps: Continuing the Mission of Accessibility
The development team has great plans for the future of “a11y”. They aim to address additional accessibility issues and implement preemptive fixes to enhance the user experience further. The database design allows for the efficient storage and execution of JavaScript used for corrections, enabling faster updates and continuous improvement.
The Forge-athon Journey
The creation of “a11y” was part of the ODC Forge-athon 2024, a series of four virtual events designed to foster innovation and collaboration within the OutSystems community. The Forge-athon kicked off on April 30, 2024, with an introductory event where participants were divided into teams and tasked with brainstorming ideas for new Forge components. Over the next few weeks, the teams worked diligently to develop their ideas into functional components, culminating in a showcase event on June 4, 2024.
During the Forge-athon, teams presented their ideas, developed minimum viable products, and submitted presentation videos for judging. The judging criteria included technical approach, innovation, experience, use case relevance, and demo storytelling. OutSystems Senior Solution Architects Maria Martins and Sohel Sekha evaluated the submissions, providing detailed feedback to help teams refine their components.
A Word from the Team Leader
Nuno Reis, the team leader, shared his thoughts on the project: “Our goal was to make web accessibility as effortless as possible. Inspired by a User Group event in Porto, we tackled common accessibility issues and developed solutions that developers can implement quickly and efficiently. We believe in promoting inclusivity and ensuring that all users have equal access to web content.”
The ODC Forge-athon was a great opportunity for learning how to develop components on ODC and working with peers in the industry. We extend our heartfelt thanks to the judges, OutSystems Community Manager Sahiba Gulati, the mentors (Leonardo Fernandes, John Salamat, Raphael Ranieri, Hanno Coetzee, and Stuart Harris), all participants, and OutSystems for their support and dedication.
To learn more:
- Watch the presentation video on YouTube: https://youtu.be/ILeHdBxX0OA
- Join the OutSystems User Group Australia East Coast chapter to participate in future events: https://usergroups.outsystems.com/australia-east-coast/
- Sign up for Dev Digest to get the latest news and updates: https://phoenix-dx.com/dx-dev-digest/
