Testing for Accessibility in LSX Design

[ashleyshaw]

Current State

Currently, LSX Design lacks structured accessibility checks within its theme.json setup. While the theme implements basic styles and functionality, it does not explicitly support accessibility features like ARIA attributes or automated contrast testing. WordPress 6.7 and previous releases have introduced accessibility improvements that can be leveraged in theme.json to ensure better user experience for people with disabilities.

Issues

• Limited Accessibility Support: LSX Design does not currently implement accessibility features such as ARIA attributes or contrast ratio validation.
• No Automated Accessibility Checks: There is no process in place to test the accessibility of elements like color contrast or focus states.

Recommendations

• Expand Accessibility: Implement accessibility checks and ARIA support within theme.json. This can be done by:

  • Ensuring all color contrasts meet the WCAG AA standards (4.5:1 for text).
  • Adding ARIA attributes and focus states to ensure accessibility for screen readers.
  • Implementing accessible focus styles to improve navigation using keyboards.

• Automate Accessibility Testing: Use automated tools to perform accessibility audits. Tools like Axe, Pa11y, or the Lighthouse accessibility audit in Chrome DevTools can be integrated into your workflow to continuously test accessibility.

{
  "styles": {
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "border": {
          "radius": "8px"
        }
      }
    }
  },
  "accessibility": {
    "aria-label": "Accessible button",
    "focus": {
      "outline": {
        "style": "solid",
        "color": "var(--wp--preset--color--focus)"
      }
    }
  }
}

• Use ARIA Roles and Labels: Make sure that buttons, forms, and navigation elements include appropriate ARIA roles and labels for screen readers.

• Focus State Customization: Define clear focus styles in theme.json for improved keyboard navigation:

{
  "styles": {
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--link)"
        },
        ":focus": {
          "outline": {
            "color": "var(--wp--preset--color--focus)"
          }
        }
      }
    }
  }
}

Tools for Automated Accessibility Testing

• Axe: An open-source accessibility testing tool that integrates with browsers and development environments.
• Pa11y: A command-line tool that can be used to run accessibility tests automatically.
• Lighthouse: A Chrome DevTools audit tool that tests for accessibility along with performance, SEO, and more.

By using these tools in conjunction with improving accessibility within theme.json, LSX Design can ensure compliance with accessibility standards, enhance usability for people with disabilities, and provide a better user experience overall.

### Next Steps
- Test using accessibility tools like the [Equalize Digital Accessibility Checker](https://wordpress.org/plugins/accessibility-checker/)
- Review the WP requirements:
   - https://make.wordpress.org/themes/handbook/review/accessibility/required/
   - https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/
   - https://wordpress.org/plugins/accessibility-checker/
   - https://en-za.wordpress.org/about/accessibility/
   - https://wordpress.org/themes/tags/accessibility-ready/