Category Archives: accessibility

AUTODESK: Make it Home Student Design Contest

 

https://www.instructables.com/contest/makeithome2025/

(from the website:)

In this contest your challenge is to design an affordable housing solution that could also address another problem. We are giving away more than $50,000 in prizes to the best entries!

Designing and building permanent, supportive housing is a collective effort. How might we reimagine policy frameworks and think differently across a variety of industries and sectors to address this problem? What if affordable housing could solve other problems in a community?

We are excited to launch a new chapter of the annual Make It Real contest with NFL quarterback Joshua Dobbs, who studied aerospace engineering as an undergrad and interned at NASA. In the new “More Than a Destination” film series, Josh visits Factory_OS, a California-based affordable housing builder, located inside a repurposed shipyard hangar with a fascinating history. Watch the films to learn more about the problem behind this year’s challenge!

Individual Prize: Best use of CAD or BIM Tools

Individual Prize: Best Physical Prototype

Individual: First Prize Scholarship Award

Best Team Use of CAD or BIM Tools

Team: First Prize Scholarship Award

 

SBU students can contact jennifer.adams@stonybrook.edu if you would like assistance from the SBU Libraries in entering this contest.

Closes June 30th!

 

Embedding Video into a webpage or brightspace… from Google Drive

So, as is normal, there are different ways to tackle embedding video using systems here at SBU. I’m just going to look at google drive embeds.  When you embed a video, it plays right there in the page, not something you have to click on which then opens up a new page or downloads the video to view it.  Like this:

(BTW – this video I am using in this demonstration was made via copilot as I outlined in the previous blog post.)

So how did I do that?  One usually won’t just drop a video into this blog site, as it will likely be too big.  So the first thing I did after making the video, is drop it into my google drive. Make sure you share it to anyone that has the link or anyone at SBU as appropriate.

The thing is, the embed code from google drive is a wee bit hidden.  You have to click on the three dots next to the file name, open it in a new tab, then click the three dots above the player area and then at the very bottom of the menu you can find the embed code.  You will need to highlight and copy the code out from there.

Now that you have the embed code, what next?  Well, here in the blog I switch from a Visual View to a Text view, and that shows me the html for the page and I just copy it in.  It might look a little scary, but right after you paste, you can switch right back to the Visual Mode and safety.

In Brightspace, you go to the area you want to have the video,  find this icon:

the "insert stuff" icon from the wysiwyg menu in brightspace.

This is the “insert stuff” button which can be found in just about any text entry window where you can format the text.

List of the stuff you can insert. Embed Code is at the bottom.

Enter Embed Code is at the bottom

this shows the interface where you paste the embed code.

Paste in your code and hit next.  It gives me a warning that you are getting media from another site.  Click Allow. Click Insert.  I got that warning again, and I told it to allow it again.  And now it looks like this:

screenshot showing the video embedded into a brightspace page.

Google Drive auto captions the videos that you put in the drive. (You should still check and edit them.)

You do not get all the same engagement tools and analytics that you get in echo360  embedding, but I felt that this was still worth sharing.

 

 

 

 

 

InDesign Scripts (Including some that work for accessibility needs.)

a screenshot showing the menu navigation, Window -> Utilities -> Scripts from inside indesign.

Gilbert Consulting offers custom Adobe InDesign and Illustrator scripts to solve workflow issues. They provide 38 free scripts designed to automate tasks and enhance functionality within these programs. These scripts cover a range of functions, from adding hyperlinks and page buttons to analyzing documents and exporting files in various formats. Many scripts address specific formatting needs like table styles, accessibility checks, and image conversions. The scripts are frequently updated, and several are accompanied by blog posts or videos offering further instruction and context.

https://gilbertconsulting.com/scripts

I discovered these while taking the Advanced Accessible PDFs course on Linkedin by Chad Chelius.

Enjoy!

(more here – including a color contrast checker: https://accessibilityscripts.com/store/product-category/indesign/)

 

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!

 

 

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.

 

Getting PDFs ready for Accessibilty Requirements

AI created attention grabber - decorative

The compliance of scanned and OCRed files from Adobe Acrobat Pro with accessibility standards depends on several factors, especially when dealing with complex layouts like columns and tables. Here’s how these elements fare:

1. Text Recognition (OCR) Accuracy

  • Adobe Acrobat Pro’s OCR is generally reliable for converting scanned images into editable and searchable text.
  • Challenges with Columns: OCR might misinterpret multi-column layouts, reading them linearly rather than by column.
  • Challenges with Tables: OCR may struggle to preserve the structure of tables, often interpreting them as unstructured text.

2. Tagging and Accessibility

Acrobat Pro can automatically tag OCRed documents, but the tags may not always be accurate, especially for complex layouts:

  • Columns: Acrobat might not detect column order correctly, causing screen readers to read content in the wrong sequence.
  • Tables: The software often fails to generate proper table tags, leading to a loss of row and column relationships crucial for screen reader users.

3. Alt Text for Images

  • Scanned documents often include graphical elements, which Acrobat cannot automatically assign alt text to. You must manually add descriptive alt text for meaningful images.

4. Reading Order

  • Acrobat’s “Reading Order” tool is essential to correct the logical reading sequence, especially in multi-column and table-heavy documents.
  • Default reading order for OCRed files may require significant manual adjustments to ensure compliance.

5. Compliance with Accessibility Standards

To meet accessibility standards like WCAG 2.1 or Section 508, additional steps are often necessary:

  • Manually Adjust Tags: Verify and edit tags to accurately reflect document structure, including headings, lists, tables, and columns.
  • Use Acrobat’s Accessibility Checker: This tool helps identify and fix accessibility issues but may not catch all problems in complex layouts.
  • Supplement with Manual Efforts: Complex documents may require manual remediation with tools like Adobe Acrobat or third-party software specialized in accessibility.

Best Practices for Improving Compliance

  1. Pre-OCR Processing: Clean up scanned files to enhance OCR accuracy (e.g., ensuring straight scans, good contrast, and minimal noise).
  2. Use Proper OCR Settings: Select the correct language and enable the “Recognize as Table” option where applicable.
  3. Manually Review Tags: After OCR, manually inspect and adjust tags for accurate representation of document structure.
  4. Simplify Layouts: If possible, avoid overly complex layouts in scanned documents to minimize accessibility challenges.

By taking these additional steps, you can significantly improve the compliance of scanned and OCRed documents, even with complex layouts.

 

GitHub Desktop – Accessibility Release Notes

Accessibility

Resize table columns via the keyboard

A new command, list.resizeColumn, enables you to resize columns by using the keyboard. When you trigger this command, select the column you want to resize and provide a percentage of the width you want to set. The following video shows how to apply this to resize a column in the Keyboard Shortcuts editor.

Screen reader support for synthesizing chat responses

We’ve updated the accessibility.voice.autoSynthesize setting to enable screen reader users to opt in to hearing chat responses announced by our synthesizer, instead of getting aria alerts.

Debugging improvements

When you’re debugging with the focus in an editor, invoking the Debug: Add to Watch command now announces the variable’s value for screen reader users.

Additionally, the Debug accessibility help dialog was improved for better thoroughness.