Skip to main content

Artificial intelligence (AI) and accessibility

Learn more about best practices for procuring and developing accessible tools that utilize artificial intelligence (AI) and how to ensure that they are in compliance with the Web Content Accessibility Guidelines (WCAG) 2.1 Level A and Level AA.

Introduction

Digital accessibility is the practice of designing, building, and procuring digital experiences free from barriers that impede access for people with disabilities. IT solutions that leverage AI technology must meet technical accessibility standards and be compatible with commonly used assistive technologies. When digital experiences are created with accessibility in mind, the experience is generally more usable for everyone. 

Skip table of contents

Table of Contents

You skipped the table of contents section.

AI product and software procurement

As with any IT solution, AI products and software must be accessible and usable by persons with disabilities. Accessibility standards and procedures apply when procuring AI technology. This includes any out-of-the box solution, customization, or configuration developed and delivered by a third-party. 

Purchasers of AI products and software should take the following steps to ensure the AI solution is accessible:

  • Clearly define accessibility standards and vendor obligations in your solicitation.
  • Learn about the vendor's capability to design, develop, and deliver accessible digital products by collecting responses to accessibility questions as part of the bidding process.
  • Obtain an Accessibility Conformance Report (ACR) for the AI platform, system, or tool.
  • Use product and vendor accessibility data collected including the Accessibility Conformance Report (ACR), Accessibility Questionnaire, and testing results to inform bidder selection.
  • Ensure accessibility contract language is included in the contractual agreement for the named bidder.
  • Prior to deployment of the AI solution, conduct accessibility testing, or require the vendor provide a certification of accessibility compliance of the final deliverable. 

Refer to the IT Acquisition Accessibility Compliance Program for more information.
 

AI product development

All user interface input elements used to interact with the AI and content returned by the AI's backend engine must be formatted to be accessible using keyboard, screen reader, speech recognition (external link) software like Dragon Naturally Speaking, and other assistive technologies and meet the Web Content Accessibility Guidelines (WCAG) 2.1 (external link)  Level A and AA. All AI content pages or widgets need to render properly on desktop, tablet, and mobile.

The following content refers to accessibility and generative AI. However, the same principals also apply to non-generative AI, if the analyzed and classified data will be displayed using any type of digital media (i.e., web pages and apps, digital documents, multi-media, etc.).  
 

WCAG Accessibility Single Stroke Icon Sets with background colors

Color and contrast

color palette

All text content and user input elements must meet color contrast (external link) requirements. This applies to both text content returned by the backend as well as user interface content. 

Any content using color alone (external link) must include a symbol in addition to text (i.e., error messages). All HTML elements require proper formatting to be accessible.

Use the ANDI testing tool to validate if the color contrast meets minimum requirements. 

Manually test contrast for gradient color backgrounds or image backgrounds, using the WebAIM contrast checker (external link). Avoid CSS opacity (external link) for text or background colors since contrast cannot be determined using automated tools and manual testing is more difficult. 

Accessibility for backend AI engine output

All content generated by the AI’s backend must be formatted using proper HTML5 tags in accordance with the Web Content Accessibility Guidelines (WCAG) 2.1 (external link) before being displayed on the user interface. Content includes text, images, documents, audio, and video.
 

Summarizing text content using the AI backend 

Using the AI backend to summarize text may lead to loss of important details and information.  
Verify the summarized text to ensure that the details and information are accurate and complete.
 

Editing text content using the AI backend

Using the AI backend to edit text may lead to loss of important details and information. Avoid using abbreviations and acronyms instead spell the words out. Using abbreviations or acronyms can be misinterpreted by the AI and often times cause translation errors. Train your AI to recognize common abbreviations and acronyms and to return them properly HTML formatted using the <abbr> tag (external link) in addition to its definition. Verify the edited text to ensure that the details and information are correct and complete. 
 

Translating text content using the AI backend

Using AI to translate text may generate interpretation, grammar, word order, and punctuation mistakes. Verify the translated text to ensure that the translation is correct and complete.
 

Converting scanned documents to editable text using the AI backend

Using AI to convert scanned documents text may result in the following issues:

  • Optical character recognition (OCR)
  • Structure of reading order
  • Conversion of handwritten documents including signatures
  • Recognition of letters, numbers, punctuation marks, and other graphic symbols
  • Color contrast issues
  • Link and QR code errors

Verify that the scanned document results are accurate, error free, and complete. Validate the destination of links and QR codes.  
 

Elements that require proper HTML formatting to be accessible

  • Headings and heading order
  • Ordered and unordered lists
  • Text links and interactive icons need to have descriptive visible text labels
  • Paragraph text
  • Abbreviations
  • Table structure
  • Non-text content including images, maps, GIF animation
     

Multimedia content (video, audio)

Multimedia content returned by the AI backend must include accurate captions and descriptive transcripts.
 

Visible sender labels, date and timestamp

Visible output including output returned by the AI backend should have visible identifying labels of who sent the message (AI backend or user) using descriptive labels for the sender including date and timestamp. 
 

Copy to clipboard for AI backend responses

Questions that are answered by the AI backend should include a “copy to clipboard” button so that users can copy and paste the answer to another program to save for later. The “copy to clipboard” functionality must preserve all HTML formatting of the response content when pasted into an advanced text editing software like Microsoft Word.
 

Training your AI 

