Moritz Glantz — Blog

HTML Tags Memory Quiz Game

2026-04-12T13:00:00Z

Do you remember that HTML memory test on CodePen? I thought it was time to give it some more challenging modes. So I built my own version.

The idea is still simple: type as many HTML elements as you can remember. But this one adds a few more challenging modes:

a timer for normal runs
countdown rounds with different time limits
you can also add all the weird obsolete and deprecated elements

Sounds like fun?

Test your HTML memory

Roborock Saros 10R voice commands

2026-04-12T12:00:00Z

The Roborock Saros 10R has its own built-in voice assistant. You say “Hello Rocky” or “Hey Rocky”, then a command, and if all goes well, the robot does the thing. These commands work without a network or app connection. This is especially useful if you run the vacuum without a network connection, the way nerds like it.

What I was missing was a simple list outside of the app. So here it is.

Commands

Action	Commands
Start cleaning	`start cleaning`
Pause	`pause`
Resume	`resume`
Vacuum and mop	`vacuum and mop`
Vacuum	`just vacuum`, `vacuum only`
Mop	`just mop`, `mop only`
Clean here	`clean here`
Skip here	`don't clean here`, `skip here`
Go back to dock	`go back to dock`, `charge`
Empty the dustbin	`empty the dustbin`
Wash the mop	`wash the mop`
Dry the mop	`dry the mop`
Stop drying	`stop drying`
Increase vacuum intensity	`increase vacuum intensity`, `vaccum harder`
Reduce vacuum intensity	`reduce vacuum intensity`, `vaccum softer`
Increase mopping intensity	`increase mopping intensity`, `mop harder`
Reduce mopping intensity	`reduce mopping intensity`, `mop softer`
Volume up	`volume up`, `speak louder`
Volume down	`volume down`, `speak softer`
Clean rooms	`clean “room name”`

These are tested commands.

I have not tested these commands with Alexa, Google Assistant or other external voice assistants, but some of them could work there too.

I would be very interested to hear from other Saros 10R users if they have found additional direct voice commands. If you have, let me know and I would be happy to add them to this list.

I also wonder whether this could be tested more systematically: just speak a long list of plausible commands and record which ones are accepted. That might be a good way to find undocumented commands or alternative phrasings. But that is a topic for another day.

At the very least, this should save somebody a bit of trial and error.

2025

2025-12-29T00:00:00Z

'tis the season for “end of the year”-posts. Let’s go!

In 2025, I…

…started a new job. I am now working full time in digital accessibility.
…settled my first legal dispute.
…sold some tech themed shirts in my American shop and international shop and it made me happy, that some people resonate with my humor.
…moved to a new apartment.
…traveled to Japan for a few weeks.
…went bodyboarding in Portugal for two weeks.
…ate lots of rice.
…tried lots of new food.
- Recommend: onigiri, tuna sashimi, miso soup, okonomiyaki, tsukemen, A4 wagyu, Japanese baumkuchen.
- Cannot recommend: nattō (very slimy), bitter melon, pig ears, any kind of offal.
…came home to the new apartment completely underwater and had to throw away half of my furniture.
…continued renovations in the Palatinate Forest.
…launched 7 tools and websites.
- Accessibility Link Tester – A tool to build various combinations of links, with different attributes, to test them with screen readers.
- Daily HTML Bot – a Mastodon bot that helps learning HTML by posting two random HTML elements per day with a short explanation and a link to the spec.
- Force Focus Bookmarklet – a bookmarklet that highlights focused elements clearly – with an orange outline, and a red background.
- Mastodon Hidden Posts Stats – A tool that shows you stats about the posts you have hidden via Mastodon filters.
- Metronome Web App – Well, it is a free online metronome without any fuzz or ads.
- WhatsApp iOS Backup Viewer – A handy web app that parses and shows your WhatsApp chat backups in a neat interface.
- The Mighty Triangle – Are you also somebody who underestimates the Triangle? That ends today 😊.
…published 11 blog posts, including this one.
…did lots of freelance accessibility work.
…performed my first inclusive design study. No matter what you think you know, people with disabilities will teach you something new every time.
…recorded and published 9 podcast episodes with Sarah for #WWSIV
…stopped streaming and podcasting with #WWSIV 😢.

Did I achieve my goals for 2025?

For 2025 I planned to…

✅ …do even more Accessibility and Frontend-Dev freelance work
✅ …redesign the start page of this blog to fit with the new blog design
❎ …design the front-end of a really cool remote streaming tool which is in the making right now (I am late on this one, sorry Sarah!)
– started, but the drive got lost along the way. Maybe we will dig it up again. It was a tool to remotely control OBS Studio.
✅ …travel east
✅ …help launching accessible versions of lots of websites.
🤷 …finish the construction work in the Palatinate Forest
– when is construction ever finished?

In 2026 I plan to…

…start freelancing again, after my new job took away 100% of my time (but no more than one day a week).
…start making music again. Drums, Guitar, composition, recording. I don’t know what or with whom, but I need the beat back in my life.
…maybe, just maybe, publish some of my poetry.
…attend more concerts and other cultural events.
…organize a Digital Independence Day meetup in Karlsruhe.

Digital Independence Day

2025-12-27T00:00:00Z

At the 39th Chaos Communication Congress (39C3), Marc-Uwe Kling introduced the idea of a Digital Independence Day and it deeply resonated with me.

We already saw examples of misuse of power when U.S. sanctions abruptly cut ICC officials off from everyday essentials: email, bank accounts, credit cards, and even services like Alexa and e-books.

(Marc-Uwe Kling is a popular German author and the writer of the Kangaroo books (the “Känguru-Chroniken” universe)).

The Idea

On every first Sunday of the month, you spend a bit of time becoming less dependent on Big Tech.

Not in a dramatic “delete everything and move to a cave” kind of way. More like: small, repeatable, realistic steps.

What Could You Do On That Day?

Here are a few examples, one thing a month is plenty:

Move one mailbox (Gmail → Proton Mail/mailbox.org; ideally with your own domain).
Switch messengers (WhatsApp → Signal).
Switch defaults (Firefox as main browser; search engine, password manager, DNS).
Leave Meta behind (Instagram/Facebook → Mastodon/Pixelfed).
Export and back up (photos, notes, documents to storage you control).
Move core services (calendar, contacts, notes, cloud drive → Nextcloud; test, then migrate).

Help!

If you happen to know what the points on this list mean, you should help others becoming digitally independent.

The magic isn’t in doing everything. It’s in doing something regularly, so “I should really…” becomes actual progress over time.

Join In

If you want, treat this as a recurring appointment with your future self: an hour a month, for more autonomy and less platform gravity.

For convenience, here’s an ICS calendar event you can subscribe to:

Digital Independence Day Calendar Event

Triangles, please!

2025-12-22T00:00:00Z

Do you know someone who answers “Do you play an instrument?” with:

“Yes, the triangle.”

Thirteen years ago that joke annoyed me enough that I planned to build a website about the triangle — an instrument that cuts through every mix and is a lot less trivial than its reputation.

Today it goes live.

The Mighty Triangle

It’s a small, focused site with everything I wanted back then:

The science: why the triangle is so present in a mix, and what makes it sound the way it does.
Incredible performances: the heroes who make “one note” feel like an art form.
Popular songs featuring a triangle: once you hear it, you’ll keep hearing it.
A virtual triangle: play it yourself (including dampening), because that’s where it gets interesting.

The mighty triangle

Why this exists

Because the triangle is often treated as a punchline, while in reality it demands precision: timing, touch, and control of the ring. One clean hit can define a moment — and one sloppy one can ruin it. If you’ve ever underestimated it: welcome. That’s the point.

WhatsApp iOS Backup Viewer

2025-12-03T00:00:00Z

When I started using an iPhone around 2020, I migrated ten years of Android WhatsApp chats via a shady app from the internet™️ to the new iPhone. This was not an official way (since that did not exist back then). It involved iTunes backups that get manipulated and being put on the phone again. The world was good! But some time after, disaster struck! ⚡️

The Disaster

After some time, I noticed the old chats went missing. They seem to have noticed this migration path existed and did something to prevent it. I texted the WhatsApp support and got nothing but dumb robot replies. I can only speculate why they decided to not show migrated chats anymore. It may be because they could in theory be manipulated. If somebody knows the real reason, please tell.

So I thought my old chats were gone. But I had a local iPhone backup sitting on disk, but no official way to peek inside. Then I discovered that apps like iMazing can show WhatsApp chats from backups. And they also showed the missing chats, so they were part of the backup. WhatsApp was just not showing them.

The Dig

So I did a little digging. Where do the chats sit. What I have to do to make them visible and: can I write a tool that makes it easy to find and search old chats? And that, kids, is how I ended up coding a WhatsApp backup viewer that runs entirely in the browser. 🥳

No ads, no tracking beyond a simple hit counter, and everything stays on your machine. Browse and search your WhatsApp history, with no file leaving your computer (I know, WhatsApp chats can have some spicy stuff, you better not upload anywhere 😏).

That all sounds cool, but I know my work may have flaws. Since this is sensitive data we are handling there, keep a copy elsewhere. I am not liable for data loss or other problems. This is a free hobby project and may contain errors.

Features

