My client is committed to providing websites that adhere to WCAG as much as possible. They employ a common site builder, Beaver Builder. And while Beaver Builder is working hard to bring acccessibility to their components, there is a lot of working that remains.

For the client, we prioritized a couple of components that they regularly deploy on sites: accordions, mega menus and a search plugin, Ivory Search.

Once the client has added components to their design, they can “flag” components using a custom css class and my plugin will insert aria markup (as well as supporting javascript) to decorate the components with appropriate markup suitable for use with screen readers and other technologies.

It was important that we could easily add additional components to be “decorated” if the Beaver Builder deployment of suitable accessible markup lagged.