LaTeX and Accessibility

This is an example of what LaTeX can look like:

a sample of latex

When I drop it (the image, not the LaTeX code) onto ChatGPT 4o, I get the following text:

“This image contains mathematical equations written in LaTeX format, specifically related to quantum mechanics. The equations involve wavefunctions (ψm\psi_m), coefficients (Cn(t)C_n(t)), Hamiltonians (H1H_1), and time evolution expressions.

Key elements:

  1. The Schrödinger equation in the interaction picture.
  2. Expansion in terms of basis states ψn\psi_n.
  3. The time evolution of coefficients Cn(t)C_n(t).
  4. Matrix elements of the perturbation Hamiltonian H1H_1.
  5. The final boxed equation represents the differential equation governing Cn(t)C_n(t), which is common in time-dependent perturbation theory.

Would you like me to extract and format this in LaTeX for better readability?”

and when I answer yes, I get this:

“Here is the LaTeX code for the equations in your image:

\documentclass{article}
\usepackage{amsmath}

\begin{document}

\begin{equation}
\langle \psi_m | \times \left( i\hbar \sum_n \dot{C}_n(t)e^{-iE_n^{(0)}t/\hbar} | \psi_n \rangle = \sum_n H_1 C_n(t)e^{-iE_n^{(0)}t/\hbar} | \psi_n \rangle \right)
\end{equation}

\begin{equation}
i\hbar \sum_n \dot{C}_n(t)e^{-iE_n^{(0)}t/\hbar} \delta_{m,n} = \sum_n C_n(t)e^{-iE_n^{(0)}t/\hbar} \langle \psi_m | H_1 | \psi_n \rangle
\end{equation}

\begin{equation}
i\hbar \dot{C}_m(t) = \sum_n C_n(t)e^{i(E_m^{(0)} – E_n^{(0)})t/\hbar} \langle \psi_m | H_1 | \psi_n \rangle
\end{equation}

\begin{equation}
\boxed{ \dot{C}_m(t) = -\frac{i}{\hbar} \sum_n C_n(t)e^{i\omega_{mn}t} \langle \psi_m | H_1 | \psi_n \rangle }
\end{equation}

\end{document}

Explanation:

  • The equations describe the time evolution of coefficients Cn(t)C_n(t) in quantum mechanics.
  • The boxed equation is a common result in time-dependent perturbation theory.
  • The notation ⟨ψm∣H1∣ψn⟩\langle \psi_m | H_1 | \psi_n \rangle represents the matrix elements of the perturbation Hamiltonian.

You can compile this LaTeX code in Overleaf or any LaTeX editor to reproduce the formatted output. Let me know if you need modifications! 😊”

————————————————————————————————————————————————————————–
To go into more detail about producing this type of content in a manner that is most friendly to screen readers:

When it comes to LaTeX accessibility, the most recommended tool is Pandoc, which allows you to convert your LaTeX documents into HTML with MathML support, ensuring screen readers can interpret mathematical content effectively; this is considered the best way to make LaTeX documents accessible, especially for complex math equations. 

Key points about using Pandoc for LaTeX accessibility:
  • Conversion to HTML:
    Pandoc can convert your LaTeX file directly into HTML, which is generally better supported by screen readers than native PDF output from LaTeX.
  • MathML support:
    When converting to HTML, Pandoc can translate your LaTeX math expressions into MathML, a standard format for representing mathematical notation that is well-read by screen readers.
  • Cross-platform compatibility:

    Pandoc is available across various operating systems, making it widely accessible. 

Other considerations for LaTeX accessibility:
  • Alt text:
    Always provide descriptive alt text for images and figures within your LaTeX document.
  • Semantic structure:
    Use appropriate LaTeX commands for headings, lists, and other structural elements to improve screen reader navigation.
  • Metadata inclusion:
    Add relevant metadata like document title, author, and keywords to enhance accessibility. 

 

Given this information, I went back to ChatGPT and asked if it could render it into html for me.  It gave me this code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Quantum Mechanics Equations</title>
<script type=”text/javascript” async
src=”https://polyfill.io/v3/polyfill.min.js?features=es6″>
</script>
<script type=”text/javascript” async
src=”https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js”>
</script>
</head>
<body>

