Tools
Tools for the UChicago community
The University provides tools to members of the community to help create accessible websites, PDFs, and documents.
- Siteimprove scans websites and reports on accessibility issues that can be automatically detected.
- Equidox simplifies making accessible PDFs without the need for Adobe Acrobat Pro.
- Grackle Workspace is a licensed add-on to the UChicago Google Workspace that can be used to create more accessible Docs, Slides, and Sheets.
The Academic Technology Solutions team provides primary support for the following accessibility tools in Canvas:
- The Pope Tech Accessibility Guide and Dashboard provide instructors with accessibility testing, assistance with remediation, and insights into the accessibility of their courses.
- SensusAccess Inside Canvas provides alternate media conversion of files and pages directly from within Canvas. Note: SensusAccess is also available as a web app supported by Student Disability Services.
Content creator tools
- Free tool to extract text from subtitles (removes all timestamps and other effects)
- PDF/UA PAC checker (Windows only) identifies all of the machine verifiable success criteria of ISO 14289-1 (PDF/UA) and WCAG (Web Content Accessibility Guidelines)
Using AI for describing images
Many software programs and generative artificial intelligence tools can create alternative text for images. AI can be a good place to start when creating alt text, but the results must be human-checked for accuracy and context. Use UChicago PhoenixAI (CNet login required) for describing sensitive or private images as it does not share information with public AI models.
Example image description prompt (with thanks to Arizona State University):
Using the provided image, create a description and alt-text. The image description should be objective, concise, and descriptive. Descriptions should be straight forward and factual, avoiding interpretations. Begin with a general overview of what the image portrays before providing details. Not everything needs to be described if it is not contextually important. Descriptions should utilize vivid terminology to describe various features like composition, shapes, size, texture, and color. Avoid using picture of, image of, and photo of unless needed in the context of an illustration or painting type graphic. The image alt-text should be concise. A short phrase or at most a couple of sentences. Should the image or graphic contain text, add a section and transcribe all the text presented.
Website evaluation tools
Automated accessibility testing tools are used to check a webpage or website and quickly identify a number of errors.
Each tool has strengths and weaknesses, and is likely to deliver different results for the same page or site. Automated tools, by their very nature, interpret the underlying guidelines literally, and cannot check for many content and HTML coding issues. Therefore, it is best to consider the results provided by an automated tool in conjunction with additional manual checks, including trying to navigate using only the keyboard.
Browser extensions and app plugins
The browser extensions below are all free and allow you to securely check webpages. Adding a browser extension to either Firefox or Chrome allows you to test your webpage with the click of a button.
- Axe (for Chrome, Firefox, and Edge) by Deque
- axe for Designers: A Free Accessibility Plugin for Figma
- Lighthouse (can run in Chrome DevTools, from the command line, or as a Node module; also available as a Firefox extension)
- Siteimprove Accessibility Checker (for Chrome, Firefox, Edge, and Opera)
- WAVE (for Chrome, Firefox, or Edge) by WebAIM (Web Accessibility in Mind), a nonprofit organization based at Utah State University
Code linters
A linter is a code analysis tool used to automatically flag programming errors, bugs, stylistic errors, and other coding defects during development. Free accessibility linters are available for a wide variety of code editors and programming languages. Similar to the browser extensions, these accessibility linters help catch WCAG violations that can be found via automation. Manual accessibility audits are still required once the code is deployed.
Screen readers
There are a variety of screen readers to choose from, and each takes a while to learn and configure before you can use it efficiently to evaluate the accessibility of digital content. Configurations include hotkeys, voice selection, rate of speech, and more.
This screen reader demo from UC San Francisco (YouTube) illustrates how screen reader users access digital content.
- NVDA (NonVisual Desktop Access), a free download from NVAccess for Windows-based PCs
- Narrator, a free feature of Windows 10
- TalkBack, a free feature of Android OS
- VoiceOver, a free feature of all Apple OS products
- Screen Reader Shortcuts and Gestures
Color tools
Careful use of contrast and color is vital to accessibility. Try some of these tools to help you make design decisions that enable users, including users with visual disabilities, to perceive the content on your web page.
UChicago color system
If designing within The University of Chicago color system, there are two grids of colors that can help. Note: Due to rounding, the color grids list the Maroon (#800000) and Greystone (#A6A6A6) combination as compliant for small text, even though it is technically noncompliant.
- Contrast Grid of UChicago color combinations shows all combinations of text against a background, whether they are compliant or not, so you need to keep contrast principles in mind:
- Do not use a color combination for small text if the ratio is smaller than 4.5.
- Do not use a color combination for large text or non-text components if the ratio is smaller than 3.
- Eightshapes contrast grid of accessible UChicago color combinations shows only compliant combinations.
Contrast checkers
- Contrast Checker by WebAIM
- Color choices: hex values, color charts, and sliders
- Link Contrast Checker by WebAIM
- Very similar to the WebAIM contrast checker but includes checking link color, text color, and background color
- Contrast Checker by Acart Communications
- Color choices: hex or RGB values, color wheel slider, colors from your uploaded image
- Creates a history of tested color combinations; can save as a PDF
- Can share results, view grayscale
- Color Contrast Checker by Siteimprove
- Color choices: hex or RGB values, color chart and slider
- Color Contrast Analyzer by Deque
- Color choices: hex or RGB values, color charts, color names, and sliders
- Colour Contrast Checker
- Contrast checker with hex values and HSL sliders
- Chrome extension available with built-in eyedropper tool
Other designer and developer color tools
- Digital Color Meter for MacOS by Apple
- Built-in utility measures the value of any color on your screen using RGB and other options
- Ability to lock in the aperture location so the color value can be copied to a contrast checking tool (refer to Apple instructions)
- ColorZilla by iosart labs
- Analyzes a page, enabling you to inspect a palette of its colors
- Includes a color picker, eye dropper, gradient generator, and more
- For Firefox or Chrome
- Color Blind Filter by Toptal
- Shows what your page looks like to a person with color blindness
- Displays your page and its simulation side-by-side