Accessibility refers to the practice of making websites and web applications usable by as many people as possible, including those with disabilities. This practice ensures that all users, regardless of their physical or cognitive abilities, can access and effectively interact with web content.
Accessibility, sometimes abbreviated as “a11y”, is an exceptionally deep and broad topic. It encompasses many development and design choices at every level of the development and design process.
Our approach is to ensure Breakdance’s elements, by default, achieve the best accessibility possible. This does not guarantee your sites will be accessible, because many choices made after inserting the elements may negatively impact accessibility. As such, it is your responsibility to ensure any site you build meets any required standards.
Here are just a few of the ways we work to help make sites built with Breakdance more accessible.
When a sighted user navigates a site via keyboard only, they rely on a focus indicator, or visible outline, to show them which element they currently have “focused” for interaction.
Browsers by default handle this behavior, giving focusable elements a notable outline when they are focused. While some builders override this behavior, Breakdance lets the browsers apply their focus styles without interruption. This results in a more usable experience for everyone, including sighted keyboard navigation users.
Similarly, Breakdance respects the alt text that is designated in the WordPress media library, and synchronizes it with any images rendered in your designs. This means you don’t have to re-insert or update images in Breakdance to change their alt text. Simply change it in the media library and Breakdance respects the change.
By recognizing where the native defaults of WordPress and the browsers get it right, and making sure Breakdance doesn’t get in the way, we’re able to ensure a more accessible experience for users on all Breakdance-built sites.
Shockingly, many old-school builders are riddled with elements built using non-semantic HTML, resulting in the inability for users to interact with them via keyboard navigation. Obviously, this is a huge accessibility problem.
In Breakdance, our elements are built using proper HTML, which means they can easily be interacted with via the keyboard. Instead of working extra hard to re-create interactive elements like buttons using divs and JavaScript, we just use native buttons instead. It’s less work for us and a better experience for users.
This extends to advanced elements like the gallery, tabs, and menus, all of which were built to be navigable by keyboard as well as by a mouse or trackpad.
Screen reader friendliness is critically important, especially for interactive elements.
We use ARIA attributes and accessibility best practices to ensure screen readers read out the proper instructions, states, and details for interactive elements output by Breakdance.
This is evident in our WP Menu and Menu Builder elements. While many visual site builders struggle to provide an accessible menu by default, Breakdance’s menu elements excel in the arena of accessibility, providing all of the affordances that users of assistive technology need, expect, and deserve. Please check our Menu Accessibility documentation for additional information.
Animations in Breakdance honor the prefers-reduced-motion CSS media feature (MDN reference) based on a user’s device. If this setting is enabled, animations will be disabled, and the user will not see them.
Animations that this setting impacts in Breakdance include Scrolling and Entrance Animations and Popup Entrance and Exit Animations.
The options to reduce or remove animations/motion can generally be found in the following locations on most devices:
Accessibility doesn’t stop with us. Many choices you make, from font sizes, to colors, to the composition of your HTML can have an impact on accessibility.
To empower users to create the most accessible experiences possible, we provide the ability to add custom HTML attributes to most elements. This enables the use of ARIA attributes where appropriate with very little extra effort.
Additionally, our Element Studio feature allows you to alter the code of any element in Breakdance or create your own elements. This enables accessibility-focused developers to create hand-tailored markup, logic, and output to meet their specific requirements.
At Breakdance, we acknowledge that web accessibility is a moving target. As such, we have an ongoing dedication to continued improvement and maintenance of accessibility in Breakdance.
If you encounter any accessibility-related issues when building sites with Breakdance, please let our team know.
Here are a few of our favorite accessibility tools and resources.