WCAG - manifest
Perceivability
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 converted into other forms (e.g., large print, Braille, speech, symbols, or simpler language).
Images, charts, maps must have alternative content added via the 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 an 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 providing an alt attribute. This also applies to components that allow supplying the graphic location via a data source. Components should allow internationalization of alternative texts.
HTML code provided to components (e.g., via TextContent or translations) should include a correctly 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 ones 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 tag caption to describe the contents of a 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 DOM order
Elements displayed from left to right and from top to bottom
Ensuring proper tab order
Navigation elements and messages must not depend on: shape, visual location, color, sound
Displayed content must be properly supported in both portrait and landscape orientation
Fields collecting data should specify the desired value. 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 translations) should contain the appropriate heading levels (they should not start with <h1>).
HTML code provided to components (e.g., via TextContent or translations) 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 information
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, strike-through the element
Audio playback control - if audio on the page lasts longer than 3 seconds there must be a way to pause, stop, or control the volume
Text contrast ratio must be at least 4.5:1
if text is large (larger than 24px or bold at 18.5px) it must have a contrast of at least 3:1
decorative elements, logos and brand names do not require minimum contrast
Contrast of non-text elements between graphic objects, interface components (excluding inactive elements), and adjacent components must be at least 3:1
Do not place text as an image (logo exception)
After increasing text spacing all elements must still be visible and readable
line height at least 1.5 times the font size
paragraph spacing at least 2 times the font size
letter spacing at least 0.12 times the font size
word spacing at least 0.16 times the font size
When text size is increased 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 (except for two-dimensional content such as tables, complex images, maps, and charts)
Behavior of a component when additional content is visible on hover or keyboard focus and disappears when they are removed
there must be a mechanism allowing dismissal of the additional content (ensure support for ESC key to close tooltips)
additional content remains visible until dismissed by the user 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, 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 320px wide.
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 page using only the keyboard
If focus can be moved by 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 shown
If we use single-character keyboard shortcuts, one of the following requirements should be met
there is a way to disable the shortcut
there is a way to remap it
the shortcut is active only when it has focus
Enough time
Provide users with enough time to read and use the content
When time to use content is limited, information showing the time remaining must appear 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, blinks, scrolls, or is updated automatically it should be possible to rewind and to pause or hide it
Navigability
Provide users with tools to help navigate, find content, and determine their current location
The page title should identify the current location without needing to read the page content
Focus should move left to right, and after changing pages 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, they 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 a size of at least 2px, and be consistent across elements
Do not use all uppercase letters in links only
Implementation in Eximee
Eximee components that require user reaction (popup, expiring session notification) should automatically set focus.
If a link's content is an image it should contain alternative text.
ARIA attributes used in Eximee components should allow setting the appropriate language version.
If a link's content is incomplete (e.g., it relies on other visible content) add additional content that will not be visible but will be available to screen readers.
Interaction methods
Make it easier for users to operate functionality using methods other than 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 device tilt, shake, or user motion there should be a way to turn that off and provide operation via standard controls
If we click on an element there should be a way to cancel the action. The action should occur 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 is readable and understandable.
In the CSS tag there should be an attribute lang with the language of the page
If we add text in a different language than the rest of the page it should have the attribute lang with its language
Content read by a screen reader should be comprehensible, without unnecessary repetition and unambiguous to the recipient
Implementation in Eximee
If the HTML code provided to components (e.g., via TextContent or translations) contains texts in a different language than the rest of the page we can assign them a lang attribute, for example by placing them in a <span> element.
Predictability
Create web pages so they open, look, and behave in a predictable way.
When a component receives focus, no action should happen immediately without confirmation by the user
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 translations) contains links that open in a new tab or application you can provide additional information that will not be visible but will be read by screen readers (e.g., by placing it in a <span> element).
Help 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
Every form field should have a label or instruction
Every 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
There should be a confirmation page for submitted data (a summary page with the ability to verify, go back and edit data and submit)
If a specific data format is required add alternative text describing it
Implementation in Eximee
An Eximee component element displaying an error message should be associated with the form field via the aria-describedby attribute.
Navigational 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 a wide variety of user agents, including assistive technologies.
Code should conform to HTML standards
When creating custom components ensure 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 using 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 produce a set of result data (e.g., filters, searches) should notify about the found result set using invisible elements with attributes aria-atomic="true" and aria-live="polite". In the case of an empty result set the user should be notified by applying role="alert" to the element informing about no results.
Useful tools
Validator
HTML conformance validator
Contrast analysis
The Accessibility in Firefox
Materials
Last updated
Was this helpful?