Accessible STEM Content

bCourses includes a built-in tool for writing math and science expressions that uses LaTeX. This Math Editor is available directly inside the Rich Content Editor (RCE). Instructors can access this editor when creating content.

bCourses supports LaTeX and MathML, which are more accessible than images of equations. Publishing equations directly in bCourses — rather than embedding them in PDFs — is the recommended approach.

How to Open the Math Editor

To open the Math Editor from the RCE menubar:

1. Click Edit to open the Rich Content Editor.
2. Click Insert from the menu at the top of the RCE.
3. Select the Equation option. The Math Editor will open.

You can use the Math Editor for anything from simple equations to more complex notation in upper-division or graduate-level classes. For more details, see the Canvas Guides on using the Math Editor.

Basic View and Advanced View

When you open the equation editor, you'll see a window where you can either build notation with buttons (Basic View) or select “Directly Edit LaTex” (bottom left, see image) to switch to Advanced View to write or paste LaTeX code directly.

Special Characters

To display special characters inside an equation, use the following:

• Characters #, $, %, &, ^, {, and }: Use Advanced View and place a backslash (\) in front of the character. For example, type \% to show %.
• Tilde (~): Type \sim in Advanced View.
• Dollar sign in Basic View: Type \$.

Inline and Display Equations

Equations can appear either inline (within a line of text) or as display equations (on a separate line with surrounding white space). You can type LaTeX directly anywhere there is an RCE in Canvas – including titles, calendar events, announcements, assignments, discussions, pages, quizzes, and the syllabus – without opening the equation editor.

• Inline equation: \(EquationCodeHere\)
• Display equation (option 1): \[EquationCodeHere\]
• Display equation (option 2): $$EquationCodeHere$$

Note: The single dollar sign ($EquationCodeHere$) for inline math mode does not work in bCourses. Use \(EquationCodeHere\) instead.

Managing Complex Diagrams in PowerPoint

STEM slides often use diagrams built from arrows, separate labels, and shapes. A screen reader will try to read every single arrow and box individually, which is confusing. The solution is to treat the diagram as one single object. There are two methods:

Method A: Grouping

1. Select all arrows, shapes, and labels.
2. Right-click → Group.
3. Add alt text to the entire group.
4. Crucial step: Ensure the individual items inside the group are marked as decorative.

Method B: Flatten to Image

1. Select all components.
2. Right-click → Save as Picture.
3. Delete the original loose components and drag your new flattened image back onto the slide.
4. Add alt text to this single new image.

Managing Math Notation in PowerPoint 

If you have individual equations in a PowerPoint slide deck but are not building your entire presentation in LaTeX, use this quick fix:

1. Keep your visual equation (screenshot or image) on the slide for sighted students.
2. Mark that image as Decorative.
3. Create a separate Text Box on the slide.
4. Type the equation in LaTeX format inside this text box.
5. Move this text box off-screen or hide it behind the image (check reading order).

Note: Students with visual impairments often use tools that can parse LaTeX code into readable math. If you are building your entire presentation in LaTeX (Beamer), do not use this method. Instead, see the Beamer section below for a fully accessible workflow.

Accessible Animations for Sequential Formulas

Screen readers rely on a strict reading order. If your slide reveals multiple formulas sequentially:

1. Check Reading Order: Ensure the order in the Selection Pane matches your animation order.
2. Use separate text boxes for each formula. Do not put multiple formulas into one text box and animate lines of text inside it. This ensures the screen reader announces the specific formula exactly when it appears on screen.

A Note on Google Slides for STEM Content

Google Slides offers many advantages, especially for collaboration and ease of use. However, when working with equation-heavy slides or complex diagrams, PowerPoint currently provides more robust accessibility tools, particularly for managing reading order and describing graphics. For this reason, some instructors may find PowerPoint easier to work with for STEM-related accessibility needs. See the guidance above for PowerPoint tips..

Many instructors share with their students digital scans of handwritten notes. Unfortunately, these "image-only" files are inaccessible. This section walks through how to convert scans of handwritten notes into accessible bCourses pages. Rather than uploading the scan as a file, the goal is to transform the content into structured, readable web content that students can access directly in bCourses.

We suggest converting these notes into accessible formats using AI tools like Gemini or NotebookLM. Because our campus provides access to Adobe Illustrator, you can also ensure any scientific diagrams or graphs are professionally edited and accurate.

Choose Your Workflow

Look at your notes and decide which scenario fits best:

• Scenario A: Text-Heavy Notes (Mostly writing and equations, few to no diagrams).

• Scenario B: Complex Notes (Contains specific graphs, charts, or scientific sketches).

Scenario A: Text-Heavy Notes

Best for: Lecture notes that can be pasted directly into a standard bCoursesPage.

1. Upload: Upload your scan (PDF or Image) to Gemini.
2. Prompt: Copy and paste the following prompt:

