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

    • Info and Relationships
    • Identify Input Purpose
    • Keyboard
    • No Keyboard Trap
    • Timing Adjustable
    • Pause, Stop Hide
    • Bypass Blocks
    • Focus Order
    • Headings and Labels
    • Focus Visible
    • Name, Role, Value

Further reading