Load iOS backups locally: Point it to your local iPhone backup (~/Library/Application Support/MobileSync/Backup/) and it the database for you (takes some resources), or if you have it, open the chat DB directly.
Fast search: All chats and messages are loaded once; type to filter chats and jump to the matched message.
Safe by design: Files never leave your computer.

Technical Details for Nerds

It’s built with plain HTML, CSS, and JavaScript. The database work uses sql.js (WASM) loaded locally. No CDNs, no servers. And seriously: sql.js is so cool! I could not have done it without it.

Emoji fidelity: legacy emoji are mapped via to new emoji.
Everything is fully client-side, so nothing you put in there will ever leave your machine. If it helps you rescue your chat history, that’s a win—and if you feel like tipping a dollar or two, there’s a Ko‑fi link waiting.

Give it a try, and if you have ideas—or find an edge-case backup—reach out on Mastodon.

WhatsApp iOS Backup Viewer

Metronome Web App

2025-11-08T00:00:00Z

I wasn’t satisfied with any of the metronome apps out there. So, of course, I ended up coding one myself.

I wanted a clean metronome with no fuzz, no ads, and nothing beyond the core functionality. Just a good design that feels right. To me. There’s a special kind of satisfaction in writing code instead of actually practicing the guitar.

Features

You can set the tempo, choose beats per measure, and pick subdivisions like triplets, and of course quintuplets, because why not?

And you can install it as a web app!

Technical Details for Nerds

It’s built with just HTML, CSS, and JavaScript using the Web Audio API. No libraries, no dependencies, no external sound files.

It keeps the screen awake using the Wake Lock API, saves your settings in localStorage, and lets you share links with your configuration included.

It’s fully client-side and PWA-ready, so you can install it and use it like a native app right from your browser.

Give it a try, and if you have ideas or find a favorite weird setting, share it with me on Mastodon.

Metronome Web App

macOS Remove Wi-Fi Networks Without Admin Privileges

2025-11-06T00:00:00Z

I ran into this again today: macOS kept auto-joining an old Wi-Fi network, and every attempt to “Forget” it in System Settings → Wi-Fi demanded an admin password.

Turns out for every annoying problem, there’s a strange and unintuitive solution.

The fix

Forget the Settings app. Open Passwords (Spotlight → “Passwords” → enter your user password).

Filter for Wi-Fi
Search for the network name (SSID).
Right click -> Forget Network.

That’s it. No admin privileges needed for this. Next time macOS sees that network, it won’t auto-connect. No admin required.

I wish I never had to find out… Cheers!

Mastodon Hidden Posts Stats

2025-10-26T00:00:00Z

Mastodon’s filters are powerful, but also a little invisible. Once you set them up, you rarely notice how much they actually hide from your timeline. I wanted to know.

Mastodon Hidden Posts Stats is a small web app that connects to your Mastodon account and shows how many of your recent posts are filtered, and by which keywords and it also gives you some stats. Everything runs locally in your browser; no data ever leaves your device.

It’s a simple way to understand the effect of your filters and maybe fine-tune them a little.

If you’d like to see what your own filters are doing:

Open Mastodon Hidden Posts Stats

Force Focus Bookmarklet

2025-06-14T00:00:00Z

Some websites don’t show any visual indicator when elements receive focus – making accessibility testing frustrating or impossible without DevTools gymnastics. I often run into this when testing keyboard navigation, and I wanted something quicker. Introducing “Force Focus”: force show keyboard focus for accessibility testing of websites with some oomph!

👊🔲 Force Focus is a little bookmarklet I built to highlight focused elements clearly – with an orange outline, and a red background. It’s inspired by the great work of Paul J. Adam’s focus bookmarklet, which relies on an external script and offers a nice outline. But I needed something a bit stronger – both in terms of CSP resilience and visual emphasis.

This one works on most sites unless CSP is extremely strict, highlights elements even if they clip or cut off outlines, and has a built-in toggle (just click the bookmarklet again to turn it off). It also injects the styles into any same-origin iframes.

If you want to give it a try in your accessibility toolkit, drag this link to your bookmarks bar (or just click it to test it on this site).

👊🔲 Force Focus

Daily HTML Bot

2025-06-08T00:00:00Z

Even though I work with HTML all the time, I keep coming across elements or details I’ve either forgotten or never fully noticed. Learning in small doses works well for me – so I built a little bot.

Daily HTML is a Mastodon bot that posts one random HTML element per day with a short explanation and a link to the spec. That’s it.

If you’d like to follow along and refresh your HTML knowledge one tag at a time:

Follow @DailyHTML

macOS: Spitze Klammern und Zirkumflex vertauscht bei Keychron-Tastatur (Fix)

2025-05-03T00:00:00Z

Bei externen deutschen QWERTZ-Tastaturen (z. B. Keychron K1 Max) kann es unter macOS passieren, dass die Tasten < (kleiner als), > (größer als) und ^° (Zirkumflex und Gradzeichen) vertauscht werden. Ursache: macOS erkennt den falschen Tastaturtyp (z. B. 43 statt 41). Dadurch wird die Tastaturbelegung falsch zugeordnet und bestimmte Tasten erscheinen vertauscht.

In meinem Fall wird das Keychron Keyboard K1 Max mit QWERTZ-Layout immer wieder falsch erkannt – auch wenn es im macOS-eigenen Konfigurator scheinbar korrekt eingerichtet wurde. Das Problem, dass Mac externe Tastaturen falsch erkennt, tritt offenbar häufiger bei ISO-Tastaturen auf.

Lösung

(Keine Garantie, bei mir hat’s geholfen)

Terminal öffnen

Tastatur-Config-Datei in XML konvertieren:

sudo plutil -convert xml1 /Library/Preferences/com.apple.keyboardtype.plist

Datei im Editor öffnen:

sudo nano /Library/Preferences/com.apple.keyboardtype.plist

KeyboardType-Wert von 43 zu 41 ändern (oder umgekehrt)
Neustart

Danach sollten < (kleiner als), > (größer als), ^ (Zirkumflex) und ° (Gradzeichen) wieder korrekt funktionieren.

Betroffene Tastaturen

Keychron (z. B. K2, K3, K8) mit deutschem Layout
Laut Recherche auch andere externe ISO-Tastaturen

Credits

Die Idee dahinter kommt aus einem Stackoverflow-Thread, der noch weitere Lösungsansätze enthält. Diesen Artikel gibt es hauptsächlich, damit ich die passende Lösung für mich wieder finden kann. Vielleicht hilft sie ja auch dir 😊.

Suchbegriffe für Suchmaschinen etc.

macOS < > ^ vertauscht
Keychron QWERTZ falsch
Tastaturbelegung Mac deutsch
MacBook kleiner als Taste falsch
Keychron Mac falsche Zeichen
größer als Taste vertauscht
Zirkumflex und Gradzeichen auf Mac falsch

Accessibility Link Tester

2025-04-06T00:00:00Z

When working on accessible websites, I often found myself manually testing different combinations of link attributes – aria-label, title, pseudo-elements, and images with or without alt text. That got a bit tedious. So I built a small tool to make that process easier.

The Accessibility Link Configurator / Tester lets you toggle common link features on and off and instantly preview how they affect the rendered link – perfect for screen reader testing and accessibility evaluation.

✨ Try the Link Tester ✨

2024

2024-12-26T00:00:00Z

'tis the season for “end of the year”-posts. Let’s go!

In 2024, I…

…launched this blog and released 26 posts (including this one)
…traveled to Singapore, New Zealand, Australia, Tokyo, Fuerteventura, the Baltic Sea, Hamburg, Berlin and Munich
…changed my surname
…streamed 99 hours with WWSIV
…released 7 podcast episodes with WWSIV
…started freelancing more as an Accessibility Consultant
…attended the Gulaschprogrammiernacht (GPN) in Karlsruhe
…did lots of construction work and renovations in an old farm house in the middle of the Palatinate Forest
…released the AppBar Color Wizard Chrome Plugin
…released the No Target Blank Firefox Plugin
…released the YewTube Redirect Firefox Plugin
…forked and re-released Lea Verous Contrast-Ratio calculator ad-free
…attended the Subscribe Podcaster Conference in Berlin
…attended a Jacob Collier concert in Munich
…attended a Marc-Uwe Kling reading in Frankfurt

In 2025 I plan to…

…do even more Accessibility and Frontend-Dev freelance work
…re-design the start page of this blog to fit with the new blog design
…design the front-end of a really cool remote streaming tool which is in the making right now (I am late on this one, sorry Sarah!)
…travel east
…help launching accessible versions of lots of websites. Especially because the new EU-Accessibility-Act is coming this summer
…finish the construction work in the Palatinate Forest

A change of seasons

2024-11-30T00:00:00Z

English version below

Mein Name hat sich von ~~Moritz Gießmann~~ in Moritz Glantz geändert. Ich habe nicht geheiratet. Diese Seite, dieses Blog und alles was dazu gehört werden ab sofort von moritzgiessmann.de auf moritzglantz.de umgeleitet. Ebenso alle E-Mail-Adressen die diese Domain enthalten. Alle möglichen Online-Accounts werden in Zukunft auch geändert.

Hast du dir das gut überlegt?

Ja. Viele Jahre.

Ist das nicht viel Aufwand?

