How can I add alternative text to a revealjs slide logo image identified in the YAML by logo: path/image.png?

[rressler]

Description

I have been using yaml logo: my_image in my quarto revealjs presentation. However, I need to add alternative text for the logo so it appears on every slide.

I have tried using tags such as logo-alt or logo_alt but they do not seem to exist.

Is there a way to add alternative text to the image using YAML or other methods so the logo image has an alt attribute with the provided text on every slide where it is used?

[mcanouil]

Currently, there is no built-in way (https://quarto.org/docs/reference/formats/presentations/revealjs.html#slide-content).
You could use a LUA filter and/or JavaScript.

[massimovassalli]

Hi,
I tried to implement a lua filter to do the job, but I did not manage to get the ALT added to the image. My basic filter is pasted below, but it does not seem to work (but I know it gets called, as if I change the code with something else it works). Can you see the issue here?
Thanks!

function Image(el)
if el.classes:includes("slide-logo") then
el.attributes.alt = "logo"
end
return el
end

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

[massimovassalli]

Sorry for the missing quotes

I hope this works. Do you have any suggestions on how to reference the logo element?

function Image(el)
if el.classes:includes("slide-logo") then
 el.attributes.alt = "logo"
end
return el
end

[mcanouil]

I am actually not sure, you actually can set the alternative attribute to the log via Lua filter in this case.

A simple workaround would be to use JavaScript:

---
title: "Habits"
author: "John Doe"
format:
  revealjs:
    logo: quarto-icon.svg
    include-after-body:
      - text: |
          <script type="text/javascript">
          document.addEventListener("DOMContentLoaded", function() {
            const logoImage = document.querySelector('img.slide-logo');
            if (logoImage) {
              logoImage.setAttribute('alt', 'Alternative text for logo');
            }
          });
          </script>
---

## Getting up

- Turn off alarm
- Get out of bed

[rressler]

Thanks for the quick response. Richard From: Mickaël Canouil ***@***.***> Date: Sunday, February 4, 2024 at 1:48 PM To: quarto-dev/quarto-cli ***@***.***> Cc: Richard Ressler ***@***.***>, Author ***@***.***> Subject: Re: [quarto-dev/quarto-cli] How can I add alternative text to a revealjs slide logo image identified in the YAML by logo: path/image.png? (Discussion #8592) External Email: Use caution with links and attachments. There is no built-in way (https://quarto.org/docs/reference/formats/presentations/revealjs.html#slide-content<https://urldefense.com/v3/__https:/quarto.org/docs/reference/formats/presentations/revealjs.html*slide-content__;Iw!!IaT_gp1N!2VITl92ROpBbVLWZ7uMSRVeb8xXYghX2Pm3tq_Jji39jhU6JeTPIPPXX2WR5fGdMinytfzbRq9ueGOzZFg8wBDtnoMg$>). You could use a LUA filter and/or JavaScript. — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https:/github.com/quarto-dev/quarto-cli/discussions/8592*discussioncomment-8362451__;Iw!!IaT_gp1N!2VITl92ROpBbVLWZ7uMSRVeb8xXYghX2Pm3tq_Jji39jhU6JeTPIPPXX2WR5fGdMinytfzbRq9ueGOzZFg8wHPAawAA$>, or unsubscribe<https://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AOCMN3P7AAFYRTGGAV3KRKTYR7JXHAVCNFSM6AAAAABCY6PRQ6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNRSGQ2TC__;!!IaT_gp1N!2VITl92ROpBbVLWZ7uMSRVeb8xXYghX2Pm3tq_Jji39jhU6JeTPIPPXX2WR5fGdMinytfzbRq9ueGOzZFg8wztAbxYI$>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[mcanouil]

@rressler for your information, when you reply from email, do not include previous content as it gets added to your message on GitHub.

[mcanouil]

I've opened an enhancement issue for logo-alt in revealjs:

• Allow to set alternative text for logo in Reveal.js #10933