Skip to main content

Accessibility UI Guidelines: Accessible Settings

Appendix

Appendix C: Considering Accessibility Settings for Your Users

Accessibility settings empower users to tailor their interaction with your website or application to meet their individual needs. By thoughtfully incorporating accessibility options, you ensure that your digital platform is inclusive, user-friendly, and compliant with accessibility standards, benefiting all users, including those with disabilities.

C.1 Importance of Accessibility Settings

Providing accessibility settings is not only a best practice but also a legal requirement in many jurisdictions. These settings enhance usability for individuals with various disabilities, such as visual, auditory, motor, and cognitive impairments, ensuring that everyone can access and interact with your content effectively.


<!-- Example of Accessibility Importance -->
<p>Accessible websites reach a broader audience, improve user experience, and demonstrate social responsibility.</p>

C.2 Types of Accessibility Settings

There are several key accessibility settings you can offer to accommodate diverse user needs. These include:

  • Adjustable Text Size: Allows users to increase or decrease font sizes for better readability.
  • Color Contrast Options: Provides high-contrast themes to assist users with visual impairments.
  • Font Style Selection: Offers dyslexia-friendly fonts to enhance readability for individuals with dyslexia.
  • Image Visibility Toggle: Enables users to hide or show images based on their preferences.
  • Text Alignment: Allows users to adjust text alignment for improved readability.
  • Word Spacing Adjustment: Lets users modify word spacing to aid those with reading difficulties.
  • Reset Settings: Provides an option to revert all accessibility settings to their default values.

<!-- Example of Accessibility Settings Options -->
<div class="accessibility-settings">
    <label for="text-size">Text Size:</label>
    <select id="text-size" name="text-size">
        <option value="small">Small</option>
        <option value="medium" selected>Medium</option>
        <option value="large">Large</option>
    </select>
</div>

C.3 Designing an Accessible Settings Interface

The accessibility settings interface should be intuitive, easy to find, and simple to use. Consider the following design principles:

  • Visibility: Place the settings in a prominent location, such as the header or footer, ensuring they are easily discoverable.
  • Clarity: Use clear and descriptive labels for each setting to avoid confusion.
  • Consistency: Maintain a consistent design and layout across all settings to enhance usability.
  • Feedback: Provide immediate visual or auditory feedback when settings are adjusted to inform users of changes.

<!-- Example of Accessible Settings Interface -->
<nav aria-label="Accessibility Settings">
    <button id="open-accessibility-settings" aria-haspopup="dialog" aria-controls="accessibility-dialog">
        Accessibility Settings
    </button>
</nav>

C.4 Implementing ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes enhance the accessibility of web applications by providing additional semantic information to assistive technologies. Proper implementation ensures that accessibility settings are communicated effectively to users relying on screen readers and other assistive devices.


<!-- Example of ARIA Attributes for Accessibility Settings -->
<div id="accessibility-dialog" role="dialog" aria-modal="true" aria-labelledby="accessibility-title" hidden>
    <h2 id="accessibility-title">Accessibility Settings</h2>
    <!-- Settings Options Here -->
</div>

C.5 Ensuring Keyboard Accessibility

All accessibility settings should be fully operable using keyboard controls. This includes navigating to settings, adjusting options, and closing the settings interface without the need for a mouse.


// Example of Keyboard Accessible Settings Button
<button type="button" id="open-accessibility-settings" aria-haspopup="dialog" aria-controls="accessibility-dialog">
    Accessibility Settings
</button>
C.6 Persisting Accessibility Preferences Save user accessibility preferences using methods like local storage or cookies. This ensures that settings persist across sessions and pages, providing a seamless and personalised experience for returning users.

C.7 Providing Clear Instructions and Labels

Ensure that all accessibility settings come with clear instructions and labels. This helps users understand how to use each option effectively, reducing the learning curve and enhancing overall user experience.


<!-- Example of Clear Labels -->
<label for="contrast-mode">High Contrast Mode:</label>
<input type="checkbox" id="contrast-mode" name="contrast-mode" aria-checked="false">

C.8 Testing Accessibility Settings

Regularly test accessibility settings using various assistive technologies and tools to ensure they function correctly. Engage users with disabilities in the testing process to gather valuable feedback and identify areas for improvement.


// Example: Using a screen reader to verify accessibility settings
// Ensure that all settings are announced correctly and can be navigated via keyboard

C.9 Maintaining and Updating Accessibility Features

Accessibility is an ongoing process. Continuously monitor and update accessibility settings to align with evolving standards and user needs. Stay informed about the latest accessibility guidelines and incorporate user feedback to enhance your settings.


// Example: Updating Accessibility Settings Based on User Feedback
// Implement new settings or improve existing ones as needed

Best Practices for Accessibility Settings

  • Visibility and Discoverability: Ensure that accessibility settings are easily accessible from all pages, typically via a prominent button in the header or footer.
  • Clear Labels and Instructions: Use descriptive labels and provide guidance on how to use each accessibility feature effectively.
  • Customisability: Offer a range of customisation options to cater to diverse user needs, such as text size, color contrast, and font type.
  • Consistency: Maintain consistent design and behavior for accessibility settings across the entire website or application.
  • Responsive Design: Ensure that accessibility settings work seamlessly across different devices and screen sizes.
  • Persist User Preferences: Save user settings using cookies or local storage so that preferences persist across sessions and pages.
  • Keyboard Operability: All accessibility settings should be fully operable via keyboard to support users who cannot use a mouse.
  • ARIA Implementation: Utilise ARIA roles and properties to enhance compatibility with assistive technologies.
  • Regular Testing and Feedback: Continuously test accessibility settings with real users and assistive technologies to ensure effectiveness and address any issues promptly.