Ja. Ist es. Man muss es genehmigt bekommen und eine Million Accounts müssen geändert werden. Und so ~~unwichtige~~ Dokumente wie der Personalausweis, Reisepass, Führerschein. Und diese Website. Ja, alles auf dieser Domain auf eine Neue umzuleiten war ein technischer Spaß. Aber auch eine spannende Herausforderung.

Gründe

Wie oben erwähnt habe ich nicht geheiratet, sondern meinen Nachnamen in meinen Geburtsnamen ändern lassen. Die Gründe hierfür sind persönlicher Natur. Es geht dabei allgemein gesprochen um Identität und Zugehörigkeit. Ich schließe nicht aus, dass ich in ferner Zukunft öffentlich über die Details sprechen werde, aber ich bitte von Nachfragen abzusehen.

Schadet die Namensänderung der Karriere?

Keine Ahnung. Ich bin nicht so vermessen anzunehmen, dass mein Name irgendwo unentsinkbar tief verankert ist, bzw. eine Änderung großen Schaden bedeuten würde. Änderungen des Nachnamens sind in unserer Gesellschaft nichts besonderes. Nur unter diesen Umständen nicht so häufig.

Ich hab’ da noch eine Stelle im Internet mit dem alten Namen gefunden…

Super! Schick mir eine Mail und ich versuche es in die entsprechende Datenbank einzumassieren.

Wie hast du das gemacht? Ich will auch! Was muss man beachten?

Ich habe mich beim Standesamt der Stadt Karlsruhe gemeldet. Danach musste ich Formulare ausfüllen, Dokumente besorgen (Meldebescheinigung, Führungszeugnis, Geburtenregisterauszug, etc), eine Begründung schreiben und diese persönlich erklären und nochmal nachschärfen. Das ganze kostete mich ca. 450€. Ab 2025 geht das alles mutmaßlich einfacher.

TL;DR

My name has changed from Moritz Gießmann to Moritz Glantz. I did not get married. This site, this blog and everything that goes with it will be redirected from moritzgiessmann.de to moritzglantz.de with immediate effect. Likewise all email addresses that contain this domain. Other online accounts will also be changed in the future.

Have you thought this through?

Yes. Many years.

Isn’t that a lot of effort?

Yes, it is. You have to get it approved and a million accounts have to be changed. And such ~~unimportant~~ documents as your ID card, passport, driver’s license. And this website. Yes, redirecting everything on this domain to a new one was technical fun. But also an exciting challenge.

Reasons

As mentioned above, I didn’t get married but had my surname changed to my birth name. The reasons for this are personal. Generally speaking, it’s about identity and belonging. I do not rule out that I will speak publicly about the details in the distant future, but I kindly ask you to refrain from asking.

Will the name change damage your career?

I have no idea. I’m not so presumptuous as to assume that my name is deeply rooted somewhere or that a change would be very damaging. Changing your surname is nothing special in our society. Just not so common in these circumstances.

I found another place on the Internet with the old name...

Great! Send me an e-mail and I'll try to massage it into the corresponding database.

How did you do that? I want to too! What do you have to consider?

I registered at the registry office of the city of Karlsruhe. Then I had to fill out forms, get documents (registration certificate, certificate of good conduct, birth register excerpt, etc.), write a statement of reasons and explain it in person and sharpen it up again. The whole thing cost me around €450. From 2025, all this will presumably be easier.

Find Accessible WordPress Themes

2024-10-06T00:00:00Z

I searched for accessible WordPress themes for an upcoming project, but the Google results were disappointing. Instead of relevant options, I found blog articles from snake oil accessibility overlay providers and other obscure, outdated lists.

It turns out WordPress has its own method for tagging “accessible” themes. In the official WordPress theme repository, you can specify the features you want in a theme, including the “Accessibility Ready” tag. If you're just looking for themes that are considered accessible, you can stop here and check out the “Accessibility Ready” themes tagged as “Accessibility Ready” in the theme repository. But if you're curious to learn what “Accessibility Ready” really means, keep reading.

But What Does “Accessibility Ready” Mean?

Unfortunately, the theme repository doesn't provide a direct link to the relevant guidelines. After some digging, I found there are three types of requirements:

The Requirements

As of this writing, every theme is required to include skip links, basic keyboard navigation, and underlined links.

“Accessibility Ready” themes must have further keyboard controls. Dropdowns have to be keyboard accessible, focus visible and no divs as buttons. Furthermore form inputs and buttons need accessible names and labels, there must be a good headline structure and they suggest the use of landmark roles. They also want you to avoid repetitive link texts, make sure you have good alt texts if necessary, no auto start for media and they explicitly forbid the usage of any positive tab index attributes, accesskeys and target="_blank" without a warning.

The recommended section only features that text should be zoomable and the removal of title attributes.

Conclusion

While most “Accessibility Ready” requirements seem reasonable, I'm curious about how these tests are conducted and just how strict the standards are. After running quick accessibility tests on “Accessibility Ready” themes, I found they performed better than the average website. However, I still encountered issues with keyboard focus visibility — one of the requirements for all themes.

It is good to see, that WordPress has accessibility requirements for all themes. While the standards could be stricter, it’s a solid foundation. These themes don’t eliminate the need for your own accessibility tests, but starting with one of them will likely result in fewer issues.

👩‍🦯‍➡️ Nonvisual Website Challenge

2024-08-21T00:00:00Z

I just came across this nice website. It is a little treasure hunt game which you can only solve using a screen reader.

If you’ve been waiting for a sign on when to use a screen reader for the first time, this is it: 🪧✨!

Though there may be other ways to solve it, just try it with a screen reader. You won’t be disappointed. I promise!

Non visual website challenge

Some info about screen readers:

On macOS or iPhone/iPad use the built-in VoiceOver
Talkback on Android
Windows Narrator should work (Windows pre-installed screenreader), if you can use NVDA

🌈 Introducing Appbar Color Wizard for Chrome!

2024-08-12T00:00:00Z

Tired of inconsistent browser title bar colors? The Appbar Color Wizard automatically checks and adds the <meta name='theme-color'> tag to any website, ensuring a seamless and uniform look. Perfect for enhancing your browsing experience!

The Theme Color Checker is a simple Chrome extension that ensures every website you visit has a title bar in the right color. If a site doesn't have this it set, the extension automatically adds it using the background color of the page. This helps provide a more consistent look and feel.

The Extension is free of charge and there are no ads or tracking, but I would not mind if you bought me a cup of coffee if it is useful to you ❤️.

Appbar Color Wizard Chrome Extension

Get it now! 🚀

Why u no alt text? 🫴

2024-08-04T00:00:00Z

People often overlook adding alternative texts to images, and that's problematic. This article explores why this happens, how to identify if you have this issue, and provides possible solutions.

Why alt texts

Alternative texts are key for accessibility, as they describe visual content for visually impaired users and promote inclusivity across digital platforms. Alt texts are also useful when the image can't be shown, if the download fails, and for SEO. Many readers might already know this and add alt texts to their images. However, this group is quite small.

How do I know? I did some research with a colleague and we found out, that over 80% of the images in a specific social network didn’t have useful alternative texts.

What is a good alt text?

A good alt text is short but clear, providing a clear explanation of an image’s content and its context within the page. It should avoid redundancy, stay relevant, and, if necessary, include important text within the image. If you’re unsure what to write, refer to the Alt Decision Tree. There can be cases where an empty alt text is better than one at all.

How to find out if you have a problem

You run websites and have access to their data or database? Take a look at the code and see if the alt texts look good to you. Do they exist at all? Find the ones that don’t, and see if you can identify patterns. In our research, the data was in markdown in a database. Many alt texts contained just the name of the image file, were empty, or had generic texts like 'image' or 'screenshot'. Ask developers to run a query over all content with the identified patterns. If that is not possible, you could test the sites with Axe.

Why People Might Not Add alt texts

They don’t know about the topic
It seems hard to do and it takes extra time
They often simply forget to include alt text
Thinking it’s not needed
Tech/CMS issues – Some content management systems make it hard to add alt text

Possible Solutions

Educate – Raise awareness about the importance of alt texts through training and resources
Nudge – Implement reminders or warnings for users to add alt texts before publishing posts
Make it easy – provide guidance and tools next to the image upload
Automated AI generated alt texts – if all of the above fails
One creative idea was to OCR text of images and check if the alt text has a similar result (thanks to Svenja)

What else?

Did I miss something? Is there a silver bullet I am unaware of? Other explanations?

I’d be interested in your ideas and findings while analyzing alt texts in your network. ❤️

Accessibility Cheat Sheet

2024-07-16T00:00:00Z

Hi there! I just wanted to share my Accessibility Cheat Sheet with you. Whether you're a web developer, UX designer, or simply passionate about creating inclusive digital experiences, this guide might help you building more accessible websites.

When I created the cheat sheet, I wanted to provide easy-to-follow tips and best practices for improving web accessibility, while keeping the entry barrier as low as possible. Feel free to contribute via pull requests or ask questions directly on GitHub.

And now: Click, bookmark, save & read, and let's work together to make the web a place where everyone feels welcome and included.

The Cheat Sheet is free and there are no ads or tracking, but I would not mind if you bought me a cup of coffee if was useful to you ❤️.