"Please transcribe these notes into bCourses-friendly HTML. Use only clean tags like <p>, <h2>, <ul>, and <strong>. Do not use external CSS, inline styles, <div> tags, or classes. If there is mathematical notation, convert it strictly to MathML. Structure the content with clear headings."

3. Transfer: Copy the code output from Gemini. In bCourses, create a new Page and switch to the HTML Editor( View > HTML Editor) and paste the code. 

4. Review: Switch back to the standard view to verify the text and math render correctly.

Scenario B: Complex Notes (The Illustrator Workflow) 

Best for: Notes with diagrams that need to be accurate. This workflow separates the text (for bCourses) from the images (for editing in Illustrator.)

Part 1: Generate the Content

1. Ask Gemini: "Please provide the text of the notes in HTML format (using MathML for math) with [INSERT IMAGE HERE] placeholders for diagrams.
   Separately, provide the SVG code for each diagram found in the notes."

2. Separate the Assets:

• The Text: Keep the HTML text ready to paste into bCourses.
• The Images: Copy the code for each diagram, paste it into a simple text editor (Notepad on PC, TextEdit on Mac), and save it with the file extension .svg (e.g., graph_turn1.svg).

Note: This workflow is intended as a starting point for exploring what AI tools like Gemini can help generate. Outputs will almost always require review, cleanup, and modification, especially for longer or more complex STEM documents containing equations, diagrams, or specialized notation.

Part 2: Review & Modify Images in Adobe Illustrator (licensed by campus or open-source Inkscape)

AI often makes small mistakes in diagrams (misspelled labels, wonky curves). Since we have a campus license, use Adobe Illustrator to fix these errors easily.

1. Open: Right-click your saved .svg file and select Open with > Adobe Illustrator.

2. Edit:

• Text: Use the Type tool to correct any labels the AI misspelled.
• Lines: Use the Direct Selection tool to smooth out jagged curves.
• Colors: Adjust colors for better contrast/accessibility.

3. Export:

• Go to File > Export > Export As...
• Select SVG (best for quality) or PNG (standard image).

Tip: Ensure "Responsive" is checked if saving as SVG so it scales well on mobile screens.

Part 3: Publish to bCourses

1. Upload Images: Go to your bCourses course Files or Images tab and upload your finalized Illustrator files.

2. Create Page: Create a new bCourses Page and paste the HTML text (from Part 1) into the HTML Editor.

3. Insert Images: Switch to the visual editor, delete the [INSERT IMAGE HERE] placeholders, and insert your polished images using the Insert > Image > Course Images tool.

4. Add Alt Text: Click on the inserted image, select Image Options, and add a descriptive Alt Text summary for screen reader users.

Alternative: The "All-in-One" File (No Illustrator)

If you do not need to edit the diagrams and want a quick solution:

1. Ask Gemini: "Output these notes as a single, self-contained HTML file with embedded SVG diagrams."

2. Save: Save the output as lecture_notes.html

3. Upload: Upload this file to the Files section of bCourses.

4. Link: Link to this file in your Module.

Note: You cannot edit the diagrams in this format without editing the raw code.

Whenever possible, mathematical expressions should be authored in a format that supports real, accessible math – not images. If you have access to the original LaTeX source, the following options apply. 

For shorter content (individual equations, problems, or brief explanations), the bCourses Math Editor works well. See the Math Equations section above for the full workflow.

For long-form content (e.g., a 5,000-word lecture), avoid the Equation Editor. Instead, use one of these workflows:

Option A: The "Paste & Render" Method (Direct LaTeX)

Paste your text directly into the standard Canvas (bCourses) Visual Editor. Ensure your math is wrapped in \( ... \) for inline and $$ ... $$ for display blocks. Upon saving, bCourses uses MathJax to automatically render the code into accessible MathML.

Best for: Quickly moving text where you want to keep the "source" easy to edit later.

Option B: The "Clean Code" Method (MathML via HTML View) 

Convert your document to HTML (using a tool like Pandoc) and paste the result directly into the Canvas (bCourses) HTML Editor view (</>). This allows you to include native MathML tags which Canvas now supports directly.

Best for: Perfect preservation of complex formatting and the highest level of native browser accessibility.

Option C: Produce HTML Files from LaTeX

For documents written in LaTeX, generating HTML output is often easier to remediate for accessibility than PDF output. arXiv (maintained by Cornell University) has adopted this approach and provides guidance on accessible LaTeX workflows using LaTeXML:

• LaTeX Markup Best Practices for Successful HTML Papers (arXiv / LaTeXML)

Option D: The "Gold Standard" PDF (PDF/UA-2)

Instead of a bCourses page, you can provide a PDF/UA-2 compliant file. By using the LaTeX Project's modern tagging features (integrated into current TeX distributions), you can produce a PDF that contains embedded MathML. This ensures the math is fully accessible to screen readers even when downloaded and viewed offline.

