European Web Accessibility Directive
Last modified on Wed 16 Oct 2024

The European Web Accessibility Directive (Directive (EU) 2016/2102) aims to improve the accessibility of public sector websites and mobile applications across the European Union. The directive mandates that these digital services must be accessible to people with disabilities, ensuring they can access information and services equally.

EN 5. Generic requirements

Provide clear activation options for accessibility (AA)

5.2 Activation of accessibility features

If a technology has documented features for accessibility, users should be able to enable those features using a method that directly addresses the specific accessibility need.

Figma example

Provide accessible authentication options (AA)

5.3 Biometrics 3.3.8 Accessible Authentication (Minimum) (AA)

For authentication always provide alternative identification methods, both biometric (like fingerprints, face-ID etc) and non-biometric, to ensure accessibility for all users, especially those with disabilities. Be mindful that authentication should not require cognitive function tests, like recalling passwords, unless you offer alternatives. Consider integrating support for password managers and enabling copy-and-paste options to help reduce the cognitive load.

Figma example

EN 6. ICT with two-way voice communication

Enable Real-Time Text (RTT) communication (AA)

6.2.1.1 RTT Communication 6.2.1.2 Concurrent voice and text

Ensure that digital products are designed to support simultaneous voice and real-time text (RTT) communication. Create user interfaces that clearly separate voice and text functionalities, allowing users to engage through both methods without confusion. Provide dedicated chat areas that complement audio features, ensuring users can participate fully in conversations.

Figma example

Visually separate sent vs received text (AA)

6.2.2.1 Visually distinguishable display

In technology with real-time text (RTT) capabilities, text that you send should look different and be separated from the text that you receive. This gives users the flexibility to display RTT in the way that works best for them. For example, Braille users might prefer to use a single field for both sending and receiving text.

Figma example

Clearly identify speaker in RTT communication (AA)

6.2.2.3 Speaker identification

For Real-Time Text (RTT) communication, ensure that each speaker is clearly identified. Display the speaker's name alongside their text so participants can easily recognize who is contributing to the conversation. This is essential for maintaining clarity and engagement, especially in multi-party discussions.

Figma example

Provide visual indicators for audio in RTT communication (AA)

6.2.2.4 Visual indicator of Audio with RTT

Digital products that support both two-way voice communication and Real-Time Text, must include a real-time visual indicator of audio activity. This can be represented by a simple flickering icon or character on the display that reflects when someone is speaking. This visual cue is essential for users with hearing impairments, as it informs them when audio is occurring, ensuring they stay engaged in the conversation.

Figma example

Provide alternatives to voice-based services (AA)

6.4 Alternatives to voice-based services

Users should not be limited to voice-only services, such as telephone customer support. When digital product includes real-time voice communication, it is essential to offer alternative options, such as text-based chat support or email support. This ensures that users can access information and complete tasks without needing to rely on hearing or speech.

Figma example

Include visual indicators for audio in video (AA)

6.5.5 Visual indicator of audio with video

When digital products offer two-way voice communication along with real-time video capabilities, it is essential to provide a visual indicator that shows audio activity. This could be a simple visual cue, such as a dot or LED that flickers to reflect when someone is speaking. This visual indication is crucial for users who are deaf or hard of hearing, as it informs them when audio is occurring, ensuring they remain engaged in the conversation.

Figma example

EN 7. ICT with cideo capabilities

Provide accessible captioning for video playback (AA)

EN 7.1.1 Captioning playback

When incorporating video with synchronized audio in your design, make sure there’s an option to display available captions and a way to turn them on or off as needed. Provide users with timing, color, and positioning details. Timing ensures captions sync with the audio, color helps identify speakers, and positioning prevents important visual elements from being blocked.

For people using Braille devices, it provides an option to display captions on the device.

Figma example

Preserve caption formatting (AA)

EN 7.1.3 Preservation of captioning name

When converting video formats, make sure to keep caption formatting consistent. Keeping timing, color, and positioning consistent across the board ensures the correct display of information.

Figma example

Allow customization of captions (AA)

EN 7.1.4 Captions characteristics

Provide the users with options to adapt caption characteristics to their individual needs, such as adjusting background and foreground colors, font type, size, and the opacity of subtitle boxes. This does not apply to unmodifiable formats like bitmap images.

Figma example

Implement audio descriptions (AA)

EN 7.2.1 Audio description playback

Ensure your design includes a simple way for users to select and play audio descriptions through the default audio channel to provide visually impaired users with context. If built-in audio description tools are not available, provide multiple tracks, with one designated for audio descriptions. Also, support extended audio descriptions for long visual sequences without dialogue; this way, the dialogue gaps are filled with detailed explanations of the visuals on the screen.

Figma example

Design accessible controls for captions and audio descriptions (AA)

EN 7.3 User controls for captions and audio description

To enhance usability for those who rely on captions and audio descriptions, make these features as accessible, intuitive, and direct as most commonly used controls. You can do that by providing the same level of interaction, that is, the same number of steps to complete the task.

Figma example

EN 11. Perceivable

Adapt to users accessibility preferences (AA)

11.7 User preferences

If your product is integrated with a platform (like Windows, macOS, or mobile OS), ensure it aligns with the platform's user preferences: units of measurement, color, contrast, font type, font size, and focus cursor settings. For web-based applications, the platform is the web browser, and the software should respect the browser's accessibility settings. If the product is independent from its underlying platform and has no access to user settings, it doesn't have to adhere to them.

Figma example