Accessibility Cheat Sheet

If you belong to the people who have seen it before: Yes it has been around for some time (almost 6 years), but I wanted it to have its own blog post. Because that’s what it deserves.

Fun fact: It is built using cm CSS units to mimic a real DINA4 sheet of paper. So if anybody ever asks what these units are for, feel free to share my cheat sheet 🙌.

Setting Up XAMPP on macOS Sonoma With Local User Folder

2024-07-04T00:00:00Z

I wanted to write a compelling introduction to this post, but the truth is: I want to write down the steps for myself for future reference. If you’re interested in setting up XAMPP on macOS so that you can serve files from your user folder, follow along.

Disclaimer: I am only using XAMPP for local testing, so this guide might have some bad security advice in it. If you read this and have security concerns, let’s talk!

Prerequisites

Before you begin, ensure you have the following:

Basic understanding of how the Terminal works
Familiarity with the macOS file structure
Administrator access on your Mac

Steps

1. Install XAMPP

My version is the 8.2.4. The app is called “manager-osx” for some weird reason.

2. Disable Pre-Installed Apache

macOS Sonoma has its own Apache Server which we need to disable so it does not conflict with XAMPP. Open Terminal and run the following command to stop the existing Apache processes:

sudo killall httpd

Next, start the XAMPP Apache server:

sudo /Applications/XAMPP/xamppfiles/bin/apachectl start

3. Set Up `public_html` Folder and Test File

Create a public_html folder inside your user home directory, and add an index.html file to it. This will help us test the setup later. A folder called public_html directly inside your user folder is the default foldername for Apache userDir folders. It can be changed, but it is way easier if you stick to it.

Run the following commands in Terminal:

mkdir ~/public_html/ &&
touch ~/public_html/index.html &&
echo '<h1>YAY!</h1>' >> ~/public_html/index.html

4. Open Config file from XAMPP

Open XAMPP and navigate to Manage Servers -> Configure -> Open Conf File. This will open the main configuration file for Apache.

5. Activate userDir (folders) in httpd.conf

Find the line that says # User home directories and uncomment the following line to enable user directories. It should look like this:

# User home directories
Include etc/extra/httpd-userdir.conf

6. Change User Apache Runs Under Your User

Find the section that defines the user Apache runs with:

<IfModule unixd_module>
…
User daemon
Group daemon

Change the User to your macOS username to allow Apache to access files in your user directory:

User yourUserName

⚠️ Note: This step may pose security risks. If you know of a more secure method, please use that instead.

7. Restart Apache

Finally, restart the Apache server to apply the changes:

sudo /Applications/XAMPP/xamppfiles/bin/apachectl restart

After restarting Apache, you should be able to open http://localhost/~yourUsername/ and the page should show “YAY!“.

Yay.

Get the News You Want, When You Want: An Intro to RSS Feeds

2024-06-23T00:00:00Z

How do you get your news online? You probably use news sites or social media with algorithms that promise personalized news. However, these algorithms often prioritize sensational or extreme content. What if you could follow all your interests in one place without algorithms deciding for you?
You can.

✨ Welcome to RSS feeds! ✨

What is RSS?

RSS stands for "Really Simple Syndication." It’s a tech that gathers updates from your favorite websites and shows them in a streamlined feed. Imagine having a custom newspaper that only features the topics you care about. Cool right?

How Does RSS Work?

Choose a Reader: Pick an RSS reader to collect and display your feeds. Popular options include:
- Web-based: Feedly, Inoreader
- Desktop: NetNewsWire (MacOS),
  RSSOwl (MacOS, Linux, Windows)
- Mobile: Inoreader, Feedly
  - Self hosted: FreshRSS, Nextcloud News integration
  - Commandline: Newsboat
  - Browser-Plugins: for Chrome and Firefox
Find Feeds: Look for the RSS icon (an orange square with white radio waves: ) on websites you love or try adding /feed or /rss to their URL. Rss.app can generate feeds for sites which don’t have a feed.
Subscribe: Copy the feed URL from the website and paste it into your chosen reader. Some readers, like Feedly for example, include a feed search, so you don’t have to search for the feed URLs yourself.

Why Use RSS Feeds?

No Algorithms: Unlike social media, RSS feeds show you everything in time order. There’s no mysterious algorithm deciding what you see.
No Clutter: You get pure content without ads, suggested posts, or irrelevant updates.
Efficiency: All your favorite stuff in one place means less time searching and more time enjoying.
Control: You choose what you want to follow. Nothing gets buried in endless timelines.

Getting Started is Easy

To start, choose an RSS reader that fits your lifestyle. For a simple, clean experience, try Feedly. It’s user-friendly and works on both web and mobile. After setting up, explore your favorite sites. Find their RSS feeds and add them to your reader. Before you know it, you’ll have a custom, ad-free stream of the stuff you love.

Give RSS feeds a try and take control of your online experience. Enjoy the content you want, when you want, without the noise.
Happy reading!

Simplest View Transitions multi page demo (No JavaScript)

2024-06-20T00:00:00Z

Create useful and minimal page/view transitions on your site with just two lines of CSS. Enhance the user experience by making page navigation feel more fluid and intuitive. Let’s go!

History

When I first saw Jake Archibald’s demo of native view transitions I immediately felt like this was gonna change the web for good. Not only are view transitions a way to improve user experience. By maintaining context and continuity they can help reducing cognitive load through the flow of an application.

For some time, view transitions were excuse for building everything with heavy single page application frameworks because if you technically never leave the page, transitioning elements from one place/size to another is easy. Is it?

And do you remember the page transitions Internet Explorer had back in the day ? Sorry, I was getting carried away by old people stuff…

What are view transitions?

View transitions are dynamic animations that help navigate between different screens, pages, or states in an application by visually transitioning elements in a way that preserves context and continuity. These transitions can include fading, sliding, or morphing elements to indicate changes, improving the user experience by making interactions more fluid and visually coherent.

In a browser context, this means that there is a possibility to control the appearance of an element after clicking on a link until the new page is loaded. You could also animate the whole page.

Single page then multi page

When the view transitions API was first announced, the first implementation was only capable of transitioning elements on single page applications. Not so useful if you ask me, since you could to that with SPAs already. But the big promise was that this API was coming for multi page applications as well. To be honest, when I heard that Jake was leaving Google, I thought MPA view transitions would never see the light of day. But with the release of Chrome 125, Cross Document View transitions are available in Chrome, Edge etc. they are available for testing. Though view transitions have not been selected for Interop 2024 and so won’t appear in all major browsers soon, they’re a perfect Progressive Enhancement opportunity you don’t want to miss </sellers-voice>.

Let’s build something!

For the simplest [multi page|cross document] view transition without any JavaScript you first need at least two HTML pages with links to each other. To opt-in to view transitions, just put this snippet in your CSS:

@view-transition {
    navigation: auto;
}

We could be done here. Now the browser fades from one page to the next. If you want to transition an element after clicking a link, you simply give it the same ‌view-transition-name in your CSS. That is enough to make the browser know it should animate the element between its size and position when navigating around.

In my case I wanted a <span class=”border”>, that mimics a border under a link, to move to the active link after clicking. This <span> element is inside the currently active <a> element on every page.

.border {
    view-transition-name: navborder;
}

That is enough for the browser to know what to do. Pretty neat, right?

Demo

To see this in action I built a small demo with three pages. Have fun!

Simple view transition demo

Simple vs. complex

This is just a simple demo of what can be done with the view transitions API. If you read the MDN article you will see there are endless possibilities to control every last bit view transitions. You cannot only define the animation transitions, durations and affected elements. There are also JavaScript methods to do all that programmatically.

Disable the “smart” emoji suggestions in MacOS Sonoma

2024-05-15T00:00:00Z

Are you also annoyed by the “smart” emoji suggestions when opening the emoji picker in MacOS Sonoma? Here’s how to fix that.

What happens?

Say you’re writing a text or a text message and you open the MacOS emoji picker by pressing CTRL + CMD + Space to add an emoji. If the last word you wrote before opening the picker was something like “sleep”, “peach” or ~~“penis”~~ “eggplant”, chances are that instead of showing the emoji picker, MacOS shows you emoji suggestions first. As if it wanted to nudge you to write Egyptian hieroglyphs.

Solution

Since the suggestions aren’t really clever or helpful, you want to deactivate these suggestions. To do so, you need to open the Terminal app and copy 🍝 the following:

sudo defaults write /Library/Preferences/FeatureFlags/Domain/UIKit.plist emoji_enhancements -dict-add Enabled -bool NO

After that, just reboot, and the suggestions are gone for good.

(I found this solution after endless googling on Reddit, so you don’t have to)

How I escaped the LinkedIn hell

2024-04-30T00:00:00Z

I thought about writing a post about the absurdity of LinkedIn posts, but diving deep into this special hell would give it way more attention than it deserves. But I could share my approach to leaving it behind without abandoning all the useful connections I have there.

⚠️ Update 03.05.2024: Unfortunately LinkedIn apparently has an algorithm to avoid empty timelines, by filling it with trash once it has no content from people you follow. This post therefore is useless. Even more than ChatGPT anticipated. Bummer.

