Skip to content
ALTCHA ALTCHA ALTCHA

WCAG 2.2 Compliance

ALTCHA’s proof-of-work widget is designed with accessibility in mind, fully adhering to the WCAG 2.2 guidelines for AA-level compliance. This guide provides actionable steps to integrate ALTCHA inclusively on your website.

Introduction

Web Content Accessibility Guidelines (WCAG) 2.2 outlines standards to make digital content more accessible to people with disabilities. Compliance with WCAG 2.2 ensures inclusivity, protects against legal risks, and improves overall user experience. This guide details how ALTCHA meets these requirements and provides practical steps for proper integration.

Perceivable

Text Alternatives

  • Non-text Content:
    Provide accessible descriptions for ALTCHA’s functionality to assist users who rely on screen readers.

    Example:

    <form aria-label="Protected by ALTCHA: A proof-of-work widget safeguards this form from spam.">

  • Explanatory Text:
    Add a clear explanation near forms to inform users about ALTCHA’s process:

    “This form is protected by an invisible verification process. No action is required.”

Distinguishable

  • Contrast Standards:
    Status messages, such as “Verification in progress,” must meet the minimum contrast ratio of 4.5:1 against their background.

  • Hover or Focus States:
    Ensure content updates, like “Processing…,” remain visible while hovered or focused.

Operable

Keyboard Accessibility

  • ALTCHA must support full keyboard navigation, allowing users to tab through forms and submit without using a mouse.

  • Logical Focus Order:
    Set a logical tab order through the form—from labels to inputs to the submit button.

  • Focus Indicators:
    Highlight focused elements visually (e.g., using a border or outline).

Understandable

Readable

  • Use simple, clear language for all ALTCHA status messages:

    “Verifying submission. This process ensures your form is secure.”

Input Assistance

  • Display user-friendly error messages when verification fails.
    Example:

    <div role="alert" style="color: red;">
        Verification failed. Please reload the page and try again.
    </div>

  • Suggest troubleshooting actions, such as enabling JavaScript if required.

Implementation Checklist

  1. Accessible Labels:
    Add descriptive aria-label attributes to inputs and forms.

  2. Background Activity Feedback:
    Communicate status updates to users, especially during verification processes.

  1. Error Messaging:
    Include actionable error messages with guidance for corrective steps.

  2. Device Compatibility:
    Test your integration on various devices, browsers, and assistive technologies.

Testing Recommendations

Ensure compliance with a broad range of use cases by testing ALTCHA integration on:

  • Devices: Desktop, tablet, and mobile devices.
  • Browsers: Modern browsers such as Chrome, Firefox, Safari, and Edge.
  • Assistive Technologies: Screen readers like NVDA or VoiceOver, and keyboard-only navigation.

Conclusion

By implementing these measures, your ALTCHA integration will remain both accessible and compliant, ensuring an inclusive experience for all users. This also demonstrates your commitment to accessibility, benefiting both your users and your brand.