• Best Practices: The LaTeX Project provides comprehensive documentation on producing accessible PDFs, including ongoing updates and technical improvements.
• Presentations: Instead of the standard Beamer class, consider using the ltx-talk class. It is designed specifically as a more accessible alternative for digital presentations. See the section below for additional guidance.

Beamer is a popular LaTeX document class used to create presentation slides as PDF-based slideshows with content structured in frames. Unfortunately, Beamer lacks the capability to render PDF slides in an accessible fashion; tagging and reading order are often missing.

RTL has been tracking progress on accessible alternatives to Beamer. In particular, the LaTeX Tagging Project's ltx-talk class offers a means to produce accessible slide presentations. Recently, Prof. Richard Stanton (UC Berkeley) has developed a functional template based on the ltx-talk class. This work, which he shares publicly, allows users familiar with Beamer to maintain the frame syntax they're used to while also generating PDFs that achieve high accessibility scores. Implementation requires switching to the LuaLaTeX compiler for automatic MathML generation and utilizing a modern TeX distribution (kernel 2025-11-01 or later).

Using ltx-talk on Overleaf

Many Berkeley faculty use Overleaf for authoring STEM content. To use the ltx-talk library, you need to join OverLeaf Labs and adjust your project configuration:

Go to Menu > Settings and apply the following changes:

• Compiler: Select "LuaLaTeX"
• TeX Live version: Select "Rolling TeXLive (Labs)"

For templates and further guidance, see Accessible LaTeX Templates (GitHub).

Note: Documents created with our recommended LaTeX workflow are fully WCAG compliant and offer superior screen reader support via MathML. You may safely ignore "missing Alt Text" warnings in Ally, as these are legacy flags that do not recognize the modern PDF/UA-2 accessibility data already embedded in your files.

Resources:

• Accessible LaTeX Templates (GitHub): Excellent resource developed by Richard Stanton, UC Berkeley. We recommend you start here. 
• Overleaf Configuration: Instructions for Overleaf Labs Setup to access required "Rolling TeX Live" kernels.
• Ltx-talk documentation(PDF file) (PDF): The ltx-talk class is an experimental, LuaTeX-based presentation tool designed to produce fully accessible, tagged PDFs by providing a structural alternative to the beamer class while maintaining a similar syntax for frames and overlays.
• beamer-to-ltx-talk script (Github): UC Berkeley’s Kit Scriven has written a Python script that will help you convert your beamer presentations into the new more accessible format.  

If your PDF contains content saved as images, screen readers cannot access the underlying information. Math saved as an image is not accessible. This happens frequently with scanned worksheets, handwritten notes, whiteboard screenshots, or even some exported PDFs. Because these images have no semantic information, assistive technologies cannot read, navigate, or interpret the math correctly. In this case:

• Use AI tools to extract LaTeX or MathML: AI tools such as Google Gemini can transcribe equations from images, including handwritten notes. Upload a screenshot of the equation and use a prompt such as: “Please transcribe the expressions in the attached image using LaTeX.”

• Add both a natural language description and the extracted LaTeX to the image’s alt text or a nearby text description: The plain language summary helps communicate the meaning of the equation, while the LaTeX provides a more precise representation of the math.

  Example alt text: “The Pythagorean theorem: a squared plus b squared equals c squared. LaTeX: a^2 + b^2 = c^2”

  For remediated PDFs, include the LaTeX transcription in the alt text or in a nearby text description. This provides a minimally accessible representation when the original source cannot be updated.

• AI for Complex Graphs & Figures: AI can help draft alt-text for complex graphs and figures that are challenging to summarize, providing a useful starting point for review and refinement.  

Step-by-Step workflow for using Google Gemini to generate alt-text

1. Open Gemini: Sign in to your bConnected suite. Select the Google Apps grid (upper-right) and launch Gemini. (Important: To protect sensitive data, always sign in with your UC Berkeley (CalNet) account to use campus-licensed AI tools. This ensures your content is not used to train external models.)

    

2. Capture the Image: In your document (Acrobat, Word, or PowerPoint), use a screen-capture tool (Mac: Shift-Command-4; Windows: Win+Shift+S) to copy the image to your clipboard. 

3. Generate Alt Text: Paste the image into the Gemini prompt area and type: "Provide concise alt text for this image".  For complex figures & equations, us the following prompt: "Provide a concise natural-language description followed by the LaTeX code for this equation, keeping the total under 250 characters." Then press Enter

4. Review and Transfer: Verify the output for accuracy and instructional relevance. Click the Copy response icon and paste the text into the alt text field of your application.

STEM Use Cases

• STEM Equations & Figures: Upload a screenshot of a mathematical expression and/or complex figure and prompt: "Provide a concise natural-language description followed by the LaTeX code for this equation, keeping the total under 250 characters."

• Batch Processing: If working with multiple images, you can ask Gemini to generate descriptions for all of them at once.

Resource: Author Guidelines for Preparing Accessible Mathematics Content (This guide from the Society for Industrial and Applied Mathematics (SIAM) outlines the standard for ensuring formulas are readable by screen readers.)