WCAG - manifest
Creating a new component in Eximee is best started by familiarizing yourself with:
Perceivability
Information and user interface components must be presented to users in a way that is perceivable to their senses.
Text alternative
Provide text alternatives for all non-text content so that it can be changed into other forms (e.g. large print, braille, synthetic speech, symbols, or simpler language).
Images, charts, and maps must have alternative content added through the attribute alt.
If an element conveys information, it must have alternative text
If the element is purely decorative, provide an empty value as alternative text and assign the element the role "presentation"
If the element is a link, enter the destination of that link in the alternative text
Implementation in Eximee:
Components created in Eximee that contain graphics should allow the alt attribute to be provided. This also applies to components that allow the graphic location to be supplied via a data source. Components should support internationalization of alternative texts.
HTML code provided to components (e.g. via TextContent or translation) should contain a properly defined alt attribute for <img/> elements.
Adaptability
Create content that can be presented in different ways without losing information or structure.
Use an appropriate heading order. There should be one heading on the page h1, and the next in the next hierarchy (h2 → h3 → h4 ...)
List
Use list tags in the proper order
Use lists to bullet-point links
If you remove the default bullet in a list, add the attribute to the main list tag role="list"
Table
Use the caption tag to describe the contents of a table
Use header cells th
Tables should be as regular and simple as possible
The order in which information is displayed should be logical and determined by the order in the DOM
Elements displayed from the left and from the top
Ensuring the correct tab order
Navigation elements and messages must not depend on: shape, visual location, color, sound
Displayed content must be properly handled in portrait and landscape orientation
Data-entry fields should specify the expected value. Add the attribute autocomplete with the appropriate value
Implementation in Eximee
Eximee components should use standard HTML elements - this greatly facilitates reading the document by external tools. If this is not possible, use the appropriate ARIA roles and attributes according to 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 level (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 view and hear content and to separate information from background.
Color must not be the only distinguishing feature of an element
required field in a form - e.g. using an asterisk
link - e.g. underline
chart - e.g. highlighting a line with a geometric shape, a dashed line, or a label
inactive field - e.g. an additional border, a crosshair icon, strikethrough of the element
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
The 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 proper names do not require minimum contrast
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
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 of the font size
When the text size is increased even 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 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)
Behavior of the component when additional content is visible on mouse hover or keyboard focus, and disappears when they are removed
there must be a mechanism allowing the additional content to be dismissed (support for the ESC key closing the tooltip must be provided)
the additional content remains visible until dismissed by the user or until its information is no longer relevant
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
It must be possible to navigate the page using only the keyboard
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
If we use single-character keyboard shortcuts, one of the following requirements should be met
it is possible to disable the shortcut
it is possible to change the mapping
the shortcut is active only when it has focus
Enough time
Give users enough time to read and use the content
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
the user can turn off the time limit before it expires
the user can extend the time limit
the user can adjust the time
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
The page title should identify the current location without having 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 we use special characters 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 adequate contrast and a size of at least 2px, and be consistent across all elements
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.
If a component is operated using multi-point gestures, it should also be possible to perform the same action with a single-point gesture
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
If we click an element, it should be possible to cancel the action. The action should take place on the event mouseup
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.
The tag HTML should have the attribute lang with the page language
If we add text in a language other than the rest of the page, it should have the attribute lang with its language
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 <span> element.
Predictability
Create websites so that they open, look, and function in a predictable way.
After a component receives focus, no action may happen immediately without user confirmation
Changing a value in a component must not automatically trigger any context-change 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).
Input assistance
Help users avoid and correct mistakes.
If a data entry 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 navigation element of the component should have a label.
If a data entry 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 for the data (a summary page with the ability to review, go back and correct the data, and submit it)
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 <span> 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.
Code should comply with the HTML standard
When creating custom components, appropriate role and value should be ensured by using ROLE and ARIA-* attributes
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
Validator
HTML compliance validator
Contrast analysis
Tab Accessibility in Firefox
Materials
Last updated
Was this helpful?