Accessibility Optimization Guide

Introduction

Ensuring your website is accessible to all users is essential for providing a great user experience and improving compliance with accessibility standards. Since V45 the POWER Pro Theme includes built-in tools to help you identify and fix accessibility issues efficiently. This guide will walk you through optimizing your pages using these features.

Note: The accessibility checker automatically detects 57% on average of WCAG issues. If these issues are fixed the PageSpeedInsights scoring for accessibility will be towards 100%. But the content, context, and user flow also have to make sense. For a comprehensive accessibility review, we recommend using additional tools like screen readers and conducting manual tests.

 

---

Why Accessibility Matters

Web accessibility ensures all users, including those with disabilities, can navigate, understand, and interact with your website. It improves user experience, broadens your audience reach, and ensures compliance with legal standards like WCAG and the upcoming European Accessibility Act. A more accessible website is not just about compliance — it’s about creating an inclusive digital space for everyone.

---

1. Enabling POWER's Accessibility Tools

Overview

Before using the accessibility tools, you need to activate them in the POWER Theme settings.

How to Enable POWER's Accessibility Tools

1. Go to Theme Settings: Navigate to Theme Settings > Accessibility.
2. Enable the Accessibility Checker: Toggle the first setting to activate the built-in checker.
3. Choose the Rule Sets/Accessibility Standards you aim to comply with: You can choose from
   1. WCAG Level 2.0 A
   2. WCAG Level 2.0 AA
   3. WCAG Level 2.0 AAA
   4. WCAG Level 2.1 A
   5. WCAG Level 2.1 AA
   6. WCAG Level 2.2 AA
   7. EN 301 549
   8. Best Practices
      Rules that do not necessarily conform to WCAG success criterion but are industry accepted practices that improve the user experience.
      
   9. ACT (W3C)
   The theme defaults to the ones in bold.
4. Enable ARIA Label Visualizer: Turn on the ARIA Label Visualizer/Screen Reader Test Mode to view labels on elements.
5. Save Changes: Click the save button and refresh the page editor to apply the settings.
   
   
   
   

 

How to Start POWER's Accessibility Tools

There are two ways to use the accessibility tools. The Accessibility Checker and ARIA Label Visualizer will appear in the lower-left corner of your browser viewport and can be activated there.

1. Open Your Page in Preview Mode: This will allow you to see the detected accessibility issues in real-time. You can open the preview mode from the page editor here:
   
   
   
   
2. Enter Debug Mode: Add ?hsDebug=true at the end of your page URL in the browser to enable HubSpot’s debug mode.
   
   
   
   
   

 

---

2. Accessibility Checker

Overview

Our accessibility checker integrates the axe Accessibility engine for automated Web UI testing to detect common issues such as:

• Insufficient color contrast
• Missing ARIA labels
• Incorrect heading structure
• Lack of alternative text for images
• and more
  
  
  

Limitations & Recommendations

While the accessibility checker is a powerful automated tool, it only detects about 50-60% of potential issues. We strongly recommend:

• Manual Testing: Use keyboard navigation to check usability.
• Screen Reader Testing: Test with tools like NVDA (Windows), VoiceOver (Mac), or JAWS (Windows).
• Regular Audits: Combine automated checks with human review for better compliance.
• Additional Tools: Use Google Lighthouse or PageSpeed Insights (PSI) to detect further accessibility issues.
  
  

How to Use

1. Make sure the Accessibility Checker is enabled in the theme settings.
2. Run the Accessibility Scan: 

   Toggle the accessibility checker to scan the page. The scan refreshes itself every few seconds to detect violations automatically. This is important because it can detect changes in the webpage UI when a user interacts with the page (e.g. hover states, open elements on click, etc.)

3. Review Detected Issues: The tool will highlight areas that need improvement. If you hover over the accessibility icon an info box will appear with a short description of the issue. It will also contain links with more information or links to a color contrast tool that allows you to find colors with ideal contrast.
   
   
   
   
4. Fix the Issues: Follow the provided suggestions to correct detected errors by changing the configuration of the theme or theme module.

 

---

3. ARIA Label Visualizer

Overview

The ARIA Label Visualizer helps you understand how screen readers interpret your website content by displaying ARIA labels as tooltips.

How to Use

