Web Accessibility

These Web Accessibility Tools can be used to evaluate your documents, videos, presentations, and other content for accessibility issues.

• Web Accessibility Evaluation Guide
• Folio’s Accessibility Checker – This tool can be found from any HTML Edit or Edit pages inside of Folio.
• WAVE Evaluation Tool (Chrome Extension) – This tool, developed by WebAIM, provides visible feedback about the accessibility of your content.
• Grackle Docs – This tool provides visible feedback on the accessibility of your Google Docs. You can read more and download Grackle for Google Docs, Sheets, and Slides from Grackle’s website.
• WCAG Color Contrast Checker (Chrome Extension) –  This tool checks the color contrast between the foreground and background of the text.
• WebAIM Color Contrast Checker – This tool checks the color contrast between the text’s foreground and background.
• Accessibility Checker – A free website accessibility automated scan for WCAG 2.1 compliance issues. Just insert your URL and get instant results.
• Web Accessibility Evaluation Tools List – To determine what kind of tool you need and how they are able to assist you, see Selecting Web Accessibility Evaluation Tools.

Tools for Students

• Read Aloud (Chrome Extension) – Read aloud the current webpage article with one click, using text-to-speech (TTS).
• Read Aloud (Firefox Extension) – Read aloud the current webpage article with one click, using text-to-speech (TTS).
• Top 4 Text-to-Speech  Firefox Extensions 

Commons Issues

Common issues when formatting text.

• Using bold/enlarged text instead of proper headings
• Inconsistent fonts or font sizes
• Poor choice of color and contrast
• Using only color to convey meaning.

How To Fix

• Use heading styles (e.g., Heading 1, Heading 2, Heading 3) when working with documents or in Folio’s HTML editor.
• Apply consistent fonts and sizes
• Use contrast checkers like WebAIM Contrast Checker

Tools To Use

• Use Folio Accessibility Checker to detect heading issues
• Use Yuja Panorama to detect heading issues and remove inconsistently formatted pages

Descriptive Text

For complex images, such as flowcharts, graphs, diagrams, and infographics, follow these guidelines: Describe what type of chart or diagram is being used. For example, start your alt text with phrases like “Pie chart” or “Bar graph.” Consider the image’s purpose within the context of the surrounding content.

WAI (Web Accessibility Initiative) Complex Images (external link)

Commons Issues

Common issues when using hyperlinks.

• Pasting URLs directly instead of meaningful text
• Using vague link text, “click here” or “link”
• Broken or expired links

How To Fix

• Use descriptive link text (external link)
• Check links regularly for accuracy

Tools To Use

• Folio has a broken link indicator inside each course
• YuJa Panorama to identify broken or outdated links

How to Add Accessible Links in Folio

1. Click Edit/Edit HTML on the Folio listed item in the toolbar
2. Highlight the descriptive text you want to turn into a link.
3. Click the Insert Quicklink icon (chain link symbol)
4. Choose the type of link (e.g., URL, Content, File).
5. Paste or select the destination.
6. Save and Close

Tools To Use

• Folio has a broken link indicator inside each course
• YuJa Panorama to identify broken or outdated links

Commons Issues

Common issues when using images and alternative text.

• Missing or vague ALT Text (external link)
• Decorative images are not marked appropriately

How To Fix

• Write a concise, relevant ALT Text
• Mark decorative images when adding an image to Folio content, documents, presentations, etc.
• How to create ALT Text for MS Word
• How to add ALT Text in Google Doc and Slides with NVDA demo

Tools To Use

• Folio has a broken link indicator inside each course
• YuJa Panorama to identify broken or outdated links
• How to Add ALT Text to an image in Folio (Brightspace)?
• Write effective ALT Text.
• Microsoft 365 – Add ALT Text to a shape, picture, chart, SmartArt Graphic, or other objects.
• Microsoft Word: Creating ALT Text for MS Word
• Folio’s accessibility checker

Commons Issues

