Puzzel as a Accessibility and Universal Design compliant solution (WCAG)

Through our focus on web page structure, keyboard navigation, keyboard shortcuts, WAI-ARIA code conventions, and colour contrast, Puzzel has created an inclusive and accessible user experience and has successfully met the WCAG AA 2.1 compliance criteria. 

By addressing the WCAG AA 2.1 guidelines, we have demonstrated our commitment to providing equal opportunities and accessibility to all users. These efforts contribute to a more inclusive digital environment for Puzzel users of all abilities.  

Puzzel's commitment to accessibility fosters equal opportunities, empowers users, and contributes to a more inclusive digital environment. 


This page provides a detailed overview of how the Puzzel Agent application has achieved compliance with the Web Content Accessibility Guidelines (WCAG) 2.1 AA standard.  

The Agent application has undergone significant enhancements to ensure accessibility for all. In this page, you will find the measures taken by Puzzel in key areas, including web page structure, keyboard navigation, keyboard shortcuts, WAI-ARIA code conventions for screen readers like JAWS, and colour contrast. 

Web Accessibility, WCAG and Why They Matter 

Web accessibility is of paramount importance as it ensures that individuals with disabilities have equal access to digital content and services. The Internet has become an integral part of our daily lives, providing essential information, services, and opportunities. However, without accessibility, people with disabilities face barriers that limit their ability to fully participate and engage online. 

WCAG compliance is instrumental in assisting users with accessibility needs by ensuring that digital content and services are designed and developed inclusively. By adhering to WCAG guidelines, websites and applications strive to provide equal access to all. WCAG compliance improves the overall user experience by making digital content perceivable, operable, understandable, and robust. 

Web Page Structure 

Our application utilises proper HTML markup to establish a logical hierarchy of content using headings (h1-h6). This hierarchical structure enables users relying on screen readers or other assistive technologies to navigate through the application more efficiently and understand the hierarchy of information on each page. 

Semantic markup has been implemented throughout our application. Form elements, buttons, and other interactive components have been appropriately labelled to provide meaningful descriptions, helping users with disabilities understand the purpose and functionality of various elements within the application. 

Keyboard Navigation 

Keyboard navigation is crucial for users who cannot utilise a mouse or other point and select devices. Puzzel's agent application ensures comprehensive keyboard accessibility. All interactive elements, including buttons, links, and form controls, can be accessed and activated using the keyboard alone. The application maintains a logical tab order, allowing users to navigate through elements in a predictable and meaningful sequence. 

Focus indicators have been thoughtfully implemented to highlight the currently focused element, assisting users with visual impairments in understanding their position within the application. The focus management strategy ensures that keyboard users can effectively navigate and interact with the various components of the application. 

Keyboard Shortcuts 

To enhance efficiency and accessibility, we have integrated keyboard shortcuts for the agent application. These shortcuts provide users with quick access to frequently used features or functions, reducing the reliance on mouse interactions. 

A comprehensive list of keyboard shortcuts is available within the application's documentation and help section. Puzzel has designed these shortcuts to align with WCAG AA 2.1 compliance guidelines, avoiding conflicts with browser or operating system shortcuts and ensuring an optimised user experience. 


WAI-ARIA enables web developers to enhance the accessibility of dynamic and interactive web content, particularly for users relying on screen readers like JAWS. 

The agent application incorporates appropriate ARIA roles, properties, and states to provide additional context and information to assistive technologies. This ensures that users with disabilities using screen readers can effectively navigate, interact, and understand the various components of the application. 

Colour Contrast 

We understand the significance of colour contrast for individuals with visual impairments or colour vision deficiencies. The agent application has been designed to comply with WCAG AA 2.1 colour contrast guidelines. 

The application ensures a sufficient contrast ratio between foreground and background elements, including text, icons, and other visual indicators. By prioritising adequate colour contrast, we have ensured that all users, irrespective of their visual capabilities, can perceive and understand the content within the application. 

Consistent Navigation and Design Patterns 

Our application maintains consistent navigation and design patterns throughout the user interface. This consistency ensures that users can predict and understand how to interact with various elements and functionality across different areas.

By maintaining a uniform layout, labelling conventions, and interaction behaviours, Puzzel provides a more intuitive and accessible experience for all users. 

Form Accessibility 

Forms within the application have been designed with accessibility in mind. Form fields include descriptive labels or placeholders that provide clear instructions or context for users.

Additionally, appropriate error messages are displayed and associated with specific form fields, allowing users to understand and resolve any input errors. The form validation is performed both client-side and server-side, providing feedback to users in an accessible manner. 

Examples of WCAG AA 2.1 Compliance in the Puzzel Agent Aplication




23/10/2020 - 15:43

Last updated

07/06/2023 - 10:58