~scolby33/scolbyblog: Mark the deeplink svg as aria-hidden, but add a description to its parent element.

3ce3d464f128556492e86c523dca0373b8bd2bb8 — Scott Colby 8 months ago 7d6097b

Mark the deeplink svg as aria-hidden, but add a description to its parent element.

Thus screen readers and readability will ignore the image itself, but can still see the anchor element with its description if necessary.

patch browse .tar.gz

1 files changed, 5 insertions(+), 1 deletions(-)

M pelicanconf.py

M pelicanconf.py => pelicanconf.py +5 -1

@@ 94,6 94,7 @@ JINJA_FILTERS = {
 link_img = etree.Element("img")
 link_img.attrib["src"] = f"/{THEME_STATIC_DIR}/link.svg"
 link_img.attrib["alt"] = "chain link icon indicating an anchor to a heading"
+link_img.attrib["aria-hidden"] = "true"
 MARKDOWN = {
     "extension_configs": {
         "markdown.extensions.codehilite": {


@@ 107,7 108,10 @@ MARKDOWN = {
             "permalink": link_img,
             "permalink_class": "deeplink",
             "permalink_title": False,
-            "permalink_attribs": {"aria-label": "Anchor"},
+            "permalink_attribs": {
+                "aria-label": "Anchor",
+                "aria-description": "an anchor to this header",
+            },
         },
     },
     "output_format": "html5",