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. :)