Accessibility UI Guidelines: Ease Switcher

3.5 Ease Switcher

Ease Switcher is a custom web component designed by AUIG to improve accessibility and readability by offering users multiple versions of text with varying complexity. This allows readers to select a version of the content that best matches their reading ability or preference. By cycling through text variations, Ease Switcher provides a tailored experience that accommodates diverse accessibility needs.

3.5.0 Live Example

This is a detailed and elaborately structured paragraph, showcasing the potential for a more intricate version of textual content. Users seeking depth or additional information may prefer this complexity.

This is a moderately simplified version of the text. It is less detailed but retains essential information for effective understanding.

This is the simplest version. It uses short and clear sentences for easier reading.

Source code: Ease Switcher

Limitations Ease Switcher uses the Shadow DOM, which provides benefits such as encapsulated styles and structure, preventing interference from global CSS. However, this means that theme switches will not automatically apply unless you pass in the appropriate props to update the component's styles dynamically.

3.5.1 Key Features

Customisable Properties: Supports multiple props to style the component and control its behavior, such as button size, hover color, and text status.
Dynamic Content: Cycles through different versions of text to ensure readability for users with varied needs.
Improved Accessibility: Includes live region updates and ARIA attributes to support assistive technologies.
Framework Support: Currently available in the AUIG repository, with plans to release React, Vue, and Angular versions soon.

3.5.2 Semantic Markup

Ease Switcher uses semantic HTML and ARIA roles to ensure accessible and dynamic content cycling. Each content version is hidden visually and from screen readers when not active.


<!-- Basic Ease Switcher Markup -->
<ease-switcher status-text="Switch version">
    <div slot="1">Simple version of text.</div>
    <div slot="2">Moderate version of text.</div>
    <div slot="3">Complex version of text.</div>
</ease-switcher>

3.5.3 Customisable Properties

Ease Switcher supports a variety of props to customise its appearance and behavior. Below are examples demonstrating how to configure the component.

Basic Example

<!-- Default Ease Switcher -->
<ease-switcher>
    <div slot="1">Basic version.</div>
    <div slot="1">Basic version.</div>
    <div slot="2">Detailed version.</div>
</ease-switcher>

Fully Customised Example


<!-- Customised Ease Switcher -->
<ease-switcher
        status-text="Cycle through versions"
        button-fill="#28a745"
        button-stroke="#ffffff"
        border-colour="#6c757d"
        background-colour="#f8f9fa"
        foreground-colour="#343a40"
        font-size="1rem"
        button-size="3rem"
        button-hover-colour="#ff5733">
    <div slot="1">Simple text version.</div>
    <div slot="2">Intermediate text version.</div>
    <div slot="3">Advanced text version.</div>
</ease-switcher>

3.5.4 Accessibility Enhancements

Ease Switcher improves accessibility through several features:

Dynamic Text Updates: Uses a live region (aria-live="polite") to announce text changes to assistive technologies.
Keyboard Support: The toggle button is fully operable with the keyboard, supporting Enter and Space keys.
ARIA Attributes: Hidden elements use aria-hidden to ensure only the active text is announced by screen readers.

3.5.5 Plans for Framework Support

While the current implementation of Ease Switcher is available as a standalone web component in the AUIG repository, additional versions are planned for major frameworks, including:

React: A React component version with hooks for state management.
Vue: A Vue component version leveraging its reactive data system.
Angular: An Angular component version with declarative bindings.

3.5.6 Best Practices for Using Ease Switcher

Use Descriptive Slots: Ensure each slot contains clear and concise text for effective content cycling.
Configure Props Thoughtfully: Customise props like button-hover-colour and font-size to match your design and accessibility requirements.
Test Accessibility: Verify that live region updates, ARIA attributes, and keyboard navigation work as expected across devices and screen readers.
Plan Framework Integration: Consider integrating Ease Switcher into your preferred framework when additional versions are released.
Maintain Button Consistency: Ensure the toggle button retains a familiar and recognisable design. Consistent styling allows users to quickly understand its purpose and functionality. Avoid overdesigning the button, as this can create confusion and undermine its original intent.