Common issues when creating documents.

• No heading structure
• Scanned PDFs without Optical Character Recognition (OCR)
• Missing alt text in documents

How To Fix

• Apply heading styles in Word or Google Docs before export
• Use OCR-enabled scanning tools (e.g., Adobe Acrobat Pro)
• Add alt text to images in documents

Tools To Use

• YuJa Panorama can flag inaccessible documents
• UseWeb Accessibility Checker (external link)
• Grackle to check accessibility on Google Docs, Sheets, and Slides
  • Install Grackle Docs (external link)
  • Install Grackle Slides (external link)
  • Install Grackle Sheets (external link)

Data tables are typically filled with information organized in a logical order using grids (columns, rows, or both). Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.

Table headers are marked up with <th>, and data cells with <td> in HTML to make tables accessible.

Commons Issues

Common issues when creating tables.

• No header rows
• Complex structures that confuse screen readers
• Tables used purely for layout

How To Fix

• Follow best practices to create accessible tables in word processors
• Avoid layout tables

Tools To Use

• Create accessible tables in Folio
• Microsoft Word workflow for creating accessible tables
• Creating Accessible Tables
• Yuja Panorama detects, analyzes, and helps remediate inaccessible tables across various file formats. 

Accessible lists must be created using the proper list formatting tools so assistive technologies can correctly identify list items, their order, and their relationships. This page outlines best practices for creating accessible ordered and unordered lists that align with WCAG 2.2 standards.

Common Issues

• Using keyboard characters such as asterisks (*) or hyphens (-) to simulate a list
• Manually numbering items instead of using built-in numbered lists
• Inconsistent or broken list structures that confuse screen readers

While these approaches may look like lists on screen, assistive technologies do not recognize them as structured lists, making the content harder to understand and navigate.

How To Fix

• Use the built-in bulleted or numbered list tools provided in the editor or toolbar
• Choose ordered lists for step-by-step or sequential information
• Choose unordered lists for related items with no required order
• Avoid manually typing symbols or numbers to create the appearance of a list

Using proper list formatting ensures that assistive technologies can announce the list correctly and convey how many items it contains.

Tools To Use

• Use the bulleted or numbered list tool located in the toolbar or most Word processors
• Create accessible lists in Folio
• Creating lists – Web Accessibility Initiative
• Yuja Panorama will detect when lists are inaccessible and offer a fix.

Common Issues

• Some common issues with audio & video.
• No Closed Captioning
• Captions are auto-generated but contain significant errors
• No Transcripts

How To Fix

• Add captions using Yuja
• Provide written transcripts for audio content
• Edit existing transcripts for misspellings and punctuations

Tools To Use

• Create and insert a Video Note in Folio
• Yuja Panorama actively detects missing captions in video content within LMS courses, including embedded videos and YouTube links.
• Yuja Panorama detects outdated file formats
• If you need to produce transcripts for pre-recorded videos, use NoteGPT (an AI Tool) to generate them. This tool will generate punctuations and time slots. Save as a PDF to share (it will be accessible).
• Captioning YouTube Videos
• Removing or Editing Captions in YouTube
• Add Caption tracks to video file in Google Drive
• Captions and Transcript
• Audio Descriptions

Embedding Accessible Videos in Content Pages

• Embedding videos directly within your course content is considered best practice. When videos are embedded within content pages, students stay in the learning environment rather than being redirected to external sites. This helps maintain focus, reduces navigation barriers, and creates a smoother learning experience.
  
  Required Video Accessibility Information
  • Every embedded video should be accompanied by the following:
  • A direct link to the video (in case students cannot access the embedded player)
  • A clear statement that closed captioning is available
  • The length of the video allows students to plan their time
  • A link to a PDF transcript of the video
    
    
    Below is a model you can follow when posting a video:
    
    Video: Introduction to Accessible Course Design
    Length: 4 minutes 32 seconds
    Closed Captioning Provided
    [Watch video link]
    [Download PDF transcript]