Accessibility UI Guidelines: Numbers

Numbers

2.13 Numbers

Ensuring web accessibility for individuals with dyscalculia involves simplifying numerical content, providing alternatives to numerical input, and reducing cognitive load. By designing interfaces that support users with difficulties in understanding and working with numbers, you create a more inclusive and user-friendly experience.

2.13.1 Simplifying Numerical Information

Use visual representations and contextual cues to make numerical data easier to interpret. Provide visual aids like graphs or icons and avoid requiring complex mental calculations.

<!-- Example of Simplified Numerical Information -->
<p>The rating is displayed as stars: <span aria-label="4 out of 5 stars">★★★★☆</span></p>

<p>Your order weighs: 5 kg</p>

2.13.2 Alternatives to Numerical Input

Provide alternatives to entering exact numbers, such as sliders, dropdown menus, or descriptive labels, and allow approximate values where precision is unnecessary.

<!-- Example of Alternative Input -->
<label for="rating">Select a rating:</label>
<select id="rating" name="rating">
    <option value="low">Low</option>
    <option value="medium">Medium</option>
    <option value="high">High</option>
</select>

2.13.3 Simplifying Forms and Interfaces

Highlight required fields, provide clear input instructions, and validate errors in real time to make forms more accessible.

<!-- Example of Accessible Form -->
<form>
    <label for="date">Enter your date of birth (DD/MM/YYYY):</label>
    <input id="date" type="text" placeholder="01/01/2000" required>
</form>

2.13.4 Enhancing Time and Date Selection

Use interactive widgets for date and time selection to reduce cognitive load.

<!-- Example of a Date Picker -->
<label for="appointment-date">Select your appointment date:</label>
<input id="appointment-date" type="date">

2.13.5 Accessible Representation of Math and Data

Present mathematical information using accessible tools like MathML or ARIA, and provide step-by-step examples for clarity.

<!-- Example of Accessible Math -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>a</mi>
    <mo>=</mo>
    <msqrt>
        <msup>
            <mi>b</mi>
            <mn>2</mn>
        </msup>
    </msqrt>
</math>

2.13.6 Reducing Cognitive Load

Break down information into smaller chunks and use progressive disclosure to show additional details only when needed.

<!-- Example of Progressive Disclosure -->
<p>Learn about our process:</p>
<button aria-expanded="false">Show More</button>
<div hidden>
    <p>Step 1: Research</p>
    <p>Step 2: Development</p>
</div>

2.13.7 Providing Audio and Text Alternatives

Offer audio descriptions or narrations for numerical and mathematical content to support users who prefer auditory formats.

<!-- Example of Audio Support -->
<p>Listen to the summary:</p>
<audio controls>
    <source src="summary.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

2.13.8 Assistive Tools and Features

Integrate simple calculators or similar tools into your forms to minimize the need for manual calculations.

<!-- Example of an Integrated Calculator -->
<label for="price">Price per unit:</label>
<input id="price" type="number" placeholder="10">

<label for="quantity">Quantity:</label>
<input id="quantity" type="number" placeholder="2">

<p>Total: $<span id="total">20</span></p>

2.13.9 Testing and Feedback

Conduct usability tests with individuals with dyscalculia to identify and address barriers effectively. Incorporate their feedback into your design process.