<h2>Quantum Mechanics Equations</h2>

<p>
\[
\langle \psi_m | \times \left( i\hbar \sum_n \dot{C}_n(t)e^{-iE_n^{(0)}t/\hbar} | \psi_n \rangle = \sum_n H_1 C_n(t)e^{-iE_n^{(0)}t/\hbar} | \psi_n \rangle \right)
\]
</p>

<p>
\[
i\hbar \sum_n \dot{C}_n(t)e^{-iE_n^{(0)}t/\hbar} \delta_{m,n} = \sum_n C_n(t)e^{-iE_n^{(0)}t/\hbar} \langle \psi_m | H_1 | \psi_n \rangle
\]
</p>

<p>
\[
i\hbar \dot{C}_m(t) = \sum_n C_n(t)e^{i(E_m^{(0)} – E_n^{(0)})t/\hbar} \langle \psi_m | H_1 | \psi_n \rangle
\]
</p>

<p>
\[
\boxed{ \dot{C}_m(t) = -\frac{i}{\hbar} \sum_n C_n(t)e^{i\omega_{mn}t} \langle \psi_m | H_1 | \psi_n \rangle }
\]
\]
</p>

</body>
</html>”

which when copied into a index.html file looks like this:

 

picture of the html render of the latex example.

Which I believe looks just like the original image:

a sample of latex

 

What is the point?  This started with a picture and ended with screen readable html.

 We can do this lift.

one more thing….

I tried to find handwritten math notes online and had a really difficult time.  Most everything that came up was stock images.  So I ended up drawing out the last line of the above formula.

handdrawn math from the same formula we were using before.

 

Dropping this onto ChatGPT gave me this:

The handwritten equation in the image appears to be:

a screen shot of the result of the interpretation

which also gave me the html code resulting in:

screen shot of the html code

Feel free to send me handwritten notes to play with!

 

 

Video – NVIDIA Cosmos

Brightspace: Advanced Assessments

Previously Titled: New Feature in Brightspace: Graders and Grade Release Permissions

 

Step by Step Advance Assessments

Create an assignment in Brightspace

Go to the Evaluations & Feedback side panel and expand it to see the options.

visual of side panels associated with assignements

expanded evaluation & feedback vidual

These options, depending on what you pick, reveal additional options.

Click on Select Evaluators (you can choose from the people enrolled in your course with a grading permissions role.)

picture of the select evaluators area of brightspace

Choose how evaluations will process with multiple evaluators.  You can choose between:

  • All evaluators work on the same evaluation together. Publishers release this evaluation to learners.
  • Evaluators work on their own evaluations separately. Publishers aggregate results into one final evaluation and release it to learners.

screenshot of the stated evaluation options

IF you have multiple evaluators: Allocate Evaluators to Learners (select which graders will grade which students)

 

the pull down menu lets you choose from

  • Allocate all evaluators to every learner
  • Randomly allocate 1 evaluator to every learner evenly

screenshot of the allocation methods

You can manually finese these generic selections by using the Evaluator Allocations options area and checking or unchecking students for a given evaluator.

If you have new students come in to the course, Brightspace will follow the automatic allocation method you picked for the new learner enrollments.

Choose publishers:

screenshot of the select publishers area

 

Important: It’s best to configure these settings when creating your assignment. If that’s not possible, make any necessary adjustments before receiving submissions. Once a student has been graded, these settings become locked and cannot be changed. Additionally, if submissions exist but no students have been graded, removing all evaluators will permanently disable advanced assessment features. This means grading will revert to the standard assignment process as it existed before these features were introduced to Brightspace.

 

 

notebooklm icon to indicate chat featureChat with my Advanced Assessments NotebookLM about this subject if you have any questions. You must use your SBU gmail to use this feature. (I am learning how to do this and may need to add each person who wants to use this chat. Feel free to reach out with a request if that turns out to be the case.)

 

Deep Dive by NotebookLM: Listen to the Audio here.

 

Sora: A First Shot

If you pay for ChatGPT, you now have access  to Sora, their video creation AI application.  This is my first attempt…   It’s a bird, it’s a plane, it’s super goat!

 

Prompt: a herd of mountain goats can be seen charging up the side of a rocky hill. One of the ones in the front is carrying a ran banner. it is very dramatic and the camera zooms in as they get to the top of the hill.

