Skip to main content
Accessibility
Purpose of These DocsThese docs are meant as a starting point for using Anvil2 accessibly. While the contents can contribute to building accessible interfaces from scratch, that is not the main goal.

​
Overview

Directly Related WCAG Guidelines(s):
Anvil2 ResponsibilityImplementor Responsibility
Anvil2 ensures built-in components maintain proper associations between input fields and labels along with built-in error states along with creating proper focus and action states.Implementors must implement proper labeling by writing clear, descriptive labels/CTA text, providing necessary instructions, along with implementing error states.
Effective labels and clear, descriptive call-to-action elements are fundamental to accessibility, helping all users understand form purposes and navigation options. These elements serve as critical navigation guides, particularly for screen reader users who may navigate forms and interactive elements non-visually or rely on voice activation for operation. When labels and CTAs are vague, misleading, or missing, users can become confused about input expectations or action outcomes. Proper implementation of these elements ensures that all users can efficiently interact with forms and navigate applications successfully, regardless of how they access content.

​
Input Field Context Association

Directly Related WCAG Guidelines(s):
Anvil2 ResponsibilityImplementor Responsibility
Anvil2 ensures components with proper label association using the for attribute and error handling management.Implementors ensure they are writing clear and specific labels as well as help text and that they are handling the error messages properly.
Proper input field labeling creates essential connections between form controls and their descriptions, enabling all users to understand what information is required. Screen readers rely on these associations to announce field purposes, while all users need clear context to complete forms accurately. Proper accessibility implementation ensures that field purpose is programmatically determinable, making forms accessible to assistive technologies and supporting user success. This includes providing visible labels, associating labels with inputs, offering helpful instructions, and communicating errors clearly. Without proper label associations, users may struggle to understand what information is required, leading to form abandonment, incorrect data entry, or failure to complete critical tasks.

​
Best Practices

  • Always associate labels with input fields using the for and id attributes
  • Write clear, specific labels rather than generic terms
  • Provide additional context when needed through help text or instructions
  • Mark required fields clearly and consistently (e.g., “Email address (required)“)

​
Common Pitfalls

  • Using placeholder text instead of labels, which is insufficient for accessibility
  • Using vague or overly generic labels like “Name” instead of “Full name” or “Last name” that create ambiguity
  • Leaving required field indicators visually obvious but programmatically unclear
Directly Related WCAG Guidelines(s):
Anvil2 ResponsibilityImplementor Responsibility
Anvil2 ensures that there are appropriate components to cover functionality. Links behave as links, buttons behave as buttons, etc. Focus states, hover states, and active states are all established.Implementors ensure proper semantic usage, writing descriptive link and button text, they should also be using the correct components for the application that is needed.
Buttons and links serve as primary navigation and action elements that must be clear and descriptive. Screen readers rely on element text to announce the purpose and destination, while all users need clear, actionable language to understand what will happen when they interact with these elements. Proper accessibility implementation ensures that interactive elements are semantically correct, clearly labeled, and predictable in their behavior. This includes using appropriate HTML elements (<button> vs <a>), writing descriptive text, providing context when needed, and maintaining consistency across similar actions. Without proper implementation, users may become confused about action outcomes, fail to navigate efficiently, or trigger unintended actions.

​
Best Practices

  • Write descriptive, clear call to action text that explains what will happen when activated
  • Provide aria-label attributes with additional context for icon-only buttons or short link text like “Read More”
  • Ensure icon buttons have accessible names even when icons aren’t visible to screen readers

​
Common Pitfalls

  • Using vague language like “Click here” or “Learn more” without additional context
  • Assuming icons alone convey meaning to all users
  • Omitting alternative text or ARIA labels for interactive elements
Last modified on January 23, 2026