WCAG - manifest
Creating a new component in Eximee is best started by familiarizing yourself with:
Perceivable
Information and 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 (for example, 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 only decorative, as alternative text provide an empty value and give the element the "presentation" role
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 provided via a data source. Components should support internationalization of alternative texts.
HTML code delivered to components (for example, via TextContent or translation) should contain a correctly defined alt attribute for <img/> elements.
Adaptability
Create content that can be presented in different ways without loss of information or structure.
Use the correct heading order. The page should have one heading h1, and the next one in the next hierarchy (h2 → h3 → h4 ...)
List
Use list markers in the proper order
Use lists to bullet links
If you remove the default bullet in a list, add the attribute to the main list tag role="list"
Table
Use the tag caption to describe the contents of the table
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 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 handled correctly in portrait and landscape orientation
Data-entry fields should specify the desired value. Add the attribute autocomplete with the appropriate value
Implementation in Eximee
Eximee components should use standard HTML elements - this makes the document much easier to read by external tools. If that is not possible, use the proper 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 delivered to components (for example, via TextContent or translation) should contain the proper heading level (they should not start with <h1>).
HTML code delivered to components (for example, via TextContent or translation) should contain texts in semantic elements, e.g.: <p>, <li>, <td>.
Diversity
Make it easier to view and hear content and to separate information from the background.
Color cannot be the only distinguishing feature of an element
required field on a form - e.g. use of an asterisk
link - e.g. underlining
chart - e.g. highlighting a line with a geometric shape, dashed line, or label
inactive field - e.g. additional border, crosshair icon, strike-through element
Audio playback control - if audio on the page lasts longer than 3 seconds, there must be a way to pause, stop, or control its 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
decorations, logo, and the product's proper name do not require minimum contrast
The contrast of non-text elements between graphical objects, interface elements (does not apply to inactive elements), and the adjacent element must be at least 3:1
Do not put text as an image (except for a logo)
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
After increasing text size to as much as 200%, there must be no loss of information or functionality
Responsiveness - content must be presented without loss of information or functionality on screens at least 320px wide and at least 256px high. In addition, there must be no horizontal scrolling (the exception is two-dimensional content such as tables, complex images, maps, and charts)
Behavior of the component when additional content is visible on 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 the user dismisses it or its information is no longer relevant
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, emphasis, etc.).
All texts displayed by Eximee components should be zoomable using an appropriate tool, and therefore it should be possible to place the cursor over the text (for example, over tooltip text).
Labels displayed inside Eximee components should be preserved on screens 320px wide.
Functionality
User interface components and navigation should be usable
Keyboard accessibility
Ensure access to all functionality via keyboard
It must be possible to navigate the page using only the keyboard
If focus can be moved with the keyboard, it must be possible to remove it the same way. If there is another way to leave the component, an appropriate hint should be shown
If single-character keyboard shortcuts are used, one of the following requirements must be met
there is a way to turn off the shortcut
there is a way to remap it
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 content is limited, there must be information about the remaining time 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 must be a way to undo it and stop or hide it
Navigability
Provide users with tools that help them navigate, find content, and determine where they are currently
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 tell what they do and where they lead
If special characters are used in the 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
Implementation in Eximee
Eximee components requiring user reaction (popup, expiring session information) should automatically set focus.
If the link content is a graphic, 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 (for example, due to other visible content), add additional content that will not be visible but will be available to screen readers.
Input methods
Make it easier for users to operate functions using different means beyond the keyboard.
If a component is operated using multi-point gestures, it should be possible to perform the same action with a single-point gesture
If the component is operated by tilting, shaking, or moving the user, it should be possible to disable that and provide operation through standard controls
If we click on an element, there should be a way to cancel the action. The action should be performed on the event mouseup
If we use alternative text in a link or button (aria-label) then it should start with the text from the label
Understandable
The content and operation of the user interface must be understandable.
Readable
Create content that is readable and understandable.
In the tag HTML there should be an 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 the screen reader is understandable, without unnecessary repetition, and unambiguous for the recipient
Implementation in Eximee
If there are texts in a language other than the rest of the page in the HTML code delivered to components (for example, via TextContent or translation), we can give them the lang attribute, for example by placing them in a <span> element.
Predictability
Create web pages so that they open, look, and operate in a predictable way.
After a component receives focus, none of its actions may happen immediately without confirmation from the user
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 the link will open in a new tab or another application
Implementation in Eximee
If the HTML code delivered to components (for example, via TextContent or translation) contains links that open in another tab or application, an additional piece of information can be provided that will not be visible but will be read by screen readers (for example, by placing it in a <span> element).
Input assistance
Help users avoid and correct errors.
If a data entry error is automatically detected, the faulty component should be highlighted and the user should receive an error description
Every form field should have a label or instruction
Every 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 data confirmation page (a summary page with the ability to review, go back, correct the data, and submit)
If there is a specific data format, add alternative text with its description
Implementation in Eximee
The Eximee component element displaying the error information 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 (for example, a <span> element with aria-hidden=false).
Robust
Content must be prepared robustly so that it can be interpreted effectively by various user agents, including assistive technologies.
The code should comply with the HTML standard
When creating custom components, ensure the proper role and value by using ROLE and ARIA-* attributes
If we display a message that does not have focus, it should be read by the screen reader via the 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 output data (for example, 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 informing about no results.
Useful tools
Validator
HTML compatibility validator
Contrast analysis
Tab Accessibility in Firefox
Materials
Last updated
Was this helpful?