, \.*
* *HTML code provided to components (e.g. via TextContent or translation) should contain the correct heading level (it 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 cannot be the only distinguishing feature of an element
1. required field in a form - e.g. use of an asterisk
2. link - e.g. underlining
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 crossed-out cursor icon, strikethrough of the element
2. Audio playback control - if sound on the page lasts longer than 3 seconds, there must be a way to pause it, turn it off, 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 the product's proper name do not require minimum contrast
4. The contrast of non-text elements between graphical objects, interface elements (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 times the font size
7. After increasing the text size 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 minimum width of 320px and a minimum height of 256px. In addition, there must be no horizontal scrolling (except for two-dimensional content, e.g. tables, complex images, maps, and charts)
9. Behavior of the component when additional content is visible on hover or keyboard focus and disappears when they are removed
1. there must be a mechanism allowing the additional content to be dismissed (ESC key support must be provided to close the tooltip)
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; in particular, they should maintain the required contrast.
#### Implementation in Eximee
* *Eximee component mockups should comply with WCAG guidelines (contrast, distinguishability, etc.).*
* *All texts displayed by Eximee components should be capable of being enlarged using the appropriate tool, and therefore it should be possible to position 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
*Ensure 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 leave the component, an appropriate hint should be displayed
3. If one-character keyboard shortcuts are used, one of the following requirements must be met
1. there is a way to turn off the shortcut
2. there is a way to remap it
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 displayed 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 the content moves, flashes, scrolls, or is automatically updated, it should be possible to rewind it and pause, stop, or hide it
### Navigability
*Provide users with tools to help with navigation, finding content, and determining where they are currently located*
1. The page title should identify the current location without needing 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 special characters are used in the 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. The focus on a field should be visible, have a border with appropriate contrast and a size of at least 2px, and be consistent across all elements
7. Do not use all caps in links
#### Implementation in Eximee
* *Eximee components that require user reaction (popup, expiring session information) should automatically set focus.*
* *If the link content is an image, it should contain alternative text.*
* *ARIA attributes used in Eximee components should allow the appropriate language version to be set.*
* *If the link content is incomplete (e.g. it results from other visible content), add additional content that will not be visible but will be available to screen readers.*
### Interaction methods
*Help users operate functions using various methods beyond the keyboard.*
1. If a component is operated using multi-point gestures, it should be possible to perform the same action with a single-point gesture
2. If a component is operated by tilting, shaking, or user movement, it should be possible to disable this and provide operation via standard controls
3. If we click an element, there should be a way to cancel the action. The action should occur on the *mouseup*
4. If in a link or button we use alternative text (*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 can be read and understood.*
1. In the tag *HTML* there should be a *lang* attribute with the page language
2. If we add text in a language other than the rest of the page, it should have the *lang* with its language
3. The content read by the screen reader is understandable, without unnecessary repetition, and unambiguous for the recipient
#### Implementation in Eximee
* *If in the HTML code provided to components (e.g. via TextContent or translation) there are 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 operate in a predictable way.*
1. After a component receives focus, none of the actions may happen immediately without user confirmation
2. Changing a value in a component must not automatically perform 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 the 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 errors.*
1. If an input error is automatically detected, the incorrect 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 an input error is automatically detected, then the user should receive a clear error message and instructions on how to fix it
5. There should be a confirmation page on the form (a summary page with the possibility to verify, go back, correct the data, and submit)
6. If there is a specific data format, add alternative text with its description
#### Implementation in Eximee
* *The Eximee component element displaying error information should be associated with the form field using the aria-describedby attribute.*
* *Navigation elements of Eximee components should be associated with labels using the aria-labelledby attribute.*
* *Eximee components allowing data to be provided 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 robustly prepared so that it can be reliably interpreted by various user agents, including assistive technologies.*
1. The code should comply with the HTML standard
2. When creating custom components, ensure the appropriate role and value 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 a 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 informed by using the role="alert" attribute on the element informing about the lack of results.*
## 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 conformance 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/wcag/wcag-manifest.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
| |