1. Make sure the ARIA Label Visualizer is enabled in the theme settings.
2. Toggle the ARIA Label Visualizer.
3. Review Labels: Ensure all interactive elements (buttons, links, etc.) have meaningful ARIA labels. If the labels overlap they are collapsed and the label texts will only be revealed on mouse hover.
   
   
   
   
4. Edit Labels (if necessary): Adjust labels in the module configuration to ensure clarity for screen readers.

 

---

4. Adding ARIA Labels to Elements

Overview

ARIA (Accessible Rich Internet Applications) labels help assistive technologies interpret elements on a webpage. Adding ARIA labels to your website ensures better accessibility for users who rely on screen readers.

For example, if you have a button that only displays an icon (such as a search magnifying glass), a screen reader will not be able to interpret its purpose without an ARIA label. By adding aria-label="Search", users relying on assistive technology will hear "Search button" instead of just an undefined element. 

How to Add ARIA Labels in POWER Theme

1. Open the Page Editor: Navigate to the module where you want to add an ARIA label.
2. Locate the ARIA Label Field: In the module configuration panel, find the ARIA Label field. This is either located directly below the respective element or in the Accessibility group if more general.
3. Enter a Descriptive Label: Provide a clear and meaningful label for the element (e.g., "Contact Us" instead of just "Click Here").
   
   
   
   
4. Save and Publish: Apply the changes and preview the page to verify the label is correctly applied.

 

---

5. Best Practices for Accessibility

Color Contrast

• Use high-contrast colors for text and background.
• Ensure WCAG-compliant contrast ratios.
• Avoid using color alone to convey information; use text or icons as well.

Headings & Structure

• Use logical heading order (H1 > H2 > H3, etc.) and avoid skipping heading levels.
  This provides a clear document structure and helps navigate your content.
• Use clear and concise headings that accurately describe the content.

Alternative Text for Images

• Provide descriptive alternative (alt) text for all images.
  
  
• Avoid using 'image of' or 'picture of'—just describe the content.
• For decorative images that do not add meaningful content, the text should be empty.

Forms & Interactive Elements

• Label all form fields clearly.
• Ensure buttons and links have meaningful text (avoid 'Click Here' or 'Read More' without context) or provide ARIA labels that have a better description.
• Provide error messages that are clear and specific, and avoid relying on color alone to indicate errors.
• Ensure form inputs have accessible labels and provide instructions where needed.
  
  

Keyboard Navigation

• POWER Pro automatically ensures proper keyboard accessibility, meaning interactive elements are focusable, and users can navigate seamlessly without additional manual adjustments. However, we recommend also performing manual tests to ensure that all user interactions work as expected, especially for complex or custom components.
  Things to consider are

  • Ensure all interactive elements (buttons, links, forms) can be accessed and used via the keyboard.
  • Use a logical tab order to maintain a smooth navigation experience.
  • Provide a visible focus indicator for users navigating via keyboard.
    
    

Multimedia & Animations

• Provide captions or transcripts for videos to support users with hearing impairments.
• Avoid autoplaying videos or animations that cannot be paused.
• Ensure motion effects and animations can be disabled if they could cause discomfort or accessibility issues. POWER Pro automatically disables animations if the user has this configured on their device.
  
  

---

6. Testing & Continuous Improvement

• Manual Testing: Use keyboard navigation to ensure all elements are accessible.
• Screen Reader Testing: Test pages with screen readers (e.g., NVDA, VoiceOver).
• Regular Scans: Re-run the accessibility checker after updates.
  
  

---

7. Helpful Resources

To further enhance your understanding and implementation of web accessibility, consider exploring the following resources:

• HubSpot's Web Accessibility Guidelines: An insightful article from HubSpot's blog discussing the importance of web accessibility and best practices for implementation.
• MDN Web Docs – Web Accessibility: A comprehensive resource from Mozilla covering best practices, techniques, and guidelines for making the web accessible.
• Web Content Accessibility Guidelines (WCAG): The WCAG, developed by the World Wide Web Consortium (W3C), offers comprehensive guidelines for making web content accessible to people with disabilities.
• EN 301 549: A European standard that specifies accessibility requirements for information and communications technology (ICT) products and services, aligning with the European Accessibility Act.

 

For further support, contact our team via our support form!