Achieving WCAG A compliance for boards

Introduction

Padlet offers Boards as a versatile online collaboration tool that enables users to create and share content. On a board, users can post a wide range of multimedia, including text, images, videos, and links, in an organized and customizable space. As Padlet has evolved, so too has our commitment to inclusivity, ensuring that Padlet can be enjoyed by everyone, regardless of their abilities or how they navigate the web.

Hence, we began a new project focused on bringing Padlet’s Board product up to WCAG (Web Content Accessibility Guidelines) Level A standards. Engineers Estee Tey and Julian Almandos were tasked with fixing the tall mountain of accessibility issues. We also wanted to make sure that we were not just fixing a checklist but also ensuring that the enhancements support a wide range of accessibility needs. We prioritised enhancements like improved text alternatives for images, better keyboard navigation, and robust screen reader compatibility to achieve this.

We also wanted to publish a VPAT that clearly communicates our posture and, more importantly, lets users know the gaps. You can find it here. It is a work in progress, and we will continue to update it as we make progress.

Where can I see the accessibility features?

Most accessibility features are rather invisible to regular users; however, they can be found throughout the Padlet app, especially on the boards.

Who is it for?

The WCAG A compliance updates on Padlet’s Board product primarily benefit users who rely on assistive technologies like screen readers. However, these changes will improve usability for all users, including those with temporary impairments (like a broken arm to use a mouse) and preferential habits (an example being using a computer, and thus Padlet, primarily without a mouse).

Accessibility for all users

A clearer document structure

The boards page has been structured better so that screen users can jump to different sections and posts on the board more easily than before using heading landmarks.

Likewise for other interactive elements on the boards page.

Focusing on interactive elements

Focus is something that we tend to take for granted - be it the literal act of mentally focusing on an activity - or in this case, the focus on HTML elements on the web page.

There had been places on the Padlet board where some buttons could be clicked with a mouse, but could not be focused by using keyboard navigation, so users could not interact with these buttons with just the keyboard. We have fixed all the places where we found such an issue.

Other times, even though you can focus on buttons, it may not be obvious that the buttons are being focused due to the lack of visual feedback. We have done the work to hunt down such buttons and ensured that they now have a focus-visible style to indicate that it is being focused. An example of a common complaint in the past is the add post button, which is now fixed for both desktop and mobile viewports.

These changes benefit all users by making it easier to follow visual cues, avoid errors, and access essential features, especially for those who may rely heavily on keyboard navigation.

Captions

Captions are essential for accessibility because they ensure that content is accessible to individuals with various disabilities and enhance the overall user experience. While Padlet makes it easy to upload audio and video, creating captions was not always possible. We have taken the first step here by automatically generating captions for you when you upload an audio or a video using AI. We will improve it further by allowing captions editing so you can get them to the right quality with minimal effort.

Play/pause GIFs

For some users, they might get dizzy or uncomfortable with too much movement on their screens, so they would turn on a device setting known as "prefers motion reduced" to improve their internet browsing experience. On this front, Padlet has worked on a new feature to disable auto-playing of GIFs by default for such users. All users can click on GIFs on the board to play or pause the GIF.

For more information on how to check this preference on your device, you can refer to this troubleshooting document.

Accessibility settings

We have also added some helpful accessibility toggles under Dashboard > Settings > Accessibility.

Since the previous accessibility update, in addition to toggling single-key keyboard shortcuts (the full list can be found here), we have added a new setting for all users to toggle the feature of dismissing toast notifications automatically.

Disabling the auto-dismissal of app messages is helpful for users who require more time to read or to interact with the toast notification. All toast notifications can be dismissed manually by clicking on them directly regardless of the setting to unclutter your screen.

Accessibility for admins that use screen readers

• If you have multiple admins on a board, there is a chance where your peer admin updated the settings on their end and you wouldn’t even know. Now, we have added announcements for screen readers so that if you are on the settings panel while your peer admin updated the board’s title, description or post custom fields in real-time, you would hear about it too.
• In addition to wall settings update announcements, you can also hear announcements when the order of post custom fields has been reordered.
• We have also added a new feature of reordering these fields using just the keyboard.

What’s next?

Accessibility is a core aspect of Padlet's mission to make creating content fun, engaging and above all, open to everyone.

Moving forward, we aim to progress towards WCAG AA compliance, which would include further enhancements in contrast, focus visibility, and non-text elements. In addition to GIFs, we plan to continue adapting other media elements to align with accessibility settings, creating a smoother experience for those sensitive to visual stimuli.

We have created a detailed FAQ on accessibility addressing the common questions that users may have.

There may still be issues that we missed out on, so if you find something, please contact us, and we will address them at god speed.