Make logo Accessible (or at least aria-hidden="true")

[kousu]

If we use #21, we should eventually address

the logo isn't accessible. It looks good on Firefox:

but if you open it in lynx it just says "logo":

and VoiceOver or other screenreaders will say "logo. Welcome to Neuropoly. Emm Plus Minus Team. Facilities. Research ... "

Originally posted by @kousu in #21 (comment)

[joshuacwnewton]

Re:

This theme generated

<a class="navbar-brand text-wrap" href="../index.html">
      
        <!-- `logo` is deprecated in Sphinx 4.0, so remove this when we stop supporting 3 -->
        
      
      
      <img src="../_static/logo.png" class="logo" alt="logo">
      
      
    </a>

What happens if we rename logo.png to neuropoly-lab-logo.png? Will the alt-text automatically change as well? Or is it stuck as logo? (If it's logo only, that's... a total shame, wow!)

[kousu]

Ah! It was a good guess but no dice:

(.venv) [kousu@requiem neuropoly-docs]$ git diff --staged
diff --git a/_static/logo.png b/_static/neuropoly-lab-logo.png
similarity index 100%
rename from _static/logo.png
rename to _static/neuropoly-lab-logo.png
diff --git a/conf.py b/conf.py
index 88927eb..44282cd 100644
--- a/conf.py
+++ b/conf.py
@@ -58,7 +58,7 @@ html_static_path = ['_static']
 html_css_files = ["theme.css"]
 
 html_title = "NeuroPoly Lab"
-html_logo = "_static/logo.png"
+html_logo = "_static/neuropoly-lab-logo.png"
 html_favicon = "_static/logo.png"
 
 html_sourcelink_suffix = ".md" # our sources are in markdown; but this only has an effect if "use_download_button": True

produced the same alt text:

      <img src="../_static/neuropoly-lab-logo.png" class="logo" alt="logo">

This is hard-coded in

https://github.com/executablebooks/sphinx-book-theme/blob/519cf7c78c9ecffdd073be680af8f8f60bb0b130/sphinx_book_theme/_templates/sidebar-logo.html#L8

we could add a _templates/sidebar-logo.html to override and control this. And whatever we write there can be submitted upstream.

Another approach: "logo_only": False but add some CSS #site-title { display: none }. This is more of a hack but it would leave the title legible to plaintext and assistive browsers. But I would still want aria-hidden="True" on the logo image so that VoiceOver doesn't read out "logo" everytime for everyone.

[kousu]

Out of curiosity I checked out if furo did this accessibly either: they don't:

https://github.com/pradyunsg/furo/blob/fcd6ff66f45f6fb66d26428fe01e9b4a216ffed2/src/furo/theme/furo/sidebar/brand.html#L17-L29

lynx https://pradyunsg.me/furo/customisation/#sidebar-hide-name shows a bunch of junk

I haven't tested this but I bet VoiceOver would read out all of that on every page and I bet the rest of that theme -- neither theme -- isn't accessible either.