“Just don’t open LinkedIn” I hear you say. Yeah. Sounds easy but it is not. At least for me. I became addicted to mindlessly scrolling through timelines, no matter its content. And LinkedIn, and especially German LinkedIn is a very special place.

Instead of diving deep, here’s a list of things that helped me crawling out.

Unfollow everybody until LinkedIn only shows your own posts and sometimes the “I want to desperately show you something, but all I have is this animated flashing fake post”.
Close LinkedIn and enjoy the bliss of silence.

That’s it.

PS: The ChatGPT based IA Writer writing assistant criticizes this article with harsh words. But this is my blog is my blog is my blog.

PPS: This is it’s “Critical review”:

While the writer expresses frustration with LinkedIn and their addiction to mindless scrolling, the piece lacks depth and insight. It begins with the promise of dissecting the absurdity of LinkedIn but quickly retreats from this exploration, leaving the reader with a sense of unfulfilled curiosity. The proposed solution, unfollowing everyone and closing the app, is simplistic and lacks nuance. Additionally, the tone comes across as dismissive, undermining the potential for meaningful discussion about the impact of social media on our lives. Overall, the piece feels like a missed opportunity to delve into a relevant and timely topic with greater depth and critical analysis.

…ChatGPT is using the word “delve” exceptionally often. Curious 🤔

PPPS: Adding this “review” makes the article even more confusing because now nobody knows what it is really about. LinkedIn or AI assistants? I guess that’s my part of keeping the Internet weird. ✨

A journey of a lifetime and its digital tools

2024-02-10T00:00:00Z

During the next week I’m gonna go on the biggest journey I’ve ever been on. I’m gonna board an airplane for the first time in 5 years. I’m gonna see the other side of the world (Singapore, New Zealand, Australia and Japan) and I’m excited beyond measure!

Why this post?

I am writing this post because I wanted to let you know that there will almost certainly be no new content here or anywhere else until my return. With maybe one exception. Every now and then I post pictures on my Instagram account. I’m gonna test if I can automatically crosspost to my Mastodon account.

Apps & Tools

As a digital person, I like travelling with apps that make travelling more enjoyable.

The first thing I did was download all the maps I’m gonna need for offline use on my phone. This way I can always find my way back, even if there is no cell connection. This works with Google Maps ~~as well as Apple Maps~~. Apple Maps is a completely useless when it comes to offline maps. You can download them, but as of iOS 17.3.1 you cannot, I repeat, you cannot search the downloaded maps while being offline, which makes the whole feature pointless for travelling.
I heard lot’s of nice things about Flighty, an app which helps you to track flights and get delay information etc. right when you need it.
When travelling to New Zealand and Australia, CamperMate appears to be a nice option to find camp sites, nice places to visit and various other places of interest like supermarkets, charging stations or even WiFi access points.
Speaking of WiFi: On my last trip I discovered that there are lots of free WiFi finder apps out there, which comes in handy if you have only very expensive or limited data on your phone. I tested a lot of them and I found the best were WiFi Map and InstaBridge. They both have different data sets and your mileage may vary depending on which country you travel. Instabridge somehow tries to make you buy a SIM card instead of showing you the WiFi map. It is hidden behind Menu -> WiFi -> Map.
If you travel by car or camper van, you might want to find cheap gas. Gas price apps are popular in Germany, but not so in every other country. In Germany Mehr tanken works well. 1-2-3 Tanken works also in France. Benzinpreis Blitz also works in Spain, Portugal and Italy, but the only one I found to be working in New Zealand is Gaspy. But beware. Sometimes these apps show you gas stations in the middle of nowhere. Sometimes they’re there, sometimes not.

Did I miss any good travel app you’d recommend using? Let me know!

Entertainment for long flights

My podcast app Pocket Casts is full of new episodes of podcasts I like. For example 4 episodes of the “infinite” German podcast called “Alles gesagt?” where two journalists of the German newspaper “Die Zeit” interview their guests as long until the guest ends the podcast by saying a word they agreed on at the start of every episode. These episodes can be as long as over 6 hours, but they’re insightful and fun.
One of my favourite mobile games of all time is Blackbox. I can’t say too much about how it’s played without giving too much away, but it is not played like normal games.
Other games that got recommended to me are Monument Valley, Kami and I love hue.

Let’s go!

Thanks for reading this blog and following me on the socials. We’ll see each other in Mai. Until then! ❤️

My thoughts on a Global Design System

2024-02-06T00:00:00Z

When Brad Frost released his article “a global design system” a few weeks ago, it reignited a thought I’ve been having for a long time. Building design systems has somehow become similar to building websites before the era of design systems: Reinventing the wheel over and over again. But does it have to be that way, or are we ready for the next step of web design evolution?

What finally drove me to write this article was Chris Coyier’s perspective on a Global Design System who asked himself lot’s of good questions about how a Global Design System could/would work at scale.

For example:

If there was a perfect component that solved the needs of a ton of people in certain situations… wouldn’t we already be using it because the incentive is there?
— Perfect components

Perfect components have to become part of the platform. The best examples are <details> + <summary> and <dialog>. Why stop there? We could have <combobox> component, a <card> and a <floatingTextThatChangesWhenScrollingAfterClickingAButton> component if they were useful and their adoption was substantial.

It seems like the intention here is explicitly not to be HTML, but a layer on top of HTML.
— No HTML

I see no reason for it to be so: Platform, platform & platform!

Unfortunately the browser default styles for most of the native HTML elements look like they are from another century. And that’s because most of them are. If they’d have a good and customizable design with accessibility in mind. Why t.f. not?

Unstyled was called out as a requirement of this, because it needs to work for any organization. Coming pre-styled will clash with too many brands and put it in conflict with the goal of being as close to universally useful as possible. But many people pick a design system because of the design it offers, and would be un-interested in an unstyled system. Would themes account for this entirely? Unstyled is another door for accessibility problems, since so many are caused by CSS.
— Styled or unstyled

If you ask me, it should not be unstyled, but offer a variety of variables that make customization nice and easy. Like Bootstrap does it.

Let’s say you have a set of components that are perfect, like a very flexible grid, a good looking accordion and a dialog.

How much flexibility would you gain by making decisions on elements like typeface, spacing, rounded corners, and colors? I think changing a few variables would make lots and lots of different designs possible with only little compromise on the design side of things. It would provide sufficient individuality for most modern sites. Let the artists still be the artists.

A global design system would provide everyone with the tools to create good, accessible websites and code. Amen.

Leitfaden Barrierefreiheit für Redakteur*innen

2024-02-01T00:00:00Z

Dieser Leitfaden wurde erstellt, um es Redakteur*innen leichter zu machen barrierefreie Inhalte zu erstellen. Er enthält die wichtigsten Regeln in möglichst kurzer Form. Er bildet nicht alle potentiell gültigen Regeln ab. Das komplette zugrundeliegende Regelwerk sind die Web Content Accessibility Guidelines (WCAG) (Englisch).

Allgemein

Generell: Wenn es keinen wichtigen Grund gibt, sollte nicht von den vorgegebenen Formatvorlagen eines Content Management Systems (CMS) oder Redaktionssystems abgewichen werden. Konkret: Schriften, Farben, Schriftsatz (z.B. linksbündig) werden nicht verändert, da sie bereits optimiert wurden.

Klare und einfache Sprache

Verwenden Sie einfache Sprache und Formatierung, die dem Kontext angemessen ist.
Schreiben Sie in kurzen, klaren Sätzen und Absätzen.
Vermeiden Sie die Verwendung unnötig komplexer Wörter und Ausdrücke.
Erweitern Sie Akronyme bei der ersten Verwendung. Zum Beispiel: Web Content Accessibility Guidelines (WCAG).
Erwägen Sie die Bereitstellung eines Glossars für Begriffe, die den Leser*innen möglicherweise nicht bekannt sind.
Erwägen Sie die Verwendung von Bildern, Illustrationen, Video, Audio und Symbolen, um die Bedeutung zu verdeutlichen.

Weitere Informationen in der Kleinen Schreibschule von BIK für Alle

Textstrukturierung

Strukturieren Sie Texte in sinnvolle Abschnitte. Verwenden Sie Überschriften, Listen und Absätze um Texte zu strukturieren.

Überschriftenhierarchie

Verwenden Sie Überschriften in aufsteigender Hierarchie. Einzelne Überschriftenebenen dürfen nicht übersprungen werden.

Beispiel: Nach einer „Überschrift Ebene 2“ kommt entweder eine weitere mit der Ebene 2, oder eine der Ebene 3.

Textgestaltung

Vermeiden Sie Blocksatz.

Fremdsprachen kennzeichnen

Wenn ein Text Worte oder Sätze in einer anderen Sprache enthält, müssen dieses entsprechend gekennzeichnet werden, damit Bildschirmvorleseprogramme diese in der passenden Sprache vorlesen können. Das geht in HTML mit dem lang-Attribut, oder in einem CMS mit einer entsprechenden Editor-Einstellung.

Alternativtexte für Fotos, Schaubilder & Grafiken

Grafiken und Bilder brauchen aussagekräftige Alternativtexte um für blinde und seheingeschränkte Menschen verständlich zu sein und wahrgenommen werden zu können.

Unterschiedliche Grafiken erfordern unterschiedliche Alternativ-Texte. Dabei sollte man sich die folgende Frage stellen: „Welchen Zweck erfüllt die Grafik?“

