> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qaos.machdel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI/UX Issues Overview

> QAOS detects 20+ UI/UX and accessibility issues mapped to WCAG 2.1 guidelines and UX best practices.

The QAOS UI/UX Agent audits your web application against **WCAG 2.1** accessibility standards and general UX best practices, ensuring your application is usable by all users — including those using assistive technologies, touch devices, or keyboard-only navigation.

***

## Issue catalog

| Issue ID                                                                                        | Category      | Severity                                                       |
| ----------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------------------- |
| [`missing-error-messages`](/issues/quality/forms#missing-error-messages)                        | Forms         | <span style={{color:'#dc2626',fontWeight:600}}>Critical</span> |
| [`error-not-visible`](/issues/quality/forms#error-not-visible)                                  | Forms         | <span style={{color:'#dc2626',fontWeight:600}}>Critical</span> |
| [`no-confirmation-critical-action`](/issues/quality/navigation#no-confirmation-critical-action) | Navigation    | <span style={{color:'#dc2626',fontWeight:600}}>Critical</span> |
| [`not-keyboard-reachable`](/issues/quality/accessibility#not-keyboard-reachable)                | Accessibility | <span style={{color:'#f97316',fontWeight:600}}>High</span>     |
| [`not-keyboard-activatable`](/issues/quality/accessibility#not-keyboard-activatable)            | Accessibility | <span style={{color:'#f97316',fontWeight:600}}>High</span>     |
| [`unclear-link-text`](/issues/quality/navigation#unclear-link-text)                             | Navigation    | <span style={{color:'#f97316',fontWeight:600}}>High</span>     |
| [`inconsistent-navigation`](/issues/quality/navigation#inconsistent-navigation)                 | Navigation    | <span style={{color:'#f97316',fontWeight:600}}>High</span>     |
| [`missing-page-title`](/issues/quality/responsive#missing-page-title)                           | Responsive    | <span style={{color:'#f97316',fontWeight:600}}>High</span>     |
| [`missing-form-labels`](/issues/quality/accessibility#missing-form-labels)                      | Accessibility | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`button-no-text`](/issues/quality/accessibility#button-no-text)                                | Accessibility | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`missing-alt-text`](/issues/quality/accessibility#missing-alt-text)                            | Accessibility | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`insufficient-color-contrast`](/issues/quality/accessibility#insufficient-color-contrast)      | Accessibility | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`text-too-small`](/issues/quality/accessibility#text-too-small)                                | Accessibility | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`missing-focus-indicator`](/issues/quality/accessibility#missing-focus-indicator)              | Accessibility | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`required-field-not-marked`](/issues/quality/forms#required-field-not-marked)                  | Forms         | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`touch-target-too-small`](/issues/quality/responsive#touch-target-too-small)                   | Responsive    | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`horizontal-overflow`](/issues/quality/responsive#horizontal-overflow)                         | Responsive    | <span style={{color:'#eab308',fontWeight:600}}>Medium</span>   |
| [`empty-alt-informative-image`](/issues/quality/accessibility#empty-alt-informative-image)      | Accessibility | <span style={{color:'#84cc16',fontWeight:600}}>Low</span>      |
| [`error-not-associated`](/issues/quality/forms#error-not-associated)                            | Forms         | <span style={{color:'#84cc16',fontWeight:600}}>Low</span>      |
| [`button-no-icon`](/issues/quality/responsive#button-no-icon)                                   | Responsive    | <span style={{color:'#84cc16',fontWeight:600}}>Low</span>      |
| [`touch-target-spacing-too-small`](/issues/quality/responsive#touch-target-spacing-too-small)   | Responsive    | <span style={{color:'#84cc16',fontWeight:600}}>Low</span>      |

***

## WCAG mapping

Most UI/UX issues in QAOS map directly to WCAG 2.1 success criteria:

| WCAG Criterion               | QAOS Issue                                           |
| ---------------------------- | ---------------------------------------------------- |
| 1.1.1 Non-text Content       | `missing-alt-text`, `empty-alt-informative-image`    |
| 1.3.1 Info and Relationships | `missing-form-labels`, `error-not-associated`        |
| 1.4.3 Contrast (Minimum)     | `insufficient-color-contrast`                        |
| 1.4.4 Resize Text            | `text-too-small`                                     |
| 2.1.1 Keyboard               | `not-keyboard-reachable`, `not-keyboard-activatable` |
| 2.4.3 Focus Order            | `missing-focus-indicator`                            |
| 2.4.6 Headings and Labels    | `missing-form-labels`                                |
| 3.2.3 Consistent Navigation  | `inconsistent-navigation`                            |
| 3.3.1 Error Identification   | `missing-error-messages`, `error-not-visible`        |
| 3.3.2 Labels or Instructions | `required-field-not-marked`                          |
| 2.4.2 Page Titled            | `missing-page-title`                                 |