Blog improvements: headings and settings

— 543 words

This article is part of a series:

Website 2021 Article regarding the 2021 edition of my personal website and blog.
  1. Color me swatches
  2. New website online (2021 edition)
  3. Blog update: search function online
  4. Kitchen sink
  5. Blog update: simplified settings and more
  6. Blog improvements: headings and settings

Rarely do I update my blog website these days, and I don't mention when I do most of the time. However, recent accessibility improvements are worth sharing.

Headings

The page outline sports two new headings: one for the primary navigation and one for the footer. These headings are invisible to the eye but help screen reader navigators navigate the page.

You might notice that both these headings are level 2 (<h2>), despite the navigation coming before the level 1 heading (<h1>).

Note: Like me, you might have lived with the misconception that the H1 should be the first heading on the page. While the H1 should always be the first element within <main>, using an H2 for critical page landmarks like the page header navigation is OK.

You will find even more headings added throughout the individual pages; more on this in the next section.

Lastly, headings within blog articles now have an ID, meaning you can link directly to a specific section within an article.

No more aria-label

ARIA labels are great for adding context to elements like lists and tables, but they have one issue beyond their control: browser translation tools might ignore them. Unfortunately, this includes Google's proprietary software, shipped with Chrome.

Given that Google Chrome holds a 65% market share in the browser market, you see how untranslatable labels can quickly become an issue.

Fortunately, there is more than one way to label an HTML element. For example, my settings toggle visually looks like a gear icon, but screen readers see hidden text instead of the icon.

The other solution, which this update adds plenty of, is using aria-labelledby: a mechanism where you use one element in prose to label another. This is where new headings have come to the rescue; some are visible, but most are hidden.

The heading solution is neat because the new content is translatable by browser tools and adds extra screen reader navigation points (as explained in the previous section).

Settings

The settings feature also received a significant upgrade following feedback from an accessibility expert who was honest enough to tell me the original wasn't good. (I haven't asked permission to share their name; hence, they are currently anonymous.)

Notable changes:

  • Replaced the custom popup with a dialog.
  • Added a heading to the dialog.
  • Restored the "system" color theme option.
  • Required a form submission to persist changes.
  • Added a cancel button to reset changes.

Other changes

I also made smaller changes:

  • Pagination no longer crashes when invalid page numbers are passed.
  • CSS now uses light-dark() for the color themes.
  • Page scripts are now JavaScript modules.
  • CSS and JS files are no longer minified.
  • The ASCII art in the page source now has an alt text on top.
  • Categories are no longer shown in the homepage article preview.
  • Links to my former Twitter profile have been removed.

Wrap-up

It was fun to make improvements to my personal website/blog, which hasn't received much attention in recent years. I learn new things about web development and accessibility regularly, so it's great to apply these teachings and allow more people to access my content.

Since several of these changes can apply to many websites, I hope this article has taught you something you can use in your projects.