Made an accessibility statement:
Re: Screen reader accessibility for heading anchors:
My websiteās approach to screen reader accessible heading anchors is adding aria-labelledby with the same value as the headingās id attribute to the anchor link, placing the anchor link element outside the heading element, then creating a heading wrapper element to wrap both the anchor link and the heading, so the HTML output of my siteās heading anchors is something like this:
<div class="heading-wrapper h2">
<h2 id="this-is-a-heading">This is a heading</h2>
<a
href="#this-is-a-heading"
aria-labelledby="this-is-a-heading"
>
<span hidden>#</span>
</a>
</div>
When the anchor link is focused, the screen reader will read out the heading.
I use Eleventy, so I learned this method from 11ty Rocks! guide for heading anchor links to configure the markdown-it-anchor plugin to generate the above HTML output.
Iām not familiar with Hugo, so Iām not sure how to do it in Hugo, but perhaps you can figure out a way to generate the HTML with Hugo.
On my pagan site, if you share your location with the daily dashboard, it will display solar times for your location.
(Location settings are right at the bottom, and once given you need to refresh the page for sun times to appear.)
The daily dashboard is styled a bit like a newspaper & I love adding things to it. And I do use it myself to check every day.
Next thing Iām gonna do is create a separate page where people can opt in/opt out of sharing their location, and then use it to set the wallpapers. Right now, there is a day/night cycle for wallpapers based on local time, but itād be even cooler if the websiteās perception of day/night matched what was happening outside your window.
This is accomplshed using localStorage (very easy to do!) and data never leaves your browser, so Iām excited to think of new things I can do with it.
I remembered an article @vivivi sent to me a while ago, so I went with the solution from it in the end:
<div class="heading-container">
<h2 id="1747856039">Me</h2>
<a href="#1747856039" class="heading-anchor">
<span aria-hidden="true">#</span>
<span class="visually-hidden">Section titled 'Me'</span>
</a>
</div>
Thinking of bringing back dark mode supportā¦
Iāve also got to find a place to put this.
Tara Brennan did this as a practice piece, but I liked it enough to pay her. Itās based on a screenshot of my FFXIV toon.
Oh yeah, I had actually found and read that Amber Wilsonās article about accessible anchor links before. The 11ty Rocks! guide I shared mentioned Nicolas Hoizey, whose own article about creating accessible anchor links with markdown-it and Eleventy was inspired by Amber Wilsonās article.
I just put together a m4 macro to create ARIA-friendly anchors with headings.
m4_define(`__H2', `
<div class="subheading">
<h2 id=$1>$2</h2>
<a href="\#$1" aria-labelledby="$1">
<span aria-hidden="true">ā</span>
</a>
</div>
')
(Discourse doesnāt have syntax higlighting for m4 macros. LOL)
I make the headings look nice with the following CSS.
.subheading > * {
display: inline-block;
}
.subheading > h2 {
margin: 1rem 0;
}
I have similar macros for h3 to h6.
However, Iāve now got to go through every page with subheadings and manually every use of raw HTML with the appropriate macro.
Until I get around to that, however, every page has a table of contents on the left under the site navigation, and you can right-click and copy anchor links from there.
Also, Iāve redone my layout to use CSS Grid where it makes sense to do so instead of doing everything with Flexbox. Also, dark mode support is back.
Fixed some layout bugs today, and also figured out how to block selected user-agents (search engine crawlers and AI bots) and referrers in .htaccess.
What Iām doing is basically the equivaent of putting up a āno trespassingā sign, of course, but I feel better for doing so.
After the loss of Neorings earlier this month I have started a new project. I want to recreate the old Ringlink webring system.
The last version of Ringlink was version 3.4, written in 2017. I will be running it on the latest version of Strawberry Perl with the latest versions of the added Perl libraries and modules, especially the security ones, Ringlink will run with.
I installed the basic files this morning, until I get everything configured properly the links on the page go to the long gone Ringlink page or give a server error.
It might take a couple of days to configure with a bit longer to test. It might even have to be abandoned depending on how it goes. Iām not sure yet whether I will use it to start my own webrings, or throw it open so people can create their own as well, which it was originally designed for. Whatever happens, it will keep me amused for a while.
Added a Palestine masterlist to my own website, and a spotlight section to my home page to link to the masterlist.
Successfully built a tumbleblog with Chyrp Lite and hosted it on InfinityFree with my custom subdomain at tumbleblog.leilukin.com. ![]()
I support the use of CSS Grid!! ![]()
I made a simple and ugly template for another page, Iām trying to make it better. How do you like it? It seems to me that something is missing there, but I canāt figure out what yet, I want to fix it
I know itās part of the intended effect, but the tail and the paw obscure parts of the text and I find that annoying.
Changed the colours of my tumbleblog layout to match my main site.
Created an adoptables page for my website, which includes the stuff I collected from 32-Bit Cafeās latest Destination Vacation code jam. ![]()
Found some misspellings on various pages which made me twitch so I fixed those. Iām sure there are more throughout the site, those are just the ones I found!
Added 8 sites to Linkware Websets
Added a new site button to the index page
New entry in the Godzilla Chronicles!
And a blog entry.
I changed the Home Page and Index Page again because I really didnāt like the old one
I illustrated the frames myself as well as the backgrounds. I just realized I forgot the title and copyright text but ya know Iām too lazy to add it rn so lets not worry about that ![]()
Previews:
Just updated my Now page ![]()
Iāll be adding digital garden stuff hopefully soon.




