Building Accessible Websites with GeneratePress and GenerateBlocks 

Web accessibility ensures that everyone can navigate and interact with your website regardless of ability. As we celebrate World Accessibility Day on May 15, 2025, let’s explore how to create inclusive, high-performing, and accessible websites using GeneratePress and GenerateBlocks. 

These powerful tools empower developers and designers to craft user-friendly sites that conform to accessibility standards, all while maintaining speed and flexibility. Below, we’ll walk through practical steps to leverage these tools for accessibility, with examples and tips to make your site welcoming to all users.

Why Accessibility Matters

Web accessibility is about designing websites that people with disabilities, such as visual, auditory, motor, or cognitive impairments, can use effectively. According to the World Health Organization, over 1 billion people globally live with some form of disability. Accessible websites broaden your audience and improve SEO, usability, and compliance with legal standards like the Americans with Disabilities Act (ADA).

GeneratePress and GenerateBlocks are ideal for building accessible sites. Both prioritize clean code, performance, and accessibility-focused features, making them perfect for creating inclusive digital experiences. With the release of GenerateBlocks 2.1, accessibility has taken center stage, offering enhanced tools like improved ARIA labels and dynamic data support.

Now, let’s explore how to use these tools to create an accessible website, focusing on key Web Content Accessibility Guidelines (WCAG) principles: Perceivable, Operable, Understandable, and Robust.

1. Perceivable: Ensure Content is Accessible to All Senses

The Perceivable principle states that users should be able to perceive your content, whether through sight, sound, or touch. GeneratePress and GenerateBlocks provide tools to make this easier, whether your site visitors are using screen readers, mobile devices, or other assistive technology.

Add Descriptive Alt Text to Images

Alt text describes images for screen readers, helping visually impaired users understand their context. In GenerateBlocks:

• Use the Image Block and add alt text in the block settings under Alt Text.
• Ensure alt text is concise (80–100 characters) and descriptive. For example, instead of “logo,” use “Company X logo with blue text on white background.”
• Leave the alt text blank and add aria-hidden=”true” for decorative images to hide them from screen readers.
• Avoid using images to convey critical information. If unavoidable, pair them with text alternatives using GenerateBlocks’ Headline or Paragraph blocks.
• If an image is a link, use alt text to describe where the link directs the site visitor, rather than describing the image itself.

Use High-Contrast Colors

Color contrast is crucial for users with visual impairments or color blindness. High-contrast colors can also help users browsing in difficult environments, such as those with high sunlight. The WordPress Customizer (Appearance > Customize) lets you set accessible color schemes:

• Navigate to Colors and choose text and background colors with a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (per WCAG 2.1 AA).
• Use tools like WebAIM’s Contrast Checker or the EasyA11yGuide Contrast Checker to verify ratios.
• In GenerateBlocks, apply accessible colors via the Styles > Typography and Backgrounds panel. For example, set button backgrounds to a dark color with white text.

For example, when creating a call-to-action button, use GenerateBlocks’ Button Block and set a high-contrast style. Avoid relying solely on color to convey meaning (e.g., red for “error”); add icons or text labels instead.

Support Screen Readers with ARIA Labels

Accessible Rich Internet Applications (ARIA) labels enhance screen reader compatibility. GenerateBlocks 2.0 simplifies this:

• For Button Blocks without text (e.g., icon-only buttons), add an ARIA label in the block settings (free version) or use Custom Attributes in GenerateBlocks Pro to define aria-label=”Descriptive action”.
• For interactive elements like accordions or tabs, GenerateBlocks Pro automatically applies ARIA attributes to indicate their state (e.g., aria-expanded=”true” for open accordions).
• In GeneratePress, ensure navigation menus use semantic HTML (e.g., <nav>). The theme’s Navigation Search Modal (introduced in GeneratePress 3.3.0) is fully accessible with ARIA support.

