, \.*
* *HTML code provided to components (e.g. via TextContent or translation) should contain the proper heading level (they should not start with \).*
* *HTML code provided to components (e.g. via TextContent or translation) should contain texts in semantic elements, e.g. \, \ , \.*
### Distinguishability
*Make it easier to view and hear content and to separate information from background.*
1. Color must not be the only distinguishing feature of an element
1. required field in a form - e.g. using an asterisk
2. link - e.g. underline
3. chart - e.g. highlighting a line with a geometric shape, a dashed line, or a label
4. inactive field - e.g. an additional border, a crosshair icon, strikethrough of the element
2. Audio control - if audio on the page lasts longer than 3 seconds, there must be a way to pause or stop it, or control the volume
3. The text contrast ratio must be at least 4.5:1
1. if the text is large (larger than 24px or bold 18.5px), it must have a contrast of at least 3:1
2. decorative elements, logos, and product proper names do not require minimum contrast
4. The contrast of non-text elements between graphical objects, user interface components (not applicable to inactive elements), and the adjacent element must be at least 3:1
5. Do not place text as an image (logo excepted)
6. After increasing text spacing, all elements must still be visible and readable
1. line height to at least 1.5 times the font size
2. paragraph spacing to at least 2 times the font size
3. letter spacing to at least 0.12 times the font size
4. word spacing to at least 0.16 of the font size
7. When the text size is increased even to 200%, there must be no loss of information or functionality
8. Responsiveness - content must be presented without loss of information or functionality on screens with a width of at least 320px and a height of at least 256px. Additionally, there must be no horizontal scrolling (except for two-dimensional content such as tables, complex images, maps, and charts)
9. Behavior of the component when additional content is visible on mouse hover or keyboard focus, and disappears when they are removed
1. there must be a mechanism allowing the additional content to be dismissed (support for the ESC key closing the tooltip must be provided)
2. the additional content remains visible until dismissed by the user or until its information is no longer relevant
10. All elements should be visible when high-contrast mode is enabled in the operating system, and in particular they should retain the required contrast.
#### Implementation in Eximee
* *Eximee component mockups should comply with WCAG guidelines (contrast, emphasis, etc.).*
* *All texts displayed by Eximee components should be able to be enlarged using an appropriate tool, and therefore it should be possible to place the cursor over the text (e.g. over tooltip text).*
* *Labels displayed inside Eximee components should be preserved on screens with a width of 320px.*
## Functionality
*User interface components and navigation should be usable*
### Keyboard accessibility
*Provide access to all functionality via the keyboard*
1. It must be possible to navigate the page using only the keyboard
2. If focus can be moved using the keyboard, it must be possible to remove it in the same way. If there is another way to exit the component, an appropriate hint should be displayed
3. If we use single-character keyboard shortcuts, one of the following requirements should be met
1. it is possible to disable the shortcut
2. it is possible to change the mapping
3. the shortcut is active only when it has focus
### Enough time
*Give users enough time to read and use the content*
1. When the time for using the content is limited, information about the remaining time must be shown and at least one of the following conditions must be met
1. the user can turn off the time limit before it expires
2. the user can extend the time limit
3. the user can adjust the time
2. If content moves, flashes, scrolls, or is automatically updated, there should be a way to pause, stop, or hide it
### Navigability
*Provide users with tools to help navigate, find content, and determine where they currently are*
1. The page title should identify the current location without having to read the page content
2. Focus should move from left to right, and after a page change it should be on the h1 heading or the initial landmark
3. Links must clearly indicate what they do and where they lead
4. If we use special characters in content, e.g. an arrow, it should be hidden using *aria-hidden*
5. Headings and labels must describe the topic or purpose of the content
6. Focus on a field should be visible, have a border with adequate contrast and a size of at least 2px, and be consistent across all elements
7. Do not use all caps in links only
#### Implementation in Eximee
* *Eximee components requiring user action (popup, expiring session information) should automatically set focus.*
* *If the content of a link is an image, it should contain alternative text.*
* *ARIA attributes used in Eximee components should allow an appropriate language version to be set.*
* *If the content of a link is incomplete (e.g. derived from other visible content), additional content should be added that will not be visible but will be accessible to screen readers.*
### Input methods
*Make it easier for users to operate functions in ways other than the keyboard.*
1. If a component is operated using multi-point gestures, it should also be possible to perform the same action with a single-point gesture
2. If a component is operated by tilting, shaking, or by user movement, it should be possible to disable this and provide control via standard controls
3. If we click an element, it should be possible to cancel the action. The action should take place on the event *mouseup*
4. If we use alternative text in a link or button (*aria-label*) then it should start with the label text
## Understandability
*The content and operation of the user interface must be understandable.*
### Readability
*Create content that is readable and understandable.*
1. The tag *HTML* should have the attribute *lang* with the page language
2. If we add text in a language other than the rest of the page, it should have the attribute *lang* with its language
3. Content read by a screen reader is understandable, free of unnecessary repetition, and unambiguous for the recipient
#### Implementation in Eximee
* *If the HTML code provided to components (e.g. via TextContent or translation) contains texts in a language other than the rest of the page, we can assign them the lang attribute, e.g. by placing them in a \ element.*
### Predictability
*Create websites so that they open, look, and function in a predictable way.*
1. After a component receives focus, no action may happen immediately without user confirmation
2. Changing a value in a component must not automatically trigger any context-change action
3. Navigation elements should be in the same place on subpages
4. The same elements on different pages should have the same labels
5. The user should be informed that a link will open in a new tab or another application
#### Implementation in Eximee
* *If the HTML code provided to components (e.g. via TextContent or translation) contains links that open in another tab or application, additional information can be provided that will not be visible, but will be read by screen readers (e.g. by placing it in a \ element).*
### Input assistance
*Help users avoid and correct mistakes.*
1. If a data entry error is automatically detected, the erroneous component should be highlighted and the user should receive an error description
2. Each form field should have a label or instruction
3. Each navigation element of the component should have a label.
4. If a data entry error is automatically detected, the user should receive a clear error message and instructions on how to fix it
5. The form should include a confirmation page for the data (a summary page with the ability to review, go back and correct the data, and submit it)
6. If there is a specific data format, add alternative text with its description
#### Implementation in Eximee
* *The Eximee component element displaying the error message should be associated with the form field using the aria-describedby attribute.*
* *The navigation elements of Eximee components should be associated with labels using the aria-labelledby attribute.*
* *Eximee components that allow data to be entered in a specific format should contain hidden text describing that format (e.g. a \ element with the aria-hidden=false attribute).*
## Robustness
*Content must be robust enough to be interpreted reliably by a variety of user agents, including assistive technologies.*
1. Code should comply with the HTML standard
2. When creating custom components, appropriate role and value should be ensured by using ROLE and ARIA-\* attributes
3. If we display a message that does not have focus, we need to ensure it is read by the screen reader via role
#### Implementation in Eximee
* *Eximee components that control the visibility of elements should also dynamically control the aria-hidden attributes.*
* *Eximee components that control the expansion of elements should also dynamically control the aria-expanded attributes.*
* *Eximee components that obtain a set of result data (e.g. filters, searches) should announce the set of found results using invisible elements with aria-atomic="true" and aria-live="polite" attributes. In the case of an empty result set, the user should be notified by using the role="alert" attribute on the element indicating that no results were found.*
## Useful tools
1. Screen reader
1. [NVDA](https://www.nvda.pl/)
2. [JAWS](https://www.freedomscientific.com/products/software/jaws/)
3. VoiceOver
4. TalkBack
2. Validator
1. [Wave](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)
2. [ARC Toolkit](https://chromewebstore.google.com/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce)
3. [axe DevTools](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)
3. HTML compliance validator
1. [W3C Markup Validation Service](https://validator.w3.org/#validate_by_input)
4. Contrast analysis
1. [Colour Contrast Analyzer](https://www.tpgi.com/color-contrast-checker/)
5. [Text resizing](https://codepen.io/stevef/pen/YLMqbo/)
6. Tab *Accessibility* in Firefox
## Materials
*
*
*
*
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/wcag/wcag-manifest.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
| |