Die häufigsten Fälle:

Die Grafik ist nicht verlinkt und vermittelt Bildinformation (z.B. ein Foto): alt="Beschreibung des Inhalts des Bildes"
Die Grafik ist verlinkt und verweist z.B. auf einen Artikel: alt="Artikelüberschrift"

Weitere Fälle können im Alt-Decision-Tree(Englisch) nachgeschlagen werden. Weitere Infos zu Alternativtexten auf Deutsch

Eindeutige Seitentitel

Jede Webseite benötigt einen eigenen Titel, der den Inhalt der jeweiligen Seite eindeutig beschreibt und von anderen Seiten unterscheidet. Meist eignet sich dafür die Hauptüberschrift der Seite.

Die wichtigsten Informationen kommen an den Anfang, z.B. den Namen der Seite vor dem Namen der Organisation. Bei Seiten, die Teil eines mehrstufigen Prozesses sind, geben Sie den aktuellen Schritt im Seitentitel an.

Beispiel: Bei einem Artikel names „Das war 2022“ im Blog der Agentur „Windrich & Sörgel“ hieße der Titel „Das war 2022 - Windrich & Sörgel“.

Sprechende Linktexte

Linktexte müssen den Inhalt/Zweck des Linkziels beschreiben.

Zu vermeiden: „hier klicken“ oder „mehr lesen“.

Besser: Der Titel oder die erste Überschrift der Zielseite. Bei Downloads: Dateityp und -größe angeben, z.B. „Quartalszahlen 2023 (PDF, 20MB)".

Tabellen

Sehbehinderte Menschen, die Bildschirmvorleseprogramme verwenden, erschließen sich Tabellen, indem sie mit der Tastatur durch die Spalten und Zeilen navigieren. Tabellen sollten daher so einfach wie möglich gestaltet werden.

Lieber zwei einfache Tabellen anstelle einer komplexen
Keine leeren Zellen für zusätzlichen Abstand einzufügen
Die Zeilen- und Spaltenüberschriften deutlich kennzeichnen
Tabellen dürfen nur für tabellarische Inhalte (z.B. ein Stundenplan) verwendet werden und auf keinen Fall um damit Layouts zu bauen

Video & Audio

Video & Audioinhalte benötigen Untertitel, Transkripte, Audiodeskriptionen und Gebärdensprachenversionen um barrierefrei zu sein.

Leitfaden zu audiovisuellen Medien in den WCAG (Englisch)

Farben

Eigentlich sollten Sie als Redakteur*in nicht mit Farben in Berührung kommen, weil die bereitgestellten Formatvorlagen alle Fälle abdecken und bereits optimiert sind. Diese Regeln gelten für den Fall, dass sie wider Erwarten etwas Neues erfinden müssen.

Kontraste

Wenn Sie Grafiken einfügen, oder Texte einfärben, stellen Sie sicher, dass ausreichende Kontraste vorhanden sind. Wenn Vordergrund- und Hintergrundfarben in ihrer Helligkeit zu ähnlich sind, könnte der Kontrast möglicherweise zu gering sein. Hierbei handelt es sich nicht um Fotografien, sondern um Symbole, Schaubilder oder Diagramme. Nutzen Sie einen Kontrast-Checker.

Farbe nicht als alleiniges Unterscheidungsmerkmal

Achten Sie darauf, Informationen nicht ausschließlich durch Farben zu vermitteln.

Beispiel: Beim Anzeigen einer Fehlermeldung oder Warnung sollte diese nicht nur durch Farbe (Gelb/Rot) zu erkennen sein, sondern auch mit einem Icon gekennzeichnet werden.

Beispiel 2: Bei einem Schaubild mit verschiedenen Kurven sollte die Unterscheidung zwischen den Kurven nicht nur durch Farben erfolgen, sondern auch durch unterschiedliche Darstellungsformen wie beispielsweise gestrichelte oder gepunktete Linien.

Tools

Um zu überprüfen, ob Ihre Inhalte barrierefrei sind, können Sie verschiedene Tools verwenden. Hier sind zwei Beispiele:

Sa11y
Bookmarklet, aber auch Plugin für diverse CMS (Wordpress, Joomla), das Hinweise auf Barrieren gibt.
Editoria11y
Kann in CMS integriert werden und gibt Feedback zu möglichen Barrieren.

Quellen

Get rid of annoying .DS_Store files in all your Git repositories

2024-01-30T00:00:00Z

Don’t you love it when every Git project you start on your Mac needs a .gitignore file before anything else, because the .DS_Store files are spawning and haunting your machine like a wandering ghost from the past? 👻

The solution: Global `.gitignore`

You can configure Git to globally ignore certain files across all repositories on your system. To do this, you can set up a global .gitignore file. This file will contain patterns for files or directories that you want Git to ignore across all your projects.

Here's how you can create a global .gitignore file and ignore .DS_Store files:

Open your terminal and create a global .gitignore file.

touch ~/.gitignore_global

Open the global .gitignore file in a text editor of your choice. You can use a command-line text editor like nano or vim, or use a graphical text editor such as TextEdit or the wonderful Plain Text Editor.

nano ~/.gitignore_global

Add the following line to the file to ignore .DS_Store files:

.DS_Store

Save and exit the editor. Now, configure Git to use the global .gitignore file:

git config --global core.excludesfile ~/.gitignore_global

That’s it!

From now on, Git will ignore any file or directory specified in your global .gitignore file across all your repositories. Make sure that you don't have local .gitignore files in your repositories that conflict with the global one.

YouTube to YewTub.be Redirect plugin

2024-01-27T00:00:00Z

“YewTube Redirect”, a browser add-on that simplifies the process of redirecting YouTube links to the privacy-focused and ad-free YewTube platform. Say goodbye to ads and tracking while enjoying your favorite content hassle-free!

Another day, another [plugin|add-on|extension]!

Yesterday, I learned about YewTu.be, an alternative, privacy-focused, and ad-free front end for YouTube. It basically works like this: You take a normal YouTube link and replace the www.youtube.com-part of the URL by yewtu.be and land on a site that shows the video or channel, that is ad-free and does not track you. You also can subscribe to channels via RSS feed!

But is that manual link replacement something a computer can do better than me? Thanks for asking! That’s why I built “YewTube Redirect”, a browser add-on that takes care of the hard work for you.

It is available in the Firefox Add-On store as of now and reading for testing!

YewTube Redirect Firefox Add-On

If you want to view and contribute to the code, you can find it on GitHub.

Update 29.02.2024: I was made aware that the Chrome plugin may not work. I will take a look at it as soon as I can. ~~Theres now also a Chrome version of this plugin. It is not in the store, because Manifest v3 and stuff.~~

And consider donating to YewTube. They have server costs that your contribution can help cover.

Über die Beständigkeit von Denk-Systemen

2024-01-22T00:00:00Z

Wie beständig ist unser Glaube an geordnete Strukturen? Ein Blick auf das Streben nach Ordnung und die Herausforderungen, wenn Realität nicht in vorgefertigte Kästchen passt und warum die zärtliche Umarmung des Chaos vielleicht einfach ok ist.

Mein Leben hat eine sich wiederholende Konstante: Der Glaube an allgemeingültige, wohlgeformte Systeme und deren Ordnung und Beständigkeit. Seien es Computer, Naturwissenschaften, oder Musik. Immer suche ich nach Regeln, gehe von Gesetzmäßigkeiten aus wo oftmals gar keine sind. Zu dieser Konstante gehört auch, dass dieser Glaube für die meisten Systeme irgendwann ins Wanken gerät und oftmals komplett zerstört wird.

Etwas in mir wünscht sich, dass alle Dinge geordnet, wohlgeformt und standardisiert sind um ein möglichst vorhersehbares Bild der Welt zu generieren. Der Geist sehnt sich nach Ruhe und Klarheit.

Dabei ist nur eins beständig: Der Wandel.

Je genauer man hin sieht, desto klarer wird, dass Systeme nur Kästchen sind, in die ich versuche die Realität einzusortieren und sie dadurch vermeintlich besser zu verstehen. Dabei passt sie nur selten hinein. Die Kästchen geben zudem keinen Aufschluss über das Ding, das man versucht hinein zu pressen.

Wahl-Computer kommen durch kosmische Strahlung aus dem Tritt, bei Musik findet sich Schönheit in der Imperfektion und Naturwissenschaften finden Dinge, die es laut ihren eigenen Regeln und Systemen nicht geben dürfte.

Nur weil um ein Produkt eine schöne Verpackung, der Sensor in einem hübschen Platikkästchen versteckt ist oder wir viel Geld für etwas bezahlen, werden die Ergebnisse nicht korrekter, besser vorhersehbarer. Der Sensor im Kästchen kann trotzdem Quatsch messen, oder ein Bit flippen, Börsen-Kenner*innen irren sich und ein leicht versetzter Schlag eines Beats lässt den Song erst künstlerisch schön klingen.

Warum schreibe ich das hier? Um mich selbst dran zu erinnern, dass am Ende alles ein wunderbares Chaos ist, dem man zwar in Teilen Ordnung entlocken kann, das aber trotzdem immer die Überhand behalten wird. Und das ist ok.

