accessToolkit’s AI is responsible for handling the more complex accessibility adjustments such as screen-reader optimization and keyboard navigation. The automated nature allows for these backend adjustments to be done efficiently, affordably, and within reasonable timeframes.
SCAN. ANALYZE. DEPLOY. MAINTAIN.
Contextual Understanding AI technology
Website visuals are common and universal, making it simple for a sighted user to follow the flow of a site. As long as the layout makes sense, we don’t care how a website is coded.
accessToolkit’s AI applies the same “thinking” process while analyzing a site. It visually matches elements and behaviors to millions of past encounters to learn from context what elements actually do and their purpose on the page.
Then all the necessary code adjustments are implemented to reflect blind people using screen readers precisely what’s on the screen and the purpose of every element, exactly as it was intended originally.
COMPUTER VISION APPLIED TO ACCESSIBILITY
Image Recognition and OCR AI technologies
accessToolkit scans all images on the site. Whenever alternative text (Alt attributes) is missing, it will extract the embedded text using OCR and learn the objects that comprise the image using IRIS technology.
Then, accessToolkit will automatically provide accurate and elaborate alternative text to these images. When a blind user enters a site, their screen reader will rely on these descriptions to communicate what is on the page.
FULL ACCESSIBILITY SOLUTION SUITE
Meet accessiBe, the leading web accessibility solution-suite
accessiBe provides advanced AI-Powered solutions, like accessWidget and accessFlow, to streamline and simplify the process of making websites accessible for users with disabilities and compliant with legislation.
LEARN HOW IT WORKS DOWN TO THE CODE LEVEL
Watch our in-depth technical demo
Our CEO explains how it works down to the code level!
STREAMLINED WEB ACCESSIBILITY
Common requirements most websites lack that accessToolkit remediates
Elements that exist on almost every website are sometimes the most challenging to make accessible. Learn how our AI fixes them!
Popups
accessToolkit moves the focus, enables dismissal with Esc key and tag for screen-readers
- When a popup appears, the keyboard focus must lift off the main page and land back down within the first clickable element of the popup.
- Navigating using the Tab key within the popup must loop back to start when reaching the last element and trying to move forward.
- Users must be able to close popups with the Esc key, and the focus must go back to the element that was focused on prior to the popup.
- Popups must include a “role” attribute equal to “dialog”.
- Popups must include an “aria-modal” attribute equal to “true”.
Forms
Announce field requirements and validations, and identify both error messages and successes
- All fields must include a “LABEL” tag that is connected to the field by the “id” and the “for” attributes or an “aria-label” attribute.
- Required fields must include visual cues (Asterix*, text, or other), and the “aria-required” attribute equals true.
- Fields must include the “aria-invalid” attribute to inform screen-readers whether the field is currently valid or invalid. This attribute must change dynamically according to the validations. E.g., an empty required “name” field must include aria-invalid=”true” to indicate that it’s invalid, but change to aria-invalid=”false” once the user fills it up.
- When a form is submitted and errors are present, the keyboard focus must be taken to the first invalid field, and the user must receive an explanation (both visual and to the screen reader) of the issue with this field.
- When a form is submitted successfully, a blind user with a screen reader should be informed of that by using an alert element or other means.
Dropdowns
accessToolkit enables keyboard navigation and locks up navigation focus for users who can’t use a mouse
- Users can open dropdowns using the Enter and the arrow-down keys. Dropdowns should also be opened by focusing on the menu item.
- Users can navigate within dropdowns using the up-and-down arrows, and the focus must never escape and loop within the dropdown unless it was intentionally closed.
- Users can close the dropdown using the Esc key, and the keyboard focus must go back to the root menu item of this dropdown.
Menus
accessToolkit identifies and interprets menus to screen readers and allows navigation with arrow keys
- “NAV” tag or a “role” attribute equal to “navigation/menu/menubar” (depends on the menu type) must be present on the top element that contains all the links and menu items (role=”navigation/menu/menubar”).
- A “role” attribute equal to “menuitem” must be present on the links that comprise the menu items.
- Users can use the Tab key to navigate to the next element, and Shift+Tab to navigate to the previous element, and the focused element must be easily identifiable using a focus ring (outline).
- Users can navigate across the menu bar itself using the left-and-right keyboard arrows. When reaching the end of the menu, and pressing the forward arrow key, the navigation should loop back to the first item.
Links
accessToolkit identifies, labels, and fixes empty or insufficient link text
- Must include text, title, or an aria-label.
- Must be logically ordered within the document (a “read more” must come after the title and the paragraph of a section, for example).
- Links must be reachable by keyboard navigation using the Tab key.
- Links must provide a visual indicator if they are opened in a new window, and also announce that to a screen-reader using a hidden text or title.
- Links must be noticeable on-page and look different than regular text.
Icons
accessToolkit uses contextual understanding to identify the purpose of icons and tag accordingly
Icons don’t have specific guidelines because “ICON” tags or elements don’t exist. The purpose of an icon (usually as a link or button) is to symbolize a universally recognizable action to a user. Since this is based on visual recognition of a symbol, accessToolkit automatically includes a description of the purpose or action of the icon for users who can’t see or recognize it.
Images
accessToolkit provides elaborate and accurate alternative text to all images including embedded text as well as objects
Images must have an Alt attribute to describe what’s in the image to users who cannot see properly or at all. accessiBe uses image recognition technology to not only pull out text and object descriptions but also describe the essence of the image.
For example, an image of people playing on the beach accompanied by text that says “30% off bathing suits” will automatically receive alternative text describing all of these elements which a screen reader will relay to the user.
Buttons
Identify text and link elements that behave as buttons to enable keyboard operation
- Buttons must contain text, title, or an aria-label.
- Must be an actual “BUTTON” tag or alternatively, a “role” attribute that equals to “button” is present.
- Buttons must include text/aria-label/title.