ANOTHER cool tool from Google

image of the whole Whisk desktop

labs.google/fx/tools/whisk

Drop a sample Subject, Scene and/or Style image and the AI creates a more detailed text description of each element and then recombines them.  This takes away some of the hassle of creating prompts for a new AI image.

 

Oh – and here is your audio “deep dive” from NotebookLM.

 

 

 

Google: Project Astra

Gradebook Quicktip

If you are looking to work on your grades offline in excel, and you know you will want to create new columns that you want your students to see, create the columns first in Brightspace, and then export the file as a CSV.  Even though there is language in the process that suggests you can create columns offline, I do not suggest trying to do this.

To create a new column, go to Manage Grades -> New -Item.

Shows the dropdown menu to choose "Item"

If this column only needs to be seen by students, and will not interact with anything else in brightspace, I suggest choosing the Text option for the item type.

shows the list of item types with Text circled.

Text columns are only visible  to students if you have the setting “grade scheme symbol” checked in Grades -> Settings -> Org Unit Display Options -> Student View Display Options.

screen shot of Org Unit Display Options and the Grade scheme symbol

Conversely, if you don’t have this box checked, I guess you can use this column type to make notes about each student that you don’t want them to see? Like name pronunciations or pronoun notes.

 

 

Webinar: NotebookLM: Intro for Stony Brook University

What’s New in Google Accessibility: Episodes 4, 5 and 6

When Accessibility Issues in Google Apps Require External Solutions

  1. Complex Navigation or Interaction Challenges:
    • Google apps generally follow WCAG standards, but certain complex workflows (e.g., navigating large spreadsheets or documents with multiple interactive elements) may not fully support screen readers or keyboard-only navigation.
    • Example: Managing extensive pivot tables in Google Sheets may not be fully screen-reader-friendly, requiring a switch to Microsoft Excel or a tool like JAWS for better accessibility.
  2. Non-Editable Content Embedded in Google Docs or Slides:
    • If you embed non-accessible elements such as images without alt text, charts, or external media with no captions, these cannot always be fully fixed inside Google apps.
    • Solution: Use external software like Adobe Acrobat Pro to enhance accessibility in exported PDFs or a dedicated media editor to caption videos.
  3. Lack of Advanced Semantic Structuring:
    • Google Docs supports headings, but for advanced semantic markup (e.g., ARIA roles or custom landmarks), its capabilities are limited. If you need to ensure accessibility for complex documents, moving to Microsoft Word or HTML editors with ARIA support is necessary.
  4. Inadequate Support for Custom Accessibility Features:
    • Custom interactive features (e.g., custom menus or JavaScript-like interactions in Google Slides) may lack robust ARIA tagging or keyboard navigation.
    • Solution: Transition to software like PowerPoint or InDesign, which allows detailed accessibility tagging.
  5. Color Contrast and Design Issues:
    • Google Sheets and Slides allow some color customization, but there are no built-in tools to check and enforce WCAG-compliant contrast ratios.
    • Solution: Use external contrast-checking tools or design software with integrated accessibility checks (e.g., Figma or Adobe XD).
  6. Non-Compliant Form Design in Google Forms:
    • Google Forms often falls short in supporting accessible error identification, labels, or custom ARIA roles. Advanced forms with full WCAG compliance may require a platform like Microsoft Forms or a web development environment.
  7. No Detailed Accessibility Auditing:
    • Google Workspace apps do not provide native tools for auditing accessibility across documents or designs.
    • Solution: Use external auditing tools such as WAVE or Axe to identify and resolve WCAG violations.
  8. Language and Multilingual Accessibility:
    • Google Docs supports some basic language tagging but cannot fully address accessibility for multilingual documents with specific pronunciation or semantic needs.
    • Solution: Use advanced editing tools that allow precise language tagging, like Microsoft Word or InDesign.

How to Decide When to Move to a Different Program

You should consider moving away from Google apps when:

  • The task involves a critical WCAG violation that Google Workspace cannot address (e.g., no alt-text for key visuals or inaccessible interactive content).
  • External auditing tools consistently flag issues that cannot be resolved using Google’s built-in accessibility options.
  • You need advanced customization or integration of assistive technologies (e.g., full ARIA implementation, detailed tagging, or robust form accessibility).

 

