In our ongoing commitment to improving user experience, we have recently implemented several changes to our address autocomplete feature to make it more accessible to individuals with visual impairments. We understand the importance of inclusive design and believe that technology should be accessible to everyone.
In this blog, we’ll discuss recent updates introduced to our DOTS Global Address Complete dropdown. These changes will help ensure it is easily visible for those with visual impairments, incorporating Accessible Rich Internet Applications (ARIA) attributes. These enhancements aim to improve compatibility with screen readers, fostering a more inclusive browsing experience.
Improving Visibility for the Visually Impaired
High Contrast and Clear Text
We started by enhancing the visual contrast of the address autocomplete dropdown. The background color was adjusted to provide a higher contrast against the text, making it easier for users with low vision to distinguish between the suggestions.
Large Text and Spacing
To accommodate users who may require larger text sizes, we increased the font size within the dropdown. Additionally, we added ample spacing between each suggestion to prevent visual clutter, aiding users in focusing on individual items.
Focus Highlighting
To assist users who navigate through the interface using the keyboard, we have implemented a clear focus highlighting mechanism. As users tab through the suggestions, a visible outline now indicates the currently focused address, ensuring a seamless keyboard navigation experience.
Making Address Autocomplete Accessible with ARIA Attributes
ARIA Roles and States
We integrated Accessible Rich Internet Applications (ARIA) attributes into our address autocomplete dropdown. Each suggestion now includes ARIA roles and states, such as role=”option” and aria-selected, providing valuable information to screen readers about the nature and selection status of each item.
Live Region Updates
We incorporated ARIA live regions to announce changes in the autocomplete dropdown dynamically. When a new suggestion appears or when a selection is made, screen readers will instantly provide feedback, keeping users informed and engaged.
Descriptive ARIA Labels
To enhance the clarity of the information presented to users, we added descriptive ARIA labels to each suggestion. These labels offer concise details about the address, ensuring that screen reader users receive accurate and meaningful information.
Testing and User Feedback
Throughout the implementation process, we conducted extensive testing with users who rely on screen readers. Their valuable feedback allowed us to iterate and refine our design, ensuring that the address autocomplete feature is truly accessible and user-friendly.
Conclusion: A Commitment to Inclusive Design
We believe that technology should be accessible to everyone. These recent enhancements to Global Address Complete are a testament to our commitment to inclusive design. We will continue to listen to user feedback, stay informed about accessibility best practices and work towards creating digital experiences that empower all individuals, regardless of their abilities.
As we move forward, we encourage other organizations to prioritize accessibility in their digital products, fostering a more inclusive online environment for everyone. Together, we can build a web that is truly accessible to all.
