How can I add alternative text for background images in revealjs

[maelle]

Description

Hello!

I am using Quarto+revealjs for a slidedeck. I am using full screen images as shown in https://emilhvitfeldt.com/post/slidecraft-layout/#background-image

Is there a possibility to add an alternative text to images added this way? I couldn't find any info in revealjs docs themselves.

Thank you!

[cderv]

This is a bit tricky in general in HTML, not specifically revealjs.

The background image is inserted using background-image css attributes. So the more general question is how do you add alternative text in this case ?

it seems it requires some dom adaptation when this is needed : https://www.davidmacd.com/blog/alternate-text-for-css-background-images.html - Which you could only do now with some JS processing
Maybe you could come up with a revealjs extension to offer this feature ? https://quarto.org/docs/extensions/listing-revealjs.html

It would be a revealjs feature request that they allow this using an attribute, and do the right thing as they already do some JS processing to take the slide attributes, and create the background

Hope it helps

[maelle]

thanks! for now I'm keeping the notes field, hoping that one day Quarto can use it or a field called label or so. 😁

[jimjam-slam]

You could potentially also put the alt text directly on the slide and hide it visually using a class designed to keep it on the accessibility tree!

[maelle]

ooooh that seems promising, I'll try to explore this, thanks so much

[maelle]

I've now added this to my slides! Thanks so much @jimjam-slam.

• Alternative text is on slides (just a search and replace away since I had the alternative text as ::: {.notes} and no other notes):

::: {.sr-only}
Construction Equipment and Tools Plastic Toys
https://www.pexels.com/photo/construction-equipment-and-tools-plastic-toys-4492351/
:::

• I was already using a custom.scss file mentioned in the YAML:

format:
  revealjs:  
    highlight-style: a11y
    auto-stretch: true
    hash-type: number
    slide-number: false
    controls: auto
    progress: false
    from: markdown+emoji
    theme: [custom.scss]

• I added the lines from the post mentioned by @jimjam-slam in custom.scss:

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

[jimjam-slam]

I'm glad it's working for you, @maelle!