WCAG - manifest
Perceivable
Information and user interface components must be presented to users in a way that is perceivable by their senses.
Text alternative
Provide text alternatives for all non-text content so it can be changed into other forms (e.g., large print, braille, speech, symbols, or simpler language).
Images, charts, maps must have alternative content added via the attribute Empty attribute.
If an element conveys information it must have alternative text
If an element is purely decorative, provide an empty alternative text value and give the element the role "presentation"
If the element is a link, put the purpose of that link in the alternative text
Implementation in Eximee:
Components created in Eximee that contain graphics should allow specifying an alt attribute. This also applies to components that allow supplying the graphic location via a data source. Components should support internationalization of alternative texts.
HTML code provided to components (e.g., via TextContent or translation) should include a properly defined alt attribute for <img/> elements.
Adaptability
Create content that can be presented in different ways without losing information or structure.
Use the appropriate heading order. There should be one heading on the page h1, and the next in the hierarchy should be (h2 GesCheckbox11.ariaLabel h3 GesCheckbox11.ariaLabel h4 ...)
List
Use list tags in the correct order
Use lists to bullet links
If you remove the default list marker, add the attribute to the main list tag role="list"
Table
Use the caption tag to describe table content
Use header cells th
Tables should be as regular and simple as possible
The order of displayed information should be logical and determined by the order in the DOM
Elements displayed from left to right and top to bottom
Ensure proper tab order
Navigation elements and messages must not rely on: shape, visual location, color, sound
Displayed content must be properly handled in both portrait and landscape orientations
Data-collecting fields should specify the desired value. You should add the attribute autocomplete with an appropriate value
Implementation in Eximee
Eximee components should use standard HTML elements - this greatly facilitates document reading by external tools. If that is not possible, use appropriate roles and aria attributes in accordance with https://www.w3.org/WAI/ARIA/apg/patterns/
Texts in Eximee components should be placed in semantic elements, e.g.: <p>, <li>, <td>.
HTML code provided to components (e.g., via TextContent or translation) should contain the proper heading levels (they should not start with <h1>).
HTML code provided to components (e.g., via TextContent or translation) should contain texts in semantic elements, e.g.: <p>, <li>, <td>.
Distinguishability
Make it easier to see and hear content and separate foreground from background.
Color must not be the only means of conveying an element
required field on a form - e.g., using an asterisk
link - e.g., underline
chart - e.g., highlight a line with a geometric shape, dashed line, or label
inactive field - e.g., additional border, cursor cross icon, strikethrough of the element
Audio playback control - if audio on the page lasts longer than 3 seconds there must be a way to pause or turn it off or control the volume
Text contrast ratio must be at least 4.5:1
if the text is large (larger than 24px or bold 18.5px) it must have a contrast of at least 3:1
decorative elements, logos and product trade names do not require minimum contrast
Contrast of non-text elements between graphical objects, interface elements (excluding inactive elements), and adjacent elements must be at least 3:1
Do not place text as an image (logo excepted)
After increasing text spacing, all elements must still be visible and readable
line height to at least 1.5 times the font size
paragraph spacing to at least 2 times the font size
letter spacing to at least 0.12 times the font size
word spacing to at least 0.16 times the font size
After increasing text size even up to 200% there must be no loss of information or functionality
Responsiveness - content must be presented without loss of information or functionality on screens with a minimum width of 320px and minimum height of 256px. Additionally, there must be no horizontal scrolling (exceptions are two-dimensional content such as tables, complex images, maps and charts)
Behavior of a component when additional content appears on hover or keyboard focus and disappears after they are removed
there must be a mechanism allowing dismissal of the additional content (ensure ESC key handling to close the tooltip)
additional content remains visible until dismissed by the user or the information is no longer relevant
All elements should be visible when high contrast mode is enabled in the operating system and in particular should maintain the required contrast.
Implementation in Eximee
Eximee component mockups should comply with WCAG guidelines (contrast, highlighting, 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 operable
Keyboard accessibility
Ensure all functionality is available via keyboard
It must be possible to navigate the site using only the keyboard
If focus can be moved using the keyboard then 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
If single-character keyboard shortcuts are used, one of the following requirements should be met
there is a way to disable the shortcut
there is a way to change the mapping
the shortcut is active only when it has focus
Enough time
Give users enough time to read and use content
When time to use content is limited, information with the remaining time must appear and at least one of the following conditions must be met
the user can turn off the time limit before time expires
the user can extend the time limit
the user can adjust the time
If content moves, flashes, scrolls, or is automatically updated it should have the ability to reverse and to pause or hide
Navigability
Provide users with tools to help navigate, find content, and determine where they are
The page title should identify the current location without needing to read the page content
Focus should move from left to right, and after a page change it should be on the h1 heading or the initial landmark
Links must clearly indicate what they do and where they lead
If special characters are used in content e.g., an arrow, it should be hidden using aria-hidden
Headings and labels must describe the topic or purpose of the content
Focus on a field should be visible, have a border with appropriate contrast and size of at least 2px and be consistent across all elements
Do not use only uppercase letters in links
Implementation in Eximee
Eximee components that require user reaction (popup, session expiry notice) 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 setting the appropriate language version.
If the link content is incomplete (e.g., derives from other visible content) additional content should be added that will not be visible but will be available to screen readers.
Input methods
Make it easier for users to operate functions using methods other than the keyboard.
If a component is operated by multi-touch gestures there should be a way to perform the same action with a single-point gesture
If a component is operated by tilting, shaking or user movement there should be a way to disable that and provide operation via standard controls
If we click on an element there should be a way to cancel the action. The action should execute on the mouseup
If in a link or button we use alternative text (aria-label) it should start with the text from the label
Understandability
Content and user interface operation must be understandable.
Readability
Create content that can be read and understood.
In the CSS tag there should be an attribute lang with the page language
If we add text in a different language than the rest of the page it should have the lang attribute with its language
Content read by a screen reader should be understandable, without 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 different language than the rest of the page, we can give them a lang attribute, e.g., by placing them in a <span> element.
Predictability
Design web pages so they open, look and behave in a predictable way.
When a component receives focus, no action may occur immediately without user confirmation
Changing a value in a component must not automatically perform any context-changing action
Navigation elements should be in the same place on subpages
The same elements on different pages should have the same labels
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 <span> element).
Assistance with input
Help users avoid and correct mistakes.
If an input error is automatically detected, the erroneous component should be highlighted and the user should receive an error description
Each form field should have a label or instruction
Each navigational element of a component should have a label.
If an input error is automatically detected, the user should receive a clear error message and instructions on how to fix it
The form should include a confirmation page (a summary page with the ability to verify, go back and correct data, and submit)
If a specific data format is required, add alternative text describing it
Implementation in Eximee
The Eximee component element displaying an error message 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 that accept data in a specific format should include hidden text describing that format (e.g., a <span> element with aria-hidden=false).
Robustness
Content must be robustly prepared so it can be reliably interpreted by various user agents, including assistive technologies.
Code should conform to the HTML standard
When creating custom components, provide appropriate role and value by using ROLE and ARIA-* attributes
If we display a message that does not have focus, ensure it is read by a screen reader via roles
Implementation in Eximee
Eximee components that control element visibility should also dynamically manage aria-hidden attributes.
Eximee components that control expansion of elements should also dynamically manage aria-expanded attributes.
Eximee components that obtain a set of result data (e.g., filters, searches) should notify about the set of found results using invisible elements with attributes aria-atomic="true" and aria-live="polite". In case of an empty result set, inform the user by using the role="alert" attribute on the element indicating no results.
Helpful tools
Validator
HTML conformance validator
Contrast analysis
Tab Accessibility in Firefox
Materials
Last updated
Was this helpful?