DEV 6 – Ensure custom widgets are accessible

Why is this important?

The HTML standard has been around for many years; browsers and assistive technology are familiar with the information and behaviours associated with standard, “out-of-the-box” HTML elements. If you are creating your own custom widgets you need to ensure they are coded in a way that allows both users and technology to predict how they will behave.

For custom widgets not included in this section, please refer to WAI-ARIA Authoring Practices 1.2 on Design Patterns and Widgets

In this section

    • Make carousels accessible
    • Create accessible accordions
    • Create accessible modal dialogues
    • Make sure login and authentication processes are accessible
    • Ensure embedded social media code is accessible

References for this section

WCAG 2.1

EN 301 549 v 2.1.2

    • 9.1.3.1 Info and Relationships
    • 9.1.3.4 Identify Input Purpose
    • 9.2.1.1 Keyboard
    • 9.2.1.2 No Keyboard Trap
    • 9.2.2.1 Timing Adjustable
    • 9.2.2.2 Pause, Stop Hide
    • 9.2.4.1 Bypass Blocks
    • 9.2.4.3 Focus Order
    • 9.2.4.6 Headings and Labels
    • 9.2.4.7 Focus Visible
    • 9.4.1.2 Name, Role, Value

Further reading