What a LaTeX file exported to html sounds like to a screen reader

hand drawn math formula

This is the original image of a handwritten math formula that was dragged into ChatGPT 4o with the query:

“I’m going to give you another image to interpret. Please switch this out to html if you can.”

It gave me the html:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Quantum Equation</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 Equation</h2>

<p>
\[
\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>

and when this is opened in a browser, it looks like this:

screen shot of the html code

and SOUNDS like this in the screen reader:

Here is the transcript produced by notebooklm from the audio file:

“over C subscript M left parenthesis T right parenthesis equals minus fraction start I over H with stroke end of fraction and area summation with N underneath C subscript N left parenthesis T right parenthesis E superscript I subscript MN T mathematical left angle bracket subscript M vertical line H subscript one vertical line subscript N mathematical right angle bracket”

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!

 

 

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.

 

 

 

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.

 

 

Emerging Tech for a Changing Edu

Skip to toolbar