Create clear input button text

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

Input buttons must have discernible text (Rule ID: input-button-name)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (4.1.2)

• Section 508 (1194.22)

• Trusted Tester Guidelines

• EN 301 549 (9.4.1.2)

Impact

Critical level impact affecting:

• Blind users

• Deafblind users

Proper Implementation

Input buttons must have accessible names using one of these methods:

• value attribute

• aria-label

• aria-labelledby

• title attribute

• Default values for submit/reset buttons

Examples of Correct Usage

1. Using the value Attribute:
   The value attribute provides clear and descriptive text ("Submit Form") for the button, ensuring screen readers announce its purpose.

2. Using the aria-label Attribute:
   The aria-label attribute provides additional clarity for screen reader users while the visible text ("Search") remains concise.

3. Using the aria-labelledby Attribute:
   The aria-labelledby attribute references an external label, ensuring the button's purpose is programmatically linked and accessible.

4. Using the title Attribute for Additional Description:
   The title attribute provides additional context for the button's action ("Delete your account permanently") while the value remains concise.

5. Default Values for Submit/Reset Buttons:
   The default text for the reset button ("Reset") is clear and descriptive, making it accessible without further customization.

Common Errors to Avoid

1. Missing value Attribute:
   Without a value attribute, the button's purpose may be unclear, especially if the default text is not meaningful in the context of the form.

2. Non-Descriptive Button Text:
   The button text ("Click") is vague and does not describe the action it performs, leaving users uncertain about its purpose.

3. Relying Solely on Visual Context:
   While the aria-label makes the button accessible to screen readers, the lack of visible text can confuse sighted users.

4. Conflicting Accessible Names:
   Conflicting accessible names ("Edit" and "Modify") can confuse screen reader users, leading to unclear instructions.

5. Using Placeholder Text Instead of a Button Label:
   The placeholder attribute is not announced by screen readers for buttons and does not replace the need for a clear label or value.

Rationale

• Screen reader users need text to understand button purpose

• Unlabeled buttons create barriers to:

  • Understanding button function

  • Navigation

  • Form completion

  • Interactive elements usage

• Clear button labels ensure proper user interaction

Evaluation Method

1. Inspect the Code

   • Ensure all <input> buttons include:

     • A meaningful value attribute.

     • Or an accessible name via aria-label or aria-labelledby.

     • Or a meaningful title attribute, if supplementary context is required.
       
       

2. Test with Assistive Technology

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to navigate the page and confirm buttons are announced with their purpose clearly described.

Evaluation Checklist