~scolby33/scolbyblog

3ce3d464f128556492e86c523dca0373b8bd2bb8 — Scott Colby 1 year, 5 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.
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",