For example, suppose you create an accessible accordion with GenerateBlocks Pro’s Accordion Block. In that case, the block automatically adds ARIA attributes; however, you can further enhance it by ensuring clear, descriptive titles, such as the question being answered rather than vague terms like “Question 1.”

2. Operable: Make Your Site Navigable for All

The Operable principle ensures users can interact with your site regardless of their input method, whether keyboard, mouse, or assistive device.

Enable Keyboard Navigation

Keyboard accessibility is vital for users with motor disabilities. GeneratePress is built with keyboard-friendly navigation:

• Test your site by navigating with the Tab key. Ensure all interactive elements (links, buttons, forms) are focusable and have visible focus indicators.
• In GeneratePress, you can set link styles in the Customizer under Colors > Body and General > Underline Links. These will inherit to the outline of keyboard-based navigation.
• GenerateBlocks’ blocks (e.g., Buttons, Containers) support keyboard interaction out of the box. For custom elements, use GenerateBlocks Pro’s Custom Attributes to add tabindex=”0″ where needed.

GeneratePress adds skip-to-content link automatically to your site, enabling keyboard navigation that bypasses navigation and will go to the first link within page content. 

Ensure Consistent Navigation

Consistent navigation helps users with cognitive disabilities predict where to find information. With GeneratePress:

• Use the Customizer > Layout > Primary Navigation to create a uniform menu structure across all pages.
• Maintain consistent placement for key elements like the search icon. GeneratePress’ Navigation Search Modal ensures accessibility with a predictable trigger (e.g., data-gpmodal-trigger=”gp-search”).

Support Responsive Design

Mobile users and those with low vision need responsive, scalable designs. GeneratePress and GenerateBlocks’ support of REM units for font sizes ensure that your text will adjust to any browser-based changes in font sizing to make this seamless:

• In any block (e.g., Container, Headline), use the Responsive Controls to adjust font sizes, padding, and margins for desktop, tablet, and mobile.
• Ensure text can be zoomed up to 200% without breaking the layout. Test this in GeneratePress by setting Customizer > Typography > Body to a base font size of at least 16px.
• Avoid sliders due to accessibility and performance issues. Instead, use GenerateBlocks’ Accordion Block to show and hide content interactively.

3. Understandable: Create Clear and Predictable Content

The Understandable principle ensures your site is easily comprehended, especially for users with cognitive or learning disabilities.

Use Plain Language

Ensure your website uses clear, jargon-free text, which benefits all users. With GenerateBlocks:

• Use the Headline and Paragraph Blocks to write concise, descriptive content. For example, instead of “Click here,” use “Learn more about our services.”
• Apply consistent typography via the Customizer. Set a readable font and ensure line spacing is at least 1.5x the font size.

Provide Clear Link Text

Descriptive link text helps screen reader users understand a link’s purpose. In GenerateBlocks:

• Use the Button Block or Paragraph Block with inline links, ensuring text is specific. For example, “View our pricing plans” is better than “Click here.”
• Avoid ambiguous links in navigation menus. In GeneratePress, customize menu items via Appearance > Menus to use descriptive labels.

4. Robust: Build for Compatibility and Future-Proofing

The Robust principle ensures your site works with assistive technologies and remains compatible as technology evolves.

Use Semantic HTML

GeneratePress and GenerateBlocks prioritize semantic HTML, which is critical for screen reader compatibility:

• GeneratePress uses proper HTML5 elements (e.g., <nav>, <main>, <footer>) to structure content logically.
• GenerateBlocks’ blocks output clean, semantic code. For example, the Headline Block defaults to <h2> but can be set to other heading levels for proper hierarchy.
• Instead of overusing ARIA, rely on semantic HTML for clarity and compatibility. For example, use the element for navigation menus rather than a <div> with role=”navigation”. This ensures screen readers correctly identify the navigation section without redundant ARIA attributes.

Structure a page with GenerateBlocks’ Container Block as a <section> and nest Headline Blocks with sequential headings (H1, H2, H3) to maintain a clear hierarchy.

