I’ve been working with Kadence Theme and Blocks for a few years, and I still prefer it over many others because of its continuous improvements on Accessibility.
Note: Kadence theme and Kadence Blocks work closely together. Their features are connected, so I will list them in the same list.
The Skip link
- The Skip link is present and is the first focusable element on the page.
- It is visible when focused and it points to the first focusable element (link) on the page;
- it uses the “screen-reader-text” class available for screen-reader users;
- Focus visible meets at least WCAG AA color contrast.
Controls
Interactive elements like <a> (links), <button> (buttons), and <input> (form inputs) are keyboard-accessible by default. Kadence uses visible focus styles to ensure accessibility for all of them.
- All the buttons, links and inputs are fully operable using keyboard navigation: Tab for moving forward, shift-tab for moving backward and enter for selecting.
Navigation Menu
- The navigation uses <nav> landmark.
- The main menu and dropdowns are navigable using Tab, Shift+Tab, Enter / Space;
- Drop-down menu is visible on hover and can be styled.
- Mobile menu: the open button supports aria-label=”Open Menu” and the close button aria-label=”Close-Menu”;
- Mobile drop-down uses a button for opening the sub-menu with aria-expanded=”true” or “false”.
Clean Code
- Kadence Theme and Blocks generates clean, semantic HTML, support for chosing the proper HTML markups (section, aside) and all the elements use the proper tags: nav, links, images, quotes, buttons.
Headings
Headings level can be easily adjusted to fit the page structure, with flexible size options. This functionality is available for simple pages, custom queries, and archive pages, ensuring proper content hierarchy.
Helper classes
The screen-reader-text class is available for all the elements that are required to provide useful functionalities or content for screen-reader users, being hidden for sight users.
Images
Kadence blocks supports adding alt-text in the editor, as a core WordPress feature.
Conclusion
The accessibility features in the Kadence theme and blocks are a great starting point, but they don’t guarantee full WCAG compliance. Building an accessible website is a collaborative effort between designers, developers and content creators and it goes far beyond what any theme can offer out of the box.
Resources:
Make WordPress Theme Handbook – Accessibility, WP Page Builder Accessibility Comparison, J. Dolson – WordPress: Accessibility LinkedIn Course
