Skip to main content
Centre for Excellence in Universal Design logo
  • National Disability Authority
  • Home
  • About Us

    • Overview of About Us
    • What We Do
    • Monitoring and Compliance
    • Contact Us
    • Privacy
    • Copyright
    • Disclaimer
    • Accessibility Statement
  • News & Events
  • About Universal Design

    • Overview of About Universal Design
    • Definition and Overview of Universal Design (UD)
    • History of Universal Design
    • Benefits and Drivers
    • Policy and Legislation
    • Standards
    • Universal Design of Products and Services
    • Universal Design Approach
    • Awards
    • The 7 Principles
  • Built Environment

    • Overview of Built Environment
    • eLearning Module - Buildings for Everyone: Central Bank of Ireland
    • Building for Everyone
    • Housing
    • Early Learning and Care Settings
    • Residential Long Term Care Settings for Older People
    • Walkability Auditing
    • Shared Space
    • Shared Educational Campuses
    • Universal Design Guidelines for Changing Places Toilets
    • Built Environment CPD
  • Communications & Digital

    • Overview of Communications & Digital
    • Web and Mobile Accessibility
    • ICT Research and Guidelines (Archived content)
    • Customer Communications Toolkit for Services to the Public - A Universal Design Approach
    • European Accessibility Act
  • Education

    • Overview of Education
    • Primary Level Education
    • Secondary Level Education
    • Third Level Education
    • Continuous Professional Development
  • Press Enter to search or press Esc to dismiss the search dialog

  • National Disability Authority
  1. Home
  2. Communications & Digital
  3. Web and Mobile Accessibility
  4. Web Accessibility Techniques
  5. Developer's Introduction and Index
  6. Ensure Custom Widgets are accessible

Ensure Custom Widgets are accessible

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
  • References for this section
  • Further reading

Web Accessibility Techniques

  • Design accessible digital content - introduction and index
  • Content Provider's Introduction and Index
  • Developer's Introduction and Index

    • Provide an accessible page structure and layout
    • Design accessible navigation
    • Ensure images, video and audio are accessible to everyone
    • Keep tables and data representation simple
    • Provide accessible forms
    • Ensure Custom Widgets are accessible

      • 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
    • Code according to best practices
    • Use ARIA appropriately
    • Always test your site with users who have access needs

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

  • 1.3.1 Info and Relationships (A)
  • 1.3.4 Identify Input Purpose (AA)
  • 1.3.6 Identify Purpose (AAA)
  • 2.1.1 Keyboard (A)
  • 2.1.2 No Keyboard Trap (A)
  • 2.2.1 Timing Adjustable (A)
  • 2.2.2 Pause, Stop Hide (A)
  • 2.4.1 Bypass Blocks (A)
  • 2.4.3 Focus Order (A)
  • 2.4.6 Headings and Labels (AA)
  • 2.4.7 Focus Visible (AA)
  • 3.2.5 Change on Request (AAA)
  • 4.1.2 Name, Role, Value (A)

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

  • Alison Walden - If you must use a carousel, make it accessible
  • Bureau of Internet Accessibility - Effective and Accessible Alternatives to Website Carousels
  • Deque University - Custom Widgets Accessibility Checklist
  • Hassel Inclusion - My Favourite Accessible Accordion Pattern
  • Aditus - Accessible Accordion
  • Deque University - Custom Widgets Accessibility Checklist
  • The Incredible Accessible Modal Window, Version 3
  • WAI-ARIA Authoring Practices 1.2 - Design Patterns and Widgets
  • WAI Tutorials – Carousel Concepts
  • About Universal Design
  • Definition and Overview of Universal Design (UD)
  • History of Universal Design
  • Benefits and Drivers
  • Policy and Legislation
  • Standards
  • Universal Design of Products and Services
  • Universal Design Approach
  • Awards
  • The 7 Principles
  • News & Events
  • Overview of Built Environment
  • eLearning Module - Buildings for Everyone: Central Bank of Ireland
  • Building for Everyone
  • Housing
  • Early Learning and Care Settings
  • Residential Long Term Care Settings for Older People
  • Walkability Auditing
  • Shared Space
  • Shared Educational Campuses
  • Universal Design Guidelines for Changing Places Toilets
  • Built Environment CPD
  • Overview of Communications & Digital
  • Web and Mobile Accessibility
  • ICT Research and Guidelines (Archived content)
  • Customer Communications Toolkit for Services to the Public - A Universal Design Approach
  • European Accessibility Act
  • Overview of Education
  • Primary Level Education
  • Secondary Level Education
  • Third Level Education
  • Continuous Professional Development
  • Privacy
  • Copyrights
  • Disclaimer
  • Cookie Policy
  • Accessibility Statement
  • Sitemap

Contact Us

25 Clyde Road Dublin 4, D04 E409 Ireland
Tel: +353 (0) 1 6080 400 Fax: +353 (0) 1 660 9935 Email: info@ceud.ie
National Disability Authority logo

The National Disability Authority

The National Disability Authority (NDA) is the independent statutory body that provides information and advice to Government on policy and practice relevant to the lives of persons with disabilities. The NDA assists in the co-ordination of disability policy, and also promotes Universal Design through the Centre for Excellence in Universal Design.

Visit the NDA site

©2025 CEUD   |   All right reserved

Website by Kooba