Settings

The settings page demonstrates accessible form patterns including tabbed navigation, fieldset/legend grouping, toggle switches, and radio button groups.

Page URL

/settings

Key Features

• Tabbed interface with proper ARIA tab pattern
• Form fields grouped with <fieldset> and <legend>
• Toggle switches with accessible labels
• Radio button groups with keyboard navigation
• Form validation with error announcements

Accessibility Patterns

Tabbed Interface

The settings tabs follow the WAI-ARIA Tabs pattern:

<div role="tablist" aria-label="Settings sections">
    <button role="tab" aria-selected="true" aria-controls="profile-panel">
        Profile
    </button>
    <button role="tab" aria-selected="false" aria-controls="notifications-panel">
        Notifications
    </button>
</div>
<div role="tabpanel" id="profile-panel" aria-labelledby="profile-tab">
    <!-- Panel content -->
</div>

• Arrow keys move between tabs
• Tab key moves focus into the active panel
• Only the active tab is in the tab order

Form Groups

Related fields are grouped with <fieldset> and <legend>:

<fieldset>
    <legend>Privacy Settings</legend>
    <!-- Toggle switches and checkboxes -->
</fieldset>

This provides context for screen readers -- users hear "Privacy Settings group" before the individual controls.

Toggle Switches

Toggle switches use the switch role with aria-checked:

• Clear on/off labels visible to all users
• State changes announced to screen readers
• Keyboard-operable with Space key

Radio Groups

Radio buttons use role="radiogroup" with:

• Arrow keys to navigate between options
• Only the selected radio is in the tab order
• Group label provided via aria-labelledby

Customization

1. Add or remove settings tabs as needed
2. Modify form fields to match your app's settings
3. Connect form submissions to your API
4. Add validation rules using the existing error pattern