diff --git a/source/_anything/project/hexo-console-webmention.md b/source/_anything/project/hexo-console-webmention.md
index 1aecafe9bf..02bcead775 100644
--- a/source/_anything/project/hexo-console-webmention.md
+++ b/source/_anything/project/hexo-console-webmention.md
@@ -22,7 +22,7 @@ For more information visit:
diff --git a/source/_anything/project/hexo-generator-anything.md b/source/_anything/project/hexo-generator-anything.md
index eca19dbd5e..82a9117867 100644
--- a/source/_anything/project/hexo-generator-anything.md
+++ b/source/_anything/project/hexo-generator-anything.md
@@ -23,7 +23,7 @@ For more information visit:
diff --git a/source/_dynamic/photos-map.md b/source/_dynamic/photos-map.md
index e52a70ecd8..e47f4bf48f 100644
--- a/source/_dynamic/photos-map.md
+++ b/source/_dynamic/photos-map.md
@@ -6,7 +6,7 @@ photograph:
name: Photographers Mosaic
keepOutOverview: true
date: 2021-08-24 15:56:00
-updated: 2024-07-21 18:26:44
+updated: 2024-07-25 11:06:35
---
Most of the images listed in the collection (and some more out of the shed) contain geo-localisations in the form of GPS coordinates in their metadata. These **{% photo.count %} photos** are pinned on this map.
diff --git a/source/_dynamic/photos.md b/source/_dynamic/photos.md
index 235a158289..ad218cc208 100644
--- a/source/_dynamic/photos.md
+++ b/source/_dynamic/photos.md
@@ -5,7 +5,7 @@ photograph:
file: $20-08-Mallorca-7627.jpg
name: Photographers Mosaic
date: 2021-08-24 15:56:00
-updated: 2024-07-21 18:26:44
+updated: 2024-07-25 11:06:35
---
diff --git a/source/_posts/2024/Ensure-Accessibility-on-Icon-Links.md b/source/_posts/2024/Ensure-Accessibility-on-Icon-Links.md
new file mode 100644
index 0000000000..ddffaab86c
--- /dev/null
+++ b/source/_posts/2024/Ensure-Accessibility-on-Icon-Links.md
@@ -0,0 +1,84 @@
+---
+slug: Ensure-Accessibility-on-Icon-Links
+title: Ensure Accessibility on Icon Links
+subtitle: ... automatically with a small client-side script
+date: 2024-07-25 08:06:34
+photograph:
+ file: 23-05-Holland-0368.jpg
+ name: Red Black Pigeon
+ socialmedia: /static/images/social-media/Ensure-Accessibility-on-Icon-Links.png
+categories:
+ - UI/UX
+tags:
+ - Accessibility
+ - JavaScript
+ - UI
+related:
+ - Use-a-duplicate-image-to-drop-a-shadow
+ - Don-t-be-ignorant-and-offer-a-theme-switch
+ - SVG-Resources
+syndication:
+ - host: Mastodon
+ url: null
+---
+
+I am gradually saying goodbye to icon fonts in this blog in favor of SVG files, which I prefer to integrate using ``background-image`` in order to remain flexible.
+
+During the modification, I noticed that although I have sometimes provided icon-only links with a ``title``, these do not play any role in terms of [accessibility](https://www.a11yproject.com/posts/creating-valid-and-accessible-links/). People who are dependent on a screen reader have not yet been able to recognize what these links are.
+
+Where were two ways to change this: ``aria-label`` or add text and make it invisible. The former is basically just a crutch that is [not even fully supported](https://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) by all browsers and so only the invisible text remained. I found a suitable and very well-working solution on [Stack Overflow](https://stackoverflow.com/questions/62703524/how-to-make-an-html-link-displayed-as-an-icon-accessible)by [GrahamTheDev](https://dev.to/grahamthedev):
+
+```html
+
+ My Link
+
+```
+
+```css
+.my-icon-link {
+ background-image: url(/images/icons/my-icon.svg);
+}
+
+.visually-hidden {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+ clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
+ clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
+ white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
+}
+```
+
+
+
+My task was now to extend all textless icon links in the code with the SPAN ... or to find an **automatism** for this, because all these links already have a title and it is exactly what needs to be transferred to the link text. Since accessibility is not impaired when text is injected via JavaScript, I have found the following **client-side** solution, which is embedded in the footer of each page via ``script``:
+
+```js
+function ensureIconLinkText() {
+ let linksWithoutText = document.querySelectorAll("a[href^='http']:empty");
+ linksWithoutText.forEach(e => {
+ if (window.getComputedStyle(e).display !== "none") {
+ if (e.title) {
+ let eText = document.createElement("span");
+ eText.innerText = e.title;
+ eText.classList.add("visually-hidden");
+ e.append(eText);
+ } else {
+ console.error("Link without Text and Title: " + e.outerHTML);
+ }
+ }
+ });
+}
+
+ensureIconLinkText();
+```
+
+The code in text form:
+*Find all A tags without text, run through them and if the element was not intentionally hidden and if a title is defined, create a new SPAN tag with its text value und insert this into the link, otherwise output an error in the console*
+
+With this approach, I can leave the links as they are and can see in the console whether I have forgotten a title somewhere.
diff --git a/static/images/icons/500px.svg b/static/images/icons/500px.svg
index 0e458b2f37..abf2bf322b 100644
--- a/static/images/icons/500px.svg
+++ b/static/images/icons/500px.svg
@@ -1,5 +1,6 @@
-
Github
NPM
-
Insights
+
Insights
or
Open in VSCode
