Filestack V3.29.0: A More Accessible Experience (WCAG 2.0 Compliant)

We are thrilled to announce the release of Filestack V3.29.0, which brings with it a range of exciting enhancements in accessibility. This latest update is designed to align with the WCAG 2.0 Level AA standards, ensuring a more inclusive and user-friendly experience for all our users, especially for those using assistive technologies.

Why Accessibility Matters

At Filestack, we believe that everyone should have equal access to technology. We understand the importance of accessibility in today’s digital landscape and strive to make our platform as inclusive as possible. By adhering to WCAG 2.0 Level AA standards, we are taking a significant step toward creating a more accessible and inclusive environment for all our users.

Accessibility is not just a checkbox or a legal requirement; it has a profound impact on the lives of individuals with disabilities. When we prioritize accessibility, we empower individuals with disabilities to fully participate in society and unlock their potential.

Key Updates

Integration of Alt Text from Unsplash: Painting a Picture with Words

We have integrated Alt text from Unsplash to Filestack, making images accessible for visually impaired users. This update ensures that our visually impaired users can benefit from the content shared through images. Imagine being able to experience and appreciate the beauty of a photograph, even without seeing it!

Keyboard Navigation in Unsplash Search: Empowering Effortless Exploration

The Unsplash search list within Filestack is now fully navigable using keyboard commands. This enhancement will facilitate easier image selection for users with physical impairments, allowing them to navigate through the search list effortlessly. They will be able to explore a vast collection of images at their fingertips, without needing to rely solely on a mouse or trackpad!

Accessible Name for ‘Search Image’ Button: Clearing the Path for Seamless Interaction

We have given the ‘Search Image’ button an accessible name, removing confusion for screen reader users. This improvement ensures that screen reader users can easily identify and interact with the button, enhancing their overall experience.

Separation of ‘Upload More’ and ‘Upload’ Buttons

To improve clarity, we have separated the ‘Upload More’ and ‘Upload’ buttons in the file upload dialog. Now, these buttons are announced as separate entities by screen readers. This enhancement eliminates any confusion that screen reader users may have faced previously.

Technical Improvements

To achieve the key updates mentioned above, we have made several technical improvements:

Enhancing Filestack JavaScript and CSS code

Javascript and CSS code enhancements have been implemented for keyboard accessibility, based on W3C ARIA practices.

W3C ARIA, also known as the Web Accessibility Initiative – Accessible Rich Internet Applications, is a set of technical specifications developed by the World Wide Web Consortium (W3C). ARIA provides a way to enhance the accessibility of web content and applications for people with disabilities.

Adding aria-label Attributes

Aria-label attributes have been added to buttons to improve screen reader interpretation. The aria-label attribute is an HTML attribute that provides a text alternative for an element when the text content alone is not sufficient to convey its purpose or meaning. It is used to improve the accessibility of web content for individuals using assistive technologies, such as screen readers.

The benefits of using aria-label attributes include:

1. Accessibility: By providing a descriptive label, screen readers can accurately convey the purpose or function of an element to visually impaired users. This ensures that users relying on assistive technologies can understand and interact with the content effectively.
2. Clarity and comprehension: aria-label attributes help to clarify the purpose of an element, especially when the visual appearance or context may not provide enough information. This is particularly important for elements like buttons or icons that may not have visible text labels.
3. Localization and internationalization: aria-label attributes are used to provide translations or localized text for elements, allowing for a more inclusive experience for users accessing the content in different languages or regions.
4. Consistency: aria-label attributes help maintain consistency in how elements are announced by screen readers. By providing explicit labels, developers can ensure that the same information is consistently conveyed to users, regardless of their assistive technology or device.

Overall, using aria-label attributes improves the accessibility and usability of web content, making it more inclusive and accommodating for individuals with disabilities.

Modify span elements with role=”button”

Span elements with role="button" have been modified to ensure correct screen reader announcements.

The role attribute in HTML code is used to define the purpose or type of an element. It helps to provide additional semantic information about an element’s function or behavior, enhancing accessibility for users with disabilities.

Here are some benefits of using the role attribute:

1. Accessibility: By assigning appropriate roles to elements, developers can convey their intended meaning to assistive technologies. This ensures that users relying on screen readers or other assistive devices can understand and interact with the content effectively.
2. Semantic clarity: The role attribute provides a clear and consistent structure to web content. It allows developers to explicitly define the purpose of elements, even when their default behavior may not be apparent or when custom elements are used.
3. ARIA support: The role attribute is commonly used in conjunction with ARIA (Accessible Rich Internet Applications) attributes to enhance the accessibility of complex web interfaces. It enables developers to create accessible interactive components, such as menus, sliders, tabs, and more.
4. Compatibility with older browsers: In older versions of HTML, certain elements didn’t have specific roles. By adding the role attribute to these elements, developers can ensure that assistive technologies still understand their purpose, even in older browsers.
5. Customization: The role attribute allows developers to create custom elements and define their behavior for assistive technologies. This is useful when building complex web applications or user interfaces.

The role attribute plays a crucial role in enhancing the accessibility and usability of web content, making it more inclusive for individuals with disabilities.

Benefits for Users

The enhancements introduced in Filestack V3.29.0 offer numerous benefits to our users. Some of these benefits are:

1. A more seamless and intuitive user experience, regardless of their assistive technologies or disabilities.
2. Enhanced compatibility with screen readers, allowing users with visual impairments to navigate and interact with Filestack more effectively.
3. Enable screen reader users to easily identify and interact with the Filestack buttons.

Conclusion

At Filestack, we are committed to making our tool accessible to all users. With the release of Filestack version 3.29.0, we have taken significant steps to improve accessibility, aligning with WCAG 2.0 Level AA standards. We are proud to provide a more inclusive and user-friendly experience for all our users, ensuring that everyone can leverage the full potential of our platform, regardless of their abilities or assistive technologies. We will continue to prioritize accessibility in future updates, as we believe that technology should be accessible to everyone, without barriers.

We look forward to hearing your feedback and believe that these enhancements will greatly benefit our users. Stay tuned for more updates from Filestack!