No alt text for 'bg' images

[smu-sc-gj]

I'm using a lot of 'bg' tagged images to provide images alongside the text of my presentations, for example

![bg vertical right:40% h:350 Tennis for two image - By Brookhaven National Laboratory (BNL)](images/Tennis_For_Two_on_a_DuMont_Lab_Oscilloscope_Type_304-A.jpg)
<!--By Brookhaven National Laboratory (BNL) - Screenshot, Public Domain, https://commons.wikimedia.org/w/index.php?curid=27864450 -->
![bg h:350](images/Spacewar_screenshot.jpg Spacewar! image - By Kenneth Lu)
<!-- By Kenneth Lu - Spacewar!, CC BY 2.0, https://commons.wikimedia.org/w/index.php?curid=2060215 -->
- Early games two player:
    - Examples:
        - [Tennis for Two](https://en.wikipedia.org/wiki/Tennis_for_Two) (1959)
        - [Spacewar!](https://en.wikipedia.org/wiki/Spacewar!) (1962)

The alt text works for other images, but not these? There's a big push within my institution to make all slides accessible for screen readers. I can understand the alt text being ignored for a background image, but where part of the slide is taken up with an image relevant to the text this requires alt text for screen readers.

[yhatt]

When used ![bg]() background image syntax, Marpit will render the image through background-image style.

import { Marpit } from '@marp-team/marpit'

const marpit = new Marpit()
const { html } = marpit.render('# Hello ![bg Alternative text](https://example.com/image.jpg)')

console.log(html)

<div class="marpit">
  <section id="1" data-background-image="url(&quot;https://example.com/image.jpg&quot;)" style="--background-image:url(&quot;https://example.com/image.jpg&quot;);background-image:url(&quot;https://example.com/image.jpg&quot;);background-position:center;background-repeat:no-repeat;background-size:cover;">
    <h1>Hello </h1>
  </section>
</div>

Using the background-image style clearly indicates that the image is the background. This is also consistent with the purpose of the bg keyword in the image syntax, but it cannot associate text alternatives to the background image.

The CSS background-image property was designed for decorative purposes and it is not possible to associate text alternatives with images that are included via CSS.

— https://www.w3.org/WAI/WCAG22/Techniques/failures/F3

I suppose it's difficult to associate text alternatives to the background image when rendered with Marpit default mode, because appending <img alt=""> for the background image will affect the final DOM structure of the slide. By some types of CSS selectors used in theme CSS, not intended styling may be applied to the slide by appending <img alt=""> for the background image.

---

When Marpit has adopted the advanced background mode by enabled inline SVG mode, background-image styles will define to per <figure> elements in the isolated layer. This mode is actually used widely by Marp ecosystem.

const marpit = new Marpit({ inlineSVG: true })
const { html } = marpit.render('# Hello ![bg Alternative text](https://example.com/image.jpg)')

<div class="marpit">
  <svg data-marpit-svg="" viewBox="0 0 1280 720">
    <foreignObject width="1280" height="720">
      <section data-marpit-advanced-background="background">
        <div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal">
          <figure style="background-image:url(&quot;https://example.com/image.jpg&quot;);"></figure>
        </div>
      </section>
    /foreignObject>
    <foreignObject width="1280" height="720">
      <section id="1" data-marpit-advanced-background="content">
        <h1>Hello </h1>
      </section>
    </foreignObject>
    <foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo">
      <section data-marpit-advanced-background="pseudo" style=""></section>
    </foreignObject>
  </svg>
</div>

In this case, I suppose we might associate text alternatives to each background images by using <figcaption> element.

<figure style="background-image:url(&quot;https://example.com/image.jpg&quot;);">
  <figcaption>Alternative text</figcaption>
</figure>

We have to append new CSS to the base style of advanced background images, to hide them from the screen.

marpit/src/postcss/advanced_background.js

Lines 50 to 57 in e926440

	section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] > figure {
	all: initial;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	flex: auto;
	margin: 0;
	}

[smu-sc-gj]

Thank you for your quick reply!

I think this is a good solution, for some background images for example those which provide corporate colours/logos there would probably be no alternative text. In other instances where the background image is being used to illustrate something in the text which is often the case in presentations, the alternative text is essential for accessibility.

Thank you also for Marp, I've been using it for all my lecture notes, conference presentations and other slide decks since 2017!

[yhatt]

Shipped as Marpit v2.5.1. Please be patient for updation of downstream Marp ecosystem tools. :)

[butala]

I was wondering if there is something one must do to enable this feature in .pdf files output from marp. Perhaps I am using the tool incorrectly?

Take the following snippet for example: ![bg right:35% Martin Fowler](assets/Martin_Fowler.jpg)

I then do marp --html --pdf --allow-local-files example.md to generate a PDF.

I am using @marp-team/marp-cli v4.0.0 (w/ @marp-team/marp-core v4.0.0).

My hope is that the PDF includes an "image with description" to pass the accessibility check in, e.g., moodle (https://moodle.org). The PDF is for a course where we receive kudos for generating accessible documents.

Thank you for the wonderful tool ecosystem! Can you please help me?

[yhatt]

Currently Marp outputs accessibility-friendly HTML with no extra settings, but whether <figcaption> that is rendered by Marp will apply as an alternative text in PDF is depending on the backend browser for converting HTML to PDF.

In Chrome/Chromium (the default browser in regular Marp CLI usage), it looks like recognized as an issue, and the feature request is still standing on https://issues.chromium.org/issues/40864332. If you want, it's good to track this and provide feedback about your use case.

[butala]

Thank you very much for the feedback @yhatt. I will follow up on this issue with the Chrome/Chromium folks.

[smu-sc-gj]

Hi @butala,

I've moved to HTML for all my slides on Moodle, I've not checked them with the accessibility tools but I'm happy to share my current Marp workflow if it'll help. For context, I moved from only using PDF (my understanding was these were better for screen readers,) to only using HTML. So my notes, worksheets and software documentation etc. I provide my students is all via HTML. My understanding at the time (around 2 years ago,) was that features like alt image text, table reading order etc. for screen readers were in development for Latex (my favoured markup for worksheets, guides, booklets etc.) so I've been moving to HTML. @yhatt was kind enough to make this change which was the final piece of the puzzle for me allowing me to add alt text to half slide images I use.

I'm using visual studio code to write the markdown, then I use the Marp plugin to output the HTML file in the same directory as the markdown file (so the images are local). I'm then using another tool called Monolith which converts the HTML file and images to a single HTML 5 page. I upload this to Moodle.

My workflow for other documents (not slides,) is a little more involved. In short I use Pandoc but I've figured out how to get it to do references (a little like Latex) and I've extracted the CSS from the VS code preview window which gives good looking formatting. I run these though Monolith again to get a single HTML 5 page. For the booklets I produced (e.g. a series of tutorials for a module,) I generate a number of HTML 5 pages using the above process, then take the links to other markdown documents and change them to html. This is currently done by hand but I've been experimenting with using a Lua script fed into pandoc to automate this. I can zip and upload this 'website' and unpack that on Moodle, setting the front page (or index) as the start page (or whatever Moodle calls it).