Example workflows:

1. Document Accessibility in Microsoft Word

  • Why Word? Microsoft Word has advanced accessibility tools, including a built-in Accessibility Checker and robust support for semantic structure (e.g., heading levels, alt text for images, table summaries).
  • Example Workflow:
    1. Use Word’s Styles feature to apply semantic headings (Heading 1, Heading 2, etc.).
    2. Add alt text to images by right-clicking the image > Edit Alt Text.
    3. Use the Accessibility Checker (Review tab) to identify and fix issues such as missing headings or poor color contrast.
    4. Export to a tagged, accessible PDF using Save As PDF with the “Create Accessible PDF” option.

2. Presentation Accessibility in Microsoft PowerPoint

  • Why PowerPoint? PowerPoint includes tools to ensure slide layouts are screen-reader-friendly, proper reading order, and video captioning.
  • Example Workflow:
    1. Use built-in slide layouts (e.g., Title Slide, Content Slide) to ensure proper semantic structure for screen readers.
    2. Add alt text to all images, charts, and graphs.
    3. Use the Accessibility Checker (Review tab) to catch issues like insufficient text contrast.
    4. Add closed captions or subtitles to embedded videos via the Insert Captions feature.

3. Data Accessibility in Microsoft Excel

  • Why Excel? Excel is more screen-reader-friendly than Google Sheets and offers features like named ranges and accessible pivot tables.
  • Example Workflow:
    1. Use Named Ranges instead of referencing raw cell coordinates (e.g., =SUM(SalesData)).
    2. Add descriptive headers to all columns and rows for better navigation.
    3. Use the Accessibility Checker to identify common issues like merged cells, which can confuse assistive technologies.
    4. Export to a PDF with accessibility tags to retain structure.

4. Accessible PDFs with Adobe Acrobat Pro

  • Why Acrobat Pro? It’s the industry standard for ensuring that PDFs are fully accessible, with tools for tagging, alt text, and reading order adjustments.
  • Example Workflow:
    1. Import your document from Word or PowerPoint and open it in Acrobat.
    2. Use the Accessibility Tool to run a full check of your document.
    3. Fix issues such as missing tags, reading order problems, and alt text directly in Acrobat.
    4. Verify compliance with the built-in Accessibility Checker.

5. Form Accessibility in Microsoft Forms or JotForm

  • Why These Tools? These platforms provide greater control over form labels, field instructions, and error messages than Google Forms.
  • Example Workflow:
    1. Add clear and descriptive labels to every form field.
    2. Include placeholders or instructions for input requirements (e.g., “Enter your 10-digit phone number”).
    3. Enable validation for required fields with error messages.
    4. Test the form with screen readers to confirm navigation and readability.

6. Design Accessibility in Figma or Adobe XD

  • Why Figma/Adobe XD? These tools allow detailed accessibility checks during the design process, including color contrast and interactive elements.
  • Example Workflow:
    1. Use plugins like Contrast or Stark to ensure your color palette meets WCAG contrast requirements.
    2. Annotate designs with accessibility notes (e.g., “This button must have ARIA role=’button'”).
    3. Export designs with accessible descriptions for developers to implement.

7. Website Accessibility with WordPress

  • Why WordPress? WordPress supports accessibility-ready themes and plugins to ensure WCAG compliance for websites.
  • Example Workflow:
    1. Choose an accessibility-ready theme (marked in the theme directory).
    2. Use plugins like WP Accessibility to add ARIA roles, skip links, and other enhancements.
    3. Test the site with tools like WAVE or Axe to identify accessibility barriers.

8. Interactive Accessibility in ARIA-Supported Development Environments

  • Why Use ARIA? For custom interactive content, ARIA (Accessible Rich Internet Applications) helps ensure assistive technologies can interact with dynamic elements.
  • Example Workflow:
    1. Develop interactive content in HTML using ARIA roles (e.g., role=”dialog”).
    2. Use tools like Deque Axe or Google Lighthouse to test ARIA implementation.
    3. Include keyboard navigation testing to ensure all users can interact with your content.

 

Creating, Crafting, Sustainability

Skip to toolbar