Greyd.Suite is the first all-in-one WordPress suite, integrated with WordPress Block Editor. Built as a Full Site Editing (FSE), the WordPress core features are available and many other powerful additions are added: advanced layout editing, page templates, responsive design tools, reusable components, conditional logic, dynamic content, search and filter capabilities, custom fields, custom post types, popups, forms, and more. Greyd.Suite provides a comprehensive toolbox specifically designed for building large websites or multisite networks, eliminating the need for third-party plugins.
This article is about Greyd’s Accessibility features available out of the box. I’m using the Required features found in the Accessibility Handbook and other features I found useful in my daily work.
Skip Link
The skip link is the first focusable element on a website: it is hidden for sighted users, but available for screen reader users and keyboard users. The purpose of the skip link is to allow users to bypass repetitive navigation elements (such as menus or headers), and jump directly to the main content.
How I tested it:
- the skip link is present, and is the first focusable object on the page when logged in.
- It is visible when focused, points to the first focusable element (link), and uses the “screen-reader-text” class available for screen-reader users.
- It meets least AA color contrast.
Video description: The following video demonstrates the skip link test on the Creatibility.co website, following the steps outlined above.
Controls
Interactive elements like <a> (links), <button> (buttons), and <input> (form inputs) are keyboard-accessible by default. Greyd provides visible focus styles to ensure accessibility for all of them.
Video description: The video showcases focusable elements (links, buttons, and inputs) on the contact page of the Creatibility.co website.
Navigation Menu
- Uses <nav> tag by default;
- the link menus and dropdowns are navigable using Tab, Shift+Tab, Enter / Space;
- Drop down menu are visible on hover and can be styled.
- Mobile menu can be built by scratch using the Popover element that supports adding aria-label=”Open Menu” or “Close Menu”;
- The Active and Focus:visible links can be style to meet the contrast and ne size required.
Responsive Settings
Building responsive layouts with Greyd is incredibly straightforward. Its intuitive tools allow you to tailor designs for different screen sizes with precision. You can adjust margins, padding, and alignment for mobile, tablet, and desktop views. Whether you’re designing for a mobile-first experience or refining a desktop layout, Greyd ensures consistency and adaptability.
Styling Options
- Focus Outlines: Focusable elements inherit hover styles by default. If hover styles use a background-matching color, they can be customized with CSS to remain visible.
- Colors: Set global and element-specific colors using the Style Editor. Greyd ensures default elements meet WCAG contrast ratios, with granular adjustments available.
- Fonts: Greyd offers a preset font system with fluid typography options, allowing custom min/max values for text sizes. Fluid typography adapts text sizes smoothly across screen sizes, enhancing readability.
HTML Markups
Greyd is a Full Site Editing (FSE) block theme based on the Core WordPress. It generates clean, semantic HTML, and it ensures that the content is logically structured to be accessible for all type of users, including assistive technologies. Greyd offers large flexibility in managing layouts, HTML markups, and semantic elements. Additionaly, all the elements use the proper tags: nav, links, images, quotes, form.
Links & buttons
- Links underlined by default, and colour contrast is easy to be styled;
- At the moment of writing this article, there is no option for adding aria-label for non-descriptive links in a button element, but it’s on the roadmap. In the meantime, the solution I found is to use a Custom HTML block with the same classes borrowed from a Greyd Button
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. See the screenshot below, showing the skip link:
The skip-link class provides accessibility for keyboard and screen-reader users.
The :focus-visible pseudo-class is applied for the focusable elements (links, buttons, inputs) when accessed via keyboard or assistive technology.
The visually-hidden helper class is used for hiding content visually while keeping it accessible to screen-readers
Images
Greyd supports adding alt text in the editor for image blocks, as a core WordPress feature.
Greyd added a new block for image called Dynamic image and for this element, the Alt-image text takes the file name. However, this feature may not be useful for decorative images (icons, background, shapes), and that’s the case for checking the option to not generate alt texts automatically, available in Greyd – Settings (screenshot below). If checked, the alt-texts should be added via Media for non-decorative images.
Conclusions
Greyd.Suite offers numerous accessibility features and exceptional flexibility empowering developers to build accessible websites responsibly. Working with an accessible-friendly theme does not guarantee the website is fully accessible. While the theme provides a strong foundation, it is ultimately the developer’s responsibility to implement best practices to ensure compliance with WCAG standards. Greyd is constantly evolving, with additional features planned on the roadmap. The team remains open to feedback and is committed to adding new features based on user needs, making it a versatile solution for managing complex websites.
Creatibility.co is built with Greyd.Suite and it is optimized for accessibility.
Resources:
Make WordPress Theme Handbook – Accessibility, WP Page Builder Accessibility Comparison, J. Dolson – WordPress: Accessibility LinkedIn Course
