Assign unique accesskey values

***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

Accesskey attribute values must be unique across all elements (Rule ID: accesskeys)

Applicable Standards

• Deque Best Practice

• Keyboard Accessibility Guidelines

Impact

Serious level impact affecting:

• Blind users

• Low vision users

• Users with mobility impairments

Proper Implementation

• Ensure unique accesskey values across all elements

• Avoid conflicts with browser default shortcuts

• Consider cross-language compatibility

• Use logical and memorable key assignments

• Document accesskey usage for users

Examples of Correct Usage

1. Unique accesskey Values for Different Elements:
   Each element is assigned a unique accesskey value (h, a, c), ensuring no conflicts during navigation.

2. Logical and Memorable Key Assignments:
   

   The accesskey values are logically tied to the element's label (e.g., s for "Submit", f for "Find"), making them easy for users to remember.

3. Unique accesskey Values on the Same Page:
   Unique accesskey values (n, s, p) are assigned across the navigation links, avoiding conflicts.

4. Avoiding Browser Shortcut Conflicts:
   The accesskey values avoid conflicting with common browser shortcuts (e.g., Alt+F for File Menu) by using less commonly used letters (u, l).

5. Cross-Language Compatibility:
   The accesskey values are designed to be intuitive for Spanish-speaking users, matching the first letter of each label.

Common Errors to Avoid

1. Duplicate accesskey Values:
   Both links use the same accesskey (h), causing conflicts and making navigation unclear for users.

2. Conflicting with Browser Shortcuts:
   The accesskey values (f and e) conflict with browser shortcuts like Alt+F (File menu) and Alt+E (Edit menu), reducing usability.

3. Using Non-Memorable Keys:
   The accesskey values (q and z) are unrelated to the element's label, making them harder for users to remember.

4. Applying accesskey to Non-Interactive Elements:
   The accesskey is applied to a non-interactive element (<p>), which is not accessible or meaningful for keyboard navigation.

5. Failing to Communicate accesskey Usage:
   The accesskey values are not documented anywhere on the page, leaving users unaware of their availability.

Rationale

• Prevents keyboard command conflicts

• Ensures predictable navigation

• Improves keyboard accessibility

• Reduces user confusion

• Maintains consistent behavior

• Note: Generally discouraged due to:

  • Inconsistent browser support

  • Potential conflicts with screen readers

  • Language localization challenges

Evaluation Method

1. Inspect the Code

   • Verify:

     • All accesskey values are unique on the page.

     • Keys avoid conflicts with browser shortcuts.

     • Logical and meaningful key assignments are used.

     • accesskey is applied only to interactive elements (e.g., links, buttons).

2. Test with Keyboard

   • Use keyboard shortcuts (e.g., Alt + accesskey or Alt + Shift + accesskey, depending on the browser) to confirm:

     • Navigation works as expected.

     • There are no conflicts between accesskey values or browser shortcuts.
       
       

Evaluation Checklist