Firefox Add-On to remove target="_blank"

2024-01-21T00:00:00Z

I made a firefox plugin, that ensures that when you click on links, they open in the same browser tab instead of creating new tabs, therefore removing target="_blank" from websites.

There are no Chrome or Safari versions of this yet. Let me know if there is the need.

This is a first draft. It removes target="_blank" on page load as well as dynamic rendered content. Let me know what you think:

No-Target-Blank Plugin

P.S.: I find the terms in Browser Plugin World confusing. There are Add-Ons, Extensions, Plugins and so forth. At least Chrome and Firefox Extensions/Add-Ons share most of the code standards.

edit 21.01.2024 – 12:06

P.P:S: I made this after some discussions with Matthias Pfefferle about whether target="_blank" is a good idea or not, so all the plagued people can finally find relief.

Checkbox Tetris – An AI experiment

2024-01-18T00:00:00Z

Last night, I thought I might challenge ChatGPT to create something complex. A game. A game everybody knows. Tetris, but as a website using checkboxes to form the grid and the blocks of the game.

I am not sure if checkbox Tetris is a new idea. I think I might have seen something like it before, but I am not sure.

Stranger in a strange land

To be honest, there were some strange moments while prompting. For example the robot thought it might be a good idea to hide the checkboxes with CSS. When I asked the robot how I am supposed to play a game if the playing blocks are invisible it was like shrugging and saying: “Alright, human, if you really need to see something before you play, I’m gonna give it to you,… you primate.” That’s not what it actually said, but it felt like it.

The result

A checkbox-based Tetris game with a score counter, arrow based controls and even a high score board that saves scores to the local storage. Does it still have ~~bugs~~ happy accidents? Yes. No it is not perfect. But could you have built it in three hours?

The only thing I changed manually were some styles to make the grid look better and I added some text on how to play it.

If you want, you can read the full conversation with ChatGPT.

Demo!

✅ Play Checkbox Tetris!

Transformative power

I know. You heard it a million times already. “AI is gonna change the world as we know it, yadda yadda yadda”, but whether you like it or not: A technology which is able to write code that would’ve taken somebody who did not write the same program before, days, if not weeks, will transform the world. If you’re not using this tool, somebody else will. And they will be faster than you. Maybe not better, but faster.

Power to the people

I don’t want to live in a world where monopolists have all the power, all the resources, all the knowledge. And to be honest having only a few players in this game right now, where none of them appears to be on the side of the people and 💵 appear to be the only motivation, we need to have working alternatives, which are open source and open infrastructure. And this is much worse than other industries. We’re talking about only a hand full of players here. Since I don’t believe the AI companies will change their course, AI has to be regulated by the governments of the world. And they have to regulate it real hard! ⚒️

I wrote this post while waiting for the prompts to resolve. The longer the code became, the slower the answers came in, so I had some time to think about the unbelievable craziness that this technology brings with it.

Contrast-Ratio.org – WCAG color contrast checker ✅

2024-01-16T00:00:00Z

I really really loved Lea Verou’s color contrast checker! I linked it in lots of my talks, I listed it as useful resource in lots of places and recommended it every time someone asked me about useful accessibility tools.

It is great if you want to check the contrast of background and text color against the WCAG color contrast requirements. Just put in two colors and see the result. You can even create a link of color combinations since the two colors get added to the url in form of a fragment identifier. So thank you Lea for this stellar work of yours. It stood the test of time! ✨

But things have changed. The original page was sold, and the new owners made a SEO gateway out of the site. Don’t get me wrong, the checker is still intact, but the site now does not look like it is about the tool anymore.

Fortunately the original tool was published under the MIT license and the code is still on GitHub. So I made a fork, reverted it to the original style and published it under…
Contrast-Ratio.Org

This site will never get sold nor will there be ads on it. I just put a little Ko-Fi support button there if you want to support me covering the domain and hosting expenses.

Fun thing: This is the first time in my life I purchased a domain name and put something productive on it at the same day!

All thanks go to Lea and her great work! And definitely check out her other work!

That’s it for now. Happy color testing!

Using AI for Accessibility: Breaking Down Barriers in Content Creation?!

2024-01-13T00:00:00Z

Is the using AI a good idea when it comes to building accessible experiences on the web? Can tools like ChatGPT or Vision help us to build better websites and apps, or can they be considered harmful?

What about this image? Would you consider this AI-generated alt text good? Suitable? Appropriate? Or maybe inappropriate, bad or even harmful? This alternative text was created in seconds using the Ice Cubes Mastodon client which itself uses OpenAI’s “Vision”.

AI considered harmful

I’ve seen lots of people being critical of the development of AI, even rejecting it outright. And don’t get me wrong; there are lots of examples where the results of AI lead to dubious and even horrible, biased, racist, misogynist and sexist results, not to speak of the environmental costs of training and using AI powered systems.

Maybe you remember the hype about v0.dev from Vercel?! Praised as a tool that could magically create “copy-paste-friendly React code” by giving it a text prompt like “webapp for create dynamic forms CRM”, it took minutes to see that it could not produce accessible results at all.

And how could it? Large language models like ChatGPT are just good at predicting the next word or phrase based on the input it “learned” from. When it comes to HTML, they learned from the reality out there. We have known since long before the WebAim Million that the web is not in a good state as far as accessibility is concerned.

But despite all the drawbacks, are there areas in which AI systems excel?

Lowering the barrier

What I hear all the time, when talking to people about providing accessible content, is:

“We don’t have time/resources for this”

You could argue that accessibility is important enough to make time and provide resources. To learn how to write good alternative texts and to take the time to write an easy language version of all texts. And I would agree. Accessibility should play a much more important role in all our lives. It should be the norm, nothing special. But to most people it simply is not nor will it ever be.

What if we set the barrier for providing accessible content so ridiculously low, that everybody not providing alt texts felt a little ashamed of themselves, because they didn’t even find the time to press one simple button?

Alt texts

There’s nothing like a handcrafted, well-written alt text. When I post a photo, I know exactly its context, why I post it, and its main motif. I can write the perfect alt text if I have the time, a good keyboard and all the knowledge. But as soon as I leave the door the display of my smartphone raises a small, but significant barrier for me. I don’t like typing long texts on a software keyboard nor, am I good at it. If I have the opportunity to let a robot do the hard work and I am just the overseer who corrects the mistakes, I am all in.

Yes, there are cases where no alt text is better than a bad one, or better than one at all. But isn’t an automatic alt text better than nothing most of the time?

I’d love to hear from people who use screen readers on a daily basis. What do you think about generated alt texts?

Easy language

Easy language is one of the pain points of many websites. For example, every government website in Germany has to be accessible. Most of them lack easy language. Can easy language provided by an AI be any good?

There are models which are specifically trained to deliver easy language, but for a short test I took ChatGPT and gave it this prompt:

Write two sentences about how ai creates easy language from text

Its first answer:

AI demonstrates proficiency in transforming complex language into easily understandable text, catering to a diverse audience. By simplifying vocabulary and sentence structures, AI facilitates a more inclusive reading experience for individuals with varying levels of linguistic proficiency.

Well, that sounds pretty intimidating, doesn’t it? So I asked it to…

make this text easier

ChatGPT:

AI is really good at making hard words and sentences easy to understand, helping lots of different people read and understand things better. It takes complicated language and turns it into simpler words and sentences, making it easier for everyone to get the information they need.

Me:

even easier

ChatGPT:

AI is great at making difficult words and sentences simple. It helps many people read and understand things better by turning hard language into easier words and sentences.

I did this in a matter of minutes. What do you think? Did it turn out any good? Would it be good enough to put it on a website? Would it be better than no easy language at all?

Are there any other good examples where AI could help us more accessible websites? Tell me!.

The human touch

Despite AI's capabilities, human supervision is crucial. AI models may occasionally misinterpret nuances, making human oversight essential for refining content, avoiding biases, ensuring accuracy, relevance, and cultural sensitivity.

AI will not go away soon. Let’s be open to the future, while keeping a critical eye.

Samsung Smart TV Backlight turns off on black screen

2024-01-10T00:00:00Z

Are you experiencing issues with the backlight of your Samsung Smart TV turning off when the screen goes black, such as during the credits of a movie? If this annoyance resonates with you, as it does with me, I might have a solution.

Gimme the solution already!

Problem

I have an almost ten year old Samsung Smart TV (JU6550). Despite its age, it still works well, and unlike many Samsung TVs owned by people I know, it has not developed any strange issues yet (aside from the quirks it had from the beginning). I am not sure this issue was always there or if it started happening some time after buying it. Some day I started noticing, that the backlight turns off when there’s a black image for about half a second and turns back on when there’s something on the screen that isn’t pure black. For example black cut scenes, or the credits of a movie.

Solution

After fiddling around with various settings, I found out that if I set the brightness to 48 and above, the backlight won’t turn off during black scenes. This number may vary for different TV models. It is not an optimal solution since I find the brightness a little too bright on 48, but hey, it’s better than nothing.

Shame on you, Samsung

I mean. Why? How? And WHY? 🫴 That’s almost as weird as putting the menu “General” as the third last entry of a list of over 10 items (sic!).

That’s all. I hope it helped.

Cyberpunkish Firefox Theme