Test with Assistive Technologies

Regular testing ensures your site remains accessible.

• Use screen readers like NVDA (Windows) or VoiceOver (macOS) to navigate your site. Verify that all interactive elements are announced correctly.
• Test with tools like WAVE or Axe to identify WCAG violations. GeneratePress’ clean code minimizes errors, but check for issues like missing alt text or low contrast.
• Leverage GenerateBlocks’ Pattern Library to import accessible starter content, then test and tweak them using accessibility-aware design decisions.

Keep Code Lightweight

Bloat-free code improves performance, which benefits users with low-bandwidth connections or older devices. GeneratePress and GenerateBlocks excel here:

• GeneratePress is just 7.5KB with 2 HTTP requests, ensuring fast load times.
• GenerateBlocks 2.0 decouples HTML and CSS for cleaner output, reducing page weight. Its Global Styles minimize CSS duplication, enhancing performance.
• Use GenerateCloud to share accessible patterns across multiple sites, reducing repetitive coding.

Accessibility Enhancements in GenerateBlocks 2.1

Released in February 2025, GenerateBlocks 2.0 introduces features that make accessibility easier, and the release of GenerateBlocks 2.1 in April 2025 added even more accessibility-focused features ensuring that you can add ARIA labels in both the Pro and free versions. 

• Dynamic Tags. Query nested post meta or user meta for front-end display, ensuring dynamic content (e.g., user profiles) is accessible. You can register custom tags for specific needs.
• Enhanced ARIA Support. Buttons, accordions, and tabs include ARIA attributes by default with customizable options in both GenerateBlocks free and Pro.
• Decoupled HTML/CSS. Cleaner code improves compatibility with assistive technologies and reduces rendering issues.
• Global Styles Integration. Create reusable, accessible styles (e.g., high-contrast buttons) and apply them site-wide, ensuring consistency.

When using dynamic data in GeneratePress, you can easily use any dynamic data to populate ARIA fields. For example, if you create a button and want to ensure it has appropriate ARIA labels, you could easily add content to display “read more about {{post_title}}” in your button ARIA label.

Practical Example: Building an Accessible Homepage

Let’s combine these principles to create an accessible homepage:

Header

• Use the GeneratePress Customizer > Layout > Site Header and Primary Navigation options to establish accessibility-aware settings.
• Ensure the Navigation Search Modal is enabled for accessibility.

Hero Section

• Choose a Hero Section from the GenerateBlocks Pattern Library.
• Ensure that the text in the Hero area has sufficient contrast from the background.
• If the Hero area contains an image, add alt text to the background image.

Content Section

• Ensure all text is easily readable with clear fonts and all links are descriptive. 
• Use Accordion Blocks for FAQs, with clear titles and ARIA attributes.
• Add a Button Block with descriptive text and an ARIA label for icon-only buttons.

Footer

• Use a Grid Block for contact info, social links, and a sitemap.
• Ensure social icons, built with Button Blocks, have ARIA labels like aria-label=”Follow us on Twitter”.

Testing for Accessibility Issues

• Combine Automated and Manual Testing. Automated tools catch ~30-50% of accessibility issues, so manual testing using both screen readers and keyboard navigation is essential.  
• Test Across Browsers and Devices. Accessibility behavior can vary, so test on Chrome, Firefox, Safari, and mobile devices.  
• Involve Real Users. Conduct usability testing with people with disabilities to identify issues that tools might miss.  
• Stay Updated. Accessibility standards are constantly evolving, so it’s essential to regularly check tools for updates and refer to the WCAG guidelines.

Make the Web Accessible with GeneratePress and GenerateBlocks

GeneratePress and GenerateBlocks empower you to build fast, flexible, and accessible websites without sacrificing performance. By prioritizing semantic HTML, ARIA support, high-contrast design, and keyboard navigation, you can create digital experiences that welcome everyone.

Thanks to Gen Herres from the EasyA11yGuide for her help with this article.