Use accessible rating components inside the AI backend responses (examples include: 5-star rating or helpful/not helpful rating) to train your AI backend engine.
 

A person types on a laptop, displaying colorful code and software development in a vibrant nighttime setting.

Accessibility for user interface input

All AI product pages or widgets need to render properly on desktop, tablet, and mobile. Use proper HTML5 tags to build your user interface and use the Mayflower Design System for the Commonwealth of Massachusetts (external link) to review our brand pillars, web accessibility guidelines, CSS styles including logo, color, typography, and iconography, and UI components including elements, components, and templates. 
 

AI user interface input components include at a minimum

Complex gestures (drag and drop, press and hold)

Avoid using complex gestures (external link) when possible. If you choose to include them, you must have an accessible alternative that performs the same action. 
 

Language customization

If your AI user interface offers custom language settings, then the widget or page must conform to either language of parts (external link) for widget or language of page (external link) for page requirements.
 

Keyboard shortcuts for chat user interface

keyboard

The following keyboard shortcuts list should be viewable inside the AI User interface. Building these shortcuts into your user interface will provide optimal user experience to both keyboard and screen reader users. 

The following shortcut keys should only work when the focus is on the interface component:

  • Enter key sends a message while inside the message field
  • Shift + Enter keys creates a line break while inside the message field
  • Arrow down key navigates to the next message
  • Arrow up key navigates to the previous message
  • Shift + Home key navigates to the first message
  • Shift + End key navigates to the last message
     

Session timeout

Based on Web Content Accessibility Guidelines (WCAG) 2.1 Success Criterion 2.2.1: Timing Adjustable (Level A) (external link) users must notified before a session times out and be given the ability to extend it. 
 

Screen reader and AI responses

screen reader

Responses returned by the AI, including the sender label and date/timestamp should be announced by screen reader software as soon as the response appears on the screen.

If there is a delay before a response is returned, then a short message stating so should be shown on the user interface and announced by the screen reader.

An example message for an AI chat would be: "Chat is gathering content..."  

User interface testing

All interactive elements (i.e., input, button, link, etc.) including the sent user messages and AI responses need to be keyboard (screen reader) accessible and responsive to browser zoom and mobile. All visible content on the screen must be readable by screen reader software.
 

General accessibility testing

Keyboard testing your AI user interface input

Screen reader testing

Browser zoom and mobile device testing

browser zoom
  • Use Google Chrome browser zoom settings between 100% and 400%:
    • Check that all content reflows properly
    • Check that all content is visible and not cut off
    • Check that no visible text labels are truncated
    • Check that there is no horizontal scrollbar in your browser
    • Check keyboard navigation and functionality in zoomed in mode
  • Use Google developer tools device toolbar to:
    • Emulate different screen sizes and devices like tablets and phones
    • Check that the user interface looks and functions properly
       

High Contrast theme testing

high contrast
  • For Windows use the "Night Sky" high contrast theme
  • For Mac go to Apple menu, then System Settings, the Appearance and select dark
  • Once dark mode is turned on use the tab key to navigate the user interface:
    • Check that all focusable elements have a visible focus outline
    • Check that radio buttons and checkboxes show the checked state
    • Check that the focus outline meets minimum color contrast requirements 

Agentic artificial intelligence

Agentic AI presents significant risks, particularly around misalignment with human values, loss of control, and potential biases that can lead to harmful or discriminatory outcomes. These risks are compounded by the possibility of unintended consequences and the potential misuse of AI systems in unethical ways. Developers play a crucial role in mitigating these dangers by incorporating transparency, safety mechanisms, and ethical frameworks throughout the AI development lifecycle.

Capabilities of agentic AI 

  • Able to change output based on real-time communications and new information
  • Able to adapt to changing environments
  • Able to perform tasks and make decisions autonomously with minimal intervention based on continuous situational awareness and assessments
  • Able to optimize processes and solve problems
  • Able to apply new rules and learn from experience
  • Able to communicate using automated actions or conversational interfaces  

Accessibility requirements for agentic AI

  • Follow the development and additional accessibility requirements already included on this page
  • Include explanations and reminders for task completion and guidance to complete the workflow
  • Provide accessible and usable help supplying information on interaction and usage of systems and tools
  • As communication with artificial intelligence becomes more complex, present communication alternatives such as text, speech, sign language, symbols, and face-to-face interaction
  • Ensure that agentic AI can communicate with all users and interpret their facial expressions, physical facial differences, or inability to express emotion correctly based on a predictable set of inputs
  • Deliver agentic AI systems with transparency in how data is collected, stored, used, and how decisions are made including the reasoning behind the decision
  • Publish alternative ways to get assistance such as providing a phone number to call or an email or contact form
  • Deliver a way for users to provide feedback on system usability and accessibility for continuous enhancements 

Accessibility considerations for AI in cyber security and threat detection

Accessibility tools for performing testing and various assistive technologies interact with browsers, APIs, applications, and operating system components. 

When setting up your cyber security you must ensure that any AI used in detecting threats and security breaches does not identify accessibility automated tools, bookmarklets, scanning plugins, browser addons, and assistive technologies as malware or a threat to security.  

AI resources

All resources below point to external websites which may or may not be accessible and meet the Web Content Accessibility Guidelines (WCAG) 2.1 requirements.
 

AI and accessibility

AI and disability

AI and hiring

Related

Help Us Improve Mass.gov  with your feedback

Please do not include personal or contact information.
Feedback