2024-01-05T00:00:00Z

When I started using VSCode as my main editor back in 2018 I was searching for a theme to fit my needs: high contrast, dark and not boring. The I stumbled upon the VSCode Cyberpunk theme and started using it as a joke. Half a year later I was still using it as my main theme and the fun became serious (or as we say in German: „Aus Spaß wurde Ernst.“).

After lot’s of head shaking from colleagues I knew this was not a joke anymore and I decided I needed even more these colors in my world. As a heavy Firefox user then, I decided to make a Firefox theme from the VSCode Cyberpunk theme. Check it out!

Cyberpunk Firefox Theme

Deploy 11ty site using rsync

2024-01-04T00:00:00Z

I was in need of an automatic CLI-deployment for my 11ty blog right here and I solved it using rsync.

Rsync?

Rsync (Remote Sync) is a command-line utility for file synchronization and data transfer between local and remote systems. rsync is often used for backups, so it can for example just upload the files that have changed or delete files that are no longer existent.

Prerequisites

Your system supports rsync
The server is SSH capable
Your server in supports rsync (Uberspace in my case)

Steps

Make sure rsync is working on your system. It should be pre-installed on MacOS and Linux. On Windows you could use WSL or Cygwin with rsync
```
rsync --version
```
This should output a version.

Add a deploy step to your npm scripts

"scripts": {
    "deploy": "rsync -avz _site/ user@your-server:/path/to/destination"
  }

Here’s an explanation of the -avz parameters

Replace user@your-server:/path/to/destination with your server details and destination path
Run the deploy script…
```
npm run deploy
```
…and watch the magic happen! ✨

Extra convenience functions

Since we’re all lazy, here are some convenience functions to make your life even easier.

Build before uploading

Just add a build step before the rsync part.

"deploy": "npm run build &&  rsync -avz _site/ user@your-server:/path/to/"

Clean up local files before building

⚠️ DANGER: Only do this if you’re sure there are only 11ty generated files inside your _sites folder!

Deleting the generated folder makes sure you don’t carry any old versions of CSS files or other stuff.

"deploy": "rm -rf _site && npm run build && rsync -avz _site/ user@your-server:/path/to/"

Delete old files on the server when deploying

⚠️ DANGER: Only do this if you’re sure there are only 11ty generated files on your remote location!

The --delete parameter makes sure old files are deleted.

"deploy": "rsync -avz --delete _site/ user@your-server:/path/to/"

SSH key

If you don’t want to type your password on every deployment, you might want to set ssh keys for your connection. Here’s how that works at Uberspace, but it might work differently on other hosts.

Finished version with everything

"deploy": "rm -rf _site && npm run build && rsync -avz --delete _site/ user@your-server:/path/to/"

👋 Welcome to my digital castle!

2024-01-03T00:00:00Z

Almost 10 years after I wrote the last blog post on my old blog, I decided to start something new, simple and text-based. What you see right now is the first version of my new blog. It is still a little rough around the edges, but it is here, it is online and it is 🦄!

🙋 Introduction

Since this is the first post on a new blog, you might want to know a thing about me:

My name is Moritz Glantz and I live, think, develop and write in Karlsruhe, Germany. I am an Specialist for Web Accessibility and UX-Engineer with over 20 years of experience by day and a tech-podcaster and live-streamer by night.

I help organizations build accessible websites by offering accessibility talks, workshops & trainings, accessibility reviews and developing strategies for developers and management.

If that sounds like you could use my help, let’s talk! 💬

Why

In short: because of Indie-Web, the year of the personal website and some people have been nudging me to do so. If that explanation is too sparse, let me know and I’ll write a post about it 😉.

Castle rules and topics

This blog will contain posts about my work, my thoughts and the world. Against all recommendations it’ll cover of all these topics at once plus it will be bilingual. Why bilingual, you might ask? My brain works like this. The language of digital work is English. My native language is German. I mostly watch movies in English but my web-dev podcast is in German and swearing works – verdammt nochmal – best in your mother tongue 😄.

Tech

All this was achieved using great software from other people like Pico.css and 11ty. I’ll probably write a post about the process at some time.

Challenges

I find writing long texts intimidating. Maybe that’s why I preferred writing threads on micro blogging platforms in the last years. And also maybe some of these old threads will appear here as posts, or I will post a thread first that then becomes a blog post. As you can see, I still have to find the right mode for myself. But to start something like this is exciting and we’ll see where it’ll go.

Thank you!

Thanks for reading my first post! Let me know what you think. Send me an email if you need help with accessibility, connect with me on LinkedIn if you like and consider following me on Mastodon. Let’s see what the future holds. Until then… ❤️

Moritz Glantz — Blog

HTML Tags Memory Quiz Game

Roborock Saros 10R voice commands

# Commands

2025

# In 2025, I…

# Did I achieve my goals for 2025?

# In 2026 I plan to…

Digital Independence Day

# The Idea

# What Could You Do On That Day?

# Help!

# Join In

Triangles, please!

# The Mighty Triangle

# Why this exists

WhatsApp iOS Backup Viewer

# The Disaster

# The Dig

# Features

# Technical Details for Nerds

Metronome Web App

# Features

# Technical Details for Nerds

macOS Remove Wi-Fi Networks Without Admin Privileges

# The fix

Mastodon Hidden Posts Stats

Force Focus Bookmarklet

Daily HTML Bot

macOS: Spitze Klammern und Zirkumflex vertauscht bei Keychron-Tastatur (Fix)

# Lösung

# Betroffene Tastaturen

# Credits

# Suchbegriffe für Suchmaschinen etc.

Accessibility Link Tester

2024

# In 2024, I…

# In 2025 I plan to…

A change of seasons

# Hast du dir das gut überlegt?

# Ist das nicht viel Aufwand?

# Gründe

# Schadet die Namensänderung der Karriere?

# Ich hab’ da noch eine Stelle im Internet mit dem alten Namen gefunden…

# Wie hast du das gemacht? Ich will auch! Was muss man beachten?

# TL;DR

# Have you thought this through?

# Isn’t that a lot of effort?

# Reasons

# Will the name change damage your career?

# I found another place on the Internet with the old name...

# How did you do that? I want to too! What do you have to consider?

Find Accessible WordPress Themes

# But What Does “Accessibility Ready” Mean?

# The Requirements

# Conclusion

👩‍🦯‍➡️ Nonvisual Website Challenge

# Some info about screen readers:

🌈 Introducing Appbar Color Wizard for Chrome!

Why u no alt text? 🫴

# Why alt texts

# What is a good alt text?

# How to find out if you have a problem

# Why People Might Not Add alt texts

# Possible Solutions

# What else?

Accessibility Cheat Sheet

Setting Up XAMPP on macOS Sonoma With Local User Folder

# Prerequisites

# Steps

# 1. Install XAMPP

# 2. Disable Pre-Installed Apache

# 3. Set Up public_html Folder and Test File

# 4. Open Config file from XAMPP

# 5. Activate userDir (folders) in httpd.conf

# 6. Change User Apache Runs Under Your User

# 7. Restart Apache

Get the News You Want, When You Want: An Intro to RSS Feeds

# ✨ Welcome to RSS feeds! ✨

# What is RSS?

Commands

In 2025, I…

Did I achieve my goals for 2025?

In 2026 I plan to…

The Idea

What Could You Do On That Day?

Help!

Join In

The Mighty Triangle

Why this exists

The Disaster

The Dig

Features

Technical Details for Nerds

Features

Technical Details for Nerds

The fix

Lösung

Betroffene Tastaturen

Credits

Suchbegriffe für Suchmaschinen etc.

In 2024, I…

In 2025 I plan to…

Hast du dir das gut überlegt?

Ist das nicht viel Aufwand?

Gründe

Schadet die Namensänderung der Karriere?

Ich hab’ da noch eine Stelle im Internet mit dem alten Namen gefunden…

Wie hast du das gemacht? Ich will auch! Was muss man beachten?

TL;DR

Have you thought this through?

Isn’t that a lot of effort?

Reasons

Will the name change damage your career?

I found another place on the Internet with the old name...

How did you do that? I want to too! What do you have to consider?

But What Does “Accessibility Ready” Mean?

The Requirements

Conclusion

Some info about screen readers:

Why alt texts

What is a good alt text?

How to find out if you have a problem

Why People Might Not Add alt texts

Possible Solutions

What else?

Prerequisites

Steps

1. Install XAMPP

2. Disable Pre-Installed Apache

3. Set Up `public_html` Folder and Test File

4. Open Config file from XAMPP

5. Activate userDir (folders) in httpd.conf

6. Change User Apache Runs Under Your User

7. Restart Apache

✨ Welcome to RSS feeds! ✨

What is RSS?

How Does RSS Work?

Why Use RSS Feeds?

Getting Started is Easy

History

What are view transitions?

Single page then multi page

Let’s build something!

Demo

Simple vs. complex

What happens?

Solution

Why this post?

Apps & Tools

Entertainment for long flights

Let’s go!

Allgemein

Klare und einfache Sprache

Textstrukturierung

Überschriftenhierarchie

Textgestaltung

Fremdsprachen kennzeichnen

Alternativtexte für Fotos, Schaubilder & Grafiken

Eindeutige Seitentitel