This service tests the validity of an RSS 2.0 feed, checking to see that it follows the rules of the RSS specification. For advice from the RSS Advisory Board on how to implement RSS and handle issues such as enclosures and HTML encoding, read the RSS Best Practices Profile. This checker is also a validator of Atom and RSS 1.0 feeds.

Use this tester regularly to ensure that your RSS feed continues to work well in the wide audience of RSS readers, podcast clients and other software that supports the format.

 

Sorry

This feed does not validate.

  • line 46, column 254: Invalid email address: Steve Frenzel (28 occurrences) [help]

    ... ;</content:encoded><author>Steve Frenzel</author></item><item><title>Two ...
                                                 ^

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

  • line 11, column 0: content:encoded should not contain iframe tag (15 occurrences) [help]

    &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&a ...

  • line 30, column 0: style attribute contains potentially dangerous content: overflow-x (20 occurrences) [help]

    &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-colo ...

  • line 30, column 0: content:encoded should not contain data-language attribute (15 occurrences) [help]

    &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-colo ...

  • line 36, column 0: content:encoded should not contain loading attribute (16 occurrences) [help]

    &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/text-fragment-example. ...

  • line 36, column 0: content:encoded should not contain decoding attribute (16 occurrences) [help]

    &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/text-fragment-example. ...

  • line 46, column 215: content:encoded should not contain relative URL references: #real-talk-on-web-accessibility-with-marcy-sutton-todd (164 occurrences) [help]

    ...  and so fast at the same time.&lt;/p&gt;</content:encoded><author>Steve  ...
                                                 ^

  • line 197, column 0: Invalid HTML: EOF in middle of construct, at line 51, column 4 (19 occurrences) [help]

    &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro ...

  • line 991, column 0: content:encoded should not contain data-footnote-ref attribute [help]

    &lt;p&gt;This is called a deceptive pattern and you can read more about it h ...

  • line 991, column 0: content:encoded should not contain aria-describedby attribute [help]

    &lt;p&gt;This is called a deceptive pattern and you can read more about it h ...

  • line 2509, column 314: Missing atom:link with rel="self" [help]

    ... ed><author>Steve Frenzel</author></item></channel></rss>
                                                 ^

Source: https://stevefrenzel.dev/rss.xml

  1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Blog by Steve Frenzel</title><description>A blog about web accessibility, nerdy music stuff, everything beyond and in-between by Steve Frenzel. Go away if these things offend you: đŸłïžâ€âš§ïž đŸłïžâ€đŸŒˆ ✊🏿 đŸ‡ș🇩 đŸ‡”đŸ‡ž</description><link>https://www.stevefrenzel.dev/</link><item><title>Cool shit from the wwweb #1</title><link>https://www.stevefrenzel.dev/blog/cool-shit-from-the-wwweb-1/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/cool-shit-from-the-wwweb-1/</guid><description>Am I getting into newsletter territory here? Who knows, but here&apos;s some stuff about accessibility!</description><pubDate>Fri, 01 Nov 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;In this format, I will share everything I find interesting at random intervals. Most of the time it will have to do with web development and accessibility, but not always! You can find a list of these posts by clicking on the &lt;code&gt;micro-blog&lt;/code&gt; under “Related Tags”.&lt;/p&gt;
  2. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  3. &lt;ul&gt;
  4. &lt;li&gt;&lt;a href=&quot;#real-talk-on-web-accessibility-with-marcy-sutton-todd&quot;&gt;Real Talk on Web Accessibility with Marcy Sutton Todd&lt;/a&gt;&lt;/li&gt;
  5. &lt;li&gt;&lt;a href=&quot;#linking-directly-to-web-page-content&quot;&gt;Linking Directly to Web Page Content&lt;/a&gt;&lt;/li&gt;
  6. &lt;li&gt;&lt;a href=&quot;#the-accessibility-operations-guidebook&quot;&gt;The Accessibility Operations Guidebook&lt;/a&gt;&lt;/li&gt;
  7. &lt;li&gt;&lt;a href=&quot;#progressive-enhancement-at-govuk&quot;&gt;Progressive enhancement at gov.uk&lt;/a&gt;&lt;/li&gt;
  8. &lt;li&gt;&lt;a href=&quot;#website-speed-mcmaster-class&quot;&gt;Website speed (Mc)master class&lt;/a&gt;&lt;/li&gt;
  9. &lt;/ul&gt;
  10. &lt;h2 id=&quot;real-talk-on-web-accessibility-with-marcy-sutton-todd&quot;&gt;Real Talk on Web Accessibility with Marcy Sutton Todd&lt;/h2&gt;
  11. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/A7cVW-8tCXY&quot; title=&quot;Real Talk on Web Accessibility with Marcy Sutton Todd&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  12. &lt;/iframe&gt;
  13. &lt;p&gt;Marcy touched on a couple of interesting topics I was somewhat aware of, but now I understand them way better. Here’s a short list of them:&lt;/p&gt;
  14. &lt;ul&gt;
  15. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within&quot;&gt;focus-within&lt;/a&gt;&lt;/li&gt;
  16. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible&quot;&gt;focus-visible&lt;/a&gt;&lt;/li&gt;
  17. &lt;li&gt;&lt;a href=&quot;https://www.nvaccess.org/files/nvda/documentation/keyCommands.html#ElementsList&quot;&gt;NVDA element list&lt;/a&gt;&lt;/li&gt;
  18. &lt;li&gt;&lt;a href=&quot;https://a11ysupport.io/&quot;&gt;Accessibility support&lt;/a&gt;&lt;/li&gt;
  19. &lt;/ul&gt;
  20. &lt;p&gt;My biggest takeaway was that the &lt;code&gt;placeholder&lt;/code&gt; attribute is part of the accessible name calculation. đŸ€Ż Of course you should always associate a &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; to an &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt;, but apparently placeholders are recognized by assistive technology if no label is present.&lt;/p&gt;
  21. &lt;h3 id=&quot;further-reading&quot;&gt;Further reading&lt;/h3&gt;
  22. &lt;ul&gt;
  23. &lt;li&gt;&lt;a href=&quot;https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/&quot;&gt;Providing Accessible Names and Descriptions&lt;/a&gt;&lt;/li&gt;
  24. &lt;li&gt;&lt;a href=&quot;https://testingaccessibility.com/&quot;&gt;Testing Accessibility — by Marcy Sutton&lt;/a&gt;&lt;/li&gt;
  25. &lt;/ul&gt;
  26. &lt;h2 id=&quot;linking-directly-to-web-page-content&quot;&gt;Linking Directly to Web Page Content&lt;/h2&gt;
  27. &lt;p&gt;&lt;a href=&quot;https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html?&quot;&gt;Smarter than ‘Ctrl+F’: Linking Directly to Web Page Content&lt;/a&gt; by Ahmad Alfy&lt;/p&gt;
  28. &lt;p&gt;Saw this one in &lt;a href=&quot;https://cassidoo.co/&quot;&gt;Cassidy Williams&lt;/a&gt; newsletter and had no idea it existed! If you want to link to a certain text section in your document, you can do this, for example:&lt;/p&gt;
  29. &lt;p&gt;Basic syntax:&lt;/p&gt;
  30. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8;overflow-x:auto&quot; tabindex=&quot;0&quot; data-language=&quot;plaintext&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]&lt;/span&gt;&lt;/span&gt;
  31. &lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  32. &lt;p&gt;Real example:&lt;/p&gt;
  33. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8;overflow-x:auto&quot; tabindex=&quot;0&quot; data-language=&quot;plaintext&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span&gt;https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=without%20relying%20on%20the%20presence%20of%20IDs&lt;/span&gt;&lt;/span&gt;
  34. &lt;span class=&quot;line&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  35. &lt;p&gt;Which can look like this, depending on your browser:&lt;/p&gt;
  36. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/text-fragment-example.C49TCWY__ZiXLF3.webp&quot; alt=&quot;Screenshot by Ahmad Alfy showing highlighted text in a paragraph&quot; width=&quot;801&quot; height=&quot;316&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  37. &lt;h2 id=&quot;the-accessibility-operations-guidebook&quot;&gt;The Accessibility Operations Guidebook&lt;/h2&gt;
  38. &lt;p&gt;&lt;a href=&quot;https://devonpersing.netlify.app/book/&quot;&gt;The Accessibility Operations Guidebook&lt;/a&gt; by Devon Persing&lt;/p&gt;
  39. &lt;p&gt;This was recommended by someone else on Mastodon and I was very intrigued, because it’s not about how to do accessibility, but rather what it’s like to work in this particular field. Read a good chunk of it and it really puts things in perspective.&lt;/p&gt;
  40. &lt;h2 id=&quot;progressive-enhancement-at-govuk&quot;&gt;Progressive enhancement at gov.uk&lt;/h2&gt;
  41. &lt;p&gt;&lt;a href=&quot;https://www.gov.uk/service-manual/technology/using-progressive-enhancement&quot;&gt;Building a robust frontend using progressive enhancement&lt;/a&gt;&lt;/p&gt;
  42. &lt;p&gt;Short and sweet article about the benefits of creating a robust frontend leveraging the power of HTML, CSS and JavaScript. Bookmark this one and show it to whoever, who thinks that (blazingly fast) JavaScript framework XYZ is the best way to build a simple landing page.&lt;/p&gt;
  43. &lt;h2 id=&quot;website-speed-mcmaster-class&quot;&gt;Website speed (Mc)master class&lt;/h2&gt;
  44. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/-Ln-8QM8KhQ&quot; title=&quot;How is this Website so fast!? by Wes Bos&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  45. &lt;/iframe&gt;
  46. &lt;p&gt;Interesting look under the hood of the &lt;a href=&quot;https://www.mcmaster.com/&quot;&gt;McMaster Carr&lt;/a&gt; website by Wes Bos to find out how it can be so old and so fast at the same time.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Two quarters of 2024 in (new-ish) music</title><link>https://www.stevefrenzel.dev/blog/two-quarters-of-2024-in-new-ish-music/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/two-quarters-of-2024-in-new-ish-music/</guid><description>We&apos;ve got some Country, Metal, Ambient &amp; Pop</description><pubDate>Sun, 20 Oct 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;There’s no introduction for this, it’s music I listened to in the past six months and now I’m sharing it with you! LET’S DO THIS đŸ’Ș&lt;/p&gt;
  47. &lt;h2 id=&quot;april-2024&quot;&gt;April 2024&lt;/h2&gt;
  48. &lt;h3 id=&quot;charley-crockett---10-cowboy&quot;&gt;Charley Crockett - $10 Cowboy&lt;/h3&gt;
  49. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/1-charley-crockett-10-dollar-cowboy.DCX8wT3S_ZL0o1d.webp&quot; alt=&quot;Cover artwork for Charley Crockett - $10 Cowboy&quot; loading=&quot;eager&quot; width=&quot;1280&quot; height=&quot;1280&quot; decoding=&quot;async&quot;&gt;
  50. &lt;p&gt;If you ever wanted to get into Country music (like me) but thought it was way too corny and cliché (like me), you should give Charley Crockett a listen.&lt;/p&gt;
  51. &lt;p&gt;He’s got lots of influences that make his music very unique, like Blues, Jazz or Motown. &lt;a href=&quot;https://www.youtube.com/watch?v=qi0JyLKTbDA&quot;&gt;He also seems to be a very nice, genuine guy.&lt;/a&gt;&lt;/p&gt;
  52. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/aK89bntEg5w&quot; title=&quot;Charley Crockett - America&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  53. &lt;/iframe&gt;
  54. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/358967303?u&quot;&gt;Listen to $10 Cowboy from Charley Crockett&lt;/a&gt;&lt;/p&gt;
  55. &lt;h3 id=&quot;full-of-hell---coagulated-bliss&quot;&gt;Full Of Hell - Coagulated Bliss&lt;/h3&gt;
  56. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/2-full-of-hell.D3ESIARI_1fvRHJ.webp&quot; alt=&quot;Cover artwork for Full Of Hell - Coagulated Bliss&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  57. &lt;p&gt;The collaboration between &lt;a href=&quot;https://tidal.com/browse/album/316979894?u&quot;&gt;Full Of Hell and Nothing&lt;/a&gt; is one of the best things that’s ever happened to the scene, so I was very interested to hear what a “regular” album would sound like.&lt;/p&gt;
  58. &lt;p&gt;It’s not totally up my alley, but if you’re in need of some legit, heavy punk music: Go for it!&lt;/p&gt;
  59. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/5MeB7fa8vGA&quot; title=&quot;Full Of Hell - Coagulated Bliss&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  60. &lt;/iframe&gt;
  61. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/344412733?u&quot;&gt;Listen to Coagulated Bliss by Full Of Hell&lt;/a&gt;&lt;/p&gt;
  62. &lt;h3 id=&quot;northlane---mirrors-edge&quot;&gt;Northlane - Mirror’s Edge&lt;/h3&gt;
  63. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/3-northlane.CU3sZJXu_1ed3pQ.webp&quot; alt=&quot;Cover artwork for Northlane - Mirror&apos;s Edge&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  64. &lt;p&gt;Northlane is one of THE bands in the &lt;a href=&quot;https://en.wikipedia.org/wiki/Djent&quot;&gt;Djent&lt;/a&gt; genre, but I never really got into them. I still got curious when I saw that they released an EP, which is usually easier to digest, especially in this genre.&lt;/p&gt;
  65. &lt;p&gt;When I saw that they had a song with Ian from &lt;a href=&quot;https://tidal.com/browse/artist/19239?u&quot;&gt;Karnivool&lt;/a&gt;, I was sold. A match made in heaven. 😇&lt;/p&gt;
  66. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/EiiVVJNA0nk&quot; title=&quot;Northlane - Afterimage featuring Ian Kenny&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  67. &lt;/iframe&gt;
  68. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/340302755?u&quot;&gt;Listen to Mirror’s Edge by Northlane&lt;/a&gt;&lt;/p&gt;
  69. &lt;h2 id=&quot;may-2024&quot;&gt;May 2024&lt;/h2&gt;
  70. &lt;h3 id=&quot;bring-me-the-horizon---post-human-nex-gen&quot;&gt;Bring Me The Horizon - POST HUMAN: NeX GEn&lt;/h3&gt;
  71. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/4-bmth.DHb1mLy9_Z1lWn0f.webp&quot; alt=&quot;Cover artwork for Bring Me The Horizon - POST HUMAN: NeX GEn&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  72. &lt;p&gt;Hearing that &lt;a href=&quot;https://loudwire.com/bring-me-the-horizon-oli-sykes-exact-reason-split-jordan-fish/&quot;&gt;Jordan Fish was no longer part of the band&lt;/a&gt; made me a bit concerned, as he seemed to have a big influence on their sound for the last decade.&lt;/p&gt;
  73. &lt;p&gt;After a couple of listens this record REALLY clicked with me though and it might be favourite album. There’s the heavy, there’s the soft, there’s the in-between and it all sounds like BMTH.&lt;/p&gt;
  74. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/LxxlN_FhLac&quot; title=&quot;Bring Me The Horizon - Top 10 staTues tHat CriEd bloOd&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  75. &lt;/iframe&gt;
  76. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/364332768?u&quot;&gt;Listen to POST HUMAN: NeX GEn by Bring Me The Horizon&lt;/a&gt;&lt;/p&gt;
  77. &lt;h3 id=&quot;knocked-loose---you-wont-go-before-youre-supposed-to&quot;&gt;Knocked Loose - You Won’t Go Before You’re Supposed To&lt;/h3&gt;
  78. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/5-knocked-loose.CAdx85uQ_ZmksIT.webp&quot; alt=&quot;Cover artwork for Knocked Loose - You Won&apos;t Go Before You&apos;re Supposed To&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  79. &lt;p&gt;I saw them last year and was super impressed, they really know how to work a crowd as soon as they enter the stage. If you’re a fan of super heavy, groovy music with an ear for details, give them a listen.&lt;/p&gt;
  80. &lt;p&gt;If you’re interested in how the title came about, check out &lt;a href=&quot;https://www.youtube.com/watch?v=b7MWE9Z0mOM&quot;&gt;The Downbeat episode with singer Bryan Garris&lt;/a&gt;.&lt;/p&gt;
  81. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/RAuuVY__KQ0&quot; title=&quot;Knocked Loose - Suffocate featuring Poppy&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  82. &lt;/iframe&gt;
  83. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/361877821?u&quot;&gt;Listen to You Won’t Go Before You’re Supposed To by Knocked Loose&lt;/a&gt;&lt;/p&gt;
  84. &lt;h2 id=&quot;june-2024&quot;&gt;June 2024&lt;/h2&gt;
  85. &lt;h3 id=&quot;washed-out---notes-from-a-quiet-life&quot;&gt;Washed Out - Notes from a Quiet Life&lt;/h3&gt;
  86. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/6-washed-out.Bk_0_MAq_MzYWF.webp&quot; alt=&quot;Cover artwork for Washed Out - Notes from a Quiet Life&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  87. &lt;p&gt;One of my favourite and most played albums ever is &lt;a href=&quot;https://tidal.com/browse/album/147965124?u&quot;&gt;Purple Noon&lt;/a&gt;, so I had really high expectations for this one. The first single “The Hardest Part” was the perfect cure for that itch, even though it was less melancholic than before and I hate this generative “AI” video.&lt;/p&gt;
  88. &lt;p&gt;The record as a whole was disappointing for me, as it’s just too much on the happy side, at least musically. What can I say, I’m a sad emo boy đŸ€·â€â™‚ïž&lt;/p&gt;
  89. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/-Nb-M1GAOX8&quot; title=&quot;Washed Out - The Hardest Part&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  90. &lt;/iframe&gt;
  91. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/356638686?u&quot;&gt;Listen to Notes from a Quiet Life from Washed Out&lt;/a&gt;&lt;/p&gt;
  92. &lt;h3 id=&quot;queen-of-jeans---all-again&quot;&gt;Queen of Jeans - All Again&lt;/h3&gt;
  93. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/7-queen-of-jeans.DysGEluc_1rTH1p.webp&quot; alt=&quot;Cover artwork for Queen of Jeans - All Again&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  94. &lt;p&gt;I only discovered this record after seeing them live in September in Montreal (Canada) supporting &lt;a href=&quot;https://tidal.com/browse/artist/6501073?u&quot;&gt;Movements&lt;/a&gt; and &lt;a href=&quot;https://tidal.com/browse/artist/4931797?u&quot;&gt;Turnover&lt;/a&gt;.&lt;/p&gt;
  95. &lt;p&gt;Instantly fell in love with them, especially with their singer’s voice! 😍 For fans of shoe-gaze dream pop with stunning vocals and great hooks.&lt;/p&gt;
  96. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/0ypc3mobj3I&quot; title=&quot;Queen of Jeans - All My Friends&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  97. &lt;/iframe&gt;
  98. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/344655048?u&quot;&gt;Listen to All Again by Queen of Jeans&lt;/a&gt;&lt;/p&gt;
  99. &lt;h2 id=&quot;july-2024&quot;&gt;July 2024&lt;/h2&gt;
  100. &lt;h3 id=&quot;charley-crockett---visions-of-dallas&quot;&gt;Charley Crockett - Visions of Dallas&lt;/h3&gt;
  101. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/8-charley-crocket-visions-of-dallas.FwXax6o9_Z21F7pL.webp&quot; alt=&quot;Cover artwork for Charley Crockett - Visions of Dallas&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  102. &lt;p&gt;The output of this man is incredible, two albums in one year! I can’t put my finger down why, but I like this one more than $10 Cowboy.&lt;/p&gt;
  103. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/aQnw4i-t4qA&quot; title=&quot;Charley Crockett - Killers of the Flower Moon&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  104. &lt;/iframe&gt;
  105. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/375281465?u&quot;&gt;Listen to Visions of Dallas by Charley Crockett&lt;/a&gt;&lt;/p&gt;
  106. &lt;h3 id=&quot;cigarettes-after-sex---xs&quot;&gt;Cigarettes After Sex - X’s&lt;/h3&gt;
  107. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/9-cigarettes-after-sex.BRIbKHLo_Z2cRU9Q.webp&quot; alt=&quot;Cover artwork for Cigarettes After Sex - X&apos;s&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  108. &lt;p&gt;Having a moody day and just want to snuggle up while there’s a slight drizzle outside? Or just need to come down after a stressful day? Then this record will be the perfect soundtrack for you!&lt;/p&gt;
  109. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/343983146?u&quot;&gt;Listen to X’s by Cigarettes After Sex&lt;/a&gt;&lt;/p&gt;
  110. &lt;h3 id=&quot;graphic-nature---who-are-you-when-no-one-is-watching&quot;&gt;Graphic Nature - Who Are You When No One Is Watching?&lt;/h3&gt;
  111. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/10-graphic-nature.B35z56ZP_1T3fPW.webp&quot; alt=&quot;Cover artwork for Graphic Nature - Who Are You When No One Is Watching?&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  112. &lt;p&gt;Ever since the first record came out I’m a massive fan! I like to refer to them as “Slipknot but cool”, as they’re giving me strong &lt;a href=&quot;https://tidal.com/browse/album/68572327?u&quot;&gt;Iowa&lt;/a&gt;-era vibes. Music and lyrics go hard, enjoy the ride!&lt;/p&gt;
  113. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/kZENkZnHG0Q&quot; title=&quot;Graphic Nature - Something I&apos;m Not&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  114. &lt;/iframe&gt;
  115. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/359828113?u&quot;&gt;Listen to Who Are You When No One Is Watching?&lt;/a&gt;&lt;/p&gt;
  116. &lt;h3 id=&quot;the-album-leaf---blast&quot;&gt;The Album Leaf - Blast&lt;/h3&gt;
  117. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/11-the-album-leaf.D3nr5eP5_1Q9dQQ.webp&quot; alt=&quot;Cover artwork for The Album Leaf - Blast&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  118. &lt;p&gt;I’ve known the name for a while, but never checked them out. This has become my go-to focus music now, as it has just the right amount of percussion while still being ambient.&lt;/p&gt;
  119. &lt;p&gt;The whole record has a great climax, the cover artwork captures it perfectly. Can’t believe that this is a live session! đŸ˜±&lt;/p&gt;
  120. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/366557856?u&quot;&gt;Listen to Blast by The Album Leaf&lt;/a&gt;&lt;/p&gt;
  121. &lt;h2 id=&quot;august-2024&quot;&gt;August 2024&lt;/h2&gt;
  122. &lt;h3 id=&quot;holding-absence---the-noble-art-of-self-destruction&quot;&gt;Holding Absence - The Noble Art Of Self Destruction&lt;/h3&gt;
  123. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/12-holding-absence.CDVcGCIc_12bRQG.webp&quot; alt=&quot;Cover artwork for Holding Absence - The Noble Art Of Self Destruction&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  124. &lt;p&gt;Ok, so this record came out in 2023, but I only discovered it because &lt;a href=&quot;https://www.youtube.com/watch?v=DoeMirzkFMU&quot;&gt;Lucas and Ash were guests in The Downbeat Podcast&lt;/a&gt;. They seemed super nice, so I checked out there music and got hooked instantly!&lt;/p&gt;
  125. &lt;p&gt;Creative songwriting and singing, as well as one of the best song transitions ever from “False Dawn” to “Scissors”. For people who listen to Metal but actually like Pop music.&lt;/p&gt;
  126. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/4guUJmAnld4&quot; title=&quot;Holding Absence - A Crooked Melody&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  127. &lt;/iframe&gt;
  128. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/291212064?u&quot;&gt;Listen to The Noble Art Of Self Destruction by Holding Absence&lt;/a&gt;&lt;/p&gt;
  129. &lt;h3 id=&quot;lambert---actually-good&quot;&gt;Lambert - Actually Good&lt;/h3&gt;
  130. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/13-lambert.DEOafAqD_1tMcF8.webp&quot; alt=&quot;Cover artwork for Lambert - Actually Good&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  131. &lt;p&gt;Not as experimental as his &lt;a href=&quot;https://tidal.com/browse/album/117224660?u&quot;&gt;True&lt;/a&gt; and &lt;a href=&quot;https://tidal.com/browse/album/170554588?u&quot;&gt;False&lt;/a&gt; album, but a more “typical” Lambert making calm, relaxing piano music while being technically impressive at the same time. This record is actually good!&lt;/p&gt;
  132. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/Zmas7XdpSfQ&quot; title=&quot;Lambert - Actually Good&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  133. &lt;/iframe&gt;
  134. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/382894236?u&quot;&gt;Listen to Actually Good by Lambert&lt;/a&gt;&lt;/p&gt;
  135. &lt;h2 id=&quot;september-2024&quot;&gt;September 2024&lt;/h2&gt;
  136. &lt;h3 id=&quot;foxing---foxing&quot;&gt;Foxing - Foxing&lt;/h3&gt;
  137. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/14-foxing.CJTlMF8u_Z1Q7DMt.webp&quot; alt=&quot;Cover artwork Foxing&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  138. &lt;p&gt;This band hit the nerve so much, I can’t believe I haven’t listened to it more. It’s like a melancholic Pink Floyd with its fair share of (Black) Metal. Sounds wild and really good!&lt;/p&gt;
  139. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/ULtsv_-dscM&quot; title=&quot;Foxing - Greyhound&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  140. &lt;/iframe&gt;
  141. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/370954635?u&quot;&gt;Listen to Foxing by Foxing&lt;/a&gt;&lt;/p&gt;
  142. &lt;h3 id=&quot;thrown---excessive-guilt&quot;&gt;thrown - EXCESSIVE GUILT&lt;/h3&gt;
  143. &lt;img src=&quot;https://www.stevefrenzel.dev/_astro/15-thrown.CEjXxFiO_ZM6Kcd.webp&quot; alt=&quot;Cover artwork for thrown - EXCESSIVE GUILT&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
  144. &lt;p&gt;This band goes so hard and needs only a little more than 20 minutes to show you how it’s done. The sound is ignorantly fat and loud, songs are short and straight to the point. Perfect for working out or any other occasion where you need to pump the gas a little bit.&lt;/p&gt;
  145. &lt;iframe allow=&quot;accelerometer &apos;none&apos;; autoplay &apos;none&apos;; camera &apos;none&apos;; clipboard-write &apos;none&apos;; display-capture &apos;none&apos;; encrypted-media &apos;none&apos;; fullscreen; gyroscope &apos;none&apos;; geolocation &apos;none&apos;; microphone &apos;none&apos;; picture-in-picture; publickey-credentials-get &apos;none&apos;; screen-wake-lock &apos;none&apos;; web-share &apos;none&apos;&quot; loading=&quot;lazy&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; src=&quot;https://www.youtube-nocookie.com/embed/DqBzOVCmIdM&quot; title=&quot;Thrown - on the verge&quot; data-astro-cid-7yu2nja5=&quot;&quot;&gt;
  146. &lt;/iframe&gt;
  147. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/363349693?u&quot;&gt;Listen to EXCESSIVE GUILT by thrown&lt;/a&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>“Fuck off” to hand-off: Holistic web design</title><link>https://www.stevefrenzel.dev/blog/fuck-off-to-hand-off-holistic-web-design/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/fuck-off-to-hand-off-holistic-web-design/</guid><description>How I do a hand-off from design, to ticket, to development. Might be borderline micromanaging.</description><pubDate>Mon, 19 Aug 2024 00:00:00 GMT</pubDate><content:encoded>&lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  148. &lt;ul&gt;
  149. &lt;li&gt;&lt;a href=&quot;#why-im-writing-this&quot;&gt;Why I’m writing this&lt;/a&gt;&lt;/li&gt;
  150. &lt;li&gt;&lt;a href=&quot;#back--forth-in-figma&quot;&gt;Back &amp;#x26; forth in Figma&lt;/a&gt;
  151. &lt;ul&gt;
  152. &lt;li&gt;&lt;a href=&quot;#smallest--largest-viewport&quot;&gt;Smallest &amp;#x26; largest viewport&lt;/a&gt;&lt;/li&gt;
  153. &lt;li&gt;&lt;a href=&quot;#annotations-with-stark&quot;&gt;Annotations (with Stark)&lt;/a&gt;
  154. &lt;ul&gt;
  155. &lt;li&gt;&lt;a href=&quot;#alt-text&quot;&gt;Alt-Text&lt;/a&gt;&lt;/li&gt;
  156. &lt;li&gt;&lt;a href=&quot;#focus-order&quot;&gt;Focus Order&lt;/a&gt;&lt;/li&gt;
  157. &lt;li&gt;&lt;a href=&quot;#headings&quot;&gt;Headings&lt;/a&gt;&lt;/li&gt;
  158. &lt;li&gt;&lt;a href=&quot;#landmarks&quot;&gt;Landmarks&lt;/a&gt;&lt;/li&gt;
  159. &lt;li&gt;&lt;a href=&quot;#measure-tools&quot;&gt;Measure Tools&lt;/a&gt;&lt;/li&gt;
  160. &lt;/ul&gt;
  161. &lt;/li&gt;
  162. &lt;/ul&gt;
  163. &lt;/li&gt;
  164. &lt;li&gt;&lt;a href=&quot;#creating-the-ticket&quot;&gt;Creating the ticket&lt;/a&gt;
  165. &lt;ul&gt;
  166. &lt;li&gt;&lt;a href=&quot;#user-story&quot;&gt;User story&lt;/a&gt;&lt;/li&gt;
  167. &lt;li&gt;&lt;a href=&quot;#user-story&quot;&gt;Tasks&lt;/a&gt;&lt;/li&gt;
  168. &lt;li&gt;&lt;a href=&quot;#design&quot;&gt;Design&lt;/a&gt;&lt;/li&gt;
  169. &lt;/ul&gt;
  170. &lt;/li&gt;
  171. &lt;li&gt;&lt;a href=&quot;#doing-the-hand-off&quot;&gt;Doing the hand-off&lt;/a&gt;&lt;/li&gt;
  172. &lt;li&gt;&lt;a href=&quot;#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  173. &lt;/ul&gt;
  174. &lt;h2 id=&quot;why-im-writing-this&quot;&gt;Why I’m writing this&lt;/h2&gt;
  175. &lt;p&gt;Do you sometimes feel irritated when opening a ticket for a task that only has one line of text, but it seems to be a big, complex component or feature you have to implement? Does it feel like a gentle, but distinguished “fuck off, this your responsibility now“ coming from the person creating the ticket?&lt;/p&gt;
  176. &lt;p&gt;I might have a solution for this, if you’re a developer knowing your way around in design tools and willing to take more responsibility. (And increase your market value along the way.)&lt;/p&gt;
  177. &lt;p&gt;Recently I had the privilege of doing web development with a holistic approach, or “the way it used to be” 🌈. Which means that I was responsible for the following things:&lt;/p&gt;
  178. &lt;ul&gt;
  179. &lt;li&gt;Design (in Figma)&lt;/li&gt;
  180. &lt;li&gt;Ticket creation (in JIRA)&lt;/li&gt;
  181. &lt;li&gt;Implementation (in code)&lt;/li&gt;
  182. &lt;/ul&gt;
  183. &lt;p&gt;The workload for this task was immense, but I learned a lot about what worked well and where things could be improved.&lt;/p&gt;
  184. &lt;p&gt;The fewer open questions there are in the design phase and the more detailed a ticket is written, the faster the implementation goes. I have created around ten of them and there were almost no follow-up questions from my developer colleagues.&lt;/p&gt;
  185. &lt;p&gt;I would like to share my approach, as it can make your workflow run smoothly if used in this or a similar way. As an example I use a Figma template from Faqih Sopyan called &lt;a href=&quot;https://www.figma.com/community/file/1235152009438565697/the-blog-a-web-personal-blog&quot;&gt;A Web Personal Blog&lt;/a&gt;, which is freely available.&lt;/p&gt;
  186. &lt;p&gt;This article is very much inspired by &lt;a href=&quot;https://piccalil.li/blog/the-time-for-designers-to-learn-to-code-is-now&quot;&gt;The time for designers to learn to code is now&lt;/a&gt;, as it was published at almost exactly the same time. Similar articles are &lt;a href=&quot;https://css-tricks.com/the-great-divide/&quot;&gt;The Great Divide&lt;/a&gt; and &lt;a href=&quot;https://www.ellyloel.com/blog/front-end-development-s-identity-crisis/&quot;&gt;Front-end development’s identity crisis&lt;/a&gt;.&lt;/p&gt;
  187. &lt;h2 id=&quot;back--forth-in-figma&quot;&gt;Back &amp;#x26; forth in Figma&lt;/h2&gt;
  188. &lt;p&gt;This is NOT a Figma tutorial. I’m not going to tell you how to create something there, but which tools you should use for a hand-off that will bring tears of joy to your eyes and those of your developers.&lt;/p&gt;
  189. &lt;p&gt;At this stage, it is important that you communicate openly and a lot so that you can work quickly and efficiently for yourself from a certain point onwards.&lt;/p&gt;
  190. &lt;p&gt;Talk to the person who is responsible for this project: product owner, product manager, &lt;a href=&quot;https://tidal.com/browse/album/80813905?u&quot;&gt;master of puppets&lt;/a&gt;, whatever label is used for this particular position. Have you both clarified all your questions? Good, then let’s move on:&lt;/p&gt;
  191. &lt;p&gt;Make sure you use your design system for your templates. You have one, don’t you?&lt;/p&gt;
  192. &lt;p&gt;Again, sustainability and efficiency are key here, so work with &lt;a href=&quot;https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma&quot;&gt;components&lt;/a&gt; and &lt;a href=&quot;https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design&quot;&gt;auto layout&lt;/a&gt; as much as possible (if you’re using Figma).&lt;/p&gt;
  193. &lt;p&gt;If you have questions related to a backend implementation, ask your backend developers if it’s possible. The same applies to frontend specific questions. If they have a better suggestion how to implement it in the real world, consider adjusting your design.&lt;/p&gt;
  194. &lt;p&gt;Some questions must be asked in writing in the group so that everyone can give their feedback. Others may only concern individuals and in this case you could simply call this person to clarify it quickly.&lt;/p&gt;
  195. &lt;p&gt;This phase can be a bit messy as there will be a lot of back and forth. That’s ok as long as you clean up your mess after all the issues have been resolved.&lt;/p&gt;
  196. &lt;h3 id=&quot;smallest--largest-viewport&quot;&gt;Smallest &amp;#x26; largest viewport&lt;/h3&gt;
  197. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/size-of-planets.BtyA7ymH_Z2m8Dyw.webp&quot; alt=&quot;Size of planets in order, a diameter from smallest to largest: Mercury, Mars, Venus, Earth, Neptune, Uranus, Saturn, Jupiter and the sun for reference.&quot; width=&quot;1500&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  198. &lt;p&gt;&lt;a href=&quot;https://sciencenotes.org/size-of-planets-in-order/&quot;&gt;Image source&lt;/a&gt;&lt;/p&gt;
  199. &lt;p&gt;All questions and arguments on this topic have been answered on &lt;a href=&quot;https://viewports.fyi/&quot;&gt;The ideal viewport doesn’t exist&lt;/a&gt;. For our example, I’m only using the smallest viewport, but just use your imagination to envision the largest viewport version.&lt;/p&gt;
  200. &lt;p&gt;Try to get away from the terms “mobile”, “tablet” and “desktop” because they don’t apply to the real world. Instead, use terms like:&lt;/p&gt;
  201. &lt;ul&gt;
  202. &lt;li&gt;“smallest” and “largest”&lt;/li&gt;
  203. &lt;li&gt;“minimum” and “maximum”&lt;/li&gt;
  204. &lt;/ul&gt;
  205. &lt;p&gt;You could also use planet names, such as “Mercury” and “Sun”. Like the universe, the possibilities are endless! Leave everything in between to the browser, following the motto &lt;a href=&quot;https://buildexcellentwebsit.es/&quot;&gt;Be the browser’s mentor, not its micromanager.&lt;/a&gt;&lt;/p&gt;
  206. &lt;p&gt;Once you’re done, export these two as images and add them to the ticket. Don’t just throw a Figma link in the ticket like it’s breadcrumbs and your developers are pigeons in the park and hope for the best.&lt;/p&gt;
  207. &lt;p&gt;If you have a lot of templates in your Figma page, do yourself and the others a favour and use &lt;a href=&quot;https://help.figma.com/hc/en-us/articles/9771500257687-Organize-your-canvas-with-sections&quot;&gt;sections&lt;/a&gt; in Figma. It’s simple, looks good and is
 well, really easy to use!&lt;/p&gt;
  208. &lt;h3 id=&quot;annotations-with-stark&quot;&gt;Annotations (with Stark)&lt;/h3&gt;
  209. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/stark-annotations.B1AuqqyO_1pjym2.webp&quot; alt=&quot;A split screen view showing the new Stark UI in light and dark mode, a pointer hovering over the Alt-Text tool.&quot; width=&quot;2280&quot; height=&quot;1672&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  210. &lt;p&gt;&lt;a href=&quot;https://www.getstark.co/blog/all-new-beautiful-design-smart-suggestions-from-design-system-new-annotation-tools/&quot;&gt;Image source&lt;/a&gt;&lt;/p&gt;
  211. &lt;p&gt;I am a very big fan of Stark as they present the topic of accessibility in a light, easy-to-understand and sexy way, same goes for their products. There are different tools to add accessibility annotations in Figma and maybe this is not the right one for you.&lt;/p&gt;
  212. &lt;p&gt;For me, however, it is currently an all-in-one solution as I can easily cover different areas. From the following annotations you create an additional template in Figma and export it as an image:&lt;/p&gt;
  213. &lt;h4 id=&quot;alt-text&quot;&gt;Alt-Text&lt;/h4&gt;
  214. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/annotations-alt-Text.TM0yxlk8_uaLHo.webp&quot; alt=&quot;Article preview in Figma, show the alt-text annotations&quot; width=&quot;790&quot; height=&quot;692&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  215. &lt;p&gt;Here’s one big “It dependsâ€â„ąïžÂ topic! Are there images in your design, that are purely decorative? Mark them accordingly.&lt;/p&gt;
  216. &lt;p&gt;Do you have images, where you know that they’ll need alt-text and it can be provided by you? Add them or read &lt;a href=&quot;https://design102.blog.gov.uk/2022/01/14/whats-the-alternative-how-to-write-good-alt-text/&quot;&gt;What’s the alternative? How to write good alt text&lt;/a&gt; first before you get started.&lt;/p&gt;
  217. &lt;p&gt;The alt-text will be provided by someone else? Mark it accordingly and pray to the &lt;a href=&quot;https://en.wikipedia.org/wiki/Flying_Spaghetti_Monster&quot;&gt;flying spaghetti monster&lt;/a&gt; they know how to write proper alt-text. Maybe send them the link above?&lt;/p&gt;
  218. &lt;h4 id=&quot;focus-order&quot;&gt;Focus Order&lt;/h4&gt;
  219. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/blog-post-focus-order.DTSktLQi_16fscV.webp&quot; alt=&quot;Article preview in Figma, showing numbers at three elements that can be interacted with via keyboard.&quot; width=&quot;800&quot; height=&quot;800&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  220. &lt;p&gt;Anything that can be interacted with via keyboard should be marked accordingly.&lt;/p&gt;
  221. &lt;p&gt;If the focus order looks funny to you and goes up, down, left and right, tack a step back and rearrange the UI, please.&lt;/p&gt;
  222. &lt;p&gt;Keyboard support is crucial for anyone who is dependent on it and you want to get it right BEFORE it’s implemented.&lt;/p&gt;
  223. &lt;h4 id=&quot;headings&quot;&gt;Headings&lt;/h4&gt;
  224. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/blog-post-headings.CkXaJ-ZN_1nTHKR.webp&quot; alt=&quot;Article preview in Figma, showing &amp;#38;#x27;H2&amp;#38;#x27; attached to the title.&quot; width=&quot;800&quot; height=&quot;800&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  225. &lt;p&gt;One of my favourite topics! Most developers have no clue what these HTML elements are for, so here’s a handy resource for them: &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements&quot;&gt;The HTML Section Heading elements&lt;/a&gt;&lt;/p&gt;
  226. &lt;p&gt;What I’ve seen way too often is that these elements where picked based on their look but not there semantic meaning.&lt;/p&gt;
  227. &lt;p&gt;Do NOT do this, &lt;a href=&quot;https://webaim.org/projects/screenreadersurvey9/#heading&quot;&gt;heading levels are very important for screen reader users&lt;/a&gt; and search engine crawlers as well!&lt;/p&gt;
  228. &lt;p&gt;Do you really need an H3 to look like an H1? Create CSS classes (in your design system), use the correct HTML element, add the class to it, done. Although this shouldn’t be necessary, but at least your heading order will remain intact.&lt;/p&gt;
  229. &lt;h4 id=&quot;landmarks&quot;&gt;Landmarks&lt;/h4&gt;
  230. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/annotations-landmarks-min.jnmQAdhc_ZbdIuj.webp&quot; alt=&quot;Template of the whole page showing landmarks for nav, section, main &amp;#38;#x26; footer.&quot; width=&quot;1840&quot; height=&quot;2658&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  231. &lt;p&gt;Very underrated, yet super important for screen reader users. These are invisible to the eye, but provide the structure of a website through semantics.&lt;/p&gt;
  232. &lt;p&gt;There are only a couple of them, so chances are high you’re gonna get this right on the first try: &lt;a href=&quot;https://developer.mozilla.org/en-us/blog/aria-accessibility-html-landmark-roles/&quot;&gt;Using HTML landmark roles to improve accessibility&lt;/a&gt;&lt;/p&gt;
  233. &lt;p&gt;I wouldn’t annotate individual components, but rather full pages where they all come together. This way you and your developers will have a better overview of which landmark elements to use.&lt;/p&gt;
  234. &lt;h4 id=&quot;measure-tools&quot;&gt;Measure tools&lt;/h4&gt;
  235. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/blog-post-spacing.BUM5Q8pX_heXu7.webp&quot; alt=&quot;Article preview with annotations for spacing between elements.&quot; width=&quot;800&quot; height=&quot;800&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  236. &lt;p&gt;I consider &lt;a href=&quot;https://www.figma.com/community/plugin/822781486072277843&quot;&gt;Measure Tools&lt;/a&gt; by Habo Chen a nice-to-have. It displays the spacing used in your design system (hopefully) and developers will know which spacing or utility class to apply (fingers crossed).&lt;/p&gt;
  237. &lt;h2 id=&quot;creating-the-ticket&quot;&gt;Creating the ticket&lt;/h2&gt;
  238. &lt;p&gt;You may use &lt;a href=&quot;https://www.atlassian.com/software/jira&quot;&gt;JIRA&lt;/a&gt;, &lt;a href=&quot;https://asana.com/logged-in&quot;&gt;Asana&lt;/a&gt;, &lt;a href=&quot;https://docs.github.com/en/issues&quot;&gt;GitHub Issues&lt;/a&gt;, or some other tool to create your tickets. You may love or you may hate it. You may have a pre-defined structure for tickets in place.&lt;/p&gt;
  239. &lt;p&gt;When I have the chance to write a ticket, I want it to be understandable by anyone who takes a look at it. Here’s my approach:&lt;/p&gt;
  240. &lt;h3 id=&quot;user-story&quot;&gt;User story&lt;/h3&gt;
  241. &lt;p&gt;Unless it’s something internal you work on where no end-users are involved, this is the most important part. It describes (in first-person mode) what the user experience with this particular thing you’ll create will be like.&lt;/p&gt;
  242. &lt;p&gt;Try to keep it brief and avoid technical jargon, if possible. Assume that the person on the other end has no clue how to use it. It could look something like this:&lt;/p&gt;
  243. &lt;blockquote&gt;
  244. &lt;p&gt;&lt;em&gt;As a user, I want to have a preview of a blog article. When pressing the “read more” button, I can access the whole article on a new page.&lt;/em&gt;&lt;/p&gt;
  245. &lt;/blockquote&gt;
  246. &lt;p&gt;See what I did there? Keeping the &lt;a href=&quot;https://www.w3.org/WAI/fundamentals/accessibility-principles/&quot;&gt;P.O.U.R. principles&lt;/a&gt; in mind! đŸ’Ș&lt;/p&gt;
  247. &lt;ul&gt;
  248. &lt;li&gt;I didn’t use the word “see”, cause some people might not be able to. But they will have this blog article preview available on the page and can interact with it however they want.&lt;/li&gt;
  249. &lt;li&gt;I didn’t use the word “click”, cause people might not be able to use a mouse. But they can both press the button with a mouse and a keyboard (or other assistive technology).&lt;/li&gt;
  250. &lt;li&gt;I didn’t use the word “read”, cause some people might not be able to actively read but have it read out loud by a screen reader.&lt;/li&gt;
  251. &lt;li&gt;I didn’t use the word “redirect”, but this is what’s gonna happen after interacting with the button.&lt;/li&gt;
  252. &lt;/ul&gt;
  253. &lt;p&gt;I covered both the presentational and functional part of it in two shorts sentences. You might disagree with me here, but that’s the way how I write user stories to get the point across.&lt;/p&gt;
  254. &lt;p&gt;Don’t forget: Whatever you build, you build it for people!&lt;/p&gt;
  255. &lt;h3 id=&quot;design&quot;&gt;Design&lt;/h3&gt;
  256. &lt;p&gt;Here you’re gonna add two things:&lt;/p&gt;
  257. &lt;ol&gt;
  258. &lt;li&gt;Link(s) to the design in Figma, Sketch, Adobe XD, whatever&lt;/li&gt;
  259. &lt;li&gt;The images of the templates for
  260. &lt;ol&gt;
  261. &lt;li&gt;Smallest viewport&lt;/li&gt;
  262. &lt;li&gt;Largest viewport&lt;/li&gt;
  263. &lt;li&gt;Alt text annotations&lt;/li&gt;
  264. &lt;li&gt;Focus order annotations&lt;/li&gt;
  265. &lt;li&gt;Heading annotations&lt;/li&gt;
  266. &lt;li&gt;Landmark annotations&lt;/li&gt;
  267. &lt;li&gt;Spacing annotations&lt;/li&gt;
  268. &lt;/ol&gt;
  269. &lt;/li&gt;
  270. &lt;/ol&gt;
  271. &lt;p&gt;Depending on the provider, you might not be able to add the images directly to the ticket. That’s cool, as long as you can at least add a link to them.&lt;/p&gt;
  272. &lt;p&gt;If there are images or icons which are not part of the frontend or design system; add them directly to the ticket!&lt;/p&gt;
  273. &lt;p&gt;The goal here is to reduce the amount of follow-up questions, so it’s essential that all the info is available at once, one way or another.&lt;/p&gt;
  274. &lt;h3 id=&quot;tasks&quot;&gt;Tasks&lt;/h3&gt;
  275. &lt;p&gt;Here’s the part where you can go in-depth and describe how something should be implemented.&lt;/p&gt;
  276. &lt;p&gt;Let’s keep the example of the blog article preview. How would you describe it to your developers?&lt;/p&gt;
  277. &lt;p&gt;If you’re using &lt;a href=&quot;https://bradfrost.com/blog/post/atomic-web-design/&quot;&gt;atomic design&lt;/a&gt; for your design system and have everything pre-defined, you could at first specify which atoms, molecules and / or organisms should be used.&lt;/p&gt;
  278. &lt;p&gt;I then like to work my way from outer to inner shell when describing:&lt;/p&gt;
  279. &lt;ul&gt;
  280. &lt;li&gt;Which landmark element(s) should be used&lt;/li&gt;
  281. &lt;li&gt;Which other semantic HTML element(s) should be used
  282. &lt;ul&gt;
  283. &lt;li&gt;If they need an aria-label, describe it’s content&lt;/li&gt;
  284. &lt;li&gt;If it should be hidden via aria-hidden=”true”, add the info&lt;/li&gt;
  285. &lt;li&gt;If they need other aria roles, describe them accordingly&lt;/li&gt;
  286. &lt;/ul&gt;
  287. &lt;/li&gt;
  288. &lt;li&gt;Which font-sizes should be used&lt;/li&gt;
  289. &lt;li&gt;Which colors should be used&lt;/li&gt;
  290. &lt;li&gt;Which tracking parameters should be added (if applicable)&lt;/li&gt;
  291. &lt;/ul&gt;
  292. &lt;p&gt;If done properly, this should cover enough, if not all the ground for developers to get started right away. This might be borderline micromanaging, but so far my experience with a detailed list of requirements has been very good.&lt;/p&gt;
  293. &lt;h2 id=&quot;doing-the-hand-off&quot;&gt;Doing the hand-off&lt;/h2&gt;
  294. &lt;p&gt;When you think you’re done with your ticket, present it to your team lead, designers and developers. Do they have any questions or suggestions? Update the ticket or design accordingly. By this point, the amount of work to adjust something should be very little.&lt;/p&gt;
  295. &lt;p&gt;If everyone’s happy, start hacking or create the next ticket. đŸ€—&lt;/p&gt;
  296. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  297. &lt;p&gt;To sum it up, the structure of your ticket could look like this:&lt;/p&gt;
  298. &lt;ul&gt;
  299. &lt;li&gt;User story
  300. &lt;ul&gt;
  301. &lt;li&gt;Brief and general description of the expected user experience&lt;/li&gt;
  302. &lt;/ul&gt;
  303. &lt;/li&gt;
  304. &lt;li&gt;Tasks
  305. &lt;ul&gt;
  306. &lt;li&gt;Describing which HTML elements, font-sizes and colours should be used&lt;/li&gt;
  307. &lt;li&gt;Describing functionality, for example a redirect&lt;/li&gt;
  308. &lt;/ul&gt;
  309. &lt;/li&gt;
  310. &lt;li&gt;Design
  311. &lt;ul&gt;
  312. &lt;li&gt;Add a link to the design in Figma, Sketch, Adobe XD, whatever you use&lt;/li&gt;
  313. &lt;li&gt;Add the following pictures to the ticket:
  314. &lt;ul&gt;
  315. &lt;li&gt;Smallest &amp;#x26; largest viewport&lt;/li&gt;
  316. &lt;li&gt;Alt-Text annotation&lt;/li&gt;
  317. &lt;li&gt;Focus order annotation&lt;/li&gt;
  318. &lt;li&gt;Headings annotation&lt;/li&gt;
  319. &lt;li&gt;Landmarks annotation&lt;/li&gt;
  320. &lt;li&gt;Spacing annotation (nice-to-have)&lt;/li&gt;
  321. &lt;/ul&gt;
  322. &lt;/li&gt;
  323. &lt;/ul&gt;
  324. &lt;/li&gt;
  325. &lt;/ul&gt;
  326. &lt;p&gt;All of this can take a while to prepare and might require a bigger shift in your work flow. But in the long run every party involved (product owner, designer, developer) will benefit from a well documented design and ticket.&lt;/p&gt;
  327. &lt;p&gt;Because now you’re not saying “fuck-off” anymore when delivering your work, but doing a proper hand-off.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Webmentions in Astro (for blog posts)</title><link>https://www.stevefrenzel.dev/blog/webmentions-in-astro-for-blog-posts/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/webmentions-in-astro-for-blog-posts/</guid><description>Code for you to copy and things for me to learn. This blog became part of the IndieWeb! đŸ’„</description><pubDate>Wed, 22 May 2024 00:00:00 GMT</pubDate><content:encoded>&lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  328. &lt;ul&gt;
  329. &lt;li&gt;&lt;a href=&quot;#tldr&quot;&gt;TL;DR&lt;/a&gt;&lt;/li&gt;
  330. &lt;li&gt;&lt;a href=&quot;#how-i-got-hooked&quot;&gt;How I got hooked&lt;/a&gt;&lt;/li&gt;
  331. &lt;li&gt;&lt;a href=&quot;#taking-a-step-back&quot;&gt;Taking a step back&lt;/a&gt;&lt;/li&gt;
  332. &lt;li&gt;&lt;a href=&quot;#implementing-it&quot;&gt;Implementing it&lt;/a&gt;&lt;/li&gt;
  333. &lt;li&gt;&lt;a href=&quot;#my-webmentions-component&quot;&gt;My Webmentions component&lt;/a&gt;&lt;/li&gt;
  334. &lt;li&gt;&lt;a href=&quot;#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  335. &lt;/ul&gt;
  336. &lt;h2 id=&quot;tldr&quot;&gt;TL;DR&lt;/h2&gt;
  337. &lt;p&gt;You want to get started right away? Add this code to your &lt;a href=&quot;https://docs.astro.build/en/basics/astro-components/#the-component-script&quot;&gt;Component Script&lt;/a&gt; in your blog post layout and replace &lt;code&gt;YOUR_DOMAIN&lt;/code&gt; with your domain name.&lt;/p&gt;
  338. &lt;p&gt;If there are &lt;a href=&quot;https://www.w3.org/TR/webmention/#introduction&quot;&gt;Webmentions&lt;/a&gt;, you will get back an (empty) array through which you can loop. You can find more information here: &lt;a href=&quot;https://github.com/aaronpk/webmention.io#api&quot;&gt;Find links to a specific page&lt;/a&gt;.&lt;/p&gt;
  339. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; webmentionsUrl&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; import&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;meta&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;.env.&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;PROD&lt;/span&gt;&lt;/span&gt;
  340. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;  ?&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt; `https://webmention.io/api/mentions.jf2?target=https://YOUR_DOMAIN${&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;Astro&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;pathname&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;}`&lt;/span&gt;&lt;/span&gt;
  341. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;  :&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt; `https://webmention.io/api/mentions.jf2?target=https://YOUR_DOMAIN${&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;Astro&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;pathname&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;}/`&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  342. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; response&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; await&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; fetch&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(webmentionsUrl);&lt;/span&gt;&lt;/span&gt;
  343. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; json&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; await&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; response.&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;json&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;();&lt;/span&gt;&lt;/span&gt;
  344. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; webmentions&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; json.children;&lt;/span&gt;&lt;/span&gt;
  345. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  346. &lt;h2 id=&quot;how-i-got-hooked&quot;&gt;How I got hooked&lt;/h2&gt;
  347. &lt;p&gt;I’ve been aware of webmentions peripherally for some time, but hadn’t paid much attention to them until recently. That changed after I saw &lt;a href=&quot;https://www.youtube.com/watch?v=iLxJ6PtuF9M&amp;#x26;t=8542s&quot;&gt;Henry Desroches’ talk at The 11ty International Symposium on Making Web Sites Real Good&lt;/a&gt;!&lt;/p&gt;
  348. &lt;p&gt;So I was feverishly searching for information that would help me to receive, send and display Webmentions in &lt;a href=&quot;https://astro.build/&quot;&gt;Astro&lt;/a&gt;. Fortunately, I found this blog post: &lt;a href=&quot;https://kld.dev/adding-webmentions/&quot;&gt;Adding Webmentions to a static Astro site&lt;/a&gt;.&lt;/p&gt;
  349. &lt;p&gt;Unfortunately, I couldn’t get it to work, partly because the article is a bit outdated (more on that later). And because I’m not really good with &lt;a href=&quot;https://nodejs.org/en&quot;&gt;Node.js&lt;/a&gt;. 👉👈&lt;/p&gt;
  350. &lt;p&gt;As always when I get stuck, I put out a call for help to the Mastodon community and got a lot of suggestions, but almost all of them were for &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt;.&lt;/p&gt;
  351. &lt;p&gt;While I was very grateful for the help, unfortunately it didn’t get me anywhere. I tried a lot, pushed and undid changes. Partly I was successful and something sort of worked. So it was time for:&lt;/p&gt;
  352. &lt;h2 id=&quot;taking-a-step-back&quot;&gt;Taking a step back&lt;/h2&gt;
  353. &lt;p&gt;Before I took care of the Webmentions, I first followed all the steps on &lt;a href=&quot;http://IndieWebify.me&quot;&gt;IndieWebify.me&lt;/a&gt; to successfully make my website and blog posts available on the &lt;a href=&quot;https://indieweb.org/&quot;&gt;IndieWeb&lt;/a&gt;. Then I looked at the &lt;a href=&quot;https://github.com/aaronpk/webmention.io#api&quot;&gt;example URL from the webmention.io repository&lt;/a&gt; and pasted it into my browser:&lt;/p&gt;
  354. &lt;blockquote&gt;
  355. &lt;p&gt;&lt;a href=&quot;https://webmention.io/api/mentions.jf2?target=https://indieweb.org&quot;&gt;https://webmention.io/api/mentions.jf2?target=https://indieweb.org&lt;/a&gt;&lt;/p&gt;
  356. &lt;/blockquote&gt;
  357. &lt;p&gt;Then I thought to myself: Ok, that should also work with my website? It didn’t work with stevefrenzel.dev, nor with stevefrenzel.dev/blog. After I tried it with this blog post URL:&lt;/p&gt;
  358. &lt;blockquote&gt;
  359. &lt;p&gt;&lt;a href=&quot;https://webmention.io/api/mentions.jf2?target=https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&quot;&gt;https://webmention.io/api/mentions.jf2?target=https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&lt;/a&gt;&lt;/p&gt;
  360. &lt;/blockquote&gt;
  361. &lt;p&gt;I got a response, which was this:&lt;/p&gt;
  362. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;json&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{&lt;/span&gt;&lt;/span&gt;
  363. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;type&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;feed&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  364. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Webmentions&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  365. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;children&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: [&lt;/span&gt;&lt;/span&gt;
  366. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {&lt;/span&gt;&lt;/span&gt;
  367. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;type&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;entry&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  368. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;author&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: {&lt;/span&gt;&lt;/span&gt;
  369. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;type&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;card&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  370. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Sara Joy :happy_pepper:&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  371. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;photo&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://webmention.io/avatar/files.mastodon.online/a06118ca119ec1183309db1aa65689d6bd69349b68713fd0c3f49cc5de8ca683.jpg&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  372. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;url&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://front-end.social/@sarajw&quot;&lt;/span&gt;&lt;/span&gt;
  373. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      },&lt;/span&gt;&lt;/span&gt;
  374. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;url&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://mastodon.online/@stvfrnzl/112457754528196561#favorited-by-109297968568930830&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  375. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;published&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;null&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  376. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;2024-05-17T18:51:48Z&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  377. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-id&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;1828656&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  378. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-source&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://brid.gy/like/mastodon/@stvfrnzl@mastodon.online/112457754528196561/109297968568930830&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  379. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-target&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  380. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-protocol&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;webmention&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  381. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;like-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  382. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-property&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;like-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  383. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-private&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;false&lt;/span&gt;&lt;/span&gt;
  384. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    },&lt;/span&gt;&lt;/span&gt;
  385. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {&lt;/span&gt;&lt;/span&gt;
  386. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;type&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;entry&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  387. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;author&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: {&lt;/span&gt;&lt;/span&gt;
  388. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;type&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;card&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  389. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Programming Feed&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  390. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;photo&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://webmention.io/avatar/files.mastodon.online/2a355e8ebe7968eff2c0f472b2ddf0e673bb20294c43adc29145fbe2c2a358e9.png&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  391. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;url&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://newsmast.community/@programming&quot;&lt;/span&gt;&lt;/span&gt;
  392. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      },&lt;/span&gt;&lt;/span&gt;
  393. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;url&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://mastodon.online/@stvfrnzl/112457754528196561#reblogged-by-111653441837787906&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  394. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;published&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;null&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  395. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;2024-05-17T18:25:47Z&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  396. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-id&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;1828650&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  397. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-source&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://brid.gy/repost/mastodon/@stvfrnzl@mastodon.online/112457754528196561/111653441837787906&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  398. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-target&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  399. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-protocol&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;webmention&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  400. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;repost-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  401. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-property&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;repost-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  402. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-private&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;false&lt;/span&gt;&lt;/span&gt;
  403. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    },&lt;/span&gt;&lt;/span&gt;
  404. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {&lt;/span&gt;&lt;/span&gt;
  405. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;type&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;entry&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  406. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;author&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: {&lt;/span&gt;&lt;/span&gt;
  407. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;type&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;card&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  408. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Journalism &amp;#x26; Comment Feed&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  409. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;photo&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://webmention.io/avatar/files.mastodon.online/2a355e8ebe7968eff2c0f472b2ddf0e673bb20294c43adc29145fbe2c2a358e9.png&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  410. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;        &quot;url&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://newsmast.community/@journalismandcomment&quot;&lt;/span&gt;&lt;/span&gt;
  411. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      },&lt;/span&gt;&lt;/span&gt;
  412. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;url&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://mastodon.online/@stvfrnzl/112457754528196561#reblogged-by-111653306305749482&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  413. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;published&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;null&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  414. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;2024-05-17T18:25:46Z&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  415. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-id&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;1828649&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  416. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-source&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://brid.gy/repost/mastodon/@stvfrnzl@mastodon.online/112457754528196561/111653306305749482&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  417. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-target&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  418. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-protocol&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;webmention&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  419. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;repost-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://stevefrenzel.dev/posts/from-boot-camp-to-blog-five-years-in-the-tech-industry/&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  420. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-property&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;repost-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  421. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;wm-private&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;false&lt;/span&gt;&lt;/span&gt;
  422. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    }&lt;/span&gt;&lt;/span&gt;
  423. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  ]&lt;/span&gt;&lt;/span&gt;
  424. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  425. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  426. &lt;p&gt;Sweet, now we’re talking! Let’s try to make this work with Astro. 👏&lt;/p&gt;
  427. &lt;h2 id=&quot;implementing-it&quot;&gt;Implementing it&lt;/h2&gt;
  428. &lt;p&gt;This is the bare minimum I need to make them available in the respective blog post. Feel free to expand, change and configure it to your personal needs. We’ll go through the code line by line:&lt;/p&gt;
  429. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; webmentionsUrl&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; import&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;meta&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;.env.&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;PROD&lt;/span&gt;&lt;/span&gt;
  430. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;  ?&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt; `https://webmention.io/api/mentions.jf2?target=https://stevefrenzel.dev${&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;Astro&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;pathname&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;}`&lt;/span&gt;&lt;/span&gt;
  431. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;  :&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt; `https://webmention.io/api/mentions.jf2?target=https://stevefrenzel.dev${&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;Astro&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;pathname&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;}/`&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  432. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  433. &lt;p&gt;This part is very interesting and has given me a lot of headaches. Remember when I mentioned that the article above is a bit outdated?&lt;/p&gt;
  434. &lt;p&gt;It says that you access the environment variables using &lt;code&gt;process.env.WEBMENTION_API_KEY&lt;/code&gt;. This no longer works in Astro, because you need &lt;code&gt;import.meta.env.WEBMENTION_API_KEY&lt;/code&gt;, as you can read in the &lt;a href=&quot;https://docs.astro.build/en/guides/environment-variables/#default-environment-variables&quot;&gt;Astro documentation&lt;/a&gt;.&lt;/p&gt;
  435. &lt;p&gt;Why is this relevant if I don’t use an API key at all? After I proudly pushed my code with the working Webmentions, I noticed that nothing was visible online.&lt;/p&gt;
  436. &lt;p&gt;No problems with the commit, no problems with the build, no error message in the console, nothing. Why do they work locally but not in production?&lt;/p&gt;
  437. &lt;p&gt;Quite simple: A trailing slash is required live, but not locally
 I can’t believe that a slash cost me so much time and nerves. đŸ€Šâ€â™‚ïž&lt;/p&gt;
  438. &lt;p&gt;This &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator&quot;&gt;ternary operator&lt;/a&gt; is used to check whether my server is in &lt;code&gt;production&lt;/code&gt; or &lt;code&gt;development&lt;/code&gt; mode. Accordingly, it has a slash at the end, or not.&lt;/p&gt;
  439. &lt;p&gt;To reference the current file pathname, I’m using the &lt;a href=&quot;https://docs.astro.build/en/reference/api-reference/#astrourl&quot;&gt;Astro global&lt;/a&gt;, which is available in all contexts in &lt;code&gt;.astro&lt;/code&gt; files&lt;/p&gt;
  440. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; response&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; await&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; fetch&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(webmentionsUrl);&lt;/span&gt;&lt;/span&gt;
  441. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  442. &lt;p&gt;Here we’re leveraging the powerful &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/fetch&quot;&gt;fetch() method of the Web API&lt;/a&gt;. We do an asynchronous call to retrieve all the content of this call and turn it into a JavaScript object with the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Response/json&quot;&gt;json() method&lt;/a&gt;:&lt;/p&gt;
  443. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; json&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; await&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; response.&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;json&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;();&lt;/span&gt;&lt;/span&gt;
  444. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  445. &lt;p&gt;As we’re just interested in the children of this object, we store them accordingly in a variable:&lt;/p&gt;
  446. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; webmentions&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; json.children;&lt;/span&gt;&lt;/span&gt;
  447. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  448. &lt;p&gt;And that’s it! Now you can loop through this array to your liking and display all the content however you want. I created a &lt;code&gt;Webmentions.astro&lt;/code&gt; component to do just that.&lt;/p&gt;
  449. &lt;h2 id=&quot;my-webmentions-component&quot;&gt;My Webmentions component&lt;/h2&gt;
  450. &lt;p&gt;Let’s brake it down into chunks and see what I did in the Component Script:&lt;/p&gt;
  451. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;---&lt;/span&gt;&lt;/span&gt;
  452. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;import&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; { Image } &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;from&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt; &quot;astro:assets&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  453. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  454. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;interface&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; AuthorProps&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  455. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;  name&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  456. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;  photo&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  457. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;  url&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  458. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  459. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  460. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;interface&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; WebmentionProps&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  461. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;  author&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; AuthorProps&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  462. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;  &quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  463. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;  &quot;wm-property&quot;&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  464. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  465. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  466. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;interface&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; Props&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  467. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;  webmentions&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; WebmentionProps&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;[];&lt;/span&gt;&lt;/span&gt;
  468. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  469. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  470. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; { &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;webmentions&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; } &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; Astro.props;&lt;/span&gt;&lt;/span&gt;
  471. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  472. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; showDate&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; =&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;webmention&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; string&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;) &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&gt;&lt;/span&gt;&lt;/span&gt;
  473. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;  new&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; Date&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(webmention).&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;toLocaleDateString&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;undefined&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;, {&lt;/span&gt;&lt;/span&gt;
  474. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    day: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;numeric&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  475. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    month: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;long&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  476. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    year: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;numeric&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  477. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  });&lt;/span&gt;&lt;/span&gt;
  478. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;---&lt;/span&gt;&lt;/span&gt;
  479. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  480. &lt;p&gt;Nothing too fancy, just some type definitions and a method to show a human readable date. Moving on to the &lt;a href=&quot;https://docs.astro.build/en/basics/astro-components/#the-component-template&quot;&gt;Component Template&lt;/a&gt;:&lt;/p&gt;
  481. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;javascript&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{&lt;/span&gt;&lt;/span&gt;
  482. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  webmentions.&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;length&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; ?&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; (&lt;/span&gt;&lt;/span&gt;
  483. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;section&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-label&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Webmentions&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  484. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h2&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Webmentions&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h2&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  485. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  486. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;ul&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  487. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        {webmentions.&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;map&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;((&lt;/span&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;webmention&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; WebmentionProps&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;) &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&gt;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; (&lt;/span&gt;&lt;/span&gt;
  488. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;          &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;li&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  489. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;            &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;avatar-and-author&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  490. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              {webmention.author.photo &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;?&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; (&lt;/span&gt;&lt;/span&gt;
  491. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;Image&lt;/span&gt;&lt;/span&gt;
  492. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;                  alt&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;/span&gt;
  493. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;                  height&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;50&quot;&lt;/span&gt;&lt;/span&gt;
  494. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;                  src&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{webmention.author.photo}&lt;/span&gt;&lt;/span&gt;
  495. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;                  width&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;50&quot;&lt;/span&gt;&lt;/span&gt;
  496. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                /&gt;&lt;/span&gt;&lt;/span&gt;
  497. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              ) &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; null&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  498. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; href&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{webmention.author.url} &lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;rel&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;author&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  499. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                {webmention.author.name}&lt;/span&gt;&lt;/span&gt;
  500. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  501. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;            &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  502. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;            &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;information&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  503. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              {webmention[&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;wm-property&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;] &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;===&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt; &quot;like-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; ?&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; (&lt;/span&gt;&lt;/span&gt;
  504. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;p&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  505. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                  Liked on&lt;/span&gt;&lt;/span&gt;
  506. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;time&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-hidden&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; datetime&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{webmention[&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;]}&gt;&lt;/span&gt;&lt;/span&gt;
  507. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                    {&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;showDate&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(webmention[&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;])}&lt;/span&gt;&lt;/span&gt;
  508. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;time&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  509. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;p&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  510. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              ) &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; null&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  511. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              {webmention[&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;wm-property&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;] &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;===&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt; &quot;repost-of&quot;&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; ?&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; (&lt;/span&gt;&lt;/span&gt;
  512. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;p&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  513. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                  Reposted on&lt;/span&gt;&lt;/span&gt;
  514. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;time&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-hidden&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; datetime&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{webmention[&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;]}&gt;&lt;/span&gt;&lt;/span&gt;
  515. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                    {&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;showDate&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(webmention[&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;wm-received&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;])}&lt;/span&gt;&lt;/span&gt;
  516. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;time&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  517. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;                &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;p&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  518. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;              ) &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; null&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  519. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;            &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  520. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;          &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;li&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  521. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        ))}&lt;/span&gt;&lt;/span&gt;
  522. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;ul&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  523. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;section&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  524. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  ) &lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; null&lt;/span&gt;&lt;/span&gt;
  525. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  526. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  527. &lt;p&gt;If the array of Webmentions is empty, I don’t show this component at all, so it’s gonna equal &lt;code&gt;null&lt;/code&gt;.&lt;/p&gt;
  528. &lt;p&gt;If they’re present, I’ll show the author picture, or not. And depending on the type of Webmention (like or repost), I’ll show just that.&lt;/p&gt;
  529. &lt;p&gt;The current implementation looks like this, but it’s gonna change for sure. If you’re curios regarding the styling, have a &lt;a href=&quot;https://github.com/stevefrenzel/dev-portfolio/blob/main/src/components/utils/Webmentions.astro&quot;&gt;look at the code on GitHub&lt;/a&gt;.&lt;/p&gt;
  530. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/webmentions-screenshot.Ns3DVx_X_1kLaT1.webp&quot; alt=&quot;Webmentions section from my website, showing the headline and three Webmentions. One is a like, the other two are reposts.&quot; width=&quot;1482&quot; height=&quot;754&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  531. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  532. &lt;p&gt;Those few lines of code were a whole weekend of trying back and forth and I’m glad I stuck with it. I like the idea of an open, decentralized web that isn’t dependent on monolithic companies &lt;em&gt;doing devious and evil 2024 website things&lt;/em&gt;. &lt;sup&gt;&lt;a href=&quot;#user-content-fn-1&quot; id=&quot;user-content-fnref-1&quot; data-footnote-ref=&quot;&quot; aria-describedby=&quot;footnote-label&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
  533. &lt;p&gt;I hope this article helps other Astro users to integrate Webmentions more easily into their blog and I would be happy to receive many Webmentions so that I have more data to work with and can update this article accordingly. ✌&lt;/p&gt;
  534. &lt;section data-footnotes=&quot;&quot; class=&quot;footnotes&quot;&gt;&lt;h2 class=&quot;sr-only&quot; id=&quot;footnote-label&quot;&gt;Footnotes&lt;/h2&gt;
  535. &lt;ol&gt;
  536. &lt;li id=&quot;user-content-fn-1&quot;&gt;
  537. &lt;p&gt;Quote from &lt;a href=&quot;https://csscade.com/membership/#1-i-like-the-simplicity&quot;&gt;The Cascade&lt;/a&gt; &lt;a href=&quot;#user-content-fnref-1&quot; data-footnote-backref=&quot;&quot; aria-label=&quot;Back to reference 1&quot; class=&quot;data-footnote-backref&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
  538. &lt;/li&gt;
  539. &lt;/ol&gt;
  540. &lt;/section&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>From boot camp to blog: Five years in the tech industry</title><link>https://www.stevefrenzel.dev/blog/from-boot-camp-to-blog-five-years-in-the-tech-industry/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/from-boot-camp-to-blog-five-years-in-the-tech-industry/</guid><description>It&apos;s been quite a ride and I haven&apos;t even mentioned all of it in this giant article. đŸ„”</description><pubDate>Fri, 17 May 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Five years ago today, I received my certificate from the &lt;a href=&quot;https://www.spiced-academy.com/en&quot;&gt;Spiced Academy&lt;/a&gt;, which recognized me as a “Fullstack Developer”. Time to look back and evaluate whether this decision was worth it for me, what I have experienced and learned about the industry so far.&lt;/p&gt;
  541. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  542. &lt;ul&gt;
  543. &lt;li&gt;&lt;a href=&quot;#first-year-2019-to-2020&quot;&gt;First year: 2019 to 2020&lt;/a&gt;&lt;/li&gt;
  544. &lt;li&gt;&lt;a href=&quot;#second-year-2020-to-2021&quot;&gt;Second year: 2020 to 2021&lt;/a&gt;&lt;/li&gt;
  545. &lt;li&gt;&lt;a href=&quot;#third-year-2021-to-2022&quot;&gt;Third year: 2021 to 2022&lt;/a&gt;&lt;/li&gt;
  546. &lt;li&gt;&lt;a href=&quot;#fourth-year-2022-to-2023&quot;&gt;Fourth year: 2022 to 2023&lt;/a&gt;&lt;/li&gt;
  547. &lt;li&gt;&lt;a href=&quot;#fifth-year-2023-to-2024&quot;&gt;Fifth year: 2023 to 2024&lt;/a&gt;&lt;/li&gt;
  548. &lt;li&gt;&lt;a href=&quot;#the-future&quot;&gt;The future&lt;/a&gt;&lt;/li&gt;
  549. &lt;li&gt;&lt;a href=&quot;#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  550. &lt;/ul&gt;
  551. &lt;h2 id=&quot;first-year-2019-to-2020&quot;&gt;First year: 2019 to 2020&lt;/h2&gt;
  552. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-first-year-min.BuKl7spL_Z8lovm.webp&quot; alt=&quot;Collage of some of the biggest pop culture moments in 2019&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  553. &lt;p&gt;After I graduated, my head was spinning. There was so much input and material that I wanted to catch up on. At the same time, I had to start applying for jobs and stay on the ball so that I would remember what I had just learned.&lt;/p&gt;
  554. &lt;p&gt;Even during the boot camp, I realized that I didn’t like the backend part at all. I did what was asked of me, knowing that I would hopefully never have to deal with it again. Frontend was just so much more fun!&lt;/p&gt;
  555. &lt;p&gt;But here, too, there are many points of contact with the backend, which already confused me at the time. Elly Loel summarized this dilemma very well in her article &lt;a href=&quot;https://www.ellyloel.com/blog/front-end-development-s-identity-crisis/&quot;&gt;Front-end development’s identity crisis&lt;/a&gt;.&lt;/p&gt;
  556. &lt;h3 id=&quot;keep-on-grinding&quot;&gt;Keep on grinding&lt;/h3&gt;
  557. &lt;p&gt;My main project during the job search was the &lt;a href=&quot;https://github.com/stevefrenzel/mars-rover-picture-search&quot;&gt;Mars Rover Picture Search&lt;/a&gt;, which only exists as a GitHub repository, as I didn’t manage to get the website online at the time. 😂&lt;/p&gt;
  558. &lt;p&gt;I like space stuff, I wasn’t (and still am not) very good at backend stuff, but still I decided to “feel the pain” and improve my skills in this area. In the end, this project and the recommendation of a friend led me to land my first job.&lt;/p&gt;
  559. &lt;p&gt;Before that happened, however, I had to spend a lot of time on LinkedIn and make various recruiters aware that I was happy about their offers, but that I didn’t have the several years of experience they were so impressed by. I don’t remember the application phase very well, but I do remember my very first coding challenge:&lt;/p&gt;
  560. &lt;h3 id=&quot;the-interview-phase&quot;&gt;The interview phase&lt;/h3&gt;
  561. &lt;p&gt;This was live in front of an experienced developer and for me one of the most stressful situations I have experienced. Needless to say, I blacked out and got absolutely nothing together.&lt;/p&gt;
  562. &lt;p&gt;I also remember an interview where I made it to the final round (of several), was invited in person, only to be told a little later that I didn’t have enough experience for the position.&lt;/p&gt;
  563. &lt;p&gt;Oops, didn’t I mention that when I said I had no work experience in this field and therefore just completed a coding boot camp? Sorry, my bad.&lt;/p&gt;
  564. &lt;h3 id=&quot;landing-the-first-job&quot;&gt;Landing the first job&lt;/h3&gt;
  565. &lt;p&gt;And so five months went by before I had an interview with an &lt;a href=&quot;https://en.wikipedia.org/wiki/Internet_of_things&quot;&gt;Internet of Things&lt;/a&gt; company. Not only did we get on very well personally, they also seemed to be impressed by my side project and my career to date. So much so that they hired me! đŸ˜±&lt;/p&gt;
  566. &lt;p&gt;Until the end of the year, I worked a lot with &lt;a href=&quot;https://react.dev/&quot;&gt;React&lt;/a&gt;, &lt;a href=&quot;https://storybook.js.org/&quot;&gt;Storybook&lt;/a&gt; and &lt;a href=&quot;https://helpx.adobe.com/xd/get-started.html&quot;&gt;Adobe XD&lt;/a&gt; and was very happy that the company was so small and the communication lines were short. The office was in a nice co-working space and my commute was short, good times.&lt;/p&gt;
  567. &lt;p&gt;To get to this point, however, I had gone through a long, exhausting process. I only got this job through a personal recommendation. Not through my LinkedIn profile or my cover letter, but because someone said “you should meet Steve”.&lt;/p&gt;
  568. &lt;p&gt;I then put the ball over the line into the goal during the interview, but I was only given this opportunity because someone else helped me (thank you Ingrid ❀).&lt;/p&gt;
  569. &lt;h3 id=&quot;imposter-syndrome&quot;&gt;Imposter syndrome&lt;/h3&gt;
  570. &lt;p&gt;I had many different jobs before my time at boot camp, where I never had the feeling that I would be thrown out because I wasn’t good enough. I was often thrown in at the deep end and did well by learning by doing. But for some reason it was different during the boot camp. 😅&lt;/p&gt;
  571. &lt;p&gt;Especially when I saw how good some people were with &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/javascript&quot;&gt;JavaScript&lt;/a&gt;, I often thought to myself: You’ll never find a job. Interestingly, in my cohort, these people had less of a knack for visual design than those who felt more comfortable with CSS (like me).&lt;/p&gt;
  572. &lt;p&gt;My &lt;a href=&quot;https://en.wikipedia.org/wiki/Impostor_syndrome&quot;&gt;imposter syndrome&lt;/a&gt; didn’t just get stronger during the first job, after all, losing my job would have threatened my existence. It also grew a little bit every time I watched video tutorials by well-known developers from the “scene”. I asked myself: Do I have to make videos now to learn in public? Will it be easier for me to find a job if I have a blog?&lt;/p&gt;
  573. &lt;p&gt;At this point, the answer is clearly no.&lt;/p&gt;
  574. &lt;h2 id=&quot;second-year-2020-to-2021&quot;&gt;Second year: 2020 to 2021&lt;/h2&gt;
  575. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-second-year-min.BWHkTxIz_1wqdOu.webp&quot; alt=&quot;Collage of some of the biggest pop culture moments in 2020&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  576. &lt;p&gt;In February, the time had come: I had the interview in which I was told that I unfortunately couldn’t be there for “financial reasons” and would have to be let go. I remember that day very well because I had just done some cool shit in Storybook and this sudden conversation threw me completely off track.&lt;/p&gt;
  577. &lt;p&gt;Looking back, I realize why it happened: I was just too “junior”. In a very small company, time really is money and you don’t have the luxury of a monolith that is too big to fail.&lt;/p&gt;
  578. &lt;h3 id=&quot;second-job-one-month&quot;&gt;Second job, one month&lt;/h3&gt;
  579. &lt;p&gt;As I still had enough muscle memory, it was easy for me to apply for other jobs straight away. I quickly came into contact with a company that was developing a cash back app based on &lt;a href=&quot;https://mui.com/&quot;&gt;Material UI&lt;/a&gt;. I can’t remember how the contact came about, maybe it was because I approached the company directly.&lt;/p&gt;
  580. &lt;p&gt;The interview was strange and my gut feeling told me that something was off. But my wallet told me that I needed a job. So I agreed to do a coding challenge.&lt;/p&gt;
  581. &lt;p&gt;In this case, I was supposed to use their &lt;a href=&quot;https://www.freecodecamp.org/news/how-apis-work/&quot;&gt;API&lt;/a&gt; to display something with progress bars, I don’t remember what it was. Just the fact that I was supposed to do something with the backend on my own made me very nervous. I didn’t complete the coding challenge in time either, but at least this time I didn’t have to code live.&lt;/p&gt;
  582. &lt;p&gt;At the second interview, we discussed my work and I explained my thought process. That seemed to be enough for them to offer me an employment contract! The job was completely remote and I could work from my own laptop, which was more convenient for me, but in hindsight another red flag.&lt;/p&gt;
  583. &lt;p&gt;When I started the job, I was then asked to change the &lt;a href=&quot;https://reactnative.dev/&quot;&gt;React Native&lt;/a&gt; version of the app to a “desktop version”, i.e. rewrite it to React. Perhaps it was mentioned during the interview that this would be my task. But if that had been the case, I would have immediately said that I had absolutely no idea about React Native. đŸ€·â€â™‚ïž&lt;/p&gt;
  584. &lt;p&gt;My only contact was a backend programmer who worked according to the motto “I don’t need a &lt;a href=&quot;https://en.wikipedia.org/wiki/Graphical_user_interface&quot;&gt;GUI&lt;/a&gt;, I just use the terminal” (direct quote) and was no help at all. One day he even wanted to watch me while working, to make comments, even though he himself said he’s not too familiar with frontend stuff. I felt like in my first interview all over again, having someone experienced watch me, while I have no clue what I’m doing. After several minor panic attacks and a few weeks, it was over and I was laid off. I’m sure that both sides were very happy with this decision.&lt;/p&gt;
  585. &lt;h3 id=&quot;lockdowns-real-second-job-and-a-change-of-scenery&quot;&gt;Lockdowns, (real) second job and a change of scenery&lt;/h3&gt;
  586. &lt;p&gt;The whole lockdown phase is a blur for me, but I think I remember getting my second job through a recruiter. (That one-month interlude doesn’t count for me.) Which is amazing, because so far my experience with them has been very bad, as they either&lt;/p&gt;
  587. &lt;ul&gt;
  588. &lt;li&gt;didn’t even look at my profile but still found my several years of experience with programming language XYZ “impressive”&lt;/li&gt;
  589. &lt;li&gt;realized during the interview that I am not as experienced as expected (see point 1)&lt;/li&gt;
  590. &lt;li&gt;get in touch FOR SURE as soon as they hear something&lt;/li&gt;
  591. &lt;/ul&gt;
  592. &lt;p&gt;I was lucky, however, and this person was able to refer me to a company that put me through several interviews and a coding challenge, but left me with a very positive impression. The only problem was that I would have had to relocate.&lt;/p&gt;
  593. &lt;h3 id=&quot;tschĂŒss-berlin-servus-nĂŒrnberg&quot;&gt;TschĂŒss Berlin, servus NĂŒrnberg!&lt;/h3&gt;
  594. &lt;p&gt;But that was the smallest problem for me, because I was planning to leave the city at that point anyway. They were a little hesitant and said that they would like to have me on the team, but the fact that I live in Berlin would be a problem. I then said “well then, give me a yes and I’ll be on my way to Nuremberg”. Said and done!&lt;/p&gt;
  595. &lt;p&gt;I remember a very good onboarding process and that I was impressed that each of the bosses (from this 250+ employee company) wanted to get to know me personally, even if only briefly. There were also many benefits which were actually attractive and I don’t mean a foosball table, fresh fruit and Friday beers. The tech stack was &lt;a href=&quot;https://nextjs.org/&quot;&gt;Next.js&lt;/a&gt;, Storybook, TypeScript and &lt;a href=&quot;https://www.figma.com/&quot;&gt;Figma&lt;/a&gt;, at least the main tools.&lt;/p&gt;
  596. &lt;p&gt;During this time, I had the privilege of working on several projects with various excellent and experienced designers and developers. As a result, I not only got to know different colleagues, but also different ways of working, different characters and different ways of writing code.&lt;/p&gt;
  597. &lt;p&gt;One of the biggest plus points was that I had a personal mentor with whom I not only got on extremely well (he was also a music nerd), but with whom I also developed a joint curriculum. This included getting better at &lt;a href=&quot;https://www.typescriptlang.org/&quot;&gt;TypeScript&lt;/a&gt; and so far I can’t say that’s the case. 😂&lt;/p&gt;
  598. &lt;p&gt;I also learned how important it is to stick to the definition of done and that it is an advantage to have strict but friendly colleagues who slap you on the wrist if you don’t do exactly that.&lt;/p&gt;
  599. &lt;p&gt;Despite the large number of employees, communication internally was very good in my opinion and it didn’t feel so big. Meeting various colleagues in person was also very nice and I definitely let myself go at a summer party. đŸ»&lt;/p&gt;
  600. &lt;p&gt;Thanks to my employer, I also had the opportunity to give an (online) presentation on the topic of web accessibility at &lt;a href=&quot;https://nuernberg.digital/programm/programmuebersicht/details-vorschau/the-benefits-of-an-accessible-website-with-a-practical-example.html&quot;&gt;NĂŒrnberg Digital&lt;/a&gt;. Rarely have I been so excited and rarely have I put so much work into a presentation, as I also built a website with Next.js especially for it. Which I cannot find on my GitHub account, so I assume I created it with my work account, to which I have no access. 🙃&lt;/p&gt;
  601. &lt;p&gt;Unfortunately, there were technical problems and my presentation was not recorded. Nevertheless, I had a great time, was very satisfied with the organization and especially with the questions I was asked after the presentation.&lt;/p&gt;
  602. &lt;h3 id=&quot;obsessing-with-web-accessibility&quot;&gt;Obsessing with web accessibility&lt;/h3&gt;
  603. &lt;p&gt;It was during this period that I became very interested in web accessibility. The initial spark was after a colleague gave me &lt;a href=&quot;https://inclusive-components.design/&quot;&gt;Inclusive Components by Heydon Pickering&lt;/a&gt;, which I just soaked up. Not only did I enjoy his dry, British humor, but he also showed me how important and impactful it can be to master the basics of HTML, CSS and JavaScript.&lt;/p&gt;
  604. &lt;p&gt;From then on, I dove deep into the Twitter bubble to follow various people who were making waves in the scene and making a big contribution:&lt;/p&gt;
  605. &lt;ul&gt;
  606. &lt;li&gt;&lt;a href=&quot;https://adrianroselli.com/&quot;&gt;Adrian Roselli&lt;/a&gt;&lt;/li&gt;
  607. &lt;li&gt;&lt;a href=&quot;https://www.sarasoueidan.com/&quot;&gt;Sara Soueidan&lt;/a&gt;&lt;/li&gt;
  608. &lt;li&gt;&lt;a href=&quot;https://piccalil.li/author/andy-bell&quot;&gt;Andy Bell&lt;/a&gt;&lt;/li&gt;
  609. &lt;li&gt;&lt;a href=&quot;https://thinkdobecreate.com/&quot;&gt;Stephanie Eckles&lt;/a&gt;&lt;/li&gt;
  610. &lt;li&gt;&lt;a href=&quot;https://nerdy.dev/&quot;&gt;Adam Argyle&lt;/a&gt;&lt;/li&gt;
  611. &lt;li&gt;&lt;a href=&quot;https://yatil.net/&quot;&gt;Eric Eggert&lt;/a&gt;&lt;/li&gt;
  612. &lt;/ul&gt;
  613. &lt;p&gt;And many others that I discovered as mentors. I also learned that to keep tabs on the scene and what’s latest and hottest, subscribing to certain newsletters is key to stay ahead of the curve. So my e-mail inbox and Twitter became my most important research tool.&lt;/p&gt;
  614. &lt;p&gt;During that time, it was already clear that the &lt;a href=&quot;https://www.tpgi.com/european-accessibility-act-eaa-resource-center/&quot;&gt;European Accessibility Act&lt;/a&gt; (or EAA) would come into force and I saw it as a sign to make this topic my focus. I was also given a lot of freedom to express myself, even if it was not (yet) a priority. That wasn’t a problem for me, I had only just discovered it for myself and there was still a lot to learn.&lt;/p&gt;
  615. &lt;p&gt;What did become a problem over time, however, was my pay. I was officially a junior and was paid accordingly, which was no longer compatible with ever-increasing costs (and an upcoming wedding).&lt;/p&gt;
  616. &lt;h3 id=&quot;dabbling-with-freelancing&quot;&gt;Dabbling with freelancing&lt;/h3&gt;
  617. &lt;p&gt;At that time, I also started to earn some money on the side as a freelancer because I needed money for my wedding. It was always frontend positions that I applied for, but in these interviews I made it clear that I wanted to focus on web accessibility.&lt;/p&gt;
  618. &lt;p&gt;I had worked with a few companies, but often only for a short time because I wasn’t producing results fast enough. That’s my biggest problem with working as a freelancer: there’s no time to really get to know colleagues, the tech stack and the company because it costs the company money.&lt;/p&gt;
  619. &lt;p&gt;I also often had the problem that the tech stack was too new to me and colleagues didn’t have time to help me. It was an interesting trip, but I’m glad that I no longer have to do it on the side. Also because in the end it cost me more money than it made, because you have to pay incredibly high taxes in Germany.&lt;/p&gt;
  620. &lt;p&gt;At least if you’re not a millionaire, there are ways around it, but that’s a completely different topic
&lt;/p&gt;
  621. &lt;h2 id=&quot;third-year-2021-to-2022&quot;&gt;Third year: 2021 to 2022&lt;/h2&gt;
  622. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-third-year-min.Bq1pKZgT_1rdi8O.webp&quot; alt=&quot;Collage of some of the biggest pop culture moments in 2021&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  623. &lt;p&gt;I was very happy with the job and my colleagues, but pay also plays an important role. So after two years, I felt it was time for a pay raise. Both parties were happy with each other and they wanted to give me more responsibility, but unfortunately this wasn’t reflected in the salary.&lt;/p&gt;
  624. &lt;p&gt;For this reason, we unfortunately had to go our separate ways, as I received a VERY good offer (from a recruiter) and the tech stack was very similar to my previous one (switch out Next.js with &lt;a href=&quot;https://nuxt.com/&quot;&gt;Nuxt.js&lt;/a&gt;). There were also only two interviews. The first was with all my future colleagues, who asked me various personal and programming-related questions.&lt;/p&gt;
  625. &lt;p&gt;When it came to JavaScript-specific questions, I started to sweat a bit and didn’t know the answers to many of them. A few days after the interview, the recruiter contacted me again to ask how it went. I said that I was a bit overwhelmed that there were so many people in the meeting, but that it went quite well until the JavaScript questions came up. Everyone was very nice and I could imagine working with them, but I thought that I screwed up so badly (hello, imposter syndrome) that it wasn’t going to work out anyway.&lt;/p&gt;
  626. &lt;p&gt;He then told me that my future boss would like to meet me in person to clarify the details of my employment with me. At first I thought I had misheard him, but they wanted to work with me despite my problems in the interview and my non-existent backend knowledge.&lt;/p&gt;
  627. &lt;p&gt;During the interview, I made it clear once again that the topic of web accessibility was very important to me and that I wanted to focus on it as much as possible during my work. I was told that they would be happy if someone would take on this topic and that they would try to support me as much as possible. Done deal. đŸ€&lt;/p&gt;
  628. &lt;p&gt;That was towards the end of the year and I got to know my colleagues and tech stack in a relaxed way before going on Christmas vacation.&lt;/p&gt;
  629. &lt;h2 id=&quot;fourth-year-2022-to-2023&quot;&gt;Fourth year: 2022 to 2023&lt;/h2&gt;
  630. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/4-fourth-year-min.DyEpYa6O_Z1XiQcq.webp&quot; alt=&quot;Collage of some of the biggest pop culture moments in 2022&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  631. &lt;p&gt;Maybe I wasn’t done with freelancing after all, because I focused even more on web accessibility than before and started giving workshops for small companies, back then with &lt;a href=&quot;https://www.figma.com/figjam/&quot;&gt;FigJam&lt;/a&gt;. The best way for me to learn is to talk about a topic in front of others, get feedback from participants and thus work on myself and my workshops.&lt;/p&gt;
  632. &lt;p&gt;This year I’ve also left my footprints more and more in the area of web accessibility within my company. Also to make it clear to them that the EAA is very likely to affect us and that we still have enough time for training and adjustments.&lt;/p&gt;
  633. &lt;p&gt;In October of this year, it was also time for me to say goodbye to Twitter &lt;a href=&quot;https://edition.cnn.com/2022/10/28/tech/elon-musk-twitter-deal-close/index.html&quot;&gt;after Elon Musk bought it&lt;/a&gt;. One of his first moves was to &lt;a href=&quot;https://techcrunch.com/2022/11/04/elon-musk-twitter-layoffs/?guccounter=1&quot;&gt;axe the accessibility team&lt;/a&gt;, which would become one of many nails in that coffin. I had signed up long before that, but now it was time for me to make myself comfortable on Mastodon and become more active there. 👏&lt;/p&gt;
  634. &lt;h3 id=&quot;teaching-at-spiced-academy&quot;&gt;Teaching at Spiced Academy&lt;/h3&gt;
  635. &lt;p&gt;Sometimes I randomly check the Spiced Academy Slack channel, which I still have access to. There I saw that they were looking for teachers in the field of UI &amp;#x26; UX who were familiar with the topic of accessibility, among other subjects.&lt;/p&gt;
  636. &lt;p&gt;I wasn’t interested in this job, but suggested that I could tell the students something about the topic. After an introductory meeting with the super nice head coach Boaz, I was invited to talk about the topic for half an hour.&lt;/p&gt;
  637. &lt;p&gt;And although I was late because I drove to the wrong street with the same name, I still managed to do just that. And I had a blast! The people from Spiced also liked it, which is why I was invited back afterwards and introduced as an “expert”.&lt;/p&gt;
  638. &lt;p&gt;I was very flattered, but I had to make it clear that I’m more of an enthusiast than an expert. 😅 If there was an opportunity for me to teach online on this topic at Spiced, I would be seriously interested.&lt;/p&gt;
  639. &lt;h2 id=&quot;fifth-year-2023-to-2024&quot;&gt;Fifth year: 2023 to 2024&lt;/h2&gt;
  640. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/5-fifth-year-min.CZb2r3Us_10e646.webp&quot; alt=&quot;Collage of some of the biggest pop culture moments in 2023&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  641. &lt;p&gt;After many failed iterations, I finally managed to put &lt;a href=&quot;https://stevefrenzel.dev/&quot;&gt;my personal website&lt;/a&gt; online. Shortly after I did that, I decided to start blogging as there were and are enough topics for me to write about.&lt;/p&gt;
  642. &lt;p&gt;By the way, the tech stack of my website is &lt;a href=&quot;https://astro.build/&quot;&gt;Astro&lt;/a&gt;, nothing else! It combines the best of all worlds for me: I can write with a &lt;a href=&quot;https://en.wikipedia.org/wiki/Component-based_software_engineering&quot;&gt;component based approach&lt;/a&gt; using only HTML, CSS and JavaScript and the result is a static website without JavaScript payload. And I even managed to include an RSS feed! 🚀&lt;/p&gt;
  643. &lt;p&gt;I’ve also tried working with &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt; (or 11ty) again and again, because the community is large, active and very helpful, but it’s still too abstract for me. It just flows better with Astro, what can I say?&lt;/p&gt;
  644. &lt;h3 id=&quot;from-figjam-to-ia-presenter&quot;&gt;From FigJam to iA Presenter&lt;/h3&gt;
  645. &lt;p&gt;When I did a workshop with FigJam once, I noticed that it took us quite some time to set everything up, as my participants didn’t have a Figma account and I needed to walk them through how to get everything working. As this presented many barriers for a workshop teaching how to REMOVE barriers, I had to come up with a different solution.&lt;/p&gt;
  646. &lt;p&gt;I saw a post once by Andy Bell where he praised &lt;a href=&quot;https://ia.net/writer&quot;&gt;iA Writer&lt;/a&gt; and when checking it out, I noticed they also offer a product called &lt;a href=&quot;https://ia.net/presenter&quot;&gt;iA Presenter&lt;/a&gt;. This seemed to be the perfect solution for my problem, as I would be able to create simple, clean presentations, write them in &lt;a href=&quot;https://www.markdownguide.org/getting-started/#what-is-markdown&quot;&gt;Markdown&lt;/a&gt; and export them to a plethora of formats. The speed of creating a whole presentation with this app still amazes me.&lt;/p&gt;
  647. &lt;p&gt;One thing that concerned me though, was the misuse of headings. iA advertised to use the headings levels based on their styling to achieve a certain look, which is very bad practice, as &lt;a href=&quot;https://webaim.org/projects/screenreadersurvey9/#heading&quot;&gt;heading levels are super important for screen reader users&lt;/a&gt;. So I pointed this out on Mastodon and their CEO got back to me quickly, offering to discuss this rather complex issue.&lt;/p&gt;
  648. &lt;p&gt;I had a lovely chat with him and understood why they chose this approach. Still I told him to at least educate customers about the issue or even set up guard rails when exporting a presentation. I offered my services if he ever needed help with anything accessibility related and he told me to stay in touch.&lt;/p&gt;
  649. &lt;h3 id=&quot;smashingconf-belgium&quot;&gt;SmashingConf Belgium&lt;/h3&gt;
  650. &lt;p&gt;Thanks to my generous employer, I had the chance to attend the great &lt;a href=&quot;https://smashingconf.com/antwerp-2023&quot;&gt;SmashingConf in Belgium&lt;/a&gt; with a couple of colleagues. It was in a beautiful venue and almost all of the talks were very interesting and inspirational. A learned a lot about the importance typography and UX writing. The most impressive talk was by Nick DiLallo, he’s such a talented speaker and I hope to reach his quality level one day when speaking publicly.&lt;/p&gt;
  651. &lt;p&gt;The most hilarious (and still very informative) one was by Oliver Schöndorfer. This guy’s energy is at 💯, I enjoyed it so much. Brad Frost’s talk about the death of &lt;a href=&quot;https://bradfrost.com/blog/post/atomic-web-design/&quot;&gt;Atomic Design&lt;/a&gt; and his idea of a global design system made out of &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Web_Components&quot;&gt;Web Components&lt;/a&gt; approved by the &lt;a href=&quot;https://www.w3.org/&quot;&gt;W3C&lt;/a&gt; was also super interesting.&lt;/p&gt;
  652. &lt;p&gt;This conference taught me that it’s important to remember that, while our work as developers is very technical in nature, at the end of the day we’re creating something for human beings. Not search engines or “AI”s.&lt;/p&gt;
  653. &lt;h2 id=&quot;the-future&quot;&gt;The future&lt;/h2&gt;
  654. &lt;p&gt;What has already happened this year and what is still to come?&lt;/p&gt;
  655. &lt;h3 id=&quot;mastodon&quot;&gt;Mastodon&lt;/h3&gt;
  656. &lt;p&gt;Mastodon has become a very important tool for me for inspiration and research. While I was very passive on Twitter and hardly posted anything, I’m the exact opposite here. It also helps a lot that there is no algorithm and no advertising, I only see content from the people I follow.&lt;/p&gt;
  657. &lt;h3 id=&quot;the-cpacc-certificate&quot;&gt;The CPACC certificate&lt;/h3&gt;
  658. &lt;p&gt;I am currently studying for the CPACC certificate from the IAAP. These two acronyms stand for &lt;a href=&quot;https://www.accessibilityassociation.org/s/certified-professional&quot;&gt;Certified Professional in Accessibility Core Competencies&lt;/a&gt; and &lt;a href=&quot;https://www.accessibilityassociation.org/s/&quot;&gt;International Association of Accessibility Professionals&lt;/a&gt;.&lt;/p&gt;
  659. &lt;p&gt;While I am somewhat critical of this organization, as they have schmoozed with &lt;a href=&quot;https://overlayfactsheet.com/en/&quot;&gt;accessibility overlay&lt;/a&gt; vendors in the past, preparing for the exam will help me become an even better accessibility advocate. If I pass the exam, I will of course be happy to take the certificate with me, as it could increase my market value and job opportunities. đŸ€—&lt;/p&gt;
  660. &lt;p&gt;By the way, I’m preparing for it with this (paid) course from &lt;a href=&quot;https://dequeuniversity.com/online-courses/web-accessibility&quot;&gt;Deque University&lt;/a&gt; and while it sometimes seems a bit high maintenance, I’ve already learned an extreme amount here. Another excellent and free course is &lt;a href=&quot;https://www.edx.org/learn/web-accessibility/the-world-wide-web-consortium-w3c-introduction-to-web-accessibility?index=product&amp;#x26;objectID=course-8ac6f7ff-0ff9-4894-a5f3-cc34fc5768fa&amp;#x26;webview=false&amp;#x26;campaign=Introduction+to+Web+Accessibility&amp;#x26;source=edX&amp;#x26;product_category=course&amp;#x26;placement_url=https://www.edx.org/learn/web-accessibility&quot;&gt;W3Cx: Introduction to Web Accessibility&lt;/a&gt; from edX.&lt;/p&gt;
  661. &lt;h3 id=&quot;volksverpetzer&quot;&gt;Volksverpetzer&lt;/h3&gt;
  662. &lt;p&gt;The political situation in Germany is currently very critical, as the neo-Nazis of the AfD (Alternative for Germany) are unfortunately gaining more and more ground and are already in a position to co-govern.&lt;/p&gt;
  663. &lt;p&gt;For this reason, I keep myself informed about their schemes and the ban procedure via a platform called &lt;a href=&quot;https://www.volksverpetzer.de/&quot;&gt;Volksverpetzer&lt;/a&gt;. I support not only this but other independent institutions with a donation.&lt;/p&gt;
  664. &lt;p&gt;I offered my services to the Volksverpetzer on the subject of accessibility because I see a lot of potential for improvement on their website and I would like to contribute to something that I am 100% behind. They were open to it and we’ll have a chat soon. đŸ’Ș&lt;/p&gt;
  665. &lt;h3 id=&quot;webmentions&quot;&gt;Webmentions&lt;/h3&gt;
  666. &lt;p&gt;I would like to show in my blog posts to what extent they have been interacted with, but not use a third party product for this. And this is where &lt;a href=&quot;https://indieweb.org/Webmention&quot;&gt;webmentions&lt;/a&gt; come into play. However, it’s not so easy to integrate them into Astro as there isn’t much information available yet. But getting this done is on the bucket list for this year.&lt;/p&gt;
  667. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  668. &lt;p&gt;Since I’ve already written a lot, I’ll keep it short: Switching to this industry to work as a web developer was the best decision I’ve ever made in my professional life.&lt;/p&gt;
  669. &lt;p&gt;I don’t like a lot of things that happen on the web and are considered “normal” or “best practice”. But I now have enough knowledge to be able to educate people on what they can improve to make it a little bit more of a user-friendly place. Which ultimately leads to reducing the legal risk and expanding the customer radius.&lt;/p&gt;
  670. &lt;p&gt;But honestly, making the web accessible to as many people as possible is just the right thing to do. No matter where they come from or what condition they are in.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>1/4 of 2024 in music</title><link>https://www.stevefrenzel.dev/blog/first-quarter-of-2024-in-music/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/first-quarter-of-2024-in-music/</guid><description>We got some Emo, Pop, Rock, Black Metal and even german Pop. Get in, come have some fun!</description><pubDate>Thu, 16 May 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;I usually only associate a few albums with a particular year, even if there were many more that touched and moved me.&lt;/p&gt;
  671. &lt;p&gt;This post is primarily a reminder to myself why I put certain records on this list. But also, of course, to share them with you, dear reader. Maybe one or two are on your own list, or maybe you don’t know them all but are interested in giving them a listen.&lt;/p&gt;
  672. &lt;p&gt;It’s a good mix of genres, maybe there’s something on there? The first quarter has started very well for me musically, let’s see what ended up in my favorites:&lt;/p&gt;
  673. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  674. &lt;ul&gt;
  675. &lt;li&gt;&lt;a href=&quot;#how-to-disappear-by-casey&quot;&gt;“How To Disappear” by Casey&lt;/a&gt;&lt;/li&gt;
  676. &lt;li&gt;&lt;a href=&quot;#obsidian-wreath-by-infant-island&quot;&gt;“Obsidian Wreath” by Infant Island&lt;/a&gt;&lt;/li&gt;
  677. &lt;li&gt;&lt;a href=&quot;#wall-of-eyes-by-the-smile&quot;&gt;“Wall Of Eyes” by The Smile&lt;/a&gt;&lt;/li&gt;
  678. &lt;li&gt;&lt;a href=&quot;#a-city-in-the-skies-by-ulver&quot;&gt;“A City in the Skies” by Ulver&lt;/a&gt;&lt;/li&gt;
  679. &lt;li&gt;&lt;a href=&quot;#effigy-by-talk-show&quot;&gt;“Effigy” by Talk Show&lt;/a&gt;&lt;/li&gt;
  680. &lt;li&gt;&lt;a href=&quot;#close-to-home-by-a-burial-at-sea&quot;&gt;“Close to Home” by A Burial At Sea&lt;/a&gt;&lt;/li&gt;
  681. &lt;li&gt;&lt;a href=&quot;#cold-waves-divide-us-by-midas-fall&quot;&gt;“Cold Waves Divide Us” by Midas Fall&lt;/a&gt;&lt;/li&gt;
  682. &lt;li&gt;&lt;a href=&quot;#eden-by-tua&quot;&gt;“Eden” by Tua&lt;/a&gt;&lt;/li&gt;
  683. &lt;/ul&gt;
  684. &lt;h2 id=&quot;how-to-disappear-by-casey&quot;&gt;”How To Disappear” by Casey&lt;/h2&gt;
  685. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-casey.YRYHGf5I_Z1KOdDu.webp&quot; alt=&quot;An open, white fence with a tree behind it growing plenty of red roses. The photo is grainy and has a warm color, giving it a nostalgic vibe. This scenery is within a thick, red frame with plenty of information below it. Like the track list, artist and album name, as well as production credits.  &quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  686. &lt;p&gt;My first contact with Casey was when I had my training at coding bootcamp. &lt;a href=&quot;https://tidal.com/browse/album/314881390?u&quot;&gt;Love Is Not Enough&lt;/a&gt; was on my radar at the time because it hit that sweet spot between emo and hardcore that I grew to love.&lt;/p&gt;
  687. &lt;p&gt;After I got more involved with the band (and their second album &lt;a href=&quot;https://tidal.com/browse/album/314869863?u&quot;&gt;Where I Go When I Am Sleeping&lt;/a&gt;), I was very sad when I found out that they had broken up.&lt;/p&gt;
  688. &lt;p&gt;So I was all the more delighted when &lt;a href=&quot;https://www.youtube.com/watch?v=Yh16Bqw2uGA&quot;&gt;Puncture Wounds to Heaven&lt;/a&gt; was the first sign of life after five years. There was no doubt in my mind that it would end up at the top of my Top Albums of 2024 without having heard the rest of the record.&lt;/p&gt;
  689. &lt;p&gt;Each subsequent single I soaked up like a sponge and confirmed my prediction even more. I love Casey, especially this record! 😍&lt;/p&gt;
  690. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/322218976?u&quot;&gt;Listen to “How To Disappear” by Casey&lt;/a&gt;&lt;/p&gt;
  691. &lt;h2 id=&quot;obsidian-wreath-by-infant-island&quot;&gt;”Obsidian Wreath” by Infant Island&lt;/h2&gt;
  692. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-infant-island.B-7GHNhH_1UCt52.webp&quot; alt=&quot;A scenery created with water colors. In the night sky, you can see the stars in different colors and shapes. Below them are mountain tops, with no snow on them. In the center and foreground is a huge bonfire with long, wild grass around it. Directly around the fire you can see the soil, with silhouettes of people imprinted on it.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  693. &lt;p&gt;This is one of those records that caught my interest with its artwork. I didn’t know what to expect and was very pleased to hear atmospheric black metal that doesn’t just blast all the way through but also slows down from time to time.&lt;/p&gt;
  694. &lt;p&gt;Especially the vocals, which are sometimes out of breath, hooked me; it makes their music feel very raw and authentic.&lt;/p&gt;
  695. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/317634846?u&quot;&gt;Listen to “Obsidian Wreath” by Infant Island&lt;/a&gt;&lt;/p&gt;
  696. &lt;h2 id=&quot;wall-of-eyes-by-the-smile&quot;&gt;”Wall Of Eyes” by The Smile&lt;/h2&gt;
  697. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-the-smile.ieNPWtMm_Z1jXft7.webp&quot; alt=&quot;Abstract painting with orange and blue as the main colors. The shapes look lik a mix of mountain and waves. Above them are plenty of open eyes, looking at the viewer. The have different sizes and colors. In the foreground is the artist and album name in black, all uppercase letters.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  698. &lt;p&gt;When random songs were played that I might like, something by The Smile came on and I thought to myself “boy, this guy sounds a lot like Thom Yorke!”. Turns out it was another one of his projects! 😂&lt;/p&gt;
  699. &lt;p&gt;If you like Radiohead but with a lot less electronic gimmicks, you should give it a listen. I’d even say it’s a bit unwieldy, but the craftsmanship is world class as you’d expect.&lt;/p&gt;
  700. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/338279162?u&quot;&gt;Listen to “Wall Of Eyes” by The Smile&lt;/a&gt;&lt;/p&gt;
  701. &lt;h2 id=&quot;a-city-in-the-skies-by-ulver&quot;&gt;”A City in the Skies” by Ulver&lt;/h2&gt;
  702. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/4-ulver.CpEG_ETb_2qhVri.webp&quot; alt=&quot;Photograph of what appears to be a mother and her child standing barefoot on a campsite with almost no trees. The mother is touching her face with the back of her hand and looks sad or worried. The child looks to the right and doesn&amp;#38;#x27;t seem too happy either. It has a strong red filter on it, the only other colors being black and white. In the foreground in huge, all uppercase letters is the artist and album name. &quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  703. &lt;p&gt;Ulver have made an incredible transition from black metal to ambient to a proper pop band. On album length I often lost interest after the “hits”, so this EP with its three songs is just right! Also check out &lt;a href=&quot;https://tidal.com/browse/track/231388647?u&quot;&gt;Rolling Stone&lt;/a&gt;, what a banger!&lt;/p&gt;
  704. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/340237152?u&quot;&gt;Listen to “A City in the Skies” by Ulver&lt;/a&gt;&lt;/p&gt;
  705. &lt;h2 id=&quot;effigy-by-talk-show&quot;&gt;”Effigy” by Talk Show&lt;/h2&gt;
  706. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/5-talk-show.D-40vqp4_Z1BTN2X.webp&quot; alt=&quot;A photograph of a brick wall building with three giant antennas on it. The door is open, a graffiti can be seen and red light is coming from the inside. In front of the building are multiple black trash bags. The night sky is pitch black. &quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  707. &lt;p&gt;Another record that only sparked my interest because of its artwork. I would categorize it under electronic garage pop (?) with spoken words lyrics. I don’t really listen to music in this genre, so I can’t make a “for fans of” recommendation here. Listen to it, or don’t. đŸ€·â€â™‚ïž&lt;/p&gt;
  708. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/319710008?u&quot;&gt;Listen to “Effigy” by Talk Show&lt;/a&gt;&lt;/p&gt;
  709. &lt;h2 id=&quot;close-to-home-by-a-burial-at-sea&quot;&gt;”Close to Home” by A Burial At Sea&lt;/h2&gt;
  710. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/6-a-burial-at-sea.CX9g7Ds5_1V70dx.webp&quot; alt=&quot;Photo collage of three girls standing on a rock in the middle of the ocean, with their backs facing to the viewer. Further in the distance are bigger rocks and in the far distance a quarter of what appears to be planet earth. Behind earth is space with a bright, shining star or planet on center left. On the top are the artist and album name in small letters but all uppercase.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  711. &lt;p&gt;To be honest, I thought this was a new &lt;a href=&quot;https://tidal.com/browse/artist/3540799?u&quot;&gt;After The Burial&lt;/a&gt; record, but oops, it’s something completely different! If you’re in the mood for some not-so-typical post-rock with a lot of “happy” mathcore like &lt;a href=&quot;https://tidal.com/browse/artist/7485276?u&quot;&gt;Standards&lt;/a&gt;, then give it a listen.&lt;/p&gt;
  712. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/330869951?u&quot;&gt;Listen to “Close to Home” by A Burial At Sea&lt;/a&gt;&lt;/p&gt;
  713. &lt;h2 id=&quot;cold-waves-divide-us-by-midas-fall&quot;&gt;”Cold Waves Divide Us” by Midas Fall&lt;/h2&gt;
  714. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/7-midas-fall.BbMX3m_a_ZNs40P.webp&quot; alt=&quot;Illustration of several jelly fishes in white and orange layered on top of each other and slightly shifted, to create the impression of movement or shaking. Behind them are several squares angled 45 degrees, which makes it look like they had wings. The background is a grey-ish texture and on the right side ist the artist and album name, all uppercase and 90 degrees tilted.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  715. &lt;p&gt;This record is a real grower and hard to describe. Guitar music in the broadest sense with an incredible, gifted female singer, EXTREMELY thick reverb on the vocals and very good songs.&lt;/p&gt;
  716. &lt;p&gt;Again, my interest was piqued by the cover. I was expecting something more technical and was pleasantly surprised.&lt;/p&gt;
  717. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/328790136?u&quot;&gt;Listen to “Cold Waves Divide Us” by Midas Fall&lt;/a&gt;&lt;/p&gt;
  718. &lt;h2 id=&quot;eden-by-tua&quot;&gt;”Eden” by Tua&lt;/h2&gt;
  719. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/8-tua.d6gmB0pM_28nxRA.webp&quot; alt=&quot;Photograph of what appears to be a man, facing the viewer, dressed in white clothes and barefoot. He has a long, white cloth on his face covering it completely, showing the wind is blowing to the left. He&amp;#38;#x27;s holding a white and yellow motocross bike facing the viewer as well. The scenery is a desert with a few trees and bushes in the background.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  720. &lt;p&gt;My German rap phase is long gone, but Tua has managed to keep my interest over the years. &lt;a href=&quot;https://tidal.com/browse/album/26886042?u&quot;&gt;Stevia&lt;/a&gt; is one of the best German pop albums and the self-tilted &lt;a href=&quot;https://tidal.com/browse/album/199604902?u&quot;&gt;Tua&lt;/a&gt; is in no way inferior, even if the rap portion was a bit too much for me. Still he’s one of the best producers and songwriters in Germany!&lt;/p&gt;
  721. &lt;p&gt;I listened to and loved every single from “Eden” before its release. The grey, monochrome phase is behind him and it suits his music very well that there is so much color in it now.&lt;/p&gt;
  722. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/347112181?u&quot;&gt;Listen to “Eden” by Tua&lt;/a&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Five web accessibility law suits</title><link>https://www.stevefrenzel.dev/blog/five-web-accessibility-law-suits/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/five-web-accessibility-law-suits/</guid><description>Pointing fingers at five HUGE enterprises and looking at the (very avoidable) issues.</description><pubDate>Tue, 07 May 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;I recently gave several smaller workshops on the subject of web accessibility and started with a rough overview of the topic. It was about the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#so_what_is_accessibility&quot;&gt;general meaning&lt;/a&gt;, the &lt;a href=&quot;https://www.w3.org/WAI/standards-guidelines/wcag/&quot;&gt;WCAG&lt;/a&gt;, the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG#the_four_principles&quot;&gt;four principles&lt;/a&gt; and the &lt;a href=&quot;https://en.wikipedia.org/wiki/European_Accessibility_Act&quot;&gt;European Accessibility Act&lt;/a&gt;.&lt;/p&gt;
  723. &lt;p&gt;After this workshop, I was asked if I knew of any examples of companies being sued because of web accessibility problems. I spontaneously thought of two: BeyoncĂ© and Domino’s Pizza.&lt;/p&gt;
  724. &lt;p&gt;Unfortunately, I had to stop here because I couldn’t give any more details. So I would like to list a few famous law suits here for future reference and show that most of the problems were trivial and among the &lt;a href=&quot;https://webaim.org/projects/million/#wcag&quot;&gt;six most common&lt;/a&gt; on the web. Which in most cases are very easy to fix.&lt;/p&gt;
  725. &lt;p&gt;All information comes from the “Digital Accessibility Lawsuits” subpage of &lt;a href=&quot;http://accessibility.com/&quot;&gt;accessibility.com&lt;/a&gt;. More details can be found under the link for each example. Also I’m not a lawyer and cannot give you any legal advice.&lt;/p&gt;
  726. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  727. &lt;ul&gt;
  728. &lt;li&gt;&lt;a href=&quot;#mary-conner-vs-parkwood-entertainment-llc&quot;&gt;Beyoncé case&lt;/a&gt;&lt;/li&gt;
  729. &lt;li&gt;&lt;a href=&quot;#guillermo-robles-vs-dominos-pizza-llc&quot;&gt;Domino’s Pizza case&lt;/a&gt;&lt;/li&gt;
  730. &lt;li&gt;&lt;a href=&quot;#thompson-vs-walmart-inc&quot;&gt;Walmart case&lt;/a&gt;&lt;/li&gt;
  731. &lt;li&gt;&lt;a href=&quot;#jack-kang-vs-burger-king-corporation&quot;&gt;Burger King case&lt;/a&gt;&lt;/li&gt;
  732. &lt;li&gt;&lt;a href=&quot;#elia-haggar-vs-adidas-america-inc&quot;&gt;Adidas case&lt;/a&gt;&lt;/li&gt;
  733. &lt;li&gt;&lt;a href=&quot;#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  734. &lt;/ul&gt;
  735. &lt;h2 id=&quot;mary-conner-vs-parkwood-entertainment-llc&quot;&gt;Mary Conner vs. Parkwood Entertainment LLC&lt;/h2&gt;
  736. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-beyonce-min.CV-XLIIw_Z1GPymO.webp&quot; alt=&quot;Close-up of BeyoncĂš wearing red sun glasses.&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  737. &lt;p&gt;&lt;a href=&quot;https://www.accessibility.com/digital-lawsuits/mary-parkwood-2019-01-03&quot;&gt;More information about the Beyoncé case&lt;/a&gt;&lt;/p&gt;
  738. &lt;h3 id=&quot;case-summary---parkwood-entertainment-llc&quot;&gt;Case summary - Parkwood Entertainment LLC&lt;/h3&gt;
  739. &lt;p&gt;On January 3, 2019, MARY CONNER filed a Complaint in New York Federal court against PARKWOOD ENTERTAINMENT LLC.&lt;/p&gt;
  740. &lt;p&gt;Plaintiff MARY CONNER alleges that &lt;a href=&quot;http://www.beyonce.com/&quot;&gt;www.Beyonce.com&lt;/a&gt; is not accessible per the WCAG 2.1, Section 508 accessibility standard(s).&lt;/p&gt;
  741. &lt;h3 id=&quot;case-details---parkwood-entertainment-llc&quot;&gt;Case details - Parkwood Entertainment LLC&lt;/h3&gt;
  742. &lt;p&gt;Case arises out of Parkwood’s policy and practice of denying the blind access to the goods and services offered by &lt;a href=&quot;http://beyonce.com/&quot;&gt;Beyonce.com&lt;/a&gt;.&lt;/p&gt;
  743. &lt;p&gt;Due to Parkwood’s failure and refusal to remove access barriers to &lt;a href=&quot;http://beyonce.com/&quot;&gt;Beyonce.com&lt;/a&gt;, blind individuals have been and are being denied equal access to Beyonce, as well as to the numerous goods, services and benefits offered to the public through &lt;a href=&quot;http://beyonce.com/&quot;&gt;Beyonce.com&lt;/a&gt;.&lt;/p&gt;
  744. &lt;h3 id=&quot;my-comment&quot;&gt;My comment&lt;/h3&gt;
  745. &lt;p&gt;Unfortunately, there are no details here as to what exactly the problems are, but since it cites “practice of denying the blind access to the goods and services” as the reason, I suspect the following:&lt;/p&gt;
  746. &lt;ul&gt;
  747. &lt;li&gt;Missing alt text&lt;/li&gt;
  748. &lt;li&gt;Empty links&lt;/li&gt;
  749. &lt;li&gt;Empty buttons&lt;/li&gt;
  750. &lt;li&gt;Elements cannot be operated with screen reader&lt;/li&gt;
  751. &lt;/ul&gt;
  752. &lt;h2 id=&quot;guillermo-robles-vs-dominos-pizza-llc&quot;&gt;Guillermo Robles vs. Domino’s Pizza LLC&lt;/h2&gt;
  753. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-dominos-min.CfSAUvoI_Z1SyHsK.webp&quot; alt=&quot;The Domino&amp;#38;#x27;s Pizza logo on the left side and a slice of Salami pizza on the right side.&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  754. &lt;p&gt;&lt;a href=&quot;https://www.accessibility.com/digital-lawsuits/guillermo-dominos-2016-09-01&quot;&gt;More information about the Domino’s Pizza case&lt;/a&gt;&lt;/p&gt;
  755. &lt;h3 id=&quot;case-summary---dominos-pizza&quot;&gt;Case summary - Domino’s Pizza&lt;/h3&gt;
  756. &lt;p&gt;On September 1, 2016, GUILLERMO ROBLES filed a Complaint in California State court against Dominos, LLC.&lt;/p&gt;
  757. &lt;p&gt;Plaintiff GUILLERMO ROBLES alleges that &lt;a href=&quot;http://www.dominos.com/&quot;&gt;www.Dominos.com&lt;/a&gt; is not accessible per the WCAG 2.0, Section 508 accessibility standard(s).&lt;/p&gt;
  758. &lt;h3 id=&quot;case-details---dominos-pizza&quot;&gt;Case details - Domino’s Pizza&lt;/h3&gt;
  759. &lt;p&gt;This is a summarized version of mine:&lt;/p&gt;
  760. &lt;ul&gt;
  761. &lt;li&gt;Website cannot be operated by a blind or visually-impaired person&lt;/li&gt;
  762. &lt;li&gt;Mobile app cannot be operated by a blind or visually-impaired person&lt;/li&gt;
  763. &lt;li&gt;Request that these be adapted so that blind or visually-impaired people can use the website and mobile app&lt;/li&gt;
  764. &lt;li&gt;Missing alternative text or a suitable text alternative&lt;/li&gt;
  765. &lt;li&gt;Empty links&lt;/li&gt;
  766. &lt;li&gt;Redundant links&lt;/li&gt;
  767. &lt;/ul&gt;
  768. &lt;h2 id=&quot;thompson-vs-walmart-inc&quot;&gt;Thompson vs. Walmart, Inc&lt;/h2&gt;
  769. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-walmart-min.DuN4keAj_Z8i4x7.webp&quot; alt=&quot;Main entrance of a Walmart store.&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  770. &lt;p&gt;&lt;a href=&quot;https://www.accessibility.com/digital-lawsuits/tyrone-walmart-2021-03-11&quot;&gt;More information about the Walmart case&lt;/a&gt;&lt;/p&gt;
  771. &lt;h3 id=&quot;case-summary---walmart-inc&quot;&gt;Case summary - Walmart, Inc&lt;/h3&gt;
  772. &lt;p&gt;On March 11, 2021, Tyrone Thompson filed a Complaint in California Federal court against Walmart, Inc.&lt;/p&gt;
  773. &lt;p&gt;Plaintiff Tyrone Thompson alleges that &lt;a href=&quot;http://www.walmart.com/&quot;&gt;www.walmart.com&lt;/a&gt; is not accessible per the WCAG 2.1 accessibility standard(s).&lt;/p&gt;
  774. &lt;h3 id=&quot;case-details---walmart-inc&quot;&gt;Case details - Walmart, Inc&lt;/h3&gt;
  775. &lt;p&gt;This is a summarized version of mine:&lt;/p&gt;
  776. &lt;ul&gt;
  777. &lt;li&gt;Landmark elements have a missing description&lt;/li&gt;
  778. &lt;li&gt;Images were used for visual separation of elements&lt;/li&gt;
  779. &lt;li&gt;Redundant &amp;#x26; empty links&lt;/li&gt;
  780. &lt;li&gt;External links are not announced as such when screen reader is used&lt;/li&gt;
  781. &lt;li&gt;No skip links available to bypass content&lt;/li&gt;
  782. &lt;li&gt;Purpose of &lt;code&gt;iframe&lt;/code&gt; elements is not clear, missing &lt;code&gt;title&lt;/code&gt; or &lt;code&gt;aria-label&lt;/code&gt; attribute&lt;/li&gt;
  783. &lt;li&gt;Links are wrapping elements and do not have sufficient description&lt;/li&gt;
  784. &lt;/ul&gt;
  785. &lt;h2 id=&quot;jack-kang-vs-burger-king-corporation&quot;&gt;Jack Kang vs. Burger King Corporation&lt;/h2&gt;
  786. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/4-burger-king-min.D-U7MiIN_ZTEEUx.webp&quot; alt=&quot;Main entrance of a Burger King restaurant.&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  787. &lt;p&gt;&lt;a href=&quot;https://www.accessibility.com/digital-lawsuits/jack-burger-2019-04-30&quot;&gt;More information about the Burger King case&lt;/a&gt;&lt;/p&gt;
  788. &lt;h3 id=&quot;case-summary---burger-king-corporation&quot;&gt;Case summary - Burger King Corporation&lt;/h3&gt;
  789. &lt;p&gt;On April 30, 2019, Jack Kang filed a Complaint in Florida Federal court against Burger King Corporation.&lt;/p&gt;
  790. &lt;p&gt;Plaintiff Jack Kang alleges that &lt;a href=&quot;http://www.bk.com/&quot;&gt;www.bk.com&lt;/a&gt; is not accessible per the WCAG 2.0 accessibility standard(s).&lt;/p&gt;
  791. &lt;h3 id=&quot;case-details---burger-king-corporation&quot;&gt;Case details - Burger King Corporation&lt;/h3&gt;
  792. &lt;p&gt;This is a summarized version of mine:&lt;/p&gt;
  793. &lt;ul&gt;
  794. &lt;li&gt;Lack of Alternative Text (“alt-text”), or a text equivalent&lt;/li&gt;
  795. &lt;li&gt;Empty links&lt;/li&gt;
  796. &lt;li&gt;Redundant links&lt;/li&gt;
  797. &lt;li&gt;Linked Images missing alt-text&lt;/li&gt;
  798. &lt;/ul&gt;
  799. &lt;h2 id=&quot;elia-haggar-vs-adidas-america-inc&quot;&gt;Elia Haggar vs. Adidas America, Inc&lt;/h2&gt;
  800. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/5-adidas-min.DS1Ia-gU_U8s4N.webp&quot; alt=&quot;Curvy building with three long horizontal stripes and three variations of the Adidas logo on it.&quot; width=&quot;1200&quot; height=&quot;675&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  801. &lt;p&gt;&lt;a href=&quot;https://www.accessibility.com/digital-lawsuits/elia-adidas-2019-02-25&quot;&gt;More information about the Adidas case&lt;/a&gt;&lt;/p&gt;
  802. &lt;h3 id=&quot;case-summary---adidas-america-inc&quot;&gt;Case Summary - Adidas America, Inc&lt;/h3&gt;
  803. &lt;p&gt;On February 25, 2019, Elia Haggar, Kyo Hak Chu, and Valerie Brooks filed a Complaint in California Federal court against Adidas America, Inc.&lt;/p&gt;
  804. &lt;p&gt;Plaintiff Elia Haggar, Kyo Hak Chu, and Valerie Brooks alleges
  805. that &lt;a href=&quot;http://www.adidas.com/us&quot;&gt;www.adidas.com/us&lt;/a&gt; is not accessible.&lt;/p&gt;
  806. &lt;h3 id=&quot;case-details---adidas-america-inc&quot;&gt;Case details - Adidas America, Inc&lt;/h3&gt;
  807. &lt;p&gt;This is a summarized version of mine:&lt;/p&gt;
  808. &lt;ul&gt;
  809. &lt;li&gt;Lack of Alternative Text (“alt-text”), or a text equivalent.&lt;/li&gt;
  810. &lt;li&gt;Empty links&lt;/li&gt;
  811. &lt;li&gt;Redundant links&lt;/li&gt;
  812. &lt;li&gt;Linked Images missing alt-text&lt;/li&gt;
  813. &lt;/ul&gt;
  814. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  815. &lt;p&gt;These are just a few examples from very well-known companies, but they all make more or less the same mistakes, which can be easily avoided and rectified. So what I told my workshop participants is:&lt;/p&gt;
  816. &lt;p&gt;If you can avoid the six most common problems, you will not only provide a good experience for your users, but you will make yourself less vulnerable to law suits. The work doesn’t stop here, but you’ve already taken a big step in the right direction.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Screen reader check: TIDAL widget</title><link>https://www.stevefrenzel.dev/blog/screen-reader-check-tidal-widget/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/screen-reader-check-tidal-widget/</guid><description>Let&apos;s find out how my favorite streaming service&apos;s widget performs with screen readers. And how NVDA dominates them all! đŸ’Ș</description><pubDate>Sat, 13 Apr 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;It’s time for the second article in a series where I test how various music player widgets interact with the four most popular screen readers and web browsers. Check out the first article to find out why I’m doing this: &lt;a href=&quot;https://stevefrenzel.dev/posts/screen-reader-check-soundcloud-widget/&quot;&gt;Screen reader check: SoundCloud widget&lt;/a&gt;.&lt;/p&gt;
  817. &lt;p&gt;Disclaimer: I’m not an expert nor a regular screen reader user but I know my way around them. I do this purely out of curiosity and are not sponsored or compensated in any way. Also I’m using a virtual Windows machine on macOS, thanks to this tutorial by Sara Soueidan: &lt;a href=&quot;https://www.sarasoueidan.com/blog/testing-environment-setup/&quot;&gt;Setting up a screen reader testing environment on your computer&lt;/a&gt;. Let’s dive in! 🏊&lt;/p&gt;
  818. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  819. &lt;ul&gt;
  820. &lt;li&gt;&lt;a href=&quot;#the-tools&quot;&gt;The Tools&lt;/a&gt;
  821. &lt;ul&gt;
  822. &lt;li&gt;&lt;a href=&quot;#operating-systems&quot;&gt;Operating Systems&lt;/a&gt;&lt;/li&gt;
  823. &lt;li&gt;&lt;a href=&quot;#web-browsers&quot;&gt;Web browsers&lt;/a&gt;&lt;/li&gt;
  824. &lt;li&gt;&lt;a href=&quot;#screen-readers&quot;&gt;Screen readers&lt;/a&gt;&lt;/li&gt;
  825. &lt;/ul&gt;
  826. &lt;/li&gt;
  827. &lt;li&gt;&lt;a href=&quot;#the-widget-itself&quot;&gt;The widget itself&lt;/a&gt;&lt;/li&gt;
  828. &lt;li&gt;&lt;a href=&quot;#the-test&quot;&gt;The Test&lt;/a&gt;
  829. &lt;ul&gt;
  830. &lt;li&gt;&lt;a href=&quot;#without-a-screen-reader&quot;&gt;Without a screen reader&lt;/a&gt;&lt;/li&gt;
  831. &lt;li&gt;&lt;a href=&quot;#jaws-on-windows-11&quot;&gt;JAWS on Windows 11&lt;/a&gt;&lt;/li&gt;
  832. &lt;li&gt;&lt;a href=&quot;#nvda-on-windows-11&quot;&gt;NVDA on Windows 11&lt;/a&gt;&lt;/li&gt;
  833. &lt;li&gt;&lt;a href=&quot;#voiceover-on-macos-sonoma&quot;&gt;VoiceOver on macOS Sonoma&lt;/a&gt;&lt;/li&gt;
  834. &lt;li&gt;&lt;a href=&quot;#narrator-on-windows-11&quot;&gt;Narrator on Windows 11&lt;/a&gt;&lt;/li&gt;
  835. &lt;/ul&gt;
  836. &lt;/li&gt;
  837. &lt;li&gt;&lt;a href=&quot;#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  838. &lt;li&gt;&lt;a href=&quot;#bonus-music-recommendations&quot;&gt;Bonus: Music recommendations&lt;/a&gt;
  839. &lt;ul&gt;
  840. &lt;li&gt;&lt;a href=&quot;#when-no-birds-sang-by-full-of-hell--nothing&quot;&gt;“When No Birds Sang” by Full Of Hell &amp;#x26; Nothing&lt;/a&gt;&lt;/li&gt;
  841. &lt;li&gt;&lt;a href=&quot;#every-sound-has-a-color-in-the-valley-of-night-by-night-verses&quot;&gt;“Every Sound Has A Color In The Valley Of Night” by Night Verses&lt;/a&gt;&lt;/li&gt;
  842. &lt;li&gt;&lt;a href=&quot;#stereo-grief-by-greyhaven&quot;&gt;“Stereo Grief” by Greyhaven&lt;/a&gt;&lt;/li&gt;
  843. &lt;/ul&gt;
  844. &lt;/li&gt;
  845. &lt;/ul&gt;
  846. &lt;h2 id=&quot;the-tools&quot;&gt;The tools&lt;/h2&gt;
  847. &lt;h3 id=&quot;operating-systems&quot;&gt;Operating systems&lt;/h3&gt;
  848. &lt;ul&gt;
  849. &lt;li&gt;macOS Sonoma (Version 14.4.1)&lt;/li&gt;
  850. &lt;li&gt;Windows 11 Home (Version 22H2)&lt;/li&gt;
  851. &lt;/ul&gt;
  852. &lt;h3 id=&quot;web-browsers&quot;&gt;Web browsers&lt;/h3&gt;
  853. &lt;ul&gt;
  854. &lt;li&gt;Google Chrome (Version 123.0.6312.124)&lt;/li&gt;
  855. &lt;li&gt;Mozilla Firefox (Version 124.0.2)&lt;/li&gt;
  856. &lt;li&gt;Apple Safari (Version 17.4.1)&lt;/li&gt;
  857. &lt;li&gt;Microsoft Edge (Version 123.0.2420.81)&lt;/li&gt;
  858. &lt;/ul&gt;
  859. &lt;h3 id=&quot;screen-readers&quot;&gt;Screen readers&lt;/h3&gt;
  860. &lt;ul&gt;
  861. &lt;li&gt;JAWS (Version 2024.2403.3)&lt;/li&gt;
  862. &lt;li&gt;NVDA (Version 2024.1.0.31547)&lt;/li&gt;
  863. &lt;li&gt;VoiceOver (Version 10)&lt;/li&gt;
  864. &lt;li&gt;Narrator (Version 2023H2)&lt;/li&gt;
  865. &lt;/ul&gt;
  866. &lt;h2 id=&quot;the-widget-itself&quot;&gt;The widget itself&lt;/h2&gt;
  867. &lt;p&gt;Very similar to the SoundCloud one, as they’re also using some deprecated attributes. Let’s have a look at the original code:&lt;/p&gt;
  868. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;/span&gt;
  869. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;  style&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  870. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;    position: relative;&lt;/span&gt;&lt;/span&gt;
  871. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;    padding-bottom: 100%;&lt;/span&gt;&lt;/span&gt;
  872. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;    height: 0;&lt;/span&gt;&lt;/span&gt;
  873. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;    overflow: hidden;&lt;/span&gt;&lt;/span&gt;
  874. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;    max-width: 100%;&lt;/span&gt;&lt;/span&gt;
  875. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;  &quot;&lt;/span&gt;&lt;/span&gt;
  876. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  877. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;iframe&lt;/span&gt;&lt;/span&gt;
  878. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;    src&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://embed.tidal.com/tracks/121378214?layout=gridify&quot;&lt;/span&gt;&lt;/span&gt;
  879. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;    frameborder&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;0&quot;&lt;/span&gt;&lt;/span&gt;
  880. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;    allowfullscreen&lt;/span&gt;&lt;/span&gt;
  881. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;    style&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  882. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;      position: absolute;&lt;/span&gt;&lt;/span&gt;
  883. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;      top: 0;&lt;/span&gt;&lt;/span&gt;
  884. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;      left: 0;&lt;/span&gt;&lt;/span&gt;
  885. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;      width: 100%;&lt;/span&gt;&lt;/span&gt;
  886. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;      height: 1px;&lt;/span&gt;&lt;/span&gt;
  887. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;      min-height: 100%;&lt;/span&gt;&lt;/span&gt;
  888. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;      margin: 0 auto;&lt;/span&gt;&lt;/span&gt;
  889. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;    &quot;&lt;/span&gt;&lt;/span&gt;
  890. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;iframe&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  891. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  892. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  893. &lt;p&gt;Which makes it look ginormous:&lt;/p&gt;
  894. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-widget.Dh03o--V_xzVnu.webp&quot; alt=&quot;Screenshot of the Firefox browser showing the headline &amp;#34;Showcase TIDAL embed&amp;#34; and the widget taking up the full width and height of the screen.&quot; width=&quot;3808&quot; height=&quot;2414&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  895. &lt;p&gt;So I removed the default styling, added some of my own and got rid of the &lt;a href=&quot;https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter&quot;&gt;axe-linter&lt;/a&gt; warning regarding the accessible name of an &lt;code&gt;iframe&lt;/code&gt; element:&lt;/p&gt;
  896. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;iframe&lt;/span&gt;&lt;/span&gt;
  897. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;  allowfullscreen&lt;/span&gt;&lt;/span&gt;
  898. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;  title&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Ludens by Bring Me The Horizon on TIDAL&quot;&lt;/span&gt;&lt;/span&gt;
  899. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;  frameborder&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;0&quot;&lt;/span&gt;&lt;/span&gt;
  900. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;  src&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://embed.tidal.com/tracks/121378214?layout=gridify&quot;&lt;/span&gt;&lt;/span&gt;
  901. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;iframe&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  902. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  903. &lt;p&gt;Now it looks a lot nicer, don’t you think?&lt;/p&gt;
  904. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-widget.DAUW7c89_1KH6Eg.webp&quot; alt=&quot;Screenshot of the Firefox browser showing the headline &amp;#34;Showcase TIDAL embed&amp;#34; and a smaller widget taking up only a little bit of space.&quot; width=&quot;888&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  905. &lt;p&gt;Sweet, now let’s have a quick look (in Chrome) at the accessibility tree of this element:&lt;/p&gt;
  906. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/a11y-tree-chrome.eiHm5uF6_Z1U30Yc.webp&quot; alt=&quot;Screenshot of the accessibility tree in Google Chrome from the Tidal widget. It shows several elements such as links, buttons and even time elements.&quot; width=&quot;1019&quot; height=&quot;800&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  907. &lt;p&gt;Most interesting thing is that the “play” button is nowhere to be found so
 This should be interesting!&lt;/p&gt;
  908. &lt;p&gt;You can give it a go yourself on the &lt;a href=&quot;https://stevefrenzel.github.io/showcase-tidal-embed/&quot;&gt;example website&lt;/a&gt;. Be aware that your experience might be different then mine, depending on your operating systems and the web browsers you use.&lt;/p&gt;
  909. &lt;h2 id=&quot;the-test&quot;&gt;The test&lt;/h2&gt;
  910. &lt;p&gt;Different than last time I’m also gonna describe my experience without the screen reader. Consider it a bonus! đŸ€— Here’s the user story from last time. It’s general and specific enough at the same time, so let’s reuse it for this widget:&lt;/p&gt;
  911. &lt;blockquote&gt;
  912. &lt;p&gt;As a screen reader user, I expect the widget to be announced as “Ludens by Bring Me The Horizon on TIDAL. It should not auto-play, but start playing when selecting the “play” button. When clicking the button again, it should stop playing the music. All links inside the widget should have a descriptive, accessible name. I should be able to leave this widget by using the tab button.&lt;/p&gt;
  913. &lt;/blockquote&gt;
  914. &lt;p&gt;As last time, I’m running three automated accessibility checks BEFORE my changes with &lt;a href=&quot;https://www.deque.com/axe/devtools/&quot;&gt;axe DevTools¼&lt;/a&gt;, &lt;a href=&quot;https://www.getstark.co/&quot;&gt;Stark&lt;/a&gt; and &lt;a href=&quot;https://wave.webaim.org/&quot;&gt;WAVE&lt;/a&gt;. Only axe found three issues, the other two said there’s nothing to worry about:&lt;/p&gt;
  915. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/axe-devtools.DIpwx4mR_1VA4qk.webp&quot; alt=&quot;Screenshot of the axe dev tools extension showing three issues with the Tidal widget.&quot; width=&quot;1616&quot; height=&quot;1498&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  916. &lt;p&gt;&lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/frame-title&quot;&gt;Frames must have an accessible name&lt;/a&gt; was expected and fixed by me, but let’s see if &lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/tabindex?application=AxeChrome&quot;&gt;Elements should not have tabindex greater than zero&lt;/a&gt; becomes an issue when testing with a keyboard.&lt;/p&gt;
  917. &lt;h3 id=&quot;without-a-screen-reader&quot;&gt;Without a screen reader&lt;/h3&gt;
  918. &lt;p&gt;When hovering the widget, the whole album cover gets slightly darker to increase contrast for the text and icons. Also the “share” icon appears when hovering it.&lt;/p&gt;
  919. &lt;p&gt;Hovering the TIDAL and “share” icon in the top right corner gives you the pointer as visual feedback, while hovering the links will add a underline to them. There’s no visual feedback for hovering the “play” button.&lt;/p&gt;
  920. &lt;p&gt;Clicking the TIDAL icon and the two text links opens a new tab to take you to the respective content. Shameless plug: I wrote an article why you should consider avoiding this behavior: &lt;a href=&quot;https://stevefrenzel.dev/posts/should-links-open-in-a-new-tab/&quot;&gt;Should links open in a new tab?&lt;/a&gt;.&lt;/p&gt;
  921. &lt;p&gt;Clicking the “share” button opens an overlay to presents options to share the song. When hovering these icons, they get slightly bigger.&lt;/p&gt;
  922. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/4-widget.vJwsDi-0_TdA6o.webp&quot; alt=&quot;Screenshot of the Firefox browser showing the overlay in the Tidal widget. It shows a &amp;#34;x&amp;#34; button, the artist and song name, as well as four icons for Facebook, Facebook messenger, Twitter and &amp;#34;copy to clipboard&amp;#34;.&quot; width=&quot;888&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  923. &lt;p&gt;After the overlay opens (in Chrome and Firefox), it immediately focusses the “close” button, presented with an “X” icon. Hitting &lt;code&gt;ENTER&lt;/code&gt; or pressing &lt;code&gt;ESC&lt;/code&gt; will close the overlay. The focus trap is also working as expected, you can only navigate inside the overlay while it’s open.&lt;/p&gt;
  924. &lt;p&gt;The focus ring for the social media icons is barely visible. I was presently surprised how nice this overlay works, although there are considerations if you should auto-focus elements. Adrian Roselli wrote a few words about this: &lt;a href=&quot;https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html&quot;&gt;Dialog Focus in Screen Readers&lt;/a&gt;.&lt;/p&gt;
  925. &lt;p&gt;So far the behavior was the same in all four browsers, except that this overlay will open only in Chrome and Firefox (macOS) or only Firefox (Windows), depending on your operating system.&lt;/p&gt;
  926. &lt;p&gt;When using the &lt;code&gt;TAB&lt;/code&gt; key, all elements can be focused and provide (barely) visible feedback, except the “play” button. It can only be focussed in Safari, but hitting &lt;code&gt;ENTER&lt;/code&gt; or &lt;code&gt;SPACE&lt;/code&gt; doesn’t do anything.&lt;/p&gt;
  927. &lt;p&gt;Funny, considering that this is (in my opinion) the most important element in a music player embed. đŸ€·â€â™‚ïž&lt;/p&gt;
  928. &lt;p&gt;Clicking the play button or anywhere inside this widget will start a preview of the song after a second or so. When playing, all UI elements are removed.&lt;/p&gt;
  929. &lt;p&gt;The progress bar will only appear when hovering the widget and the rest of the elements will appear again when pausing. To pause, you can click anywhere in the widget.&lt;/p&gt;
  930. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-widget.By3tfDmU_8ujqO.webp&quot; alt=&quot;Screenshot of the Firefox browser showing the widget after pressing &amp;#34;play&amp;#34;. It now shows a progress bar, as well as past time and remaining time of the song.&quot; width=&quot;888&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  931. &lt;p&gt;I expected that it would at least be possible to play and pause via a keyboard after clicking the play button, but still no luck.&lt;/p&gt;
  932. &lt;h3 id=&quot;jaws-on-windows-11&quot;&gt;JAWS on Windows 11&lt;/h3&gt;
  933. &lt;p&gt;Very similar to the visual experience, as every element gets announced as expected, also when opening the overlay (only possible in Firefox). Unfortunately there’s no feedback at all when using Edge with JAWS.&lt;/p&gt;
  934. &lt;p&gt;The auto-focus of the overlay does it’s job and announces the buttons accordingly, so you shouldn’t get lost. All icons are announced correctly, but unfortunately there’s no audible feedback when copying the link to the clipboard, only visual feedback.&lt;/p&gt;
  935. &lt;h3 id=&quot;nvda-on-windows-11&quot;&gt;NVDA on Windows 11&lt;/h3&gt;
  936. &lt;p&gt;Amazing, it is actually possible to hit the “play” button when using NVDA and it’s working in all three browsers! After pressing &lt;code&gt;ENTER&lt;/code&gt; or &lt;code&gt;SPACE&lt;/code&gt; it’s announced as “clickable play” when pressing it once and as “pause” when pressing it again.&lt;/p&gt;
  937. &lt;p&gt;I don’t know how this is possible, as there’s no indication that this is a button or has the accessible name “play” or “pause”. đŸ€Ż&lt;/p&gt;
  938. &lt;p&gt;The overlay works the same as with JAWS, also no audible feedback when copying to clipboard.&lt;/p&gt;
  939. &lt;h3 id=&quot;voiceover-on-macos-sonoma&quot;&gt;VoiceOver on macOS Sonoma&lt;/h3&gt;
  940. &lt;p&gt;Also very similar to the visual experience. A nice touch would have been to add an empty alt-text to the TIDAL link / icon to reduce the amount of announced text here, but it’s fine I guess.&lt;/p&gt;
  941. &lt;p&gt;The “play” button is only announced as “image” and you can select the two &lt;code&gt;time&lt;/code&gt; elements, but it’s still not possible to start the music via keyboard.&lt;/p&gt;
  942. &lt;p&gt;The overlay works the same as with JAWS and NVDA, also no audible feedback when copying to clipboard.&lt;/p&gt;
  943. &lt;h3 id=&quot;narrator-on-windows-11&quot;&gt;Narrator on Windows 11&lt;/h3&gt;
  944. &lt;p&gt;Same experience as with NVDA, the “play” button can also be operated! Only difference is that it’s announced as “play, group” or “pause, group”, depending on it’s state.&lt;/p&gt;
  945. &lt;p&gt;The overlay can only be opened (in Firefox) when selecting the “share” button with the &lt;code&gt;TAB&lt;/code&gt; key, otherwise it won’t work when using the native Narrator navigation. Also no audible feedback when copying to clipboard.&lt;/p&gt;
  946. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  947. &lt;p&gt;I had high hopes for this one, as I’m a TIDAL fan and supporter. Although it looks cleaner than the SoundCloud widget, I was disappointed that it has limited keyboard functionality, depending on the browser you use.&lt;/p&gt;
  948. &lt;p&gt;This is where NVDA really shines, as it provided the most consistent experience with all three (Windows) browsers. Narrator also made it possible to hit the “play” button, but my overall user experience was better with NVDA.&lt;/p&gt;
  949. &lt;h2 id=&quot;bonus-music-recommendations&quot;&gt;Bonus: Music recommendations&lt;/h2&gt;
  950. &lt;p&gt;While we are here, why not check out some of the music I’m currently listening to? Have fun:&lt;/p&gt;
  951. &lt;h3 id=&quot;when-no-birds-sang-by-full-of-hell--nothing&quot;&gt;“When No Birds Sang” by Full Of Hell &amp;#x26; Nothing&lt;/h3&gt;
  952. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-music.jC784hfk_2vfU9h.webp&quot; alt=&quot;Album artwork for &amp;#34;When No Birds Sang&amp;#34; by Full Of Hell &amp;#38;#x26; Nothing.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  953. &lt;p&gt;If you’re a fan of these two bands, you’re in for a ride. This could also be interesting for you when you’re a fan of &lt;a href=&quot;https://tidal.com/browse/artist/3569642?u&quot;&gt;Celtic Frost&lt;/a&gt;.&lt;/p&gt;
  954. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/316979894?u&quot;&gt;Listen to “When No Birds Sang” by Full Of Hell &amp;#x26; Nothing&lt;/a&gt;&lt;/p&gt;
  955. &lt;h3 id=&quot;every-sound-has-a-color-in-the-valley-of-night-by-night-verses&quot;&gt;”Every Sound Has A Color In The Valley Of Night” by Night Verses&lt;/h3&gt;
  956. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-music.BCFCzM0n_ZRrsvU.webp&quot; alt=&quot;Album artwork for &amp;#34;Every Sound Has A Color In The Valley Of Night&amp;#34; by Night Verses.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  957. &lt;p&gt;I listened a lot to &lt;a href=&quot;https://tidal.com/browse/album/87131015?u&quot;&gt;From the Gallery of Sleep&lt;/a&gt; when it came out but found it a little bit exhausting at times. This new one though has become one of my favorite instrumental albums ever! Also they have a feature with Brandon Boyd of &lt;a href=&quot;https://tidal.com/browse/artist/1086?u&quot;&gt;Incubus&lt;/a&gt; and Anthony Green of &lt;a href=&quot;https://tidal.com/browse/artist/3677780?u&quot;&gt;Circa Survive&lt;/a&gt;.&lt;/p&gt;
  958. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/339236923?u&quot;&gt;Listen to “Every Sound Has A Color In The Valley Of Night” by Night Verses&lt;/a&gt;&lt;/p&gt;
  959. &lt;h3 id=&quot;stereo-grief-by-greyhaven&quot;&gt;”Stereo Grief” by Greyhaven&lt;/h3&gt;
  960. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-music.CZ7jBqFN_1Ci7zb.webp&quot; alt=&quot;Album artwork for &amp;#34;Stereo Grief&amp;#34; by Greyhaven.&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  961. &lt;p&gt;This is one of the records I checked out just because of the cover artwork and was expecting &lt;a href=&quot;https://en.wikipedia.org/wiki/Shoegaze&quot;&gt;Shoegaze&lt;/a&gt;, but got something with a heavy &lt;a href=&quot;https://tidal.com/browse/artist/3619519?u&quot;&gt;The Dillinger Escape Plan&lt;/a&gt; vibe. 😍&lt;/p&gt;
  962. &lt;p&gt;&lt;a href=&quot;https://tidal.com/browse/album/339236923?u&quot;&gt;Listen to “Stereo Grief” by Greyhaven&lt;/a&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>How to: Cancel a Figma subscription</title><link>https://www.stevefrenzel.dev/blog/how-to-cancel-a-figma-subscription/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/how-to-cancel-a-figma-subscription/</guid><description>You think it&apos;s easy to cancel their subscription? Think again, they perfected the art of deceptive patterns.</description><pubDate>Mon, 01 Apr 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;I had actually planned to write my next article for my “screen reader check” series, which I started with the &lt;a href=&quot;https://stevefrenzel.dev/posts/screen-reader-check-soundcloud-widget/&quot;&gt;SoundCloud widget&lt;/a&gt;.&lt;/p&gt;
  963. &lt;p&gt;Since I already knew how I was going to design the thumbnail, I wanted to do that first and opened Figma. Then I remembered that I had received a reminder a few days earlier that my subscription was about to be renewed.&lt;/p&gt;
  964. &lt;p&gt;I bought one for FigJam, which wasn’t expensive, but I don’t use it for my workshops anymore so I wanted to cancel it. And here is where my journey begins
&lt;/p&gt;
  965. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  966. &lt;ul&gt;
  967. &lt;li&gt;&lt;a href=&quot;#one-does-not-simply-cancel-a-subscription&quot;&gt;One does not simply cancel a subscription&lt;/a&gt;&lt;/li&gt;
  968. &lt;li&gt;&lt;a href=&quot;#cancelling-the-subscription&quot;&gt;Cancelling the subscription&lt;/a&gt;
  969. &lt;ul&gt;
  970. &lt;li&gt;&lt;a href=&quot;#step-1&quot;&gt;Step 1&lt;/a&gt;&lt;/li&gt;
  971. &lt;li&gt;&lt;a href=&quot;#step-2&quot;&gt;Step 2&lt;/a&gt;&lt;/li&gt;
  972. &lt;li&gt;&lt;a href=&quot;#step-3&quot;&gt;Step 3&lt;/a&gt;&lt;/li&gt;
  973. &lt;li&gt;&lt;a href=&quot;#step-4&quot;&gt;Step 4&lt;/a&gt;&lt;/li&gt;
  974. &lt;li&gt;&lt;a href=&quot;#step-5&quot;&gt;Step 5&lt;/a&gt;&lt;/li&gt;
  975. &lt;/ul&gt;
  976. &lt;/li&gt;
  977. &lt;li&gt;&lt;a href=&quot;#simply-cancel-and-figma-will-charge-you-even-more&quot;&gt;Simply cancel and Figma will charge you even more&lt;/a&gt;
  978. &lt;ul&gt;
  979. &lt;li&gt;&lt;a href=&quot;#step-6&quot;&gt;Step 6&lt;/a&gt;&lt;/li&gt;
  980. &lt;li&gt;&lt;a href=&quot;#step-7&quot;&gt;Step 7&lt;/a&gt;&lt;/li&gt;
  981. &lt;li&gt;&lt;a href=&quot;#step-8&quot;&gt;Step 8&lt;/a&gt;&lt;/li&gt;
  982. &lt;li&gt;&lt;a href=&quot;#step-9&quot;&gt;Step 9&lt;/a&gt;&lt;/li&gt;
  983. &lt;li&gt;&lt;a href=&quot;#step-10&quot;&gt;Step 10&lt;/a&gt;&lt;/li&gt;
  984. &lt;/ul&gt;
  985. &lt;/li&gt;
  986. &lt;li&gt;&lt;a href=&quot;#check-the-amount-of-seats&quot;&gt;Check the amount of seats&lt;/a&gt;&lt;/li&gt;
  987. &lt;/ul&gt;
  988. &lt;h2 id=&quot;one-does-not-simply-cancel-a-subscription&quot;&gt;One does not simply cancel a subscription&lt;/h2&gt;
  989. &lt;p&gt;My first impulse was to click on the three dots in the top right-hand corner to go directly to a place where you can manage your subscriptions and delete them if necessary.&lt;/p&gt;
  990. &lt;p&gt;But Figma doesn’t make it that easy. They want to prevent you from doing exactly that at all costs, so they make the process as cumbersome and frustrating as possible. The goal is to upset / confuse / tire you out so much that you give up before you get there.&lt;/p&gt;
  991. &lt;p&gt;This is called a deceptive pattern and you can read more about it here: &lt;a href=&quot;https://blog.mozilla.org/en/internet-culture/deceptive-design-patterns/&quot;&gt;What are deceptive design patterns?&lt;/a&gt;. You will find more info when looking for the term “dark patterns” but I refuse to use this term. Click the footnote to find out why. &lt;sup&gt;&lt;a href=&quot;#user-content-fn-1&quot; id=&quot;user-content-fnref-1&quot; data-footnote-ref=&quot;&quot; aria-describedby=&quot;footnote-label&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
  992. &lt;p&gt;Let’s find out how to cancel this subscription, shall we? 👏&lt;/p&gt;
  993. &lt;h2 id=&quot;cancelling-the-subscription&quot;&gt;Cancelling the subscription&lt;/h2&gt;
  994. &lt;p&gt;I was able to cancel my subscription in 10 easy steps and 13 clicks:&lt;/p&gt;
  995. &lt;h3 id=&quot;step-1&quot;&gt;Step 1&lt;/h3&gt;
  996. &lt;p&gt;First you have to select “Teams” on the Figma start page:&lt;/p&gt;
  997. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-screenshot.l7yfhZdA_1hIgtG.webp&quot; alt=&quot;Start screen of the Figma app on macOs. A red, curved arrow points to the item &amp;#34;Teams&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  998. &lt;h3 id=&quot;step-2&quot;&gt;Step 2&lt;/h3&gt;
  999. &lt;p&gt;Click the downward arrow right to the “Professional” badge to open a context menu and click “View settings”:&lt;/p&gt;
  1000. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-screenshot.DyaLMKXL_Z1mDquN.webp&quot; alt=&quot;Overview of the selected team of the Figma app on macOs. A red, curved arrow points to a downward arrow, which revealed a context menu. It provides several menu items, including &amp;#34;Delete...&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1001. &lt;h3 id=&quot;step-3&quot;&gt;Step 3&lt;/h3&gt;
  1002. &lt;p&gt;In the newly opened dialog window, select “Go to Billing” under the “Plan and Billing” section:&lt;/p&gt;
  1003. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-screenshot.CxEJEVNx_2wuYHO.webp&quot; alt=&quot;Dialog window in the Figma app on macOS. It shows several menu items under the &amp;#34;Settings&amp;#34; banner, including &amp;#34;Plan and Billing&amp;#34;. A red, curved arrow points to &amp;#34;Go to Billing&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1004. &lt;h3 id=&quot;step-4&quot;&gt;Step 4&lt;/h3&gt;
  1005. &lt;p&gt;In the section regarding the annual and monthly renewal, select “Change annual plan”:&lt;/p&gt;
  1006. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/4-screenshot.DS13KqrR_Z1FtU5.webp&quot; alt=&quot;Overview of the billing situation for the selected team of the Figma app on macOs. A red, curved arrow points to &amp;#34;Change annual plan&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1007. &lt;h3 id=&quot;step-5&quot;&gt;Step 5&lt;/h3&gt;
  1008. &lt;p&gt;When I arrived here, I thought I just change the number in the “Number of FigJam seats on annual plan:” input from 1 to 0:&lt;/p&gt;
  1009. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/5-screenshot.id2OaJ9A_1px1kH.webp&quot; alt=&quot;Dialog window in the Figma app on macOS. It provides information when the subscription will auto-renew and two number inputs to adjust the count of the seats. It contains two buttons, &amp;#34;Cancel&amp;#34; and &amp;#34;Update annual plan&amp;#34;. A red, curved arrow points to &amp;#34;Don&amp;#38;#x27;t renew my annual plan&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1010. &lt;p&gt;But when doing that or clicking “Don’t renew my annual plan”, I receive the following message:&lt;/p&gt;
  1011. &lt;blockquote&gt;
  1012. &lt;p&gt;Cancel your annual plan?&lt;/p&gt;
  1013. &lt;p&gt;Figma Design and FigJam seats on your team will be charged monthly at €15/mo and €5/mo, respectively.&lt;/p&gt;
  1014. &lt;p&gt;You can always add an annual plan later, if you change your mind.&lt;/p&gt;
  1015. &lt;/blockquote&gt;
  1016. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/6-screenshot.73XlK2Kg_Z22iyTv.webp&quot; alt=&quot;Dialog window in the Figma app on macOS. The headline says &amp;#34;Cancel your annual plan?&amp;#34;. It provides some information regarding pricing and two buttons: &amp;#34;Nevermind&amp;#34; (yes, like the Nirvana album) and &amp;#34;Cancel annual plan&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1017. &lt;h2 id=&quot;simply-cancel-and-figma-will-charge-you-even-more&quot;&gt;Simply cancel and Figma will charge you even more&lt;/h2&gt;
  1018. &lt;p&gt;I currently pay 36 euros a year and if I had confirmed here with “Cancel annual plan”, it would cost me 5 euros a month, so 60 euros a year! There are no instructions on how to avoid this and REALLY cancel.&lt;/p&gt;
  1019. &lt;p&gt;Except for the note that it will be 5 euros per seat in the team. So I canceled and researched how to delete my team BEFORE I cancel.&lt;/p&gt;
  1020. &lt;h3 id=&quot;step-6&quot;&gt;Step 6&lt;/h3&gt;
  1021. &lt;p&gt;To do this, I opened the context menu for my team name and selected “Delete
”:&lt;/p&gt;
  1022. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/7-screenshot.CCsmIGaI_2uunkH.webp&quot; alt=&quot;Overview of the selected team of the Figma app on macOs. It shows a context menu with several options, including &amp;#34;Delete...&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1023. &lt;h3 id=&quot;step-7&quot;&gt;Step 7&lt;/h3&gt;
  1024. &lt;p&gt;Then I receive a message prompting me to first cancel my “Professional” subscription, which was my plan in the first place. 🙃&lt;/p&gt;
  1025. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/8-screenshot.SLtP1hvd_1gAUvr.webp&quot; alt=&quot;Dialog window in the Figma app on macOS. Headline: &amp;#34;Action required&amp;#34;. Body text: &amp;#34;To delete the team Steve Frenzel, you must first cancel your Professional subscription.&amp;#34;. There are two buttons, &amp;#34;Dismiss&amp;#34; and &amp;#34;Proceed to cancel...&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1026. &lt;h3 id=&quot;step-8&quot;&gt;Step 8&lt;/h3&gt;
  1027. &lt;p&gt;But to make it REALLY clear to me what a poor decision it would be for me to cancel this subscription, I am given a list of everything I will miss out on. For example “Team libraries”, “Audio conversations”, “Advanced prototyping” and more:&lt;/p&gt;
  1028. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/9-screenshot.RNwLYxRn_Z25BRt.webp&quot; alt=&quot;Dialog window in the Figma app on macOS. Headline: &amp;#34;If you cancel...&amp;#34;. Body text: &amp;#34;Your team will lose access to these Professional features:&amp;#34;. Below is a list of several features, for example &amp;#34;Team libraries&amp;#34;, &amp;#34;Audio conversations&amp;#34;, &amp;#34;Advanced prototyping&amp;#34; and more.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1029. &lt;h3 id=&quot;step-9&quot;&gt;Step 9&lt;/h3&gt;
  1030. &lt;p&gt;After confirming this fatal decision further below, I am asked why I want to cancel (multiple choice):&lt;/p&gt;
  1031. &lt;ul&gt;
  1032. &lt;li&gt;Switching to a different plan&lt;/li&gt;
  1033. &lt;li&gt;No longer using Figma’s products&lt;/li&gt;
  1034. &lt;li&gt;Too expensive&lt;/li&gt;
  1035. &lt;li&gt;Billing structure is unclear&lt;/li&gt;
  1036. &lt;li&gt;Did not mean to upgrade&lt;/li&gt;
  1037. &lt;li&gt;Project is over or no longer active&lt;/li&gt;
  1038. &lt;li&gt;Other&lt;/li&gt;
  1039. &lt;/ul&gt;
  1040. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/10-screenshot.BQ4HPwaJ_Z1uKxCn.webp&quot; alt=&quot;Dialog window in the Figma app on macOS. Headline: &amp;#34;Before you go, please let us know why&amp;#34;. Body text: &amp;#34;What made you cancel your plan? Check all that apply.&amp;#34;. Below is a list of checkboxes and I selected &amp;#34;Billing structure is unclear&amp;#34; and &amp;#34;Project is over or no longer active&amp;#34;. There are two buttons: &amp;#34;Go back&amp;#34; and &amp;#34;Continue&amp;#34;.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1041. &lt;h3 id=&quot;step-10&quot;&gt;Step 10&lt;/h3&gt;
  1042. &lt;p&gt;I receive a final warning that by canceling I will be joining the mob and will only have the free “Starter” plan:&lt;/p&gt;
  1043. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/11-screenshot.B04YQiRB_bDwRb.webp&quot; alt=&quot;Dialog window in the Figma app on macOS. Headline: &amp;#34;Are you sure you want to cancel?&amp;#34;. Body text: &amp;#34;If you choose to cancel, Steve Frenzel will be downgraded to our free Starter plan on your next billing date.&amp;#34;. There are two buttons: &amp;#34;Go back&amp;#34; and &amp;#34;Cancel plan&amp;#34;, which is red instead of the usual blue to add some tension to the process, I suppose.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1044. &lt;p&gt;It is done! I receive confirmation that my plan will be downgraded from “Professional” to “Starter” at the “end of the current subscription period”. đŸ„ł&lt;/p&gt;
  1045. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/12-screenshot.Dwez0e0j_Z2quqmD.webp&quot; alt=&quot;Overview of the selected team of the Figma app on macOs. On top is an alert message with blue background and white font saying: &amp;#34;Steve Frenzel will become a free Starter team at the end of the current subscription period&amp;#34;. A added a fat red border around it as it can be easily overlooked.&quot; width=&quot;1012&quot; height=&quot;712&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1046. &lt;p&gt;I had to click 13 times (15 if you count the checkboxes) and navigate through numerous menus to cancel my subscription. As I mentioned at the beginning, I expected to be able to do this with just a few clicks, but I didn’t take Figma’s deceitful tactics into account.&lt;/p&gt;
  1047. &lt;p&gt;Another deceptive pattern I have seen on numerous websites is the presentation of pricing tiers. The focus here is not on the limited, boring but very reasonably priced “Starter” plan, but “Professional”:&lt;/p&gt;
  1048. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/13-screenshot.DqBkgjqh_tXA6s.webp&quot; alt=&quot;Overview of pricing tiers inside the Figma app on macOS. It&amp;#38;#x27;s the last step when creating a new team, titled &amp;#34;Finish setup&amp;#34;. The first step is called &amp;#34;Name your team&amp;#34; and the second one is called &amp;#34;Add team members&amp;#34;. The headline of the current step says &amp;#34;Choose your team plan&amp;#34;. Below is a table of four columns with three options. First column lists all features, second one more info on the &amp;#34;Starter&amp;#34; plan, third and fourth for the &amp;#34;Professional&amp;#34; and &amp;#34;Organization&amp;#34; plan. &amp;#34;Starter&amp;#34; is for free and has the least amount of features and &amp;#34;Professional&amp;#34; is highlighted and very prominent.&quot; width=&quot;1162&quot; height=&quot;1189&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1049. &lt;p&gt;Anyway, I hope this article will help you navigate through the dense jungle of links and context menus to cancel your Figma subscription rather quickly.&lt;/p&gt;
  1050. &lt;h2 id=&quot;check-the-amount-of-seats&quot;&gt;Check the amount of seats&lt;/h2&gt;
  1051. &lt;p&gt;I learned the following information during one of my FigJam workshops: If you invite people to join your team (so that they can participate in the workshop), 5 euros per seat will be deducted from your account each month.&lt;/p&gt;
  1052. &lt;p&gt;It’s made very easy to invite people and there is NO indication that it will cost you money if you do so. To find out how much you have to pay per month, follow the instructions until step 3.&lt;/p&gt;
  1053. &lt;p&gt;&lt;em&gt;Thumbnail image credit: Taken from the article &lt;a href=&quot;https://www.figma.com/blog/the-outsized-role-culture-plays-in-attracting-design-talent/&quot;&gt;The outsized role culture plays in attracting design talent&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
  1054. &lt;section data-footnotes=&quot;&quot; class=&quot;footnotes&quot;&gt;&lt;h2 class=&quot;sr-only&quot; id=&quot;footnote-label&quot;&gt;Footnotes&lt;/h2&gt;
  1055. &lt;ol&gt;
  1056. &lt;li id=&quot;user-content-fn-1&quot;&gt;
  1057. &lt;p&gt;Partial quote from the linked article: &lt;em&gt;“You may notice we use “deceptive design patterns” rather than “dark patterns” throughout this article. While the latter is commonly used and has been for years, the phrase also reinforces the idea that being “dark” is “bad,” which is directly tied to white supremacy.”&lt;/em&gt; &lt;a href=&quot;#user-content-fnref-1&quot; data-footnote-backref=&quot;&quot; aria-label=&quot;Back to reference 1&quot; class=&quot;data-footnote-backref&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
  1058. &lt;/li&gt;
  1059. &lt;/ol&gt;
  1060. &lt;/section&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Shut up, Jakob</title><link>https://www.stevefrenzel.dev/blog/shut-up-jakob/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/shut-up-jakob/</guid><description>Me getting very angry about an out-of-touch web accessibility influencer.</description><pubDate>Fri, 22 Mar 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Full disclaimer: Before Jakob Nielsen’s very controversial article came out, I didn’t know who he was. I’ve been working intensively on the topic of accessibility for a few years now, but this name hadn’t appeared in my bubble until then.&lt;/p&gt;
  1061. &lt;p&gt;Probably because I tend to follow the “new guard”, such as &lt;a href=&quot;https://www.sarasoueidan.com/&quot;&gt;Sara Soueidan&lt;/a&gt;, &lt;a href=&quot;https://heydonworks.com/&quot;&gt;Heydon Pickering&lt;/a&gt;, &lt;a href=&quot;https://adrianroselli.com/&quot;&gt;Adrian Roselli&lt;/a&gt;, &lt;a href=&quot;https://thinkdobecreate.com/&quot;&gt;Stephanie Eckles&lt;/a&gt; and others whose names I can’t think of right now.&lt;/p&gt;
  1062. &lt;p&gt;I am not an expert in this field either, but through my work I have the opportunity to compare Jakob’s statements with my own experiences. There are already MANY reactions to this article, which Adrian Roselli has summarized here: &lt;a href=&quot;https://adrianroselli.com/2024/03/jakob-has-jumped-the-shark.html&quot;&gt;Jakob has Jumped the Shark&lt;/a&gt;.&lt;/p&gt;
  1063. &lt;p&gt;It wasn’t my plan to write about it, but after my wife read the article and had more questions than answers, I felt inspired to add my two cents. I chose the statements that raised the most questions for me. Here is the link to the article: &lt;a href=&quot;https://web.archive.org/web/20240229233609/https://jakobnielsenphd.substack.com/p/accessibility-generative-ui&quot;&gt;Accessibility Has Failed: Try Generative UI = Individualized UX (archived)&lt;/a&gt;.&lt;/p&gt;
  1064. &lt;h2 id=&quot;disclaimer&quot;&gt;Disclaimer&lt;/h2&gt;
  1065. &lt;p&gt;I use the term “LLM”, which stands for Large Language Model. I refuse to use to term “AI”, which stands for Artificial Intelligence.&lt;/p&gt;
  1066. &lt;p&gt;While I can see the benefits for many other sectors and also as a sparring partner for writing code, these models haven’t shown any sign of intelligence regarding web accessibility. At least in my experience.&lt;/p&gt;
  1067. &lt;h2 id=&quot;summary--opinion&quot;&gt;Summary &amp;#x26; opinion&lt;/h2&gt;
  1068. &lt;p&gt;Out-of-touch, influential old guy working in web accessibility for many years claims that all hope is gone and only AIℱ can save us. People who he thinks are disabled will receive a more “concise” UI, because he thinks they are not able to use a computer and assistive technology.&lt;/p&gt;
  1069. &lt;p&gt;I think this is another big move by AIℱ companies to buy community leaders and to make sure - once the &lt;a href=&quot;https://en.wikipedia.org/wiki/European_Accessibility_Act&quot;&gt;European Accessibility Act&lt;/a&gt; is in action - that people buy their shitty “AI” powered overlays and don’t waste any time and especially money on actually improving the user experience.&lt;/p&gt;
  1070. &lt;p&gt;And what really annoys me, is that people who are new to web accessibility might think that this guy is right and has a couple of “interesting ideas”. It sends a dangerous signal.&lt;/p&gt;
  1071. &lt;h2 id=&quot;the-statements&quot;&gt;The statements&lt;/h2&gt;
  1072. &lt;blockquote&gt;
  1073. &lt;p&gt;Accessibility has failed as a way to make computers usable for disabled users.&lt;/p&gt;
  1074. &lt;/blockquote&gt;
  1075. &lt;p&gt;I tend to disagree. While &lt;a href=&quot;https://webaim.org/projects/million/&quot;&gt;the web is in a horrible state regarding accessibility&lt;/a&gt;, disabled users still seem to make it work and get around. There’s plenty of hardware and software choices to consume content on the web in whatever way works best for you.&lt;/p&gt;
  1076. &lt;blockquote&gt;
  1077. &lt;p&gt;Computers are still &lt;strong&gt;difficult&lt;/strong&gt;, &lt;strong&gt;slow&lt;/strong&gt;, and &lt;strong&gt;unpleasant&lt;/strong&gt; for disabled users, despite about 30 years of trying.&lt;/p&gt;
  1078. &lt;/blockquote&gt;
  1079. &lt;p&gt;Hard to say, do you know ALL disabled users out there, Jakob? Seems like a pretty general statement. If it wasn’t for many people trying, it would probably even worse.&lt;/p&gt;
  1080. &lt;blockquote&gt;
  1081. &lt;p&gt;Where I have always differed from the accessibility movement is that I consider users with disabilities to be simply users.&lt;/p&gt;
  1082. &lt;/blockquote&gt;
  1083. &lt;p&gt;Huh, so all people are the same for you? Very honourable, but it gets tricky when you realise that people have different needs and cultural backgrounds, so you MIGHT want to reconsider as this approach could exclude a large chunk of folks.&lt;/p&gt;
  1084. &lt;blockquote&gt;
  1085. &lt;p&gt;&lt;strong&gt;Accessibility is too expensive&lt;/strong&gt; for most companies to be able to afford everything that’s needed with the current, clumsy implementation.&lt;/p&gt;
  1086. &lt;/blockquote&gt;
  1087. &lt;p&gt;This is true if it’s an afterthought on your agenda and not baked in to your development cycle to begin with. But &lt;a href=&quot;https://www.deque.com/blog/design-code-thinking-accessibility-ground/&quot;&gt;shifting left&lt;/a&gt; can help to reduce costs while your whole team gets educated and more efficient during time, avoiding accessibility related costs in the long run.&lt;/p&gt;
  1088. &lt;blockquote&gt;
  1089. &lt;p&gt;&lt;strong&gt;Accessibility is doomed to create a substandard user experience&lt;/strong&gt;, no matter how much a company invests, particularly for blind users who are given a linear (one-dimensional) auditory user interface to represent the two-dimensional graphical user interface (GUI) designed for most users.&lt;/p&gt;
  1090. &lt;/blockquote&gt;
  1091. &lt;p&gt;Can you back that claim up? Can you define a “substandard user experience”?&lt;/p&gt;
  1092. &lt;blockquote&gt;
  1093. &lt;p&gt;By “old” users, I mainly mean people &lt;strong&gt;older than 75 years&lt;/strong&gt; who start to exhibit major aging symptoms, such as weakened memory. These users need simplified navigation, simplified comparison features that do not require retaining information in short-term memory, and simplified explanations.&lt;/p&gt;
  1094. &lt;/blockquote&gt;
  1095. &lt;p&gt;Sounds reasonable if you give them the choice to choose between a simplified (whatever that means) version and the regular (whatever that means) version. Otherwise it would be a pretty &lt;a href=&quot;https://en.wikipedia.org/wiki/Ableism&quot;&gt;ableist&lt;/a&gt; move.&lt;/p&gt;
  1096. &lt;blockquote&gt;
  1097. &lt;p&gt;On the other hand, I don’t want to slow down a blind user with a screen reader blabbering through that word salad. Yes, I could — and should — edit ChatGPT’s ALT text to be shorter, but even after editing, a description of the appearance of an illustration won’t be useful for task performance.&lt;/p&gt;
  1098. &lt;/blockquote&gt;
  1099. &lt;p&gt;Maybe leave it up to the user to skip your LLM-generated alt text? And how can you generally say it’s not useful? Some images can give context to a website or article and others are decorative. It always depends on the context.&lt;/p&gt;
  1100. &lt;blockquote&gt;
  1101. &lt;p&gt;Estimates from &lt;a href=&quot;https://web.archive.org/web/20240229233609/https://www.oecd.org/skills/piaac/&quot;&gt;international reading research&lt;/a&gt; show that about 40% of the adult population in the United States can be classified as having low literacy. (This is about 100 million customers. Think dollar signs when you read these statistics.)&lt;/p&gt;
  1102. &lt;/blockquote&gt;
  1103. &lt;p&gt;The sad truth is that most companies care about what’s profitable and not what’s ethically right or requested by a minority of users. However, I find this phrasing very weird coming from someone who should work with and for people. I have a feeling that you had dollar signs in your eyes when offered to write this questionable article.&lt;/p&gt;
  1104. &lt;blockquote&gt;
  1105. &lt;p&gt;We need an approach that scales, and that can support users with a wide range of conditions. Luckily, this is now emerging in the form of generative UI.&lt;/p&gt;
  1106. &lt;/blockquote&gt;
  1107. &lt;p&gt;How about doing proper research, educating your team, implementing design with good ol’ HTML, CSS and JavaScript and sprinkle on some &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement&quot;&gt;progressive enhancement&lt;/a&gt;?&lt;/p&gt;
  1108. &lt;p&gt;If each department is in and aware, a little can go a long way here. But I guess it’s easier and more cost efficient to type into a LLM what website you want, copy the code and ship it to production? For a deep-dive, check out this article by Sophie Koonin: &lt;a href=&quot;https://localghost.dev/blog/ai-and-the-trouble-with-inaccessible-saas/&quot;&gt;“AI”, and the trouble with inaccessible SaaS&lt;/a&gt;.&lt;/p&gt;
  1109. &lt;blockquote&gt;
  1110. &lt;p&gt;“Generative UI” is simply the application of artificial intelligence to automatically generate user interface designs, leveraging algorithms that can produce a variety of designs based on specified parameters or data inputs.&lt;/p&gt;
  1111. &lt;/blockquote&gt;
  1112. &lt;p&gt;Based on the &lt;a href=&quot;https://webaim.org/projects/million/&quot;&gt;status quo of the web&lt;/a&gt;? Oh Jakob, then we’re in for a ride. 🚀 Cause most developers still don’t know how heading levels work, what an alternative text is or the difference between anchors and buttons.&lt;/p&gt;
  1113. &lt;blockquote&gt;
  1114. &lt;p&gt;In this &lt;strong&gt;second-generation generative UI&lt;/strong&gt;, the user interface is generated afresh every time the user accesses the app. Most important, this means that different users will get
  1115. drastically different designs. This is how we genuinely help disabled users.&lt;/p&gt;
  1116. &lt;/blockquote&gt;
  1117. &lt;p&gt;How? I mean
 how? What are the criteria for seeing different content? When do you decide that a user classifies as disabled? And why would disabled people want to see different designs than non-disabled people? So you decide who gets the full experience and who’s not capable of being able to enjoy it? Again, sounds pretty ableist to me.&lt;/p&gt;
  1118. &lt;blockquote&gt;
  1119. &lt;p&gt;For example, a more simplified experience can be shown to beginners, and advanced features surfaced for expert users.&lt;/p&gt;
  1120. &lt;/blockquote&gt;
  1121. &lt;p&gt;Oh my god, will you stop throwing in vague fantasy ideas and explain HOW you would actually do it and WHAT the deciding factors are?!&lt;/p&gt;
  1122. &lt;blockquote&gt;
  1123. &lt;p&gt;We will no longer be designing the exact user interface that our users will see, since the UI will be different for each user and generated at runtime. Instead, UX designers will specify the rules and heuristics the AI uses to generate the UI.&lt;/p&gt;
  1124. &lt;/blockquote&gt;
  1125. &lt;p&gt;This might sound good in theory, but do you think developers and designers will question the output of a LLM while their CEO is breathing in their neck and tells them to “move fast &amp;#x26; break things”? It’s more likely they will just use whatever looks good and move on.&lt;/p&gt;
  1126. &lt;blockquote&gt;
  1127. &lt;p&gt;Besides creating optimized 1-D representations for blind users, generative UI can also optimize the user experience in other ways. Since it is slower to listen than to visually scan text, the version for blind users can be generated to be more concise.&lt;/p&gt;
  1128. &lt;/blockquote&gt;
  1129. &lt;p&gt;Dude, this statement reminds me SO MUCH of the whole &lt;a href=&quot;https://en.wikipedia.org/wiki/Loudness_war&quot;&gt;loudness war&lt;/a&gt; debate: “I don’t want to leave it up to the listener to turn up the volume, I’ll do it for them! The louder my record, the better it will sound than anyone else’s!”&lt;/p&gt;
  1130. &lt;p&gt;&lt;em&gt;My brother in Christ&lt;/em&gt;, have you ever considered in your 100+ years working in the field, that screen reader users can increase the speed of their app? That you don’t need to generate a more “concise” version but instead leave the choice to the users?&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Developer &amp; design conferences (in Europe)</title><link>https://www.stevefrenzel.dev/blog/developer-and-design-conferences-in-europe/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/developer-and-design-conferences-in-europe/</guid><description>Mostly smaller conferences recommended by the cool kids on Mastodon. ❀ Suggest something and I might add it to the list!</description><pubDate>Fri, 15 Mar 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Once again I &lt;a href=&quot;https://mastodon.online/@stvfrnzl/112076174840502681&quot;&gt;summoned the swarm intelligence of Mastodon&lt;/a&gt; so I need to do less research for a blog article of mine. Conferences are not only a great way to get out of the office, it’s also an opportunity to get in touch with “the scene”. Newsletters and RSS feeds can only do so much and it’s a lot more inspiring to listen to (and watch) people from the community about topics that are important to them and relevant.&lt;/p&gt;
  1131. &lt;p&gt;I’ve only been to a ginormous one (WeAreDevelopers World Congress) and a cozy small-ish one (SmashingConf Belgium), so I can’t compare that much, but my experience so far has been great.&lt;/p&gt;
  1132. &lt;p&gt;Traveling is fun and what could be better than a paid trip by your employer to explore new cities, meet like-minded people and nerd out about web dev and design related things? Bonus for your employer: You come back with fresh ideas! ✹&lt;/p&gt;
  1133. &lt;p&gt;Which is why I created this list for you (and me), so you can suggest it to your colleagues and bosses. Please let me know if you want me to add a conference, I consider this article a living thing. See you there!&lt;/p&gt;
  1134. &lt;h2 id=&quot;belgium&quot;&gt;Belgium&lt;/h2&gt;
  1135. &lt;ul&gt;
  1136. &lt;li&gt;&lt;a href=&quot;https://smashingconf.com/antwerp-2024&quot;&gt;SmashingConf - Antwerp&lt;/a&gt;&lt;/li&gt;
  1137. &lt;/ul&gt;
  1138. &lt;h2 id=&quot;germany&quot;&gt;Germany&lt;/h2&gt;
  1139. &lt;ul&gt;
  1140. &lt;li&gt;&lt;a href=&quot;https://beyondtellerrand.com/&quot;&gt;beyond tellerand - DĂŒsseldorf&lt;/a&gt;&lt;/li&gt;
  1141. &lt;li&gt;&lt;a href=&quot;https://smashingconf.com/freiburg-2024&quot;&gt;SmashingConf - Freiburg&lt;/a&gt;&lt;/li&gt;
  1142. &lt;li&gt;&lt;a href=&quot;https://www.wearedevelopers.com/world-congress&quot;&gt;WeAreDevelopers World Congress - Berlin&lt;/a&gt;&lt;/li&gt;
  1143. &lt;/ul&gt;
  1144. &lt;h2 id=&quot;netherlands&quot;&gt;Netherlands&lt;/h2&gt;
  1145. &lt;ul&gt;
  1146. &lt;li&gt;&lt;a href=&quot;https://cssday.nl/2024&quot;&gt;CSS Day - Amsterdam&lt;/a&gt;&lt;/li&gt;
  1147. &lt;/ul&gt;
  1148. &lt;h2 id=&quot;portugal&quot;&gt;Portugal&lt;/h2&gt;
  1149. &lt;ul&gt;
  1150. &lt;li&gt;&lt;a href=&quot;https://websummit.com/&quot;&gt;Web Summit - Lisbon&lt;/a&gt; (Trigger warning: Auto-playing video which doesn’t respect “reduce motion” setting!)&lt;/li&gt;
  1151. &lt;/ul&gt;
  1152. &lt;h2 id=&quot;spain&quot;&gt;Spain&lt;/h2&gt;
  1153. &lt;ul&gt;
  1154. &lt;li&gt;&lt;a href=&quot;https://penpotfest.org/&quot;&gt;Penpot Fest - Barcelona&lt;/a&gt;&lt;/li&gt;
  1155. &lt;/ul&gt;
  1156. &lt;h2 id=&quot;switzerland&quot;&gt;Switzerland&lt;/h2&gt;
  1157. &lt;ul&gt;
  1158. &lt;li&gt;&lt;a href=&quot;https://frontconference.com/&quot;&gt;Front Conference - Zurich&lt;/a&gt; (Trigger warning: Auto-playing video which doesn’t respect “reduce motion” setting!)&lt;/li&gt;
  1159. &lt;/ul&gt;
  1160. &lt;h2 id=&quot;united-kingdom&quot;&gt;United Kingdom&lt;/h2&gt;
  1161. &lt;ul&gt;
  1162. &lt;li&gt;&lt;a href=&quot;https://ffconf.org/&quot;&gt;ffconf - Brighton&lt;/a&gt;&lt;/li&gt;
  1163. &lt;li&gt;&lt;a href=&quot;https://heypresents.com/&quot;&gt;Hey! All Day - Leeds&lt;/a&gt;&lt;/li&gt;
  1164. &lt;li&gt;&lt;a href=&quot;https://patternsday.com/&quot;&gt;Patterns Day - Brighton&lt;/a&gt;&lt;/li&gt;
  1165. &lt;li&gt;&lt;a href=&quot;https://2024.stateofthebrowser.com/&quot;&gt;State of the Browser - London&lt;/a&gt;&lt;/li&gt;
  1166. &lt;/ul&gt;
  1167. &lt;p&gt;&lt;em&gt;Photo credit: &lt;a href=&quot;https://unsplash.com/@theunsteady5?utm_content=creditCopyText&amp;#x26;utm_medium=referral&amp;#x26;utm_source=unsplash&quot;&gt;Edwin Andrade&lt;/a&gt; on &lt;a href=&quot;https://unsplash.com/photos/people-raising-their-hands-4V1dC_eoCwg?utm_content=creditCopyText&amp;#x26;utm_medium=referral&amp;#x26;utm_source=unsplash&quot;&gt;Unsplash&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Celebrating women in music</title><link>https://www.stevefrenzel.dev/blog/celebrating-women-in-music/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/celebrating-women-in-music/</guid><description>It&apos;s international women&apos;s fight day. ✊ A day to celebrate the superior sex and worship them and their music!</description><pubDate>Fri, 08 Mar 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Today is international women’s fight day and I want to celebrate all the women who help me get through the day with their music, lift my spirits or simply put me in a certain mood.&lt;/p&gt;
  1168. &lt;p&gt;No matter if you’re into metal, pop, hardcore, punk or something in-between: I bet there’s at least on record in this list of female-fronted and man-reared albums that you’re gonna like. 🎧&lt;/p&gt;
  1169. &lt;h2 id=&quot;sound--color-by-alabama-shakes&quot;&gt;“Sound &amp;#x26; Color” by Alabama Shakes&lt;/h2&gt;
  1170. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-music.BNLChxVI_Z2llnuB.webp&quot; alt=&quot;&amp;#34;Sound &amp;#38;#x26; Color&amp;#34; by Alabama Shakes&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1171. &lt;p&gt;The only interesting Grammy category for me is “Best Engineered Album”, which is how I discovered this awesome band!&lt;/p&gt;
  1172. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/alabama-shakes/sound-and-color-2015&quot;&gt;Listen to “Sound &amp;#x26; Color” by Alabama Shakes&lt;/a&gt;&lt;/p&gt;
  1173. &lt;h2 id=&quot;is-it-light-where-you-are-by-art-school-girlfriend&quot;&gt;”Is It Light Where You Are” by Art School Girlfriend&lt;/h2&gt;
  1174. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-music.BYJPZQug_Z1zSBsq.webp&quot; alt=&quot;&amp;#34;Is It Light Where You Are&amp;#34; by Art School Girlfriend&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1175. &lt;p&gt;A friend recommended this one, which is prefect for a moody, rainy day. Or maybe Tokyo at night.&lt;/p&gt;
  1176. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/artschoolgirlfriend/is-it-light-where-you-are&quot;&gt;Is It Light Where You Are” by Art School Girlfriend&lt;/a&gt;&lt;/p&gt;
  1177. &lt;h2 id=&quot;only-constant-by-gel&quot;&gt;”Only Constant” by Gel&lt;/h2&gt;
  1178. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-music.CeYFG0WN_Z1zaOrC.webp&quot; alt=&quot;&amp;#34;Only Constant&amp;#34; by Gel&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1179. &lt;p&gt;Imagine Motörhead with a strong Hardcore and Punk influence plus female vocals and you”ll know what to expect from this one.&lt;/p&gt;
  1180. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/gel2/only-constant&quot;&gt;Listen to “Only Constant” by Gel&lt;/a&gt;&lt;/p&gt;
  1181. &lt;h2 id=&quot;keepsake-by-hatchie&quot;&gt;”Keepsake” by Hatchie&lt;/h2&gt;
  1182. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/4-music._Xs_EhA9_qMc7C.webp&quot; alt=&quot;&amp;#34;Keepsake&amp;#34; by Hatchie&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1183. &lt;p&gt;Dreamy pop music with a 90s vibe. Hard to describe, but a pleasure to listen to.&lt;/p&gt;
  1184. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/hatchie/keepsake&quot;&gt;Listen to “Keepsake” by Hatchie&lt;/a&gt;&lt;/p&gt;
  1185. &lt;h2 id=&quot;retrovision-by-honey-revenge&quot;&gt;”Retrovision” by Honey Revenge&lt;/h2&gt;
  1186. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/5-music.C9FL85Qp_Z1bpAUL.webp&quot; alt=&quot;&amp;#34;Retrovision&amp;#34; by Honey Revenge&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1187. &lt;p&gt;This is for the old school Paramore funs: Epic hooks, fat guitars and juicy drums.&lt;/p&gt;
  1188. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/honeyrevenge/retrovision&quot;&gt;Listen to “Retrovision” by Honey Revenge&lt;/a&gt;&lt;/p&gt;
  1189. &lt;h2 id=&quot;evergreen-by-pvris&quot;&gt;”EVERGREEN” by PVRIS&lt;/h2&gt;
  1190. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/6-music.CoXt2rCY_Z2qXyxb.webp&quot; alt=&quot;&amp;#34;Evergreen&amp;#34; by Paris&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1191. &lt;p&gt;On of my favorite records ever! Every song is super catchy, the hooks are spectular and the production is stellar. My go-to album for getting the crowd pumped up before a gig (when I work as live sound engineer).&lt;/p&gt;
  1192. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/pvris/evergreen&quot;&gt;Listen to “EVERGREEN” by PVRIS&lt;/a&gt;&lt;/p&gt;
  1193. &lt;h2 id=&quot;the-fear-of-fear-by-spiritbox&quot;&gt;”The Fear of Fear” by Spiritbox&lt;/h2&gt;
  1194. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/7-music.B6fAP7Ep_Z1zgCdo.webp&quot; alt=&quot;ALT_T&amp;#34;The Fear of Fear&amp;#34; by SpiritboxEXT&quot; width=&quot;1280&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1195. &lt;p&gt;Canada’s finest 🇹🇩✹ If you”re a fan of modern metal, low-tuned guitars, beefy screamed vocals and great vocal melodies, then GET THE FUCK IN HERE 👇&lt;/p&gt;
  1196. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/spiritbox/the-fear-of-fear&quot;&gt;Listen to “The Fear of Fear” by Spiritbox&lt;/a&gt;&lt;/p&gt;
  1197. &lt;h2 id=&quot;copingmechanism-by-willow&quot;&gt;”COPINGMECHANISM” by WILLOW&lt;/h2&gt;
  1198. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/8-music.DmPxm0H2_1MfGL1.webp&quot; alt=&quot;&amp;#34;Coping Mechanism&amp;#34; by Willow&quot; width=&quot;1200&quot; height=&quot;1200&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1199. &lt;p&gt;Her music is a bit diffult to describe, but I would call it super polished garage pop? The songs are well written and produced but sound raw at the same time.&lt;/p&gt;
  1200. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/willow-2/copingmechanism2022&quot;&gt;Listen to “COPINGMECHANISM” by WILLOW&lt;/a&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Create a custom theme in iA Presenter (reworked)</title><link>https://www.stevefrenzel.dev/blog/create-a-custom-theme-in-ia-presenter-reworked/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/create-a-custom-theme-in-ia-presenter-reworked/</guid><description>No disrespect to the iA team, but their documentation had plenty of room for improvement. I hope this will be a useful reference to you. đŸ€—</description><pubDate>Wed, 06 Mar 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;a href=&quot;https://ia.net/presenter&quot;&gt;iA Presenter&lt;/a&gt; is THE tool for me to create presentations easily and quickly. However, I had a hard time creating my own theme because their tutorial has two major weaknesses for me:&lt;/p&gt;
  1201. &lt;ol&gt;
  1202. &lt;li&gt;The order doesn’t make sense to me&lt;/li&gt;
  1203. &lt;li&gt;Individual sections cannot be navigated via anchor element and therefore cannot be shared&lt;/li&gt;
  1204. &lt;/ol&gt;
  1205. &lt;p&gt;To make it easier for other people to create presentations with this amazing app, I have adapted the instructions so that they make sense to me. As a bonus, I’ve also added two goodies, you can find them in the &lt;a href=&quot;#bonus&quot;&gt;bonus section&lt;/a&gt;!&lt;/p&gt;
  1206. &lt;p&gt;I did some heavy editing regarding words and grammar, but mostly it’s still the original instructions, which you can find here: &lt;a href=&quot;#developing-custom-themes&quot;&gt;Developing custom themes&lt;/a&gt;. Some names are different in version 1.2, so I updated them accordingly. &lt;em&gt;All images are property of iA, I do not own any rights!&lt;/em&gt; Here is the reworked version:&lt;/p&gt;
  1207. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  1208. &lt;ul&gt;
  1209. &lt;li&gt;&lt;a href=&quot;#introduction&quot;&gt;Introduction&lt;/a&gt;&lt;/li&gt;
  1210. &lt;li&gt;&lt;a href=&quot;#developing-custom-themes&quot;&gt;Developing custom themes&lt;/a&gt;
  1211. &lt;ul&gt;
  1212. &lt;li&gt;&lt;a href=&quot;#1-create-a-new-theme&quot;&gt;1. Create a new theme&lt;/a&gt;&lt;/li&gt;
  1213. &lt;li&gt;&lt;a href=&quot;#2-navigate-to-the-theme-files&quot;&gt;2. Navigate to the theme files&lt;/a&gt;&lt;/li&gt;
  1214. &lt;li&gt;&lt;a href=&quot;#3-use-your-new-theme&quot;&gt;3. Use your new theme&lt;/a&gt;&lt;/li&gt;
  1215. &lt;li&gt;&lt;a href=&quot;#4-modify-your-theme&quot;&gt;4. Modify your theme&lt;/a&gt;&lt;/li&gt;
  1216. &lt;/ul&gt;
  1217. &lt;/li&gt;
  1218. &lt;li&gt;&lt;a href=&quot;#theme-structure&quot;&gt;Theme structure&lt;/a&gt;&lt;/li&gt;
  1219. &lt;li&gt;&lt;a href=&quot;#slides-html-structure&quot;&gt;Slides HTML structure&lt;/a&gt;&lt;/li&gt;
  1220. &lt;li&gt;&lt;a href=&quot;#layouts&quot;&gt;Layouts&lt;/a&gt;
  1221. &lt;ul&gt;
  1222. &lt;li&gt;&lt;a href=&quot;#1-cover&quot;&gt;1. Cover&lt;/a&gt;&lt;/li&gt;
  1223. &lt;li&gt;&lt;a href=&quot;#2-title&quot;&gt;2. Title&lt;/a&gt;&lt;/li&gt;
  1224. &lt;li&gt;&lt;a href=&quot;#3-section&quot;&gt;3. Section&lt;/a&gt;&lt;/li&gt;
  1225. &lt;li&gt;&lt;a href=&quot;#4-split&quot;&gt;4. Split&lt;/a&gt;&lt;/li&gt;
  1226. &lt;li&gt;&lt;a href=&quot;#5-grid&quot;&gt;5. Grid&lt;/a&gt;&lt;/li&gt;
  1227. &lt;li&gt;&lt;a href=&quot;#6-caption&quot;&gt;6. Caption&lt;/a&gt;&lt;/li&gt;
  1228. &lt;li&gt;&lt;a href=&quot;#7-title-image&quot;&gt;7. Title image&lt;/a&gt;&lt;/li&gt;
  1229. &lt;li&gt;&lt;a href=&quot;#8-default-text&quot;&gt;8. Default (text)&lt;/a&gt;&lt;/li&gt;
  1230. &lt;/ul&gt;
  1231. &lt;/li&gt;
  1232. &lt;li&gt;&lt;a href=&quot;#alignments&quot;&gt;Alignments&lt;/a&gt;
  1233. &lt;ul&gt;
  1234. &lt;li&gt;&lt;a href=&quot;#1-horizontal-alignment&quot;&gt;1. Horizontal alignment&lt;/a&gt;&lt;/li&gt;
  1235. &lt;li&gt;&lt;a href=&quot;#2-vertical-alignment&quot;&gt;2. Vertical alignment&lt;/a&gt;&lt;/li&gt;
  1236. &lt;/ul&gt;
  1237. &lt;/li&gt;
  1238. &lt;li&gt;&lt;a href=&quot;#responsiveness&quot;&gt;Responsiveness&lt;/a&gt;&lt;/li&gt;
  1239. &lt;li&gt;&lt;a href=&quot;#appearances&quot;&gt;Appearances&lt;/a&gt;&lt;/li&gt;
  1240. &lt;li&gt;&lt;a href=&quot;#backgrounds&quot;&gt;Backgrounds&lt;/a&gt;&lt;/li&gt;
  1241. &lt;li&gt;&lt;a href=&quot;#gradient-background&quot;&gt;Gradient background&lt;/a&gt;&lt;/li&gt;
  1242. &lt;li&gt;&lt;a href=&quot;#custom-fonts&quot;&gt;Custom fonts&lt;/a&gt;
  1243. &lt;ul&gt;
  1244. &lt;li&gt;&lt;a href=&quot;#1-add-the-font-files-to-your-theme-folder&quot;&gt;1. Add the font files to your theme folder&lt;/a&gt;&lt;/li&gt;
  1245. &lt;li&gt;&lt;a href=&quot;#2-reference-the-fonts-at-the-beginning-of-your-css&quot;&gt;2. Reference the fonts at the beginning of your CSS&lt;/a&gt;&lt;/li&gt;
  1246. &lt;li&gt;&lt;a href=&quot;#3-add-meta-data&quot;&gt;3. Add meta data&lt;/a&gt;&lt;/li&gt;
  1247. &lt;/ul&gt;
  1248. &lt;/li&gt;
  1249. &lt;li&gt;&lt;a href=&quot;#using-images-from-your-theme-in-css&quot;&gt;Using images from your theme in CSS&lt;/a&gt;&lt;/li&gt;
  1250. &lt;li&gt;&lt;a href=&quot;#bonus&quot;&gt;Bonus&lt;/a&gt;&lt;/li&gt;
  1251. &lt;/ul&gt;
  1252. &lt;h2 id=&quot;introduction&quot;&gt;Introduction&lt;/h2&gt;
  1253. &lt;p&gt;A &lt;a href=&quot;https://ia.net/presenter/support/visuals/in-app-themes&quot;&gt;Theme&lt;/a&gt; is a set of files allowing to change the visual style of a presentation.&lt;/p&gt;
  1254. &lt;p&gt;You can change the style of a presentation at different levels:&lt;/p&gt;
  1255. &lt;ul&gt;
  1256. &lt;li&gt;Using a specific Theme and its CSS&lt;/li&gt;
  1257. &lt;li&gt;Using presets&lt;/li&gt;
  1258. &lt;li&gt;Depending on your slide content (auto-layout)&lt;/li&gt;
  1259. &lt;li&gt;By defining CSS variables in the Style Inspector&lt;/li&gt;
  1260. &lt;/ul&gt;
  1261. &lt;p&gt;Note that if you are not very comfortable with HTML and CSS, creating a custom theme might be difficult. To help you, we have created a &lt;a href=&quot;https://ia.net/topics/theme-builder-for-ia-presenter&quot;&gt;Theme Builder for iA Presenter&lt;/a&gt; that you can access here: &lt;a href=&quot;https://themes.ia.net/presenter/builder/editor&quot;&gt;themes.ia.net&lt;/a&gt;&lt;/p&gt;
  1262. &lt;p&gt;But if you would rather get your hands dirty and do it yourself, keep on reading.&lt;/p&gt;
  1263. &lt;h2 id=&quot;developing-custom-themes&quot;&gt;Developing custom themes&lt;/h2&gt;
  1264. &lt;h3 id=&quot;1-create-a-new-theme&quot;&gt;1. Create a new theme&lt;/h3&gt;
  1265. &lt;p&gt;Go to &lt;code&gt;Settings&lt;/code&gt; → &lt;code&gt;Themes&lt;/code&gt;. Click on the &lt;code&gt;+&lt;/code&gt; symbol in the lower left corner, select &lt;code&gt;Create Theme...&lt;/code&gt; and enter a name.&lt;/p&gt;
  1266. &lt;h3 id=&quot;2-navigate-to-the-theme-files&quot;&gt;2. Navigate to the theme files&lt;/h3&gt;
  1267. &lt;p&gt;Right-click on a theme and select &lt;code&gt;Show in Finder&lt;/code&gt;.&lt;/p&gt;
  1268. &lt;h3 id=&quot;3-use-your-new-theme&quot;&gt;3. Use your new theme&lt;/h3&gt;
  1269. &lt;p&gt;Open a presentation, go to the &lt;code&gt;Design&lt;/code&gt; tab of the &lt;code&gt;Inspector&lt;/code&gt;, and select the newly created theme.&lt;/p&gt;
  1270. &lt;h3 id=&quot;4-modify-your-theme&quot;&gt;4. Modify your theme&lt;/h3&gt;
  1271. &lt;p&gt;Open the &lt;code&gt;YOUR_THEME_NAME.css&lt;/code&gt; file in your preferred editor and add your custom CSS.&lt;/p&gt;
  1272. &lt;h2 id=&quot;theme-structure&quot;&gt;Theme structure&lt;/h2&gt;
  1273. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-theme-structure.DzOJcZ0Y_ZA679o.webp&quot; alt=&quot;Illustration of a file structure, marking several files with a number: image1.jpg to image4.jpg has the number 1. presets.json has the number 2. roboto-slab-bold.woff2 and roboto-slab-regular.woff2 have the number 3. stains.css has the number 4. template.jpg has the number 5. template.json has the number 6.&quot; width=&quot;1536&quot; height=&quot;740&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1274. &lt;ol&gt;
  1275. &lt;li&gt;Themes assets&lt;/li&gt;
  1276. &lt;li&gt;Presets (Predefined sets of CSS variables)&lt;/li&gt;
  1277. &lt;li&gt;Custom fonts&lt;/li&gt;
  1278. &lt;li&gt;Theme CSS definitions&lt;/li&gt;
  1279. &lt;li&gt;Theme thumbnail&lt;/li&gt;
  1280. &lt;li&gt;Theme definition&lt;/li&gt;
  1281. &lt;/ol&gt;
  1282. &lt;h2 id=&quot;slides-html-structure&quot;&gt;Slides HTML structure&lt;/h2&gt;
  1283. &lt;ul&gt;
  1284. &lt;li&gt;A presentation has a collection of &lt;em&gt;slide containers&lt;/em&gt; and a collection of &lt;em&gt;slide backgrounds&lt;/em&gt;
  1285. &lt;ul&gt;
  1286. &lt;li&gt;Each slide generates a &lt;em&gt;slide container&lt;/em&gt; and a &lt;em&gt;slide background&lt;/em&gt; &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt;&lt;/li&gt;
  1287. &lt;li&gt;The &lt;em&gt;slide background&lt;/em&gt; has the same layout CSS class as the &lt;em&gt;slide container&lt;/em&gt;&lt;/li&gt;
  1288. &lt;/ul&gt;
  1289. &lt;/li&gt;
  1290. &lt;li&gt;If there are no footnotes, the footnotes &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; has a height of &lt;code&gt;0&lt;/code&gt;
  1291. &lt;ul&gt;
  1292. &lt;li&gt;If there are no header and footer, the slide content occupies all the available space&lt;/li&gt;
  1293. &lt;/ul&gt;
  1294. &lt;/li&gt;
  1295. &lt;li&gt;You can choose to hide headers and footers on a per layout basis (see illustration for list of classes): For example &lt;code&gt;.cover-container .header { display: none; }&lt;/code&gt;&lt;/li&gt;
  1296. &lt;/ul&gt;
  1297. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-html-structure.C9SaVCE9_W5fAY.webp&quot; alt=&quot;Illustration showing four rows of blocks to visualize where certain CSS classes can be found. The title says &amp;#34;Slide container, depends on layout, see layouts section for list of possible classes&amp;#34;. Row one: .header class, containing three more classes: .leading, .middle and .trailing. Row two says &amp;#34;Slide content, see layouts section for list of possible classes&amp;#34;. Row three: .footnotes. Row four: .footer, containing three more classes: .leading, .middle and .trailing. &quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1298. &lt;h2 id=&quot;layouts&quot;&gt;Layouts&lt;/h2&gt;
  1299. &lt;h3 id=&quot;1-cover&quot;&gt;1. Cover&lt;/h3&gt;
  1300. &lt;ul&gt;
  1301. &lt;li&gt;Container CSS Class: &lt;code&gt;.cover-container&lt;/code&gt;&lt;/li&gt;
  1302. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-cover&lt;/code&gt;&lt;/li&gt;
  1303. &lt;/ul&gt;
  1304. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-layouts.DTpRYUeR_1rB7xC.webp&quot; alt=&quot;Illustration showing two screens: A level one Markdown heading and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1305. &lt;h3 id=&quot;2-title&quot;&gt;2. Title&lt;/h3&gt;
  1306. &lt;ul&gt;
  1307. &lt;li&gt;Container CSS Class: &lt;code&gt;.title-container&lt;/code&gt;&lt;/li&gt;
  1308. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-title&lt;/code&gt;&lt;/li&gt;
  1309. &lt;/ul&gt;
  1310. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/4-layouts.D1Py633l_ZUTczL.webp&quot; alt=&quot;Illustration showing two screens: A level two Markdown heading and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1311. &lt;h3 id=&quot;3-section&quot;&gt;3. Section&lt;/h3&gt;
  1312. &lt;ul&gt;
  1313. &lt;li&gt;Container CSS Class: &lt;code&gt;.section-container&lt;/code&gt;&lt;/li&gt;
  1314. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-section&lt;/code&gt;&lt;/li&gt;
  1315. &lt;/ul&gt;
  1316. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/5-layouts.sRKyW4wv_Z1VdyIs.webp&quot; alt=&quot;Illustration showing two screens: A level three Markdown heading and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1317. &lt;h3 id=&quot;4-split&quot;&gt;4. Split&lt;/h3&gt;
  1318. &lt;ul&gt;
  1319. &lt;li&gt;Container CSS Class: &lt;code&gt;.v-split-container&lt;/code&gt;&lt;/li&gt;
  1320. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-v-split&lt;/code&gt;&lt;/li&gt;
  1321. &lt;/ul&gt;
  1322. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/6-layouts.npSPMC8z_Z1kbVaV.webp&quot; alt=&quot;Illustration showing two screens: A level three Markdown heading with an image url below and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1323. &lt;h3 id=&quot;5-grid&quot;&gt;5. Grid&lt;/h3&gt;
  1324. &lt;ul&gt;
  1325. &lt;li&gt;Container CSS Class: &lt;code&gt;.grid-container&lt;/code&gt;&lt;/li&gt;
  1326. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-grid&lt;/code&gt;&lt;/li&gt;
  1327. &lt;/ul&gt;
  1328. &lt;p&gt;The Grid layout also has a CSS class indicating the number of grid cells at the slide content &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; level: &lt;code&gt;.grid-items-2&lt;/code&gt;, &lt;code&gt;.grid-items-3&lt;/code&gt;, &lt;code&gt;.grid-items-4&lt;/code&gt;, and so on.&lt;/p&gt;
  1329. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/7-layouts.J0u5c6Az_19MMWe.webp&quot; alt=&quot;Illustration showing two screens: A level three Markdown heading with four image urls below and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1330. &lt;h3 id=&quot;6-caption&quot;&gt;6. Caption&lt;/h3&gt;
  1331. &lt;ul&gt;
  1332. &lt;li&gt;Container CSS Class: &lt;code&gt;.caption-container&lt;/code&gt;&lt;/li&gt;
  1333. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-caption&lt;/code&gt;&lt;/li&gt;
  1334. &lt;/ul&gt;
  1335. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/8-layouts.BqbPweGP_Z17DHwL.webp&quot; alt=&quot;Illustration showing two screens: An image url with a level four Markdown heading below and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1336. &lt;h3 id=&quot;7-title-image&quot;&gt;7. Title image&lt;/h3&gt;
  1337. &lt;ul&gt;
  1338. &lt;li&gt;Container CSS Class: &lt;code&gt;.title-image-container&lt;/code&gt;&lt;/li&gt;
  1339. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-title-image&lt;/code&gt;&lt;/li&gt;
  1340. &lt;/ul&gt;
  1341. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/9-layouts.BymKpmWk_Z1ddXKQ.webp&quot; alt=&quot;Illustration showing two screens: An level four Markdown heading with an image url below and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1342. &lt;h3 id=&quot;8-default-text&quot;&gt;8. Default (text)&lt;/h3&gt;
  1343. &lt;ul&gt;
  1344. &lt;li&gt;Container CSS Class: &lt;code&gt;.default-container&lt;/code&gt;&lt;/li&gt;
  1345. &lt;li&gt;Slide Content CSS Class: &lt;code&gt;.layout-default&lt;/code&gt;&lt;/li&gt;
  1346. &lt;/ul&gt;
  1347. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/10-layouts.DcZdru2b_Z1cLU1l.webp&quot; alt=&quot;Illustration showing two screens: Some body text and what it will look like.&quot; width=&quot;1536&quot; height=&quot;864&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1348. &lt;h2 id=&quot;alignments&quot;&gt;Alignments&lt;/h2&gt;
  1349. &lt;p&gt;You need to target the inner &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; of each layout:&lt;/p&gt;
  1350. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-cover&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1351. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  justify-content&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;flex-end&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;; &lt;/span&gt;&lt;span style=&quot;color:#6A737D&quot;&gt;/* vertical alignment */&lt;/span&gt;&lt;/span&gt;
  1352. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  align-items&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;flex-start&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;; &lt;/span&gt;&lt;span style=&quot;color:#6A737D&quot;&gt;/* horizontal alignment */&lt;/span&gt;&lt;/span&gt;
  1353. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1354. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1355. &lt;h3 id=&quot;1-horizontal-alignment&quot;&gt;1. Horizontal alignment&lt;/h3&gt;
  1356. &lt;p&gt;Use the &lt;code&gt;align-items&lt;/code&gt; property with the &lt;code&gt;flex-start&lt;/code&gt;, &lt;code&gt;center&lt;/code&gt; or &lt;code&gt;flex-end&lt;/code&gt; value to &lt;em&gt;horizontally&lt;/em&gt; align it either left, center or right.&lt;/p&gt;
  1357. &lt;h3 id=&quot;2-vertical-alignment&quot;&gt;2. Vertical alignment&lt;/h3&gt;
  1358. &lt;p&gt;Use the &lt;code&gt;justify-content&lt;/code&gt; property with the &lt;code&gt;flex-start&lt;/code&gt;, &lt;code&gt;center&lt;/code&gt; or &lt;code&gt;flex-end&lt;/code&gt; value to &lt;em&gt;vertically&lt;/em&gt; align it either left, center or right.&lt;/p&gt;
  1359. &lt;h2 id=&quot;responsiveness&quot;&gt;Responsiveness&lt;/h2&gt;
  1360. &lt;p&gt;The themes are responsive. By default, CSS applies to mobile devices. If you want to target non-mobile devices:&lt;/p&gt;
  1361. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;@media&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; (&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;min-width&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;768&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;) { ... }&lt;/span&gt;&lt;/span&gt;
  1362. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1363. &lt;p&gt;You can add additional breakpoints if, for instance, you want to provide different font-size/margins depending on the viewport size. However, iA Presenter already has its logic, and defaults should be enough.&lt;/p&gt;
  1364. &lt;h2 id=&quot;appearances&quot;&gt;Appearances&lt;/h2&gt;
  1365. &lt;p&gt;iA Presenter uses a &lt;code&gt;.dark&lt;/code&gt; and &lt;code&gt;.light&lt;/code&gt; CSS class. – These classes are set per layout. – You can force the appearance for a specific layout in a custom theme in the &lt;code&gt;template.json&lt;/code&gt; file:&lt;/p&gt;
  1366. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;json&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{&lt;/span&gt;&lt;/span&gt;
  1367. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;Name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;New York&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1368. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;Version&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;0.1&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1369. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;Author&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;iA&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1370. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;ShortDescription&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Stylish, bold, classy.&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1371. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;LongDescription&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Stylish, bold, classy&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;\n&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;- Different sizes for headlines&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;\n&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;- Simple color background&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;\n&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;- Default white on black&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;\n&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;- Default font: New York&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1372. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;Css&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;newyork.css&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1373. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;TitleFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;New York&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1374. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;BodyFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;New York&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1375. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;Layouts&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: [&lt;/span&gt;&lt;/span&gt;
  1376. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {&lt;/span&gt;&lt;/span&gt;
  1377. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Cover&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1378. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Classes&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;invert&quot;&lt;/span&gt;&lt;/span&gt;
  1379. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    },&lt;/span&gt;&lt;/span&gt;
  1380. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {&lt;/span&gt;&lt;/span&gt;
  1381. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Title&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1382. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Classes&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;invert&quot;&lt;/span&gt;&lt;/span&gt;
  1383. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    }&lt;/span&gt;&lt;/span&gt;
  1384. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  ]&lt;/span&gt;&lt;/span&gt;
  1385. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1386. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1387. &lt;h2 id=&quot;backgrounds&quot;&gt;Backgrounds&lt;/h2&gt;
  1388. &lt;p&gt;You can use regular bitmap images (for example &lt;code&gt;.jpg&lt;/code&gt; or &lt;code&gt;.png&lt;/code&gt;), but iA Presenter also supports &lt;code&gt;.svg&lt;/code&gt; backgrounds. Background images can also be inlined directly in the CSS as shown below. You can target a specific layout:&lt;/p&gt;
  1389. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.backgrounds&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; .v-split-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1390. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  background-image&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&apos;data:image/svg+xml;utf8,&amp;#x3C;svg viewBox=&quot;0 0 1024 600&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xml:space=&quot;preserve&quot; fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; stroke-linejoin=&quot;round&quot; stroke-miterlimit=&quot;2&quot;&gt;&amp;#x3C;path fill=&quot;red&quot; d=&quot;m541.526-57.455 584.065 49.14-56.35 669.755-584.065-49.14z&quot;/&gt;&amp;#x3C;/svg&gt;&apos;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/span&gt;
  1391. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  background-size&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;cover&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1392. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  background-position&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;center&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1393. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1394. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1395. &lt;p&gt;If you use a inline SVG as url directly in your CSS file, you’ll need to take care of how you declare colors. Colors in hexadecimal format (like &lt;code&gt;#FFFFFF&lt;/code&gt;) will break your CSS. Instead, you’ll need to use the &lt;code&gt;rgb(0,0,0)&lt;/code&gt; format.&lt;/p&gt;
  1396. &lt;p&gt;If you want to target all backgrounds, no matter the layout, target the &lt;code&gt;.slide-background&lt;/code&gt; class.&lt;/p&gt;
  1397. &lt;h2 id=&quot;gradient-background&quot;&gt;Gradient background&lt;/h2&gt;
  1398. &lt;p&gt;You need to define two different gradients: One per appearance, light and dark. These gradients are defined in the &lt;code&gt;presets.json&lt;/code&gt; file:&lt;/p&gt;
  1399. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;json&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;{&lt;/span&gt;&lt;/span&gt;
  1400. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  &quot;Presets&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: [&lt;/span&gt;&lt;/span&gt;
  1401. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {&lt;/span&gt;&lt;/span&gt;
  1402. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Name&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Default&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1403. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;TitleFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;system-ui&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1404. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;BodyFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;system-ui&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1405. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Appearance&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;dark&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1406. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;DarkBodyTextColor&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#000000&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1407. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;LightBodyTextColor&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#ffffff&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1408. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;DarkTitleTextColor&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#000000&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1409. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;LightTitleTextColor&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#ffffff&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1410. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;DarkBackgroundColor&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;transparent&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1411. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;LightBackgroundColor&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;transparent&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1412. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Accent1&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#f94144&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1413. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Accent2&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#43aa8b&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1414. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Accent3&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#f9c74f&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1415. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Accent4&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#90be6d&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1416. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Accent5&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#f8961e&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1417. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;Accent6&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#577590&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1418. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;LightBgGradient&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: [&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#c7e7ff&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;, &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#f0c8ff&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;, &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#ffdada&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;, &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#ffebb2&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;],&lt;/span&gt;&lt;/span&gt;
  1419. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;      &quot;DarkBgGradient&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: [&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#15354c&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;, &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#3e154c&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;, &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#4c2828&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;, &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#4c3900&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;]&lt;/span&gt;&lt;/span&gt;
  1420. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    }&lt;/span&gt;&lt;/span&gt;
  1421. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  ]&lt;/span&gt;&lt;/span&gt;
  1422. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1423. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1424. &lt;h2 id=&quot;custom-fonts&quot;&gt;Custom fonts&lt;/h2&gt;
  1425. &lt;p&gt;You’ll need to follow these steps to add a custom font to your theme:&lt;/p&gt;
  1426. &lt;h3 id=&quot;1-add-the-font-files-to-your-theme-folder&quot;&gt;1. Add the font files to your theme folder&lt;/h3&gt;
  1427. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;markdown&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;Roboto-Slab-Regular.woff2&lt;/span&gt;&lt;/span&gt;
  1428. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;Roboto-Slab-Bold.woff2&lt;/span&gt;&lt;/span&gt;
  1429. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1430. &lt;h3 id=&quot;2-reference-the-fonts-at-the-beginning-of-your-css&quot;&gt;2. Reference the fonts at the beginning of your CSS&lt;/h3&gt;
  1431. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;@font-face&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1432. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  font-family&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Roboto Slab&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1433. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  font-style&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;normal&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1434. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  font-weight&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;400&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1435. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  src&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;Roboto-Slab-Regular.woff2&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;) &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;format&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;woff2&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/span&gt;
  1436. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1437. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#F97583&quot;&gt;@font-face&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1438. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  font-family&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Roboto Slab&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1439. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  font-style&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;normal&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1440. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  font-weight&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;700&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1441. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  src&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:#FFAB70&quot;&gt;roboto-slab-Bold.woff2&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;) &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;format&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;woff2&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/span&gt;
  1442. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1443. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1444. &lt;h3 id=&quot;3-add-meta-data&quot;&gt;3. Add meta data&lt;/h3&gt;
  1445. &lt;p&gt;In this example, you’ll need to add the display name of your custom fonts in &lt;code&gt;template.json&lt;/code&gt;. That’s the name that will appear in the style inspector. Here’s an example for the New York font:&lt;/p&gt;
  1446. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;json&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;TitleFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;New York&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1447. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;  &quot;BodyFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;New York&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1448. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1449. &lt;p&gt;In your &lt;code&gt;presets.json&lt;/code&gt; you’ll need to add the CSS name of your custom font. This example is for the New York font. You will notice that the name is different than the display name.&lt;/p&gt;
  1450. &lt;p&gt;&lt;em&gt;NOTE: You could directly set your custom font in CSS, but you would lose the ability to override it using the style inspector.&lt;/em&gt;&lt;/p&gt;
  1451. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;json&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;TitleFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;-apple-system-ui-serif, ui-serif&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1452. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;BodyFont&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;-apple-system-ui-serif, ui-serif&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1453. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1454. &lt;h2 id=&quot;using-images-from-your-theme-in-css&quot;&gt;Using images from your theme in CSS&lt;/h2&gt;
  1455. &lt;p&gt;Once your custom theme is installed, iA Presenter preserves the directories structure. You can then reference an image using the &lt;code&gt;url()&lt;/code&gt; function. Example:&lt;/p&gt;
  1456. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.backgrounds&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; .default-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1457. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  background-image&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;url&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;image1.jpg&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/span&gt;
  1458. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  background-size&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;cover&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1459. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  background-position&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;center&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1460. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1461. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1462. &lt;h2 id=&quot;bonus&quot;&gt;Bonus&lt;/h2&gt;
  1463. &lt;p&gt;Center everything except &lt;code&gt;&amp;#x3C;h1&gt;&lt;/code&gt; elements vertically and horizontally:&lt;/p&gt;
  1464. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-caption&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1465. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-default&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1466. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-grid&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1467. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-section&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1468. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-title-image&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1469. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-v-split&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;,&lt;/span&gt;&lt;/span&gt;
  1470. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.section-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1471. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  align-items&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;center&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; !important&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1472. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  justify-content&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;center&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; !important&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1473. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  text-align&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;center&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; !important&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1474. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1475. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1476. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-cover&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1477. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  justify-content&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;center&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; !important&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1478. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1479. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1480. &lt;p&gt;Colored and shaped borders on everything for easier debugging. Unfortunately, there is no hot reload (yet?), so as soon as you save changes in the CSS file, Presenter has to be closed and reopened. The following clumsy approach helped me a lot to find out when which element is displayed:&lt;/p&gt;
  1481. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;css&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.cover-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1482. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; red&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1483. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1484. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-cover&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1485. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dashed&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; red&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1486. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1487. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1488. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.title-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1489. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; blue&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1490. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1491. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-title&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1492. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dotted&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; blue&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1493. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1494. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1495. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.section-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1496. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; aqua&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1497. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1498. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-section&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1499. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dashed&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; aqua&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1500. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1501. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1502. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.v-split-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1503. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; yellow&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1504. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1505. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-v-split&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1506. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dotted&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; yellow&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1507. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1508. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1509. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.grid-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1510. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; green&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1511. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1512. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-grid&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1513. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dotted&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; green&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1514. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1515. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1516. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.caption-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1517. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; orange&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1518. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1519. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-caption&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1520. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dashed&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; orange&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1521. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1522. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1523. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.title-image-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1524. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; violet&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1525. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1526. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-title-image&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1527. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dotted&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; violet&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1528. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1529. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  1530. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.default-container&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1531. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; solid&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; chartreuse&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1532. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1533. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;.layout-default&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt; &gt;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt; div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
  1534. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;  border&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;: &lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;color:#F97583&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; dashed&lt;/span&gt;&lt;span style=&quot;color:#79B8FF&quot;&gt; chartreuse&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
  1535. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;}&lt;/span&gt;&lt;/span&gt;
  1536. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>WCAG? More like, W-what?!</title><link>https://www.stevefrenzel.dev/blog/wcag-more-like-what/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/wcag-more-like-what/</guid><description>Three resources (text, map and video) to help you better understand the WCAG.</description><pubDate>Mon, 04 Mar 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;It doesn’t matter whether you’ve just started to get to grips with the topic of web accessibility or are already more familiar with the subject: The &lt;a href=&quot;https://www.w3.org/TR/WCAG22/&quot;&gt;Web Content Accessibility Guidelines&lt;/a&gt; (WCAG) can be challenging and confusing at times.&lt;/p&gt;
  1537. &lt;p&gt;In this article, I want to share three resources that simplify the content, so you can do for example the following:&lt;/p&gt;
  1538. &lt;ul&gt;
  1539. &lt;li&gt;Make it easier for newcomers to get started&lt;/li&gt;
  1540. &lt;li&gt;Untangle a knot in your brain&lt;/li&gt;
  1541. &lt;li&gt;Discuss a specific criterion with someone who has little or no knowledge of the guidelines&lt;/li&gt;
  1542. &lt;/ul&gt;
  1543. &lt;p&gt;It is very important to mention that these are to be considered as a complement and do not replace the original WCAG as a reference!&lt;/p&gt;
  1544. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  1545. &lt;ul&gt;
  1546. &lt;li&gt;&lt;a href=&quot;#the-wcag-explained&quot;&gt;The WCAG explained&lt;/a&gt;&lt;/li&gt;
  1547. &lt;li&gt;&lt;a href=&quot;#wcag-22-map&quot;&gt;WCAG 2.2 Map&lt;/a&gt;&lt;/li&gt;
  1548. &lt;li&gt;&lt;a href=&quot;#a-wcag-overview&quot;&gt;A WCAG Overview&lt;/a&gt;&lt;/li&gt;
  1549. &lt;/ul&gt;
  1550. &lt;h2 id=&quot;the-wcag-explained&quot;&gt;The WCAG explained&lt;/h2&gt;
  1551. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/1-stark.CFctLW7B_ZwlMU1.webp&quot; alt=&quot;The WCAG Explained: Simplified and actionable explanations of every WCAG 2.2 criteria&quot; width=&quot;1800&quot; height=&quot;945&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1552. &lt;p&gt;&lt;a href=&quot;https://www.getstark.co/&quot;&gt;Stark&lt;/a&gt; is one of the companies that are tirelessly working to make web accessibility simple, modern and appealing for those interested. Their browser extension is one of my standard tools for automated testing, as is their Figma plugin.&lt;/p&gt;
  1553. &lt;p&gt;Recently they took the trouble to present all WCAG in a simplified form (in English)! đŸ˜± The result is a reference in easy-to-understand form, which should be understood as a supplement and not as a replacement.&lt;/p&gt;
  1554. &lt;p&gt;&lt;a href=&quot;https://www.getstark.co/wcag-explained/&quot;&gt;The WCAG explained&lt;/a&gt;&lt;/p&gt;
  1555. &lt;h2 id=&quot;wcag-22-map&quot;&gt;WCAG 2.2 Map&lt;/h2&gt;
  1556. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/2-intopia.DtXW3wF0_ZHCXsQ.webp&quot; alt=&quot;Upper half of the WCAG 2.2 map by Intopia, showing the name and several A, AA and AAA criteria&quot; width=&quot;1500&quot; height=&quot;776&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1557. &lt;p&gt;If you’re more of a visual learner (like me), this WCAG map from &lt;a href=&quot;https://intopia.digital/&quot;&gt;Intopia&lt;/a&gt; might help you better understand the criteria. Again, a lot of complexity has been removed to make the information more accessible. It is currently only available in English and as a PDF document.&lt;/p&gt;
  1558. &lt;p&gt;&lt;a href=&quot;https://intopia.digital/articles/intopia-launches-wcag-2-2-map/&quot;&gt;WCAG 2.2 Map&lt;/a&gt;&lt;/p&gt;
  1559. &lt;h2 id=&quot;a-wcag-overview&quot;&gt;A WCAG Overview&lt;/h2&gt;
  1560. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/3-eric-eggert.DdovkaSb_ZLBVcB.webp&quot; alt=&quot;A WCAG Overview by Eric Eggert, Web Accessibility Expert&quot; width=&quot;1280&quot; height=&quot;720&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1561. &lt;p&gt;In case you are not in the mood for text or maps with illustrations, this video by &lt;a href=&quot;https://mastodon.online/@yatil@yatil.social/111942226349030469&quot;&gt;Eric Eggert&lt;/a&gt; might be something for you. He gives a good overview of WCAG itself and some of the criteria. The video is available in English (with subtitles) on YouTube.&lt;/p&gt;
  1562. &lt;p&gt;&lt;a href=&quot;https://www.youtube.com/watch?v=rIebSHUZz_w&quot;&gt;A WCAG Overview by Eric Eggert&lt;/a&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Screen reader check: SoundCloud widget</title><link>https://www.stevefrenzel.dev/blog/screen-reader-check-soundcloud-widget/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/screen-reader-check-soundcloud-widget/</guid><description>Inspired by one Mastodon post, I tested how JAWS, NVDA, VoiceOver and Narrator interact with this widget.</description><pubDate>Tue, 27 Feb 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;This article was inspired by &lt;a href=&quot;https://mastodon.online/@FINOkoye@mastodon.social/111969507444864766&quot;&gt;a post on Mastodon by FINOkoye&lt;/a&gt;.&lt;/p&gt;
  1563. &lt;p&gt;Web accessibility and music have been two very big topics in my life for a while now. Thanks to the article I mentioned, I have finally found a topic to combine these two things! And since there are so many streaming providers, I’m might make a little series out of it
&lt;/p&gt;
  1564. &lt;p&gt;My original plan was to align this component with all the appropriate WCAG criteria, but as I went through this scenario in my head, I realized what a huge amount of work (not paid for by SoundCloud) this would be. It would also overshoot the mark and the core issue is the extent to which it works with a screen reader.&lt;/p&gt;
  1565. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  1566. &lt;ul&gt;
  1567. &lt;li&gt;&lt;a href=&quot;#ludens-by-bring-me-the-horizon&quot;&gt;“Ludens” by Bring Me The Horizon&lt;/a&gt;&lt;/li&gt;
  1568. &lt;li&gt;&lt;a href=&quot;#the-widget-itself&quot;&gt;The widget itself&lt;/a&gt;&lt;/li&gt;
  1569. &lt;li&gt;&lt;a href=&quot;#testing-tools-automatic-and-manual&quot;&gt;Testing tools (automatic and manual)&lt;/a&gt;&lt;/li&gt;
  1570. &lt;li&gt;&lt;a href=&quot;#how-i-tested&quot;&gt;How I tested&lt;/a&gt;
  1571. &lt;ul&gt;
  1572. &lt;li&gt;&lt;a href=&quot;#testing-with-jaws-on-windows-11&quot;&gt;Testing with JAWS on Windows 11&lt;/a&gt;&lt;/li&gt;
  1573. &lt;li&gt;&lt;a href=&quot;#testing-with-nvda-on-windows-11&quot;&gt;Testing with NVDA on Windows 11&lt;/a&gt;&lt;/li&gt;
  1574. &lt;li&gt;&lt;a href=&quot;#testing-with-voiceover-on-macos-sonoma&quot;&gt;Testing with VoiceOver on macOS Sonoma&lt;/a&gt;&lt;/li&gt;
  1575. &lt;li&gt;&lt;a href=&quot;#testing-with-narrator-on-windows-11&quot;&gt;Testing with Narrator on Windows 11&lt;/a&gt;&lt;/li&gt;
  1576. &lt;/ul&gt;
  1577. &lt;/li&gt;
  1578. &lt;li&gt;&lt;a href=&quot;#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  1579. &lt;/ul&gt;
  1580. &lt;h2 id=&quot;ludens-by-bring-me-the-horizon&quot;&gt;”Ludens” by Bring Me The Horizon&lt;/h2&gt;
  1581. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/bmth.B4hEd4uf_1nx32J.webp&quot; alt=&quot;Five white guys with colorful shirts in front of a window that has a huge Pizza image&quot; width=&quot;1220&quot; height=&quot;775&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1582. &lt;p&gt;Our test subject will be one of my favorite songs by Bring Me The Horizon from Sheffield, UK: &lt;a href=&quot;https://soundcloud.com/bring-me-the-horizon/ludens?utm_source=clipboard&amp;#x26;utm_medium=text&amp;#x26;utm_campaign=social_sharing&quot;&gt;Ludens&lt;/a&gt;! Since Suicide Season came out in 2008, I’ve not only been a fan of the guys from Sheffield, but also of &lt;a href=&quot;https://en.wikipedia.org/wiki/Hideo_Kojima&quot;&gt;Hideo Kojima&lt;/a&gt; since his masterpiece &lt;a href=&quot;https://en.wikipedia.org/wiki/Metal_Gear_Solid_(1998_video_game)&quot;&gt;Metal Gear Solid&lt;/a&gt; was released for the Playstation in 1998.&lt;/p&gt;
  1583. &lt;p&gt;The fact that they wrote a song for Death Stranding - a more recent game by Hideo Kojima - was just a match made in heaven for me. They seem to be fans of it themselves, because their song &lt;a href=&quot;https://www.youtube.com/watch?v=-k9qDxyxS3s&quot;&gt;Shadow Moses&lt;/a&gt; is a direct Metal Gear reference. And it fucking slaps.&lt;/p&gt;
  1584. &lt;p&gt;As always, I’ve created a test website for testing purposes: &lt;a href=&quot;https://stevefrenzel.github.io/showcase-soundcloud-embed/&quot;&gt;Showcase SoundCloud player embed&lt;/a&gt;&lt;/p&gt;
  1585. &lt;h2 id=&quot;the-widget-itself&quot;&gt;The widget itself&lt;/h2&gt;
  1586. &lt;p&gt;Already while I was inserting the “iframe” in my code editor, I received a warning from my &lt;a href=&quot;https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter&quot;&gt;axe-linter&lt;/a&gt; extension:&lt;/p&gt;
  1587. &lt;blockquote&gt;
  1588. &lt;p&gt;Ensures &lt;code&gt;&amp;#x3C;iframe&gt;&lt;/code&gt; and &lt;code&gt;&amp;#x3C;frame&gt;&lt;/code&gt; elements have an accessible name - &lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/frame-title?application=axe-linter&quot;&gt;Deque University&lt;/a&gt;&lt;/p&gt;
  1589. &lt;/blockquote&gt;
  1590. &lt;p&gt;In any case, it’s off to a good start. 😅 Let’s solve the problem by adding an &lt;code&gt;aria-label&lt;/code&gt; with the text “Ludens by Bring Me The Horizon on SoundCloud”.&lt;/p&gt;
  1591. &lt;p&gt;If you use the default styling of SoundCloud, this component has a width of 100%. This means that no matter how big your screen is, this element will take up the entire width of the screen. This is not a problem if it is embedded somewhere where a width has already been set, but in our case we don’t have that, so it looks like this:&lt;/p&gt;
  1592. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/widget-full-width.BdEe8HxS_2wYMTV.webp&quot; alt=&quot;SoundCloud widget that is super wide and stretched. The controls on the left and the right side are far away from each other.&quot; width=&quot;3518&quot; height=&quot;704&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1593. &lt;p&gt;If we apply 500 pixels as a fixed width (as on SoundCloud) then it looks much better:&lt;/p&gt;
  1594. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/widget-500-pixel.B6Jpaweq_d42NR.webp&quot; alt=&quot;SoundCloud widget with a very compact width, all controls are now close to each other.&quot; width=&quot;1109&quot; height=&quot;704&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1595. &lt;p&gt;Before we start with the practical tests, let’s take a look at this component in the accessibility tree:&lt;/p&gt;
  1596. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/a11y-tree.KiJ6tEsY_2vmo4l.webp&quot; alt=&quot;Screenshot from the accessibility tree of the SoundCloud widget. It shows mostly link, except for one element, which has a role of &amp;#34;application&amp;#34;.&quot; width=&quot;1412&quot; height=&quot;1430&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1597. &lt;p&gt;So far everything looks about right. Links are links with accessible names and buttons are buttons with
 Wait a minute. Why does the “play” button have a role “application”? Let’s take a closer look at the definition of this role:&lt;/p&gt;
  1598. &lt;blockquote&gt;
  1599. &lt;p&gt;The &lt;code&gt;application&lt;/code&gt; role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional HTML interpretation techniques should be used. [
] - &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role&quot;&gt;mdn web docs&lt;/a&gt;&lt;/p&gt;
  1600. &lt;/blockquote&gt;
  1601. &lt;p&gt;Huh. I’m no expert, but if they had left that part out, it would have been totally ok. Well, moving on! Let’s take a look at the three attributes of the &lt;code&gt;iframe&lt;/code&gt; element and what exactly they do (other attributes removed for claritiy):&lt;/p&gt;
  1602. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;iframe&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; scrolling&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;no&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; frameborder&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;no&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; allow&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;autoplay&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;iframe&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  1603. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  1604. &lt;p&gt;The &lt;code&gt;scrolling&lt;/code&gt; attribute “indicates when the browser should provide a scrollbar for the frame”. In this case it will never show a scrollbar, which is an interesting choice. It’s is also deprecated and here’s what mdn web docs has to say about it:&lt;/p&gt;
  1605. &lt;blockquote&gt;
  1606. &lt;p&gt;These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content. - &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#deprecated_attributes&quot;&gt;mdn web docs&lt;/a&gt;&lt;/p&gt;
  1607. &lt;/blockquote&gt;
  1608. &lt;p&gt;Oops, another deprecated attribute coming right up! Here’s what &lt;code&gt;frameborder&lt;/code&gt; is supposed to do:&lt;/p&gt;
  1609. &lt;blockquote&gt;
  1610. &lt;p&gt;The value 1 (the default) draws a border around this frame. The value 0 removes the border around this frame, but you should instead use the CSS property &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/border&quot;&gt;border&lt;/a&gt; to control &lt;code&gt;&amp;#x3C;iframe&gt;&lt;/code&gt; borders.&lt;/p&gt;
  1611. &lt;/blockquote&gt;
  1612. &lt;p&gt;Cool, they didn’t use any of these values, they just wrote “no”. I’ve seen this a couple of times now, so I guess it works? The last attribute of this infernal trio is &lt;code&gt;allow&lt;/code&gt;, which does the following:&lt;/p&gt;
  1613. &lt;blockquote&gt;
  1614. &lt;p&gt;Specifies a &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Permissions_Policy&quot;&gt;Permissions Policy&lt;/a&gt; for the &lt;code&gt;&amp;#x3C;iframe&gt;&lt;/code&gt;. The policy defines what features are available to the &lt;code&gt;&amp;#x3C;iframe&gt;&lt;/code&gt; (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.&lt;/p&gt;
  1615. &lt;/blockquote&gt;
  1616. &lt;p&gt;In this case, they allow the music to play automatically, which is one of THE most annoying and unpleasant things you can experience on the web. Imagine you have to rely solely on what you can here while browsing.&lt;/p&gt;
  1617. &lt;p&gt;Suddenly the song starts playing and you have to frantically navigate through the site to turn it off. Why does anyone think that’s a good idea? If we look at an explanation from WCAG &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/audio-control.html&quot;&gt;SC 1.4.2 Audio Control (Level A)&lt;/a&gt;, the problem becomes even clearer:&lt;/p&gt;
  1618. &lt;blockquote&gt;
  1619. &lt;p&gt;Playing audio automatically when landing on a page may affect a screen reader user’s ability to find the mechanism to stop it because they navigate by listening and automatically started sounds might interfere with that navigation. [
]&lt;/p&gt;
  1620. &lt;/blockquote&gt;
  1621. &lt;p&gt;For this reason, I have removed the &lt;code&gt;allow&lt;/code&gt; attribute, otherwise I keep everything (apart from custom width and the added &lt;code&gt;aria-label&lt;/code&gt;) as it was provided by SoundCloud. I am also throwing out the two bottom links, as they are not relevant for this test.&lt;/p&gt;
  1622. &lt;h2 id=&quot;testing-tools-automatic-and-manual&quot;&gt;Testing tools (automatic and manual)&lt;/h2&gt;
  1623. &lt;p&gt;I used the following screen readers for manual testing:&lt;/p&gt;
  1624. &lt;ul&gt;
  1625. &lt;li&gt;JAWS (Version 2024.2312.53)&lt;/li&gt;
  1626. &lt;li&gt;NVDA (Version2023.3.3)&lt;/li&gt;
  1627. &lt;li&gt;VoiceOver (Sonoma 14.3.1)&lt;/li&gt;
  1628. &lt;li&gt;Narrator (Version 2023H2)&lt;/li&gt;
  1629. &lt;/ul&gt;
  1630. &lt;p&gt;Which I have combined with these web browsers:&lt;/p&gt;
  1631. &lt;ul&gt;
  1632. &lt;li&gt;Google Chrome (Blink engine)&lt;/li&gt;
  1633. &lt;li&gt;Mozilla Firefox (Gecko engine)&lt;/li&gt;
  1634. &lt;li&gt;Apple Safari (WebKit engine)&lt;/li&gt;
  1635. &lt;li&gt;Microsoft Edge (Blink engine)&lt;/li&gt;
  1636. &lt;/ul&gt;
  1637. &lt;p&gt;There are more screen readers and web browsers, but I chose these as they are &lt;a href=&quot;https://webaim.org/projects/screenreadersurvey10/#used&quot;&gt;the most popular&lt;/a&gt; and I didn’t want to make this article too long.&lt;/p&gt;
  1638. &lt;p&gt;I do not rely on screen readers in my daily life, nor am I an expert using them. Nevertheless, I am quite comfortable with them, but unfortunately I don’t have the time to do this study with ALL the tools available.&lt;/p&gt;
  1639. &lt;p&gt;To get a quick overview of what problems I might encounter, I used the following automatic testing tools in Google Chrome:&lt;/p&gt;
  1640. &lt;ul&gt;
  1641. &lt;li&gt;&lt;a href=&quot;https://www.deque.com/axe/devtools/&quot;&gt;axe DevToolsÂź&lt;/a&gt;&lt;/li&gt;
  1642. &lt;li&gt;&lt;a href=&quot;https://www.getstark.co/&quot;&gt;Stark&lt;/a&gt;&lt;/li&gt;
  1643. &lt;li&gt;&lt;a href=&quot;https://wave.webaim.org/&quot;&gt;WAVE Web Accessibility Evaluation Tools&lt;/a&gt;&lt;/li&gt;
  1644. &lt;/ul&gt;
  1645. &lt;h2 id=&quot;how-i-tested&quot;&gt;How I tested&lt;/h2&gt;
  1646. &lt;p&gt;Let’s use the good ol’ user story to define what I expect from this widget:&lt;/p&gt;
  1647. &lt;blockquote&gt;
  1648. &lt;p&gt;As a screen reader user, I expect the widget to be announced as “Ludens by Bring Me The Horizon on SoundCloud”. It should not autoplay, but start playing when selecting the “play” button. When clicking the button again, it should stop playing the music. All links inside the widget should have a descriptive, accessible name. I should be able to leave this widget by using the tab button.&lt;/p&gt;
  1649. &lt;/blockquote&gt;
  1650. &lt;p&gt;Not really that much I expect here, is it?&lt;/p&gt;
  1651. &lt;p&gt;I have combined each screen reader with the respective (available) web browser and briefly describe what happened. This is a very subjective test and I have adapted the screen readers to my needs. This means that if you run the same tests, your experience may be very different.&lt;/p&gt;
  1652. &lt;p&gt;Regarding the automated tests: WAVE had nothing to complain about, &lt;a href=&quot;https://www.getstark.co/wcag-explained/robust/compatible/parsing/&quot;&gt;Stark found an obsolete violation&lt;/a&gt; and axe DevTools found a total of 10 issues, namely the following:&lt;/p&gt;
  1653. &lt;ul&gt;
  1654. &lt;li&gt;&lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/aria-prohibited-attr?application=AxeChrome&quot;&gt;Elements must only use permitted ARIA attributes&lt;/a&gt; (3 issues)&lt;/li&gt;
  1655. &lt;li&gt;&lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/aria-roles?application=AxeChrome&quot;&gt;ARIA roles used must conform to valid values&lt;/a&gt; (1 issue)&lt;/li&gt;
  1656. &lt;li&gt;&lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/aria-valid-attr-value?application=AxeChrome&quot;&gt;ARIA attributes must conform to valid values&lt;/a&gt; (1 issue)&lt;/li&gt;
  1657. &lt;li&gt;&lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/aria-valid-attr?application=AxeChrome&quot;&gt;ARIA attributes must conform to valid names&lt;/a&gt; (3 issues)&lt;/li&gt;
  1658. &lt;li&gt;&lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/link-name?application=AxeChrome&quot;&gt;Links must have discernible text&lt;/a&gt; (1 issue)&lt;/li&gt;
  1659. &lt;li&gt;&lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/aria-allowed-role?application=AxeChrome&quot;&gt;ARIA role should be appropriate for the element&lt;/a&gt; (1 issue)&lt;/li&gt;
  1660. &lt;/ul&gt;
  1661. &lt;p&gt;When clicking the “pause” button for the first time, a dialog appears which invites you to explore more music on SoundCloud. It also introduces a list of links of recommendations with more music from the respective artist to the accessibility tree.&lt;/p&gt;
  1662. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/widget-dialog.kWQf_Yot_ZISAej.webp&quot; alt=&quot;Dialog inside the SoundCloud widget saying &amp;#34;Explore more music &amp;#38;#x26; audio like Ludens on SoundCloud&amp;#34;. It also has a button with the text &amp;#34;Hear more on SoundCloud&amp;#34; and a close button, visualized with an X.&quot; width=&quot;1109&quot; height=&quot;678&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1663. &lt;p&gt;Visually, it’s not possible to get back to the music player unless you close this dialog. But you can still access all elements by using the &lt;code&gt;TAB&lt;/code&gt; key, so there’s no focus trap. Also, the list will only become visible once you click the “pause” button for a second time. It will then show up every time after hitting the “pause” button again:&lt;/p&gt;
  1664. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/widget-recommendations-list.BVB_virJ_Z1VqX1c.webp&quot; alt=&quot;Overlay inside the SoundCloud widget saying &amp;#34;Play another track by Bring Me The Horizon&amp;#34;, showing more songs of the artist with the respective cover artwork, artist name and song title.&quot; width=&quot;1109&quot; height=&quot;678&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1665. &lt;p&gt;Which is not what I would expect when pressing “pause” on a music player widget, but these are the times we’re living in and these are the widgets we were given. đŸ€·â€â™‚ïžÂ Before we get to the juicy part, let’s have a quick look at the focus order, which goes clockwise instead from left to right:&lt;/p&gt;
  1666. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/widget-focus-order.CMkOgdVR_1txzqV.webp&quot; alt=&quot;SoundCloud widget containing numbers from 1 to 6, placed on top of every interactive element, connected by lines and going clockwise.&quot; width=&quot;1036&quot; height=&quot;642&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1667. &lt;h3 id=&quot;testing-with-jaws-on-windows-11&quot;&gt;Testing with JAWS on Windows 11&lt;/h3&gt;
  1668. &lt;p&gt;When arriving on the page, the first element that can be focussed via &lt;code&gt;TAB&lt;/code&gt; key is the “play” button. Focussing it announces it as “play”, but not as “play, button”. After pressing “pause” for the first time, the dialog appears.&lt;/p&gt;
  1669. &lt;p&gt;This dialog can only be dismissed when pressing the “close” button, pressing &lt;code&gt;ESC&lt;/code&gt; doesn’t work. In Chrome, an alert with the text “Get captions for your audio and video” appears after the dialog opens.&lt;/p&gt;
  1670. &lt;p&gt;Personally, I would have found it convenient if the “close” button was focussed right after the dialog opened, so I could dismiss it quicker. &lt;sup&gt;&lt;a href=&quot;#user-content-fn-1&quot; id=&quot;user-content-fnref-1&quot; data-footnote-ref=&quot;&quot; aria-describedby=&quot;footnote-label&quot;&gt;1&lt;/a&gt;&lt;/sup&gt; I had to press the &lt;code&gt;TAB&lt;/code&gt; key three times to get to the close button, so thankfully there was no need to traverse through the huge list of recommendations, which is now part of the accessibility tree.&lt;/p&gt;
  1671. &lt;p&gt;After closing the dialog, there’s no announcement that focus is on the “play” button again. Pressing &lt;code&gt;SPACE&lt;/code&gt; or &lt;code&gt;ENTER&lt;/code&gt; announces it as “pause” button again. After closing the dialog in Firefox and pressing first “play” and then “pause”, the focus shifts to the second link in the recommendation list, but without announcement.&lt;/p&gt;
  1672. &lt;p&gt;Besides that, the behavior in Chrome, Firefox and Edge was the same.&lt;/p&gt;
  1673. &lt;h3 id=&quot;testing-with-nvda-on-windows-11&quot;&gt;Testing with NVDA on Windows 11&lt;/h3&gt;
  1674. &lt;p&gt;The behavior is the same as with JAWS in all three browsers, the only difference being that after closing the dialog, the focus moves to the “℗ 2019 Sony Music Entertainment UK Limited” without announcement, so you’ll have to navigate back there by yourself.&lt;/p&gt;
  1675. &lt;h3 id=&quot;testing-with-voiceover-on-macos-sonoma&quot;&gt;Testing with VoiceOver on macOS Sonoma&lt;/h3&gt;
  1676. &lt;p&gt;Same behavior as with JAWS in all three browsers and Safari, except:&lt;/p&gt;
  1677. &lt;p&gt;In Chrome, Safari and Edge, there’s no announcement that the button (aka “application”) now has a name of “pause” after pressing “play”. It only gets announced in Firefox.&lt;/p&gt;
  1678. &lt;p&gt;When closing the dialog pressing &lt;code&gt;SPACE&lt;/code&gt;, it will start the music again immediately. When pressing &lt;code&gt;ENTER&lt;/code&gt;, nothing happens.&lt;/p&gt;
  1679. &lt;h3 id=&quot;testing-with-narrator-on-windows-11&quot;&gt;Testing with Narrator on Windows 11&lt;/h3&gt;
  1680. &lt;p&gt;The behavior is the same as with JAWS in all three browsers, except that the role of the “play” button gets announced in all of them, so you’re gonna hear “play, application”.&lt;/p&gt;
  1681. &lt;p&gt;Also in Firefox, when pressing “pause” for the first time, focus won’t be moved inside the dialog. You’ll have to press &lt;code&gt;B&lt;/code&gt; to directly select the close button.&lt;/p&gt;
  1682. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  1683. &lt;p&gt;If I compare my experiences with the user story, everything actually worked as I expected. Essentially, this widget works as it should: You press “play”, the music plays, you press “pause” and it stops. Unfortunately, SoundCloud has added an annoying dialog to this logic and a large list of links with recommendations, which inflates the accessibility tree somewhat.&lt;/p&gt;
  1684. &lt;section data-footnotes=&quot;&quot; class=&quot;footnotes&quot;&gt;&lt;h2 class=&quot;sr-only&quot; id=&quot;footnote-label&quot;&gt;Footnotes&lt;/h2&gt;
  1685. &lt;ol&gt;
  1686. &lt;li id=&quot;user-content-fn-1&quot;&gt;
  1687. &lt;p&gt;If you’re interested in the topic of moving focus, check out this great article by Adrian Roselli: &lt;a href=&quot;https://adrianroselli.com/2023/08/where-to-put-focus-when-deleting-a-thing.html&quot;&gt;Where to Put Focus When Deleting a Thing&lt;/a&gt; &lt;a href=&quot;#user-content-fnref-1&quot; data-footnote-backref=&quot;&quot; aria-label=&quot;Back to reference 1&quot; class=&quot;data-footnote-backref&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
  1688. &lt;/li&gt;
  1689. &lt;/ol&gt;
  1690. &lt;/section&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Easy web accessibility wins: Hashtags</title><link>https://www.stevefrenzel.dev/blog/easy-web-accessibility-wins-hashtags/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/easy-web-accessibility-wins-hashtags/</guid><description>Is there a way to create hashtags that work for everyone? I did some screen reader testing and was surprised by the outcome!</description><pubDate>Fri, 16 Feb 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;There are many opportunities for simple web accessibility wins. Not only developers and designers should have a duty to create an accessible product, but also content creators.&lt;/p&gt;
  1691. &lt;p&gt;One of these small wins can be achieved by tweaking your hashtags. This process in general is called “shifting left”, you can learn more about it here: &lt;a href=&quot;https://mn.gov/mnit/media/blog/?id=38-522146&quot;&gt;What Happens When A Project Team Shifts Accessibility Left?&lt;/a&gt;&lt;/p&gt;
  1692. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  1693. &lt;ul&gt;
  1694. &lt;li&gt;&lt;a href=&quot;#the-problem&quot;&gt;The problem&lt;/a&gt;&lt;/li&gt;
  1695. &lt;li&gt;&lt;a href=&quot;#the-data&quot;&gt;The data&lt;/a&gt;
  1696. &lt;ul&gt;
  1697. &lt;li&gt;&lt;a href=&quot;#test-case-1-all-lower-case&quot;&gt;Test case 1: All lower case&lt;/a&gt;&lt;/li&gt;
  1698. &lt;li&gt;&lt;a href=&quot;#test-case-2-pascal-case-with-a-div-element&quot;&gt;Test case 2: Pascal case with a &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; element&lt;/a&gt;&lt;/li&gt;
  1699. &lt;li&gt;&lt;a href=&quot;#test-case-3-pascal-case-with-a-p-element&quot;&gt;Test case 3: Pascal case with a &lt;code&gt;&amp;#x3C;p&gt;&lt;/code&gt; element&lt;/a&gt;&lt;/li&gt;
  1700. &lt;li&gt;&lt;a href=&quot;#test-case-4-manually-added-aria-label&quot;&gt;Test case 4: Manually added aria-label&lt;/a&gt;&lt;/li&gt;
  1701. &lt;li&gt;&lt;a href=&quot;#test-case-5-automatically-added-aria-label-via-javascript&quot;&gt;Test case 5: Automatically added aria-label via JavaScript&lt;/a&gt;&lt;/li&gt;
  1702. &lt;/ul&gt;
  1703. &lt;/li&gt;
  1704. &lt;li&gt;&lt;a href=&quot;#the-results&quot;&gt;The results&lt;/a&gt;&lt;/li&gt;
  1705. &lt;li&gt;&lt;a href=&quot;#the-conclusion&quot;&gt;The conclusion&lt;/a&gt;&lt;/li&gt;
  1706. &lt;li&gt;&lt;a href=&quot;#another-problem&quot;&gt;Another problem&lt;/a&gt;&lt;/li&gt;
  1707. &lt;/ul&gt;
  1708. &lt;h2 id=&quot;the-problem&quot;&gt;The problem&lt;/h2&gt;
  1709. &lt;p&gt;Let’s turn the title of this article into a hashtag: #easywebaccessibilitywinshashtags&lt;/p&gt;
  1710. &lt;p&gt;Not only was the fear of making a typo my constant companion while writing, it’s also super hard to read. Fortunately, there is a writing method that could help: &lt;a href=&quot;https://www.freecodecamp.org/news/snake-case-vs-camel-case-vs-pascal-case-vs-kebab-case-whats-the-difference/#pascal-case&quot;&gt;Pascal case&lt;/a&gt;!&lt;/p&gt;
  1711. &lt;p&gt;If we apply it to our example, the text is already much easier to read visually: #EasyWebAccessibilityWinsHashtags&lt;/p&gt;
  1712. &lt;p&gt;So we’ve removed a barrier for sighted people, but what about those who rely on screen readers, for example?&lt;/p&gt;
  1713. &lt;h2 id=&quot;the-data&quot;&gt;The data&lt;/h2&gt;
  1714. &lt;p&gt;Since 2008, WebAIM has been conducting a &lt;a href=&quot;https://webaim.org/projects/screenreadersurvey9/#used&quot;&gt;screen reader user survey&lt;/a&gt;, which shows, among other things, which software is popular and how important the correct use of heading elements is, for example.&lt;/p&gt;
  1715. &lt;p&gt;Based on this survey, I have selected the four most popular screen readers in order to test whether I can find a solution for consistently announcing hashtags correctly.&lt;/p&gt;
  1716. &lt;p&gt;For this purpose, I have created a &lt;a href=&quot;https://stevefrenzel.github.io/showcase-accessible-hashtags/&quot;&gt;test website&lt;/a&gt; to carry out these tests. This code is NOT production ready and is for demonstration purposes only. In the last section I explain my thought process regarding this example website. There are five test cases, for each I document the results in a table.&lt;/p&gt;
  1717. &lt;ul&gt;
  1718. &lt;li&gt;“No” means that the words were not pronounced individually&lt;/li&gt;
  1719. &lt;li&gt;“Yes” means that the individual words were pronounced correctly&lt;/li&gt;
  1720. &lt;li&gt;“Partially” means that the individual words were pronounced more or less correctly&lt;/li&gt;
  1721. &lt;li&gt;“Not tested” means that a test was not possible&lt;/li&gt;
  1722. &lt;/ul&gt;
  1723. &lt;h3 id=&quot;test-case-1-all-lower-case&quot;&gt;Test case 1: All lower case&lt;/h3&gt;
  1724. &lt;p&gt;A &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; with an WAI-ARIA role of “note”, containing the all lower case string “#easywebaccessibilitywinshashtags”.&lt;/p&gt;
  1725. &lt;div style=&quot;overflow-x: auto;&quot;&gt;
  1726.  
  1727.  
  1728.  
  1729.  
  1730.  
  1731.  
  1732.  
  1733.  
  1734.  
  1735.  
  1736.  
  1737.  
  1738.  
  1739.  
  1740.  
  1741.  
  1742.  
  1743.  
  1744.  
  1745.  
  1746.  
  1747.  
  1748.  
  1749.  
  1750.  
  1751.  
  1752.  
  1753.  
  1754.  
  1755.  
  1756.  
  1757.  
  1758.  
  1759.  
  1760.  
  1761.  
  1762.  
  1763.  
  1764.  
  1765.  
  1766. &lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Google Chrome&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Mozilla Firefox&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Apple Safari&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Microsoft Edge&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;JAWS&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;NVDA&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;VoiceOver&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Narrator&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Partially&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  1767. &lt;/div&gt;
  1768. &lt;h3 id=&quot;test-case-2-pascal-case-with-a-div-element&quot;&gt;Test case 2: Pascal case with a &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; element&lt;/h3&gt;
  1769. &lt;p&gt;A &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; with an WAI-ARIA role of “note”, containing the Pascal case string “#EasyWebAccessibilityWinsHashtags”.&lt;/p&gt;
  1770. &lt;div style=&quot;overflow-x: auto;&quot;&gt;
  1771.  
  1772.  
  1773.  
  1774.  
  1775.  
  1776.  
  1777.  
  1778.  
  1779.  
  1780.  
  1781.  
  1782.  
  1783.  
  1784.  
  1785.  
  1786.  
  1787.  
  1788.  
  1789.  
  1790.  
  1791.  
  1792.  
  1793.  
  1794.  
  1795.  
  1796.  
  1797.  
  1798.  
  1799.  
  1800.  
  1801.  
  1802.  
  1803.  
  1804.  
  1805.  
  1806.  
  1807.  
  1808.  
  1809.  
  1810.  
  1811. &lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Google Chrome&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Mozilla Firefox&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Apple Safari&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Microsoft Edge&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;JAWS&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;NVDA&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;VoiceOver&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Narrator&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  1812. &lt;/div&gt;
  1813. &lt;h3 id=&quot;test-case-3-pascal-case-with-a-p-element&quot;&gt;Test case 3: Pascal case with a &lt;code&gt;&amp;#x3C;p&gt;&lt;/code&gt; element&lt;/h3&gt;
  1814. &lt;p&gt;A &lt;code&gt;&amp;#x3C;p&gt;&lt;/code&gt; element, containing the Pascal case string “#EasyWebAccessibilityWinsHashtags”.&lt;/p&gt;
  1815. &lt;div style=&quot;overflow-x: auto;&quot;&gt;
  1816.  
  1817.  
  1818.  
  1819.  
  1820.  
  1821.  
  1822.  
  1823.  
  1824.  
  1825.  
  1826.  
  1827.  
  1828.  
  1829.  
  1830.  
  1831.  
  1832.  
  1833.  
  1834.  
  1835.  
  1836.  
  1837.  
  1838.  
  1839.  
  1840.  
  1841.  
  1842.  
  1843.  
  1844.  
  1845.  
  1846.  
  1847.  
  1848.  
  1849.  
  1850.  
  1851.  
  1852.  
  1853.  
  1854.  
  1855.  
  1856. &lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Google Chrome&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Mozilla Firefox&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Apple Safari&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Microsoft Edge&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;JAWS&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;NVDA&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;VoiceOver&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Narrator&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  1857. &lt;/div&gt;
  1858. &lt;h3 id=&quot;test-case-4-manually-added-aria-label&quot;&gt;Test case 4: Manually added aria-label&lt;/h3&gt;
  1859. &lt;p&gt;A &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; with an WAI-ARIA role of “note” and an aria-label containing the string “#EasyWebAccessibilityWinsHashtags”. Inside is the actual element, which is another &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; with the &lt;code&gt;aria-hidden=&apos;true&apos;&lt;/code&gt; attribute.&lt;/p&gt;
  1860. &lt;div style=&quot;overflow-x: auto;&quot;&gt;
  1861.  
  1862.  
  1863.  
  1864.  
  1865.  
  1866.  
  1867.  
  1868.  
  1869.  
  1870.  
  1871.  
  1872.  
  1873.  
  1874.  
  1875.  
  1876.  
  1877.  
  1878.  
  1879.  
  1880.  
  1881.  
  1882.  
  1883.  
  1884.  
  1885.  
  1886.  
  1887.  
  1888.  
  1889.  
  1890.  
  1891.  
  1892.  
  1893.  
  1894.  
  1895.  
  1896.  
  1897.  
  1898.  
  1899.  
  1900.  
  1901. &lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Google Chrome&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Mozilla Firefox&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Apple Safari&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Microsoft Edge&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;JAWS&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;NVDA&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;VoiceOver&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Narrator&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  1902. &lt;/div&gt;
  1903. &lt;h3 id=&quot;test-case-5-automatically-added-aria-label-via-javascript&quot;&gt;Test case 5: Automatically added aria-label via JavaScript&lt;/h3&gt;
  1904. &lt;p&gt;A &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; element with a WAI-ARIA role of “note”. Inside is the actual element, which is another &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; with the aria-hidden=‘true’ attribute. The content is injected via JavaScript, adding an aria-label to the parent &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt;. This string has no ”#” symbol and added white space between every word.&lt;/p&gt;
  1905. &lt;div style=&quot;overflow-x: auto;&quot;&gt;
  1906.  
  1907.  
  1908.  
  1909.  
  1910.  
  1911.  
  1912.  
  1913.  
  1914.  
  1915.  
  1916.  
  1917.  
  1918.  
  1919.  
  1920.  
  1921.  
  1922.  
  1923.  
  1924.  
  1925.  
  1926.  
  1927.  
  1928.  
  1929.  
  1930.  
  1931.  
  1932.  
  1933.  
  1934.  
  1935.  
  1936.  
  1937.  
  1938.  
  1939.  
  1940.  
  1941.  
  1942.  
  1943.  
  1944.  
  1945.  
  1946. &lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Google Chrome&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Mozilla Firefox&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Apple Safari&lt;/strong&gt;&lt;/th&gt;&lt;th&gt;&lt;strong&gt;Microsoft Edge&lt;/strong&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;JAWS&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;NVDA&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;VoiceOver&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;td&gt;Yes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;strong&gt;Narrator&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;td&gt;Not tested&lt;/td&gt;&lt;td&gt;No&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  1947. &lt;/div&gt;
  1948. &lt;h2 id=&quot;the-results&quot;&gt;The results&lt;/h2&gt;
  1949. &lt;p&gt;For me, the results of the first three test cases are not as surprising as the fact that the same screen reader on the same website can sometimes behave completely differently! đŸ˜±&lt;/p&gt;
  1950. &lt;p&gt;The last two test cases are particularly interesting, as VoiceOver and JAWS worked with my solution, but the other screen readers did not.&lt;/p&gt;
  1951. &lt;p&gt;It also showed that JAWS is (for now) the leading software for a reason, as it works particularly reliably in combination with Firefox. VoiceOver is the worst performer for me, as it has problems where the others at least partially announce the hashtag correctly.&lt;/p&gt;
  1952. &lt;h2 id=&quot;the-conclusion&quot;&gt;The Conclusion&lt;/h2&gt;
  1953. &lt;p&gt;In an ideal world, no hacks would be necessary for a hashtag to be announced correctly. Unfortunately, the reality is different and based on my tests, my conclusion is to choose the lesser of two evils as it was rendered correctly by the majority of the software tested.&lt;/p&gt;
  1954. &lt;p&gt;In other words, using Pascal case when writing hashtags can make a significant difference and helps to shift left. Therefore, the responsibility for accessibility would lie with the content creators and not with the designers or developers. For better or for worse
&lt;/p&gt;
  1955. &lt;h2 id=&quot;another-problem&quot;&gt;Another problem&lt;/h2&gt;
  1956. &lt;p&gt;When creating the test website, I quickly had to ask myself the question: What kind of HTML element would a hashtag actually be? If they were displayed collectively, I would turn them into a list element within a list. But solo, for example in the middle of a sentence?&lt;/p&gt;
  1957. &lt;p&gt;After a little research, my conclusion was that there is no native element that fits exactly, so I would assign the WAI-ARIA role &lt;code&gt;note&lt;/code&gt;, as it makes the most sense to me:&lt;/p&gt;
  1958. &lt;blockquote&gt;
  1959. &lt;p&gt;A note role suggests a section whose content is parenthetic or ancillary to the main content. - &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/note_role&quot;&gt;mdn web docs&lt;/a&gt;&lt;/p&gt;
  1960. &lt;/blockquote&gt;
  1961. &lt;p&gt;The reason for this is a warning from my axe-linter extension, which came up when I tried to assign &lt;code&gt;aria-label&lt;/code&gt; to a &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt;, &lt;code&gt;&amp;#x3C;span&gt;&lt;/code&gt; and &lt;code&gt;&amp;#x3C;p&gt;&lt;/code&gt; element:&lt;/p&gt;
  1962. &lt;blockquote&gt;
  1963. &lt;p&gt;Ensures ARIA attributes are not prohibited for an element’s role - &lt;a href=&quot;https://dequeuniversity.com/rules/axe/4.8/aria-prohibited-attr?application=axe-linter&quot;&gt;Deque University&lt;/a&gt;&lt;/p&gt;
  1964. &lt;/blockquote&gt;
  1965. &lt;p&gt;My goal was to be able to work as consistently as possible with a specific role, for a better comparison. But is a hashtag really a section, like it says in the definition?&lt;/p&gt;
  1966. &lt;p&gt;In my solution, I wrapped it in a &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; and added an &lt;code&gt;aria-label&lt;/code&gt; to avoid announcing the content twice in VoiceOver. Shortly afterwards I read this article by Adrian Roselli on the subject of “aria-label”&lt;/p&gt;
  1967. &lt;blockquote&gt;
  1968. &lt;p&gt;Please stop adding &lt;code&gt;aria-label&lt;/code&gt; to &lt;code&gt;&amp;#x3C;span&gt;&lt;/code&gt; and &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt;. They won’t love you back no matter what you name them. - &lt;a href=&quot;https://mastodon.online/@aardrian@toot.cafe/111886225658765256&quot;&gt;Mastodon&lt;/a&gt;&lt;/p&gt;
  1969. &lt;/blockquote&gt;
  1970. &lt;p&gt;In addition, he also tested the WAI-ARIA role &lt;code&gt;note&lt;/code&gt; with different screen reader and browser combinations: &lt;a href=&quot;https://github.com/whatwg/html/issues/10100#issuecomment-1933108856&quot;&gt;Results of Adrian’s test&lt;/a&gt;&lt;/p&gt;
  1971. &lt;p&gt;After going back and forth, I still decided to stick to this role for my example, as I’m making it very clear that the example code is NOT production ready.&lt;/p&gt;
  1972. &lt;p&gt;However, I encourage you to do your own research and test for yourself. Also please let me know if there’s a better solution, cause I’m no expert and always open to suggestions! 🙏&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Tour blog: Kora Winter in Austria</title><link>https://www.stevefrenzel.dev/blog/tour-blog-kora-winter-in-austria/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/tour-blog-kora-winter-in-austria/</guid><description>Travelling Austria with a metal band and doing live sound in Vienna, Linz and Salzburg.</description><pubDate>Tue, 13 Feb 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;The last time I was in Austria must have been in the mid-nineties. I remember driving go-karts, hearing strange German being spoken and realizing that I would need glasses because I could see absolutely nothing at the license plate bingo.&lt;/p&gt;
  1973. &lt;p&gt;More than twenty years later, I return, this time with my friends from &lt;a href=&quot;https://www.instagram.com/korawinter/&quot;&gt;Kora Winter&lt;/a&gt; and in the role of sound engineer. Unfortunately, we weren’t complete as one of our guitarists couldn’t come along for health reasons. 😭&lt;/p&gt;
  1974. &lt;p&gt;It was therefore a little less fun than usual, but it was still an unforgettable experience and I’m very grateful that I was able to be there. Because a tour weekend like this doesn’t happen often, I kept a diary. The following are the events as I perceived them:&lt;/p&gt;
  1975. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  1976. &lt;ul&gt;
  1977. &lt;li&gt;&lt;a href=&quot;#day-1-vienna-viper-room&quot;&gt;Day 1: Vienna, Viper Room&lt;/a&gt;&lt;/li&gt;
  1978. &lt;li&gt;&lt;a href=&quot;#day-2-linz-kapu&quot;&gt;Day 2: Linz, KAPU&lt;/a&gt;&lt;/li&gt;
  1979. &lt;li&gt;&lt;a href=&quot;#day-3-salzburg-rockhouse&quot;&gt;Day 3: Salzburg, Rockhouse&lt;/a&gt;&lt;/li&gt;
  1980. &lt;/ul&gt;
  1981. &lt;h2 id=&quot;day-1-vienna-viper-room&quot;&gt;Day 1: Vienna, Viper Room&lt;/h2&gt;
  1982. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/vienna-1.CVR5ARsS_1cFnRP.webp&quot; alt=&quot;TEXT&quot; width=&quot;750&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1983. &lt;p&gt;After an uneventful train ride with an hour delay (thanks Deutsche Bahn), I met our tour manager at the entrance of the venue because the band wasn’t there yet. Loading in (and out) wasn’t so much fun as it was a basement show and you had to walk down quite some stairs.&lt;/p&gt;
  1984. &lt;p&gt;The concert hall was tunnel-shaped, which just screams for bass frequencies to build up. However, they solved it cleverly by placing the sub woofers on the ceiling above the stage. As a result, the bass sounded very compact and not at all out of control, as is usually the case in such venues. To find out quickly what a room and its sound system sounds like, I listen to songs that I know very well. Here is &lt;a href=&quot;https://tidal.com/browse/playlist/a630f32d-a62f-4a5b-9f31-b7b9be96c6c4&quot;&gt;my soundcheck playlist on TIDAL&lt;/a&gt;.&lt;/p&gt;
  1985. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/vienna-2.aQEqQS5X_ZlM28D.webp&quot; alt=&quot;TEXT&quot; width=&quot;750&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1986. &lt;p&gt;It was the first time we had our own backstage with our own drinks. The Austrians know how to spoil their guests! Also, the room looked like a swingers club, with mirrors and pillars everywhere.&lt;/p&gt;
  1987. &lt;p&gt;The show went quite well, as we are now a well-rehearsed team and every move during set-up, breakdown and soundcheck is well executed. What you can’t plan for, however, is when the bassist’s strap pin fails in the middle of the show. 😂&lt;/p&gt;
  1988. &lt;p&gt;The tuning of the replacement bass was also unplanned, which had to be found out by ear due to technical problems. But the guys took it with humor like professionals and finished the show as usual.&lt;/p&gt;
  1989. &lt;p&gt;I would have liked more people to have been there. There would have been more going on, but also because the large number of bodies absorbs the high-frequency sound in particular, which makes it rattle less. My mixing desk that night was a Midas but I don’t know which one, but let me tell you: Desk shows are my favorite ones! Nothing annoys me more than having to mix a show on a tablet or even a smartphone. đŸ€ź&lt;/p&gt;
  1990. &lt;p&gt;After the show, the pampering program continued and we slept blissfully in our beds in our apartment not far from the venue. No sleeping mat or sleeping bag necessary that evening!&lt;/p&gt;
  1991. &lt;h2 id=&quot;day-2-linz-kapu&quot;&gt;Day 2: Linz, KAPU&lt;/h2&gt;
  1992. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/linz-2.CeVX_ztq_2tI0KS.webp&quot; alt=&quot;TEXT&quot; width=&quot;750&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1993. &lt;p&gt;We started the day with a late breakfast at a cafe before driving to Linz. Our anticipation was enormous, as we would be playing on the same stage that Nirvana had played on November 20, 1989. đŸ˜±&lt;/p&gt;
  1994. &lt;p&gt;When we arrived, we were greeted by a brightly colored house facade outside. Inside, the super nice house technician welcomed us and confirmed to me once again that this was the stage where Nirvana played over 30 years ago (fuck yeah).&lt;/p&gt;
  1995. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/linz-1.D60WhEaW_npXIb.webp&quot; alt=&quot;TEXT&quot; width=&quot;750&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  1996. &lt;p&gt;During the sound check, I noticed that the concert hall sounded very dry and controlled, which I was very pleased about. Our drummer plays his cymbals very loud and I welcome anything that can tame those high frequencies. My console that night was an Allen &amp;#x26; Heath, but (again) I don’t know which one. I took pictures of everything, but not of my desk. đŸ€Šâ€â™‚ïž&lt;/p&gt;
  1997. &lt;p&gt;Our sleeping area was in the same building a few floors above the venue and was a very large but cozy room with lots of beds, a kitchen, dining and living area. The walls were full of band names that had played and immortalized themselves there. Of course, I asked where Nirvana left their message, but that was painted over a few years ago. CAN YOU BELIEVE IT.&lt;/p&gt;
  1998. &lt;p&gt;Nirvana also spent the night in the building back then, but not where we stayed, but one floor below us. The room had been converted into a recording studio, but it was still humbling to be in the same room where Kurt Cobain slept.&lt;/p&gt;
  1999. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/linz-3.tp1l8528_Z1H9CLg.webp&quot; alt=&quot;TEXT&quot; width=&quot;750&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2000. &lt;p&gt;Because of all these positive circumstances, the show was a lot of fun for all of us, even if we went on stage a bit late. I was also blown away by the support act Seeking, which rarely happens to me with unknown bands. If you wish Hundredth had carried on like they did on RARE, you should definitely &lt;a href=&quot;https://songwhip.com/seeking2/plush&quot;&gt;check out Seeking&lt;/a&gt;. To top it off, they were all super nice. 😭&lt;/p&gt;
  2001. &lt;p&gt;We were allowed to leave everything in the locked concert room and take it out the next morning and put it in our van. I wanted to pack it up that evening so we’d have less stress in the morning, but was overruled
&lt;/p&gt;
  2002. &lt;h2 id=&quot;day-3-salzburg-rockhouse&quot;&gt;Day 3: Salzburg, Rockhouse&lt;/h2&gt;
  2003. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/salzburg-1.CWAgB8LT_Bhucp.webp&quot; alt=&quot;TEXT&quot; width=&quot;750&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2004. &lt;p&gt;Needless to say, we were pressed for time on this glorious morning because we still had to dismantle, pack and load everything. But the six of us managed! In general, our trips were always short and Salzburg announced itself with an epic mountain landscape. Arriving at the venue, I was surprised at how big the building was.&lt;/p&gt;
  2005. &lt;p&gt;There were two concert rooms inside of it, a large one on the left and a small one on the right, where we played. In between was the entrance area where our merchandise table was and a staircase leading up to the improvised catering area. The technical equipment was excellent and the crew on site was very nice and helpful.&lt;/p&gt;
  2006. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/salzburg-2.D_1A3yuP_bwcah.webp&quot; alt=&quot;TEXT&quot; width=&quot;750&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2007. &lt;p&gt;My mixing desk that evening was an &lt;a href=&quot;https://www.allen-heath.com/hardware/dlive-series/dlive-surfaces/&quot;&gt;Allen &amp;#x26; Heath dLive C2500&lt;/a&gt;, the most luxurious console I’ve had the pleasure of standing at. I love turning potentiometers, moving faders and pressing buttons. But when it’s such an intuitive hybrid solution with a huge touchscreen, it’s twice as much fun. 😍 It was also very handy to have a volume meter next to the console as the requirement was not to be above 99 decibels for too long. When the boys are on stage, they tend to reach this level of volume pretty quickly, though.&lt;/p&gt;
  2008. &lt;p&gt;There were a handful of people at the front during the show who were really into it, but the energy in the room was a bit strange and there wasn’t that much going on. Two people in metal vests were talking at the bar about Kora Winter being “emo shit” and felt affirmed after the first song and left. Well, their loss. đŸ€·â€â™‚ïž We were also warned in Linz that Salzburg can be difficult when it comes to live shows for “alternative music”.&lt;/p&gt;
  2009. &lt;p&gt;Since there was a curfew, everything was packed and loaded before midnight and I went straight to the building next door because that’s where our apartment was. What a luxury to be able to sleep in a bed every night!&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>X marks the spot: Landmark elements</title><link>https://www.stevefrenzel.dev/blog/x-marks-the-spot-landmark-elements/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/x-marks-the-spot-landmark-elements/</guid><description>It&apos;s not like I hate WAI-ARIA, but often it&apos;s better to stick to what the internet gods have given us: Native HTML!</description><pubDate>Mon, 05 Feb 2024 00:00:00 GMT</pubDate><content:encoded>&lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  2010. &lt;ul&gt;
  2011. &lt;li&gt;&lt;a href=&quot;#disclaimer&quot;&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
  2012. &lt;li&gt;&lt;a href=&quot;#prologue&quot;&gt;Prologue&lt;/a&gt;&lt;/li&gt;
  2013. &lt;li&gt;&lt;a href=&quot;#a-solid-foundation&quot;&gt;A solid foundation&lt;/a&gt;&lt;/li&gt;
  2014. &lt;li&gt;&lt;a href=&quot;#bonjour-tristesse&quot;&gt;Bonjour Tristesse&lt;/a&gt;&lt;/li&gt;
  2015. &lt;li&gt;&lt;a href=&quot;#wai-would-you-do-that&quot;&gt;WAI would you do that&lt;/a&gt;
  2016. &lt;ul&gt;
  2017. &lt;li&gt;&lt;a href=&quot;#lets-talk-about-form-and-region&quot;&gt;Let’s talk about &lt;code&gt;form&lt;/code&gt; and &lt;code&gt;region&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2018. &lt;/ul&gt;
  2019. &lt;/li&gt;
  2020. &lt;li&gt;&lt;a href=&quot;#land-in-sight&quot;&gt;Land in sight&lt;/a&gt;
  2021. &lt;ul&gt;
  2022. &lt;li&gt;&lt;a href=&quot;#the-case-for-seo&quot;&gt;The case for SEO&lt;/a&gt;&lt;/li&gt;
  2023. &lt;/ul&gt;
  2024. &lt;/li&gt;
  2025. &lt;li&gt;&lt;a href=&quot;#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  2026. &lt;/ul&gt;
  2027. &lt;h2 id=&quot;disclaimer&quot;&gt;Disclaimer&lt;/h2&gt;
  2028. &lt;p&gt;I use the abbreviation “AT” in the text, which stands for “assistive technology”. I also show examples with two screen readers, &lt;a href=&quot;https://support.apple.com/guide/voiceover/welcome/mac&quot;&gt;VoiceOver&lt;/a&gt; on macOS Sonoma 14.3 using &lt;a href=&quot;https://arc.net/&quot;&gt;Arc&lt;/a&gt; and &lt;a href=&quot;https://www.nvaccess.org/about-nvda/&quot;&gt;NVDA&lt;/a&gt; on Windows 11 using &lt;a href=&quot;https://www.mozilla.org/en-US/firefox/&quot;&gt;Firefox&lt;/a&gt;.&lt;/p&gt;
  2029. &lt;p&gt;There are many other screen reader and browser combinations, but to cover them all would have gone beyond the scope of this article. In general, I recommend testing as much as possible before you ship something in production!&lt;/p&gt;
  2030. &lt;p&gt;Want to deep-dive into the topic of screen readers? Check out this article by Adrian Roselli for plenty of resources: &lt;a href=&quot;https://adrianroselli.com/2022/11/your-accessibility-claims-are-wrong-unless.html#SRs&quot;&gt;Your Accessibility Claims Are Wrong, Unless
&lt;/a&gt;&lt;/p&gt;
  2031. &lt;h2 id=&quot;prologue&quot;&gt;Prologue&lt;/h2&gt;
  2032. &lt;p&gt;Imagine you had to describe the way through a building to someone without being able to point out certain things that the person could use for orientation:&lt;/p&gt;
  2033. &lt;blockquote&gt;
  2034. &lt;p&gt;First you go through the thing to get into the thing. Take the thing upstairs because the other thing is broken. After you have gone past a row of things, there is a thing that you have to climb up. Once at the top, press the thing so that you can find the thing with the things more easily.&lt;/p&gt;
  2035. &lt;/blockquote&gt;
  2036. &lt;p&gt;You’ll have a rough idea of what to do, but you’ll have to work your way up most of the way by trial and error. But what if you had a concrete description of the landmarks?&lt;/p&gt;
  2037. &lt;blockquote&gt;
  2038. &lt;p&gt;First, go through the door to get to the entrance hall. Take the stairs up because the elevator is broken. After you pass a row of windows, there is a ladder that you have to climb up. Once at the top, press the light switch to make it easier to find the box of photo albums.&lt;/p&gt;
  2039. &lt;/blockquote&gt;
  2040. &lt;p&gt;It should now be very clear where you need to go and what you need to do to achieve your goal. This example can easily be transferred to websites, as many websites swim in a &lt;a href=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/09/Screen-Shot-2021-09-21-at-9.58.00-AM.png?resize=1536%2C907&amp;#x26;ssl=1&quot;&gt;&lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; soup&lt;/a&gt;.&lt;/p&gt;
  2041. &lt;p&gt;Its main component is the meaningless &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div&quot;&gt;&lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; element&lt;/a&gt;. It is used for all kinds of things, even if there is often a better alternative. And this is where my beloved &lt;a href=&quot;https://developer.mozilla.org/en-US/blog/aria-accessibility-html-landmark-roles/#what_are_html_landmark_roles&quot;&gt;landmark elements&lt;/a&gt; come into play!&lt;/p&gt;
  2042. &lt;h2 id=&quot;a-solid-foundation&quot;&gt;A solid foundation&lt;/h2&gt;
  2043. &lt;p&gt;I’m a basic guy, I admit it. I love it when simple solutions have a big impact. One of these solutions allows you to make the structure of your website easier to understand for AT users and your developer colleagues. You can use the following eight HTML elements to do this:&lt;/p&gt;
  2044. &lt;ul&gt;
  2045. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside&quot;&gt;&lt;code&gt;&amp;#x3C;aside&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2046. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer&quot;&gt;&lt;code&gt;&amp;#x3C;footer&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2047. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form&quot;&gt;&lt;code&gt;&amp;#x3C;form&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2048. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header&quot;&gt;&lt;code&gt;&amp;#x3C;header&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2049. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main&quot;&gt;&lt;code&gt;&amp;#x3C;main&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2050. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav&quot;&gt;&lt;code&gt;&amp;#x3C;nav&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2051. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search&quot;&gt;&lt;code&gt;&amp;#x3C;search&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2052. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section&quot;&gt;&lt;code&gt;&amp;#x3C;section&gt;&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  2053. &lt;/ul&gt;
  2054. &lt;p&gt;This article is strongly inspired by &lt;a href=&quot;https://developer.mozilla.org/en-US/blog/aria-accessibility-html-landmark-roles/#what_are_html_landmark_roles&quot;&gt;Using HTML landmark roles to improve accessibility&lt;/a&gt; by &lt;a href=&quot;https://github.com/schalkneethling/&quot;&gt;Schalk Neethling&lt;/a&gt;, where you will find a concrete example for each element. I, however, will use all elements simultaneously in my examples to keep this article short and crisp.&lt;/p&gt;
  2055. &lt;h2 id=&quot;bonjour-tristesse&quot;&gt;Bonjour Tristesse&lt;/h2&gt;
  2056. &lt;p&gt;Example website: &lt;a href=&quot;https://stevefrenzel.github.io/showcase-landmark-elements/div-soup.html&quot;&gt;Only &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; elements&lt;/a&gt;&lt;/p&gt;
  2057. &lt;p&gt;If we now transfer our very vague directions from the beginning to HTML code, it could look like this, for example:&lt;/p&gt;
  2058. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2059. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h1&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Only div elements&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h1&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2060. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2061. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;header&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2062. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {# ... #}&lt;/span&gt;&lt;/span&gt;
  2063. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;nav&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2064. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2065. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2066. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;main&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2067. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {# ... #}&lt;/span&gt;&lt;/span&gt;
  2068. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;section&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2069. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      {# ... #}&lt;/span&gt;&lt;/span&gt;
  2070. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;search&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2071. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        {# ... #}&lt;/span&gt;&lt;/span&gt;
  2072. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;form&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2073. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2074. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2075. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2076. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2077. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;aside&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2078. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2079. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;footer&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2080. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2081. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2082. &lt;p&gt;If we open our browser inspector and look at the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree&quot;&gt;accessibility tree&lt;/a&gt;, we discover the following:&lt;/p&gt;
  2083. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/browser-div-soup.BKJxb70Y_Z1o9PNg.webp&quot; alt=&quot;Screenshot showing a visual presentation of landmark elements to the left and the accessibility tree to the right. It&amp;#38;#x27;s only a div soup though, no landmark elements were actually used, which is why the accessibility tree shows them ungrouped.&quot; width=&quot;1425&quot; height=&quot;1035&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2084. &lt;p&gt;Apart from a few semantic HTML elements, not much structure is recognizable. If we activate VoiceOver on MacOs to view all available landmark elements, the picture is similarly bleak. None at all! If none of these elements are available, not even an empty list or a hint is displayed.&lt;/p&gt;
  2085. &lt;p&gt;If we open NVDA together with Firefox in Windows 11, things don’t look much better. Using “D” you can jump to the next landmark element, but we only get the message “no next landmark”. â˜č If we were dependent on a screen reader, only the existing elements could show us the structure of this website.&lt;/p&gt;
  2086. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/nvda-div-soup.DTQ1u4he_21YM5w.webp&quot; alt=&quot;Screenshot of NVDA Speech Viewer showing that &amp;#34;no text landmark&amp;#34; elements are present.&quot; width=&quot;681&quot; height=&quot;600&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2087. &lt;h2 id=&quot;wai-would-you-do-that&quot;&gt;WAI would you do that&lt;/h2&gt;
  2088. &lt;p&gt;Example website: &lt;a href=&quot;https://stevefrenzel.github.io/showcase-landmark-elements/wai-aria.html&quot;&gt;Only WAI-ARIA roles&lt;/a&gt;&lt;/p&gt;
  2089. &lt;p&gt;A really sad sight
 How about an interim solution that is neither elegant nor advisable? To give meaning to all these numerous, ownerless &lt;code&gt;&amp;#x3C;div&gt;&lt;/code&gt; elements and make them visible, we could assign them a &lt;a href=&quot;https://www.w3.org/WAI/standards-guidelines/aria/&quot;&gt;WAI-ARIA&lt;/a&gt; role. The following are available for this purpose:&lt;/p&gt;
  2090. &lt;ul&gt;
  2091. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role&quot;&gt;banner&lt;/a&gt;&lt;/li&gt;
  2092. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role&quot;&gt;complementary&lt;/a&gt;&lt;/li&gt;
  2093. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role&quot;&gt;contentinfo&lt;/a&gt;&lt;/li&gt;
  2094. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/form_role&quot;&gt;form&lt;/a&gt;&lt;/li&gt;
  2095. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role&quot;&gt;main&lt;/a&gt;&lt;/li&gt;
  2096. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role&quot;&gt;navigation&lt;/a&gt;&lt;/li&gt;
  2097. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role&quot;&gt;region&lt;/a&gt;&lt;/li&gt;
  2098. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role&quot;&gt;search&lt;/a&gt;&lt;/li&gt;
  2099. &lt;/ul&gt;
  2100. &lt;p&gt;Have you noticed that many of these roles have the same name as the corresponding HTML element? If it is not possible for you to use a landmark element, you can fall back on it as an emergency solution. However, the roles only add a semantic meaning, but no functionality! In the case of our form, we gain nothing, as it would be visible, but has no functionality.&lt;/p&gt;
  2101. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2102. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h1&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Only WAI-ARIA roles&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h1&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2103. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2104. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;header&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;banner&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2105. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {# ... #}&lt;/span&gt;&lt;/span&gt;
  2106. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;nav&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;navigation&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2107. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2108. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2109. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;main&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;main&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2110. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {# ... #}&lt;/span&gt;&lt;/span&gt;
  2111. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-label&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;The three elements&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;section&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;region&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2112. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      {# ... #}&lt;/span&gt;&lt;/span&gt;
  2113. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-label&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Main&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;search&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;search&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2114. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        {# ... #}&lt;/span&gt;&lt;/span&gt;
  2115. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-label&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Name search&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;form&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;form&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2116. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2117. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2118. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2119. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2120. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;aside&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;complementary&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2121. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2122. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;footer&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; role&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;contentinfo&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;div&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2123. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2124. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2125. &lt;p&gt;Now there is a lot more going on in our accessibility tree, all eight elements are represented! This has the advantage for screen reader users that they can now select these elements directly. On a website with a lot of content, this can speed up navigation enormously, as they can simply skip over areas.&lt;/p&gt;
  2126. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/browser-wai-aria.BfYxHMoB_Z1MgKEB.webp&quot; alt=&quot;Screenshot showing a visual presentation of landmark elements to the left and the accessibility tree to the right. No HTML elements were used, only WAI-ARIA roles were added to the div soup. Yet all individual elements are now grouped in the accessibility tree.&quot; width=&quot;1425&quot; height=&quot;1035&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2127. &lt;p&gt;If we use VoiceOver, all eight elements are now also listed:&lt;/p&gt;
  2128. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/voiceover-landmarks.hn3IlqZX_ZlxPE.webp&quot; alt=&quot;Screenshot of VoiceOver overview of all eight landmark elements.&quot; width=&quot;660&quot; height=&quot;556&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2129. &lt;p&gt;Thanks to these assigned roles, we can now also navigate quickly through the website with NVDA:&lt;/p&gt;
  2130. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/nvda-wai-aria.DpGvb5J8_DxGHT.webp&quot; alt=&quot;Screenshot of NVDA Speech Viewer listing all eight available landmark elements.&quot; width=&quot;681&quot; height=&quot;600&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2131. &lt;p&gt;Before we look at how we can achieve the same result even more easily with landmark elements, let’s take a little detour:&lt;/p&gt;
  2132. &lt;h3 id=&quot;lets-talk-about-form-and-region&quot;&gt;Let’s talk about &lt;code&gt;form&lt;/code&gt; and &lt;code&gt;region&lt;/code&gt;&lt;/h3&gt;
  2133. &lt;p&gt;These two elements are somewhat out of line, as they only appear in the accessibility tree if you assign them a (descriptive) &lt;code&gt;aria-label&lt;/code&gt;, at least with the setup I’ve used.&lt;/p&gt;
  2134. &lt;p&gt;Also it’s possible that the words “section”, “region” and “form” are announced by a screen reader when using these roles, so you may not need to add them at all to your &lt;code&gt;aria-label&lt;/code&gt;.&lt;/p&gt;
  2135. &lt;h2 id=&quot;land-in-sight&quot;&gt;Land in sight&lt;/h2&gt;
  2136. &lt;p&gt;Example website: &lt;a href=&quot;https://stevefrenzel.github.io/showcase-landmark-elements/landmarks.html&quot;&gt;Only landmark elements example&lt;/a&gt;&lt;/p&gt;
  2137. &lt;p&gt;Finally, the awful part is over! Let’s code our example the way it’s meant to be, with native elements that also make it easier to read the code as a developer.&lt;/p&gt;
  2138. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/browser-landmarks.CzL29LVG_Z2ibf6M.webp&quot; alt=&quot;Screenshot showing a visual presentation of landmark elements to the left and the accessibility tree to the right. All individual elements are grouped in the accessibility tree.&quot; width=&quot;1425&quot; height=&quot;1035&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2139. &lt;p&gt;There are no differences in terms of the accessibility tree, but we now have a working form because we use the power and robustness of native HTML! đŸ’Ș Look at this beautiful, self-explanatory code:&lt;/p&gt;
  2140. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2141. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h1&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Only landmark elements&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;h1&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2142. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2143. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;header&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2144. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {# ... #}&lt;/span&gt;&lt;/span&gt;
  2145. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;nav&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;nav&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2146. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;header&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2147. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2148. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;main&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2149. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    {# ... #}&lt;/span&gt;&lt;/span&gt;
  2150. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;section&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-label&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;The three elements&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2151. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      {# ... #}&lt;/span&gt;&lt;/span&gt;
  2152. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#FDAEB7;font-style:italic&quot;&gt;search&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-label&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Main&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2153. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        {# ... #}&lt;/span&gt;&lt;/span&gt;
  2154. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;        &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;form&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; action&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-label&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;Name search&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;form&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2155. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;      &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#FDAEB7;font-style:italic&quot;&gt;search&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2156. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;section&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2157. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;main&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2158. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2159. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;aside&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;aside&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2160. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2161. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;  &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;footer&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;{# ... #}&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;footer&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2162. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2163. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2164. &lt;p&gt;In NVDA the only difference is that for the &lt;code&gt;form&lt;/code&gt; element, we now get a notification for “invalid entry”, which proves that we have a functional form without any additional JavaScript. It’s great to get things for free, isn’t it?&lt;/p&gt;
  2165. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/nvda-landmarks.i-zTMRPo_QEYln.webp&quot; alt=&quot;Screenshot of NVDA Speech Viewer listing all eight available landmark elements. It also show &amp;#34;invalid entry&amp;#34; for the form element.&quot; width=&quot;681&quot; height=&quot;600&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2166. &lt;h3 id=&quot;the-case-for-seo&quot;&gt;The case for SEO&lt;/h3&gt;
  2167. &lt;p&gt;Let’s face it, your employer probably doesn’t care as much about landmark elements as SEO (search engine optimization). But if it makes it easier for people to navigate your website, the same should apply to search engines, right?&lt;/p&gt;
  2168. &lt;p&gt;Imagine that people are looking for something on your website but can’t find it because it’s very difficult to impossible for technical reasons. Instead, they go to the competition because it’s easier for them to find it there. This can have a direct impact on your search engine ranking and a simple fix like adding landmark elements can have a positive impact.&lt;/p&gt;
  2169. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  2170. &lt;p&gt;Why use landmark elements when it works just as well with WAI-ARIA roles?&lt;/p&gt;
  2171. &lt;p&gt;Use these roles more for complex components to ensure better accessibility. In this case, there is often no suitable element and you have to get creative. This is where WAI-ARIA can help to compensate for accessibility deficits.&lt;/p&gt;
  2172. &lt;p&gt;Whenever possible, you should use native HTML elements, as these are not only easier to read in the code, but are often also equipped with functionality. This way you can ensure that your website is robust and future-proof. Landmarks help you to build a solid foundation that you can expand with additional semantic elements so that as many people as possible can use your website.&lt;/p&gt;
  2173. &lt;p&gt;If you’re a fan of analogies: Imagine you’re building a car, but instead of using functioning components (landmark elements), you use ones that look like the original (WAI-ARIA) but can’t do anything else. Needless to say, this is very dangerous and could get you sued.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Preparing for the WAS exam</title><link>https://www.stevefrenzel.dev/blog/preparing-for-the-was-exam/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/preparing-for-the-was-exam/</guid><description>Gotta level up my web accessibility skills so I&apos;m gonna prepare for getting a certificate. But I&apos;m not gotta take the exam. 😏 (Maybe I will, though.)</description><pubDate>Mon, 29 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  2174. &lt;ul&gt;
  2175. &lt;li&gt;&lt;a href=&quot;#prologue&quot;&gt;Prologue&lt;/a&gt;&lt;/li&gt;
  2176. &lt;li&gt;&lt;a href=&quot;#the-day-things-changed&quot;&gt;The day things changed&lt;/a&gt;&lt;/li&gt;
  2177. &lt;li&gt;&lt;a href=&quot;#parallels-to-music-production&quot;&gt;Parallels to music production&lt;/a&gt;&lt;/li&gt;
  2178. &lt;li&gt;&lt;a href=&quot;#how-i-will-learn&quot;&gt;How I will learn&lt;/a&gt;&lt;/li&gt;
  2179. &lt;li&gt;&lt;a href=&quot;#research-for-the-exam&quot;&gt;Research for the exam&lt;/a&gt;&lt;/li&gt;
  2180. &lt;li&gt;&lt;a href=&quot;#predictions&quot;&gt;Predictions&lt;/a&gt;&lt;/li&gt;
  2181. &lt;/ul&gt;
  2182. &lt;h2 id=&quot;prologue&quot;&gt;Prologue&lt;/h2&gt;
  2183. &lt;p&gt;It must have been about two years ago that I started noticing the topic of web accessibility. Before that, I visited a &lt;a href=&quot;https://www.spiced-academy.com/&quot;&gt;coding bootcamp&lt;/a&gt; and started my first job and shortly after my second one, being way too busy trying to “deliver” and become more familiar with React and Next.js.&lt;/p&gt;
  2184. &lt;p&gt;But with experience (and diminishing imposter syndrome) came the realisation that almost all of my work didn’t have a good foundation. I didn’t pay attention to color contrasts, keyboard or screen reader support and simply implemented what was suggested on Stack Overflow, various YouTube tutorials or by my colleagues.&lt;/p&gt;
  2185. &lt;h2 id=&quot;the-day-things-changed&quot;&gt;The day things changed&lt;/h2&gt;
  2186. &lt;p&gt;When I discovered that there is an official recommendation on how to build usable and robust websites, my mind was blown! It’s called the &lt;a href=&quot;https://www.w3.org/TR/WCAG22/&quot;&gt;Web Content Accessibility Guidelines&lt;/a&gt;, or ✹ WCAG ✹ for short. These standards provide guidance on how to create websites that can be used by as many people as possible. Turns out that I like standards. I am deeply involved in this topic, but I think that my knowledge can be much more profound. My craft as a web developer is not yet at the level of quality I would like it to be.&lt;/p&gt;
  2187. &lt;p&gt;That’s why I’ve decided to study for the &lt;a href=&quot;https://www.iaap-hq.org/&quot;&gt;IAAP&lt;/a&gt; WAS certificate, short for &lt;a href=&quot;https://www.accessibilityassociation.org/s/wascertification&quot;&gt;Web Accessibility Specialist&lt;/a&gt;. However, at this point I don’t actually plan to take the exam, as I’m not sure if it’s really going to be of any value for my professional career. So far nobody cared about any of the certificates I’ve gathered, but rather if I’m a good fit as a person and if I had the necessary skills for the job. đŸ€·â€â™‚ïž&lt;/p&gt;
  2188. &lt;h2 id=&quot;parallels-to-music-production&quot;&gt;Parallels to music production&lt;/h2&gt;
  2189. &lt;p&gt;I am no stranger to implementing standards, as I am familiar with them as a sound engineer and music producer. In radio and cinema, for example, there are volume specifications that you have to comply to, otherwise the delivered product will not be accepted.&lt;/p&gt;
  2190. &lt;p&gt;This is a little more relaxed in the streaming and physical media sector, but here too there are recommendations regarding average volume and what needs to be taken into account when creating masters for a vinyl production, for example.&lt;/p&gt;
  2191. &lt;h2 id=&quot;how-i-will-learn&quot;&gt;How I will learn&lt;/h2&gt;
  2192. &lt;p&gt;My plan is to first gather my thoughts in &lt;a href=&quot;https://www.figma.com/figjam/&quot;&gt;FigJam&lt;/a&gt; and organize them once I call it a (learning) day. After that I’ll write or draw it very nicely into a notebook with my (inferior) drawing skills. Then I’ll write an article about it and propably add some FigJam screenshots. With this approach I’m certain that some of it will stay in long-term memory. đŸ€ž&lt;/p&gt;
  2193. &lt;p&gt;When creating my workshops, it helped me a lot that I could stick notes in books. I’m not a fan of writing in an actual book or even dog-earing it, no way JosĂ©! But nothing beats being able to look something up with your own hands. Also I haven’t physically written anything in years, so this will be a nice way to introduce hand cramps into my learning routine.&lt;/p&gt;
  2194. &lt;h2 id=&quot;research-for-the-exam&quot;&gt;Research for the exam&lt;/h2&gt;
  2195. &lt;p&gt;To make sure it’s really worth it to invest my time into this, I read a couple of articles by people who went through the same process. Some of them are quite critical, which is nice cause not everything in life is cupcakes and rainbows.&lt;/p&gt;
  2196. &lt;p&gt;I decided to take the &lt;a href=&quot;https://dequeuniversity.com/online-courses/web-accessibility&quot;&gt;Web Accessibility course by Deque University&lt;/a&gt;, as I’m not only a heavy user of their browser extension &lt;a href=&quot;https://www.deque.com/axe/devtools/&quot;&gt;axe DevTools¼&lt;/a&gt; but also because they have a decent reputation in the “scene”. Along with it, I will also use the &lt;a href=&quot;https://www.accessibilityassociation.org/resource/WAS_Certification_FInal_2020_FINAL&quot;&gt;Body of Knowledge&lt;/a&gt; provided by the IAAP for my studies. And here’s the list from my research:&lt;/p&gt;
  2197. &lt;ul&gt;
  2198. &lt;li&gt;&lt;a href=&quot;https://medium.com/@jnblatz/prepare-for-the-cpacc-exam-strategies-for-learning-success-97b7dc963c2a&quot;&gt;Prepare for the CPACC (or any) Exam — Strategies for Learning Success by Jen Blatz&lt;/a&gt;&lt;/li&gt;
  2199. &lt;li&gt;&lt;a href=&quot;https://medium.com/@dseo1212/a-comprehensive-guide-to-preparing-for-the-iaap-cpacc-exam-insights-and-strategies-30a9b22f4332&quot;&gt;A Comprehensive Guide to Preparing for the IAAP CPACC Exam by Dongyeon Seo&lt;/a&gt;&lt;/li&gt;
  2200. &lt;li&gt;&lt;a href=&quot;https://100daysofa11y.com/cpacc/&quot;&gt;100 Days of A11y by Amy Carney&lt;/a&gt;&lt;/li&gt;
  2201. &lt;li&gt;&lt;a href=&quot;https://www.youtube.com/watch?v=a01vcZMTJqU&quot;&gt;FULL CPACC Study Guide 📚 | Pass the Certified Professional in Accessibility Core Competencies Exam!&lt;/a&gt;&lt;/li&gt;
  2202. &lt;li&gt;&lt;a href=&quot;https://stevenwoodson.com/blog/cpacc-exam-reflection/&quot;&gt;IAAP CPACC Exam Preparation and Reflection by Steven Woodson&lt;/a&gt;&lt;/li&gt;
  2203. &lt;li&gt;&lt;a href=&quot;https://www.getstark.co/blog/a-discouraging-cpacc-exam-experience/&quot;&gt;A discouraging CPACC exam experience by Caitlyn Mayers&lt;/a&gt;&lt;/li&gt;
  2204. &lt;li&gt;&lt;a href=&quot;https://www.camcoulter.com/2021/07/21/cpacc-reflection/&quot;&gt;CPACC Reflection by Cam Coulter&lt;/a&gt;&lt;/li&gt;
  2205. &lt;/ul&gt;
  2206. &lt;p&gt;Yes, this is about a different exam but contents are somewhat similar, so this worked for me to understand what studying for the exam was like.&lt;/p&gt;
  2207. &lt;h2 id=&quot;predictions&quot;&gt;Predictions&lt;/h2&gt;
  2208. &lt;p&gt;Looking at the body of knowledge overview, plenty of the things listed I have already done on the job to a certain extent. But I don’t want to get cocky and tackle my studies with a humble attitude, as I’m very certain that I have only surface level knowledge of most of the topics. Let’s see how it goes, it’s gonna be fun!&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Should links open in a new tab?</title><link>https://www.stevefrenzel.dev/blog/should-links-open-in-a-new-tab/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/should-links-open-in-a-new-tab/</guid><description>The answer will probably not surprise you very much, as there are not many plausible use cases for this practice. In other words, it depends.</description><pubDate>Thu, 25 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;em&gt;Photo credit: Photo by &lt;a href=&quot;https://unsplash.com/@sebastiaanstam?utm_content=creditCopyText&amp;#x26;utm_medium=referral&amp;#x26;utm_source=unsplash&quot;&gt;Sebastiaan Stam&lt;/a&gt; on &lt;a href=&quot;https://unsplash.com/photos/man-wearing-red-hoodie-RChZT-JlI9g?utm_content=creditCopyText&amp;#x26;utm_medium=referral&amp;#x26;utm_source=unsplash&quot;&gt;Unsplash&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
  2209. &lt;p&gt;Disclaimer: When talking about “links”, I actually mean &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a&quot;&gt;anchor elements&lt;/a&gt;. But for the sake of simplicity, I will use the term “link”. Also I should practice what I preach, but for now external links do not have a visual or audible indicator. I am aware of it and it’s on my evergrowing to-do-list for this blog.&lt;/p&gt;
  2210. &lt;p&gt;The question in the title seems to be as old and unanswered as the discourse on “links versus buttons” and “should I use section or article?”. My personal preference is that links should open in the same tab, as I make heavy use of the back button. This article is largely based on &lt;a href=&quot;https://blog.pope.tech/2024/01/02/how-to-make-external-links-accessible&quot;&gt;How to make external links accessible&lt;/a&gt; by Whitney Lewis.&lt;/p&gt;
  2211. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  2212. &lt;ul&gt;
  2213. &lt;li&gt;&lt;a href=&quot;#the-arguments-in-favour&quot;&gt;The arguments in favour&lt;/a&gt;&lt;/li&gt;
  2214. &lt;li&gt;&lt;a href=&quot;#the-arguments-against&quot;&gt;The arguments against&lt;/a&gt;&lt;/li&gt;
  2215. &lt;li&gt;&lt;a href=&quot;#damage-control&quot;&gt;Damage control&lt;/a&gt;&lt;/li&gt;
  2216. &lt;/ul&gt;
  2217. &lt;h2 id=&quot;the-arguments-in-favour&quot;&gt;The arguments in favour&lt;/h2&gt;
  2218. &lt;p&gt;Let’s look at the dilemma from the positive side for reasons to open a link in a new tab:&lt;/p&gt;
  2219. &lt;p&gt;When filling out a form, you may lose progress if you navigate forward or backward. If you open the form in a new tab, you are safe from this. An alternative to this would be to make the form persistent and display new information in an overlay that can be easily closed.&lt;/p&gt;
  2220. &lt;p&gt;If you are on a website that logs the user out after a certain amount of time, it can be useful for links to open in a new tab to avoid this mechanism. In this context, however, it is important to give users the option of adjusting the time limit, otherwise it might fail &lt;a href=&quot;https://www.w3.org/TR/WCAG22/#timing-adjustable&quot;&gt;Success Criterion 2.2.1 Timing Adjustable&lt;/a&gt;.&lt;/p&gt;
  2221. &lt;p&gt;These are two very specific examples and in general you should consider (preferably on the basis of user feedback) whether and at what point links should open in a new tab.&lt;/p&gt;
  2222. &lt;h2 id=&quot;the-arguments-against&quot;&gt;The arguments against&lt;/h2&gt;
  2223. &lt;p&gt;Whitney made what I consider the most important argument first, so I’ll quote her directly:&lt;/p&gt;
  2224. &lt;blockquote&gt;
  2225. &lt;p&gt;“The most important reason why links should open in the same tab is to give users a choice. If a link is set to open in the same tab, the user always has the choice to open it in a new tab.”&lt;/p&gt;
  2226. &lt;/blockquote&gt;
  2227. &lt;p&gt;The World Wide Web Consortium also has a clear opinion on this:&lt;/p&gt;
  2228. &lt;blockquote&gt;
  2229. &lt;p&gt;“In general, it’s better not to open new windows and tabs, as they can be confusing for people, especially those who have difficulty perceiving visual content.” - &lt;a href=&quot;https://www.w3.org/TR/WCAG20-TECHS/G200.html&quot;&gt;W3C&lt;/a&gt;&lt;/p&gt;
  2230. &lt;/blockquote&gt;
  2231. &lt;p&gt;In her article, Whitney lists many more reasons against it, but the core problem is: You are taking a piece of self-determination from your visitors and forcing something on them.&lt;/p&gt;
  2232. &lt;h2 id=&quot;damage-control&quot;&gt;Damage control&lt;/h2&gt;
  2233. &lt;p&gt;Let’s say you couldn’t convince the marketing team that it’s better for users to have links open in the same tab. What can you do to minimize the negative effects of this decision?&lt;/p&gt;
  2234. &lt;p&gt;For one thing, you can add an icon to all external links that visually signals what will happen when you click or press “enter”. The symbol looks more or less like this and seems to be becoming an unofficial standard:&lt;/p&gt;
  2235. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/link-list-open-new-tab.C_fuz4b6_11fq6v.webp&quot; alt=&quot;Links with an icon after them. The icon is a square with an arrow in it pointing upwards and to the right.&quot; width=&quot;1062&quot; height=&quot;300&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2236. &lt;p&gt;If you use a screen reader, however, this symbol would be announced every time. That’s why Whitney suggests hiding it with &lt;code&gt;aria-hidden&lt;/code&gt; and adding a screen reader exclusive hint. It could look like this, for example:&lt;/p&gt;
  2237. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; href&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;“LINK_URL”&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; target&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;“_blank”&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2238. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    LINK_TEXT&lt;/span&gt;&lt;/span&gt;
  2239. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;img&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; aria-hidden&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;“true”&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; src&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;“ICON_URL”&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;
  2240. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;    &amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;span&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;visually-hidden”&gt;Opens in new tab&lt;/span&gt;&lt;span style=&quot;color:#FDAEB7;font-style:italic&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;/span&gt;&lt;/span&gt;&lt;/span&gt;
  2241. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#FDAEB7;font-style:italic&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;/a&gt;&lt;/span&gt;&lt;/span&gt;
  2242. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2243. &lt;p&gt;With this solution, there would not only be a visual, but also an audible indicator that a link will open in a new tab. This would be a compromise that the marketing team could perhaps live with, as they may have seen this icon before and your suggestion would appear less “exotic”.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Books I read in 2023</title><link>https://www.stevefrenzel.dev/blog/books-i-read-in-2023/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/books-i-read-in-2023/</guid><description>Six books I enjoyed in 2023, mostly novels and biographies. Featuring Trevor Noah, Dave Grohl and more!</description><pubDate>Tue, 23 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;When I made this list, I thought it would be much longer. It feels like I’ve read more, but these are the books I can remember from last year. In 2022 it was a lot of non-fiction, so I’m getting a bigger kick out of reading novels and biographies. đŸ€·â€â™‚ïž&lt;/p&gt;
  2244. &lt;h2 id=&quot;born-a-crime-stories-from-a-south-african-childhood-by-trevor-noah&quot;&gt;”Born a Crime: Stories from a South African Childhood” by Trevor Noah&lt;/h2&gt;
  2245. &lt;p&gt;I was only peripherally aware of Trevor as just another late night host, but always found him likeable. When I saw that he had written a book about his teenage years in Africa, my interest was piqued!&lt;/p&gt;
  2246. &lt;p&gt;It’s super exciting and very funny to read about how much shit he got up to with his friends, what his relationship with his mother and her partners was like and how much his buddy Hitler loved to dance. 😅&lt;/p&gt;
  2247. &lt;p&gt;&lt;a href=&quot;https://www.barnesandnoble.com/w/born-a-crime-trevor-noah/1123595364?ean=9780399588198&quot;&gt;Buy “Born a Crime” by Trevor Noah&lt;/a&gt;&lt;/p&gt;
  2248. &lt;h2 id=&quot;tomorrow-and-tomorrow-and-tomorrow-by-gabrielle-zevin&quot;&gt;”Tomorrow, and Tomorrow, and Tomorrow” by Gabrielle Zevin&lt;/h2&gt;
  2249. &lt;p&gt;Of all these books, this one is my favorite because it struck a chord with me. It’s about two friends who found each other mainly through their passion for video games in the late 90s. They are both programmers and decide to program a game together. đŸ‘Ÿ&lt;/p&gt;
  2250. &lt;p&gt;The game becomes a hit, but the tensions between the two grow and so the plot develops. It’s not a romantic love story, but it’s definitely a love story. My generation especially will really enjoy it because there are tons of video game references in this book.&lt;/p&gt;
  2251. &lt;p&gt;&lt;a href=&quot;https://www.barnesandnoble.com/w/tomorrow-and-tomorrow-and-tomorrow-gabrielle-zevin/1140356782?ean=9780593321201&quot;&gt;Buy “Tomorrow, and Tomorrow, and Tomorrow” by Gabrielle Zevin&lt;/a&gt;&lt;/p&gt;
  2252. &lt;h2 id=&quot;the-lincoln-highway-by-amor-towles&quot;&gt;”The Lincoln Highway” by Amor Towles&lt;/h2&gt;
  2253. &lt;p&gt;I tried to start with his big hit “A Gentleman in Moscow” but just couldn’t get into the book. But this story was really fun because it’s set in the USA in the 1950s, which is a time period often chosen by Stephen King. And I love Stephen King! 👑&lt;/p&gt;
  2254. &lt;p&gt;What I like about the plot is that an expectation is created from the beginning, but in the end it is not satisfied at all. That’s what makes this book so great, because I was on a journey with the protagonists that never really happened.&lt;/p&gt;
  2255. &lt;p&gt;&lt;a href=&quot;https://www.barnesandnoble.com/w/the-lincoln-highway-amor-towles/1138843333?ean=9780735222366&quot;&gt;Buy “The Lincoln Highway” by Amor Towles&lt;/a&gt;&lt;/p&gt;
  2256. &lt;h2 id=&quot;normal-people-by-sally-rooney&quot;&gt;”Normal People” by Sally Rooney&lt;/h2&gt;
  2257. &lt;p&gt;Another book that I had difficulties getting started with because I found the writing style very cumbersome. Especially the fact that dialogs were not written with quotation marks took a lot out of me.&lt;/p&gt;
  2258. &lt;p&gt;Nevertheless, it is a very good, but also depressing book, as the two main characters not only talk past each other all the time, but also often treat each other very badly. If you’re in the mood for a teenage angst book, this is the one for you. đŸ˜”â€đŸ’«&lt;/p&gt;
  2259. &lt;p&gt;&lt;a href=&quot;https://www.barnesandnoble.com/w/normal-people-sally-rooney/1129141966?ean=9781984822185&quot;&gt;Buy “Normal People” by Sally Rooney&lt;/a&gt;&lt;/p&gt;
  2260. &lt;h2 id=&quot;storyteller-by-dave-grohl&quot;&gt;”Storyteller” by Dave Grohl&lt;/h2&gt;
  2261. &lt;p&gt;If you know and like Nirvana and / or Foo Fighters, you probably heard about this book or read it already.&lt;/p&gt;
  2262. &lt;p&gt;Dave is a great storyteller and especially the chapters right before the Nirvana boom were particularly interesting to me. Also that he made no money during that time for a long time still amazes me. Gotta love the music industry! đŸŽ¶&lt;/p&gt;
  2263. &lt;p&gt;&lt;a href=&quot;https://www.barnesandnoble.com/w/der-storyteller-dave-grohl/1139384326?ean=9783843725682&quot;&gt;Buy “Storyteller” by Dave Grohl&lt;/a&gt;&lt;/p&gt;
  2264. &lt;h2 id=&quot;the-power-by-naomi-alderman&quot;&gt;”The Power” by Naomi Alderman&lt;/h2&gt;
  2265. &lt;p&gt;This book is so rad! Women develop a power to shoot electrical jolts from their fingers (but can also heal) and become the dominant sex. It is very well written and the plot happens all around the world.&lt;/p&gt;
  2266. &lt;p&gt;I really enjoyed the overall vibe and that it was easy to imagine how everything is taking place and that the exciting parts were truly exciting. 🍿&lt;/p&gt;
  2267. &lt;p&gt;&lt;a href=&quot;https://www.barnesandnoble.com/w/the-power-naomi-alderman/1125454421?ean=9780316547604&quot;&gt;Buy “The Power” by Naomi Alderman&lt;/a&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Should text be truncated?</title><link>https://www.stevefrenzel.dev/blog/should-text-be-truncated/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/should-text-be-truncated/</guid><description>A CSS feature that should have never made into to production, and why you sh...</description><pubDate>Wed, 17 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;em&gt;Photo credit: Cover image by &lt;a href=&quot;https://unsplash.com/@markuswinkler?utm_content=creditCopyText&amp;#x26;utm_medium=referral&amp;#x26;utm_source=unsplash&quot;&gt;Markus Winkler&lt;/a&gt; on &lt;a href=&quot;https://unsplash.com/photos/silver-scissors-on-blue-surface-bNhCzmKZ_dI?utm_content=creditCopyText&amp;#x26;utm_medium=referral&amp;#x26;utm_source=unsplash&quot;&gt;Unsplash&lt;/a&gt;, example screenshots by James Edwards&lt;/em&gt;&lt;/p&gt;
  2268. &lt;h2 id=&quot;short-answer-no&quot;&gt;Short answer: No&lt;/h2&gt;
  2269. &lt;p&gt;There’s no benefit for the user to have truncated text and it’s a CSS feature which should have never made it into production in the first place.&lt;/p&gt;
  2270. &lt;h2 id=&quot;long-answer-no-you-should-not&quot;&gt;Long answer: No, you should not&lt;/h2&gt;
  2271. &lt;p&gt;While browsing through one of my favourite newsletters &lt;a href=&quot;https://a11yweekly.com/&quot;&gt;Accessibility Weekly&lt;/a&gt;, I came across this article by &lt;a href=&quot;https://www.tpgi.com/author/doug/&quot;&gt;Doug Abrams&lt;/a&gt;: &lt;a href=&quot;https://www.tpgi.com/reflow-red-flags/&quot;&gt;Reflow Red Flags&lt;/a&gt;. This article is about &lt;a href=&quot;https://www.w3.org/TR/WCAG21/#reflow&quot;&gt;Success Criterion 1.4.10 Reflow&lt;/a&gt;, but what caught my attention was the part about truncated text. Personally, I never saw a benefit in using it, because I always asked myself:&lt;/p&gt;
  2272. &lt;ul&gt;
  2273. &lt;li&gt;Why would I obscure text information? If it has to be truncated, it’s obviously not that important.&lt;/li&gt;
  2274. &lt;li&gt;So why not ditch the text or make it shorter?&lt;/li&gt;
  2275. &lt;li&gt;If it’s for “consistency” and “corporate identity”, it’s still not a good idea and shouldn’t be done?&lt;/li&gt;
  2276. &lt;/ul&gt;
  2277. &lt;p&gt;Doug links to another article about this topic by &lt;a href=&quot;https://www.tpgi.com/author/brothercake/&quot;&gt;James Edwards&lt;/a&gt;, called &lt;a href=&quot;https://www.tpgi.com/the-ballad-of-text-overflow/&quot;&gt;The Ballad of Text Overflow&lt;/a&gt;. Here he showcases how bad truncated text for low vision users is.&lt;/p&gt;
  2278. &lt;p&gt;Have a look at this screenshot, it shows truncated text in a width-constrained list of 640px viewport:&lt;/p&gt;
  2279. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/truncated-list.CC49g0-v_Z20Vo2.webp&quot; alt=&quot;A text list in which each item is truncated using text-overflow, so you can only read the first two or three words of each link, followed by an ellipsis.&quot; width=&quot;506&quot; height=&quot;657&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2280. &lt;p&gt;This one shows the same list 400% zoomed in, like low vision users might do:&lt;/p&gt;
  2281. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/truncated.BhzuVuur_2gMmKQ.webp&quot; alt=&quot;The same list viewed at 400% zoom, in which the text is so large that it&amp;#38;#x27;s only possible to read the first few letters of each word.&quot; width=&quot;853&quot; height=&quot;1200&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2282. &lt;p&gt;This not only fails the success criterion mentioned earlier but could also fail &lt;a href=&quot;https://www.w3.org/TR/WCAG/#info-and-relationships&quot;&gt;Success Criterion 1.3.1 Info and Relationships&lt;/a&gt;. So what are the alternatives to text truncation? I’ll leave you with a quote from James himself:&lt;/p&gt;
  2283. &lt;blockquote&gt;
  2284. &lt;p&gt;The real answer here is not to rely on text truncation at all.
  2285. Designs should be flexible enough to accommodate any content they might have, in any viewport size (from 320px), and any increases in zoom (up to 400%).
  2286. This is not as challenging as it might sound.&lt;/p&gt;
  2287. &lt;/blockquote&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>Creating more inclusive workspaces</title><link>https://www.stevefrenzel.dev/blog/creating-more-inclusive-workspaces/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/creating-more-inclusive-workspaces/</guid><description>Usage of pronouns, how to address groups, inappropriate emojis and more.</description><pubDate>Fri, 12 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;em&gt;Image credit: &lt;a href=&quot;https://affecttheverb.com/disabledandhere&quot;&gt;Disabled And Here&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
  2288. &lt;p&gt;When working with people from different cultures and countries, there are a few things you can keep in mind to ensure that everyone feels equally integrated. This short list of tips is based on my own experience and is not exhaustive. However, it provides a good starting point as most things are very easy to implement:&lt;/p&gt;
  2289. &lt;h2 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h2&gt;
  2290. &lt;ol&gt;
  2291. &lt;li&gt;&lt;a href=&quot;#1-pronouns&quot;&gt;Pronouns&lt;/a&gt;&lt;/li&gt;
  2292. &lt;li&gt;&lt;a href=&quot;#2-addressing-a-group-of-people&quot;&gt;Addressing a group of people&lt;/a&gt;&lt;/li&gt;
  2293. &lt;li&gt;&lt;a href=&quot;#3-accessible-charts&quot;&gt;Accessible charts&lt;/a&gt;&lt;/li&gt;
  2294. &lt;li&gt;&lt;a href=&quot;#4-providing-subtitles&quot;&gt;Providing subtitles&lt;/a&gt;&lt;/li&gt;
  2295. &lt;li&gt;&lt;a href=&quot;#5-calling-someone-out&quot;&gt;Calling someone out&lt;/a&gt;&lt;/li&gt;
  2296. &lt;li&gt;&lt;a href=&quot;#6-using-inappropriate-words-or-emojis&quot;&gt;Using inappropriate words or emojis&lt;/a&gt;&lt;/li&gt;
  2297. &lt;/ol&gt;
  2298. &lt;h2 id=&quot;1-pronouns&quot;&gt;1. Pronouns&lt;/h2&gt;
  2299. &lt;p&gt;When talking about your customers or users, use the pronouns “they/them” instead of “he/him” or “she/her”. This will include everyone, even those who identify as neither male nor female. It also applies when your colleagues tell you which is their real pronoun.&lt;/p&gt;
  2300. &lt;p&gt;&lt;a href=&quot;https://www.verywellmind.com/they-them-pronouns-7110726&quot;&gt;They/Them Pronouns: What They Mean and When to Use Them&lt;/a&gt;&lt;/p&gt;
  2301. &lt;h2 id=&quot;2-addressing-a-group-of-people&quot;&gt;2. Addressing a group of people&lt;/h2&gt;
  2302. &lt;p&gt;Instead of using “guys”, use “people”, “everyone” or “folks” when speaking to a diverse group of people. This way everyone will feel addressed, as “guys” is a rather masculine term.&lt;/p&gt;
  2303. &lt;p&gt;&lt;a href=&quot;https://www.huffpost.com/entry/gendered-language-hey-guys_l_5f21b189c5b6b8cd63b0f331&quot;&gt;Instead Of Saying ‘Hey, Guys!’ At Work, Try These Gender-Neutral Alternatives&lt;/a&gt;&lt;/p&gt;
  2304. &lt;h2 id=&quot;3-accessible-charts&quot;&gt;3. Accessible charts&lt;/h2&gt;
  2305. &lt;p&gt;When presenting charts, make sure that the content is not only conveyed through colors. You may have color-blind colleagues and they may have difficulty understanding the diagram.&lt;/p&gt;
  2306. &lt;p&gt;Look at your diagram in black and white. Can you still easily grasp and relate all the information? If not, add shapes, additional text, or change the brightness of the colours to make them easier to distinguish.&lt;/p&gt;
  2307. &lt;p&gt;&lt;a href=&quot;https://accessibility.psu.edu/images/charts/&quot;&gt;Accessibility at Penn State | Charts &amp;#x26; Accessibility&lt;/a&gt;&lt;/p&gt;
  2308. &lt;h2 id=&quot;4-providing-subtitles&quot;&gt;4. Providing subtitles&lt;/h2&gt;
  2309. &lt;p&gt;If you share audio or video files with your colleagues, make sure that everyone can understand the content. For example, if you are giving a presentation in Spanish, you can provide subtitles in English if that is the language spoken at work.&lt;/p&gt;
  2310. &lt;p&gt;There are now several AI-based services that offer this quickly and easily. An investment that can not only increase productivity, but also reduce frustration! Here are three suggestions:&lt;/p&gt;
  2311. &lt;ul&gt;
  2312. &lt;li&gt;&lt;a href=&quot;https://www.kapwing.com/subtitles&quot;&gt;Kapwing&lt;/a&gt;&lt;/li&gt;
  2313. &lt;li&gt;&lt;a href=&quot;https://www.veed.io/tools/auto-subtitle-generator-online&quot;&gt;VEED.IO&lt;/a&gt;&lt;/li&gt;
  2314. &lt;li&gt;&lt;a href=&quot;https://www.flexclip.com/tools/auto-subtitle/&quot;&gt;FlexClip&lt;/a&gt;&lt;/li&gt;
  2315. &lt;/ul&gt;
  2316. &lt;h2 id=&quot;5-calling-someone-out&quot;&gt;5. Calling someone out&lt;/h2&gt;
  2317. &lt;p&gt;When I read &lt;a href=&quot;https://www.freecodecamp.org/news/learn-to-code-book/&quot;&gt;How to Learn to Code &amp;#x26; Get a Developer Job&lt;/a&gt; by Quincy Larson, one sentence stuck with me: “Praise in public, criticise in private.”
  2318. How would you feel if one of your colleagues criticised you in front of the whole team, even if it was very polite? Even if it’s justified, it can be inappropriate to do it in this context. It makes them look like a bully and the other person might feel blindsided and exposed.&lt;/p&gt;
  2319. &lt;p&gt;Instead, emphasise what the person has done well and discuss the critical things in private. This creates a safe space in which both people can concentrate on solving the problem without outside interference.&lt;/p&gt;
  2320. &lt;h2 id=&quot;6-using-inappropriate-words-or-emojis&quot;&gt;6. Using inappropriate words or emojis&lt;/h2&gt;
  2321. &lt;p&gt;Sometimes our counterpart may feel offended or hurt because we have used a certain word or emoji in the wrong context. If you want to get an overview of whether such words are in your everyday vocabulary, take a look at Self-Defined.&lt;/p&gt;
  2322. &lt;p&gt;Here is a small selection of words that I often hear in my everyday life that can be replaced with less offensive alternatives:&lt;/p&gt;
  2323. &lt;ul&gt;
  2324. &lt;li&gt;&lt;a href=&quot;https://www.selfdefined.app/definitions/crazy/&quot;&gt;Crazy&lt;/a&gt;&lt;/li&gt;
  2325. &lt;li&gt;&lt;a href=&quot;https://www.selfdefined.app/definitions/dumb/&quot;&gt;Dumb&lt;/a&gt;&lt;/li&gt;
  2326. &lt;li&gt;&lt;a href=&quot;https://www.selfdefined.app/definitions/r-word/&quot;&gt;R-word&lt;/a&gt;&lt;/li&gt;
  2327. &lt;/ul&gt;
  2328. &lt;p&gt;&lt;em&gt;Special thanks to &lt;a href=&quot;https://mastodon.online/@AccordionBruce@mastodon.social&quot;&gt;AccordionBruce&lt;/a&gt; who &lt;a href=&quot;https://mastodon.online/@stvfrnzl/111713731507258625&quot;&gt;offered his help on Mastodon&lt;/a&gt; for the research of this article. Go Canada! 🇹🇩đŸȘ—&lt;/em&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>TIDAL &quot;Wrapped&quot; 2023</title><link>https://www.stevefrenzel.dev/blog/tidal-wrapped-2023/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/tidal-wrapped-2023/</guid><description>My favorite tunes from the year Tina Turner died, Twitter turned X and mass shootings in the U.S. reached a new all-time high.</description><pubDate>Sun, 07 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;It’s a shame that TIDAL doesn’t offer a summary at the end of the year like Spotify, but you can see which artists you’ve streamed and how much each month. &lt;a href=&quot;https://thenaturehero.com/tidal-rewind-2023/&quot;&gt;Apparently this used to exist in the past&lt;/a&gt; and was called “Rewind”, but that was before I switched. Let’s see what I listened to the most each month and what my personal album of the year is:&lt;/p&gt;
  2329. &lt;h2 id=&quot;january-2023&quot;&gt;January 2023&lt;/h2&gt;
  2330. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/01-january.BF7Kwvaq_Z2kjDyj.webp&quot; alt=&quot;Circa Survive with 188 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2331. &lt;p&gt;“Two Dreams” by Circa Survive was my soundtrack for the beginning of the year because it hit the spot with its melancholic but not too calm songs. I never really had the band on my radar, but I’m glad I listened to it because I liked the cover so much. When I’m working as a sound engineer at shows, I like to play this as the background music. It’s just perfect for any occasion!&lt;/p&gt;
  2332. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/circa-survive/two-dreams&quot;&gt;Listen to “Two Dreams” by Circa Survive&lt;/a&gt;&lt;/p&gt;
  2333. &lt;h2 id=&quot;february-2023&quot;&gt;February 2023&lt;/h2&gt;
  2334. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/02-february.QqTWratm_Z1quSrm.webp&quot; alt=&quot;Graphic Nature with 80 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2335. &lt;p&gt;I don’t remember how I became aware of “A Mind Waiting To Die” by Graphic Nature, probably during the short time I had Instagram. Their producer &lt;a href=&quot;https://www.sambloorproducer.com/&quot;&gt;Sam Blood&lt;/a&gt; had mentioned in an ask-me-anything that some of the songs were in Drop F (guitar tuning), which made me curious. When I describe the record to people I always say “Slipknot in cool and without clean singing” and god damn it I love it. It’s so heavy and such a great piece of art.&lt;/p&gt;
  2336. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/graphicnature/a-mind-waiting-to-die&quot;&gt;Listen to “A Mind Waiting To Die” by Graphic Nature&lt;/a&gt;&lt;/p&gt;
  2337. &lt;h2 id=&quot;march-2023--july-2023&quot;&gt;March 2023 &amp;#x26; July 2023&lt;/h2&gt;
  2338. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/03-march-july.BhqIRjAz_SqcwV.webp&quot; alt=&quot;Rival Consoles with 181 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2339. &lt;p&gt;“Night Melody / Articulation” by Rival Consoles is my go-to record when it comes to instrumental music for concentrated work. The soundscapes have a certain nostalgia and a slight Stranger Things charm that is perfect for getting into the “tunnel”. I’ve tried listening to lo-fi while coding but it’s too clichĂ© and too random. I need that certain something only Rival Consoles can give me!&lt;/p&gt;
  2340. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/rival-consoles/night-melody-articulation&quot;&gt;Listen to “Night Melody / Articulation” by Rival Consoles&lt;/a&gt;&lt;/p&gt;
  2341. &lt;h2 id=&quot;april-2023&quot;&gt;April 2023&lt;/h2&gt;
  2342. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/04-april.D2R0o-5C_Z14pdRz.webp&quot; alt=&quot;Arms And Sleepers with 41 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2343. &lt;p&gt;I haven’t listened to much music this month and I wasn’t picky about what was on at work. I guess after Rival Consoles came random songs that were supposed to fit and at some point “Kiss Tomorrow Goodbye” by Arms And Sleepers came on and I listened to it on repeat. If you’re a fan of Massive Attack, you should definitely check out this record:&lt;/p&gt;
  2344. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/arms-and-sleepers/the-organ-hearts&quot;&gt;Liste to “The Organ Hearts” by Arms And Sleepers&lt;/a&gt;&lt;/p&gt;
  2345. &lt;h2 id=&quot;may-2023&quot;&gt;May 2023&lt;/h2&gt;
  2346. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/05-may.YENEqSuT_1GqNB2.webp&quot; alt=&quot;Lambert with 88 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2347. &lt;p&gt;“False” by Lambert stands out from the discography for me, as it is very percussive and experimental by his standards. Another record to get into the “tunnel” without being too intrusive or too boring.&lt;/p&gt;
  2348. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/lambert/false&quot;&gt;Listen to “False” by Lambert&lt;/a&gt;&lt;/p&gt;
  2349. &lt;h2 id=&quot;june-2023&quot;&gt;June 2023&lt;/h2&gt;
  2350. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/06-june.DJ5IY3-Y_Z8Gwg5.webp&quot; alt=&quot;Meshuggah with 81 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2351. &lt;p&gt;That month I saw Meshuggah live for the third time, as the last band at the Rock am Ring Festival at midnight. Seeing this band at their own shows at an earlier time is already a different experience, but this gig was something very special. They just get better every time I see them live, especially visually. I don’t like all of their albums, but there’s one that always works any time of year or day:&lt;/p&gt;
  2352. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/meshuggah/catch-thirty-three&quot;&gt;Listen to “Catch Thirty Three” by Meshuggah&lt;/a&gt;&lt;/p&gt;
  2353. &lt;h2 id=&quot;august-2023&quot;&gt;August 2023&lt;/h2&gt;
  2354. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/08-august.BqAMOHQL_Z1ILlKE.webp&quot; alt=&quot;Post Malone with 84 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2355. &lt;p&gt;I never missed the hype surrounding him, but the music never caught my attention. That was until I heard “AUSTIN” for the first time. It’s definitely the best pop album of this year for me, almost every song has vocal melodies that burn into my brain without being annoying. I’m very impressed that such a well-known artist can write such good songs that sound like him and don’t too obviously follow a certain formula.&lt;/p&gt;
  2356. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/post-malone/austin&quot;&gt;Listen to “AUSTIN” by Post Malone&lt;/a&gt;&lt;/p&gt;
  2357. &lt;h2 id=&quot;september-2023&quot;&gt;September 2023&lt;/h2&gt;
  2358. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/09-september.C7ydM4oL_Z19MgRB.webp&quot; alt=&quot;Slowdive with 105 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2359. &lt;p&gt;How I was looking forward to “everything is alive” by Slowdive and was almost not disappointed! They are THE band of the shoegaze genre for a reason. I feel a physical sense of well-being when I listen to this record and immerse myself in the warm reverb of their guitars. Only “Andalusia plays” is a song that bores me a lot and I always skip it, otherwise this record is perfect!&lt;/p&gt;
  2360. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/slowdive/everything-is-alive&quot;&gt;Listen to “everything is alive” by Slowdive&lt;/a&gt;&lt;/p&gt;
  2361. &lt;h2 id=&quot;october-2023&quot;&gt;October 2023&lt;/h2&gt;
  2362. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/10-october.B7v-FQTp_2avISm.webp&quot; alt=&quot;Charley Crockett with 174 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2363. &lt;p&gt;Felt like I haven’t listened to anything else in the last quarter, so I’m surprised it didn’t get the most streams from me. 😅 I’ve always wanted to dip my foot in the country water, but always found it too corny from a lyrical and / or musical perspective. Thanks to a personal recommendation I discovered him and find his live albums better than the studio version, similar to Johnny Cash. If you like blues mixed with country and a pinch of jazz, give it a listen:&lt;/p&gt;
  2364. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/charley-crockett/live-from-the-ryman&quot;&gt;Listen to “Live from the Ryman” by Charley Crockett&lt;/a&gt;&lt;/p&gt;
  2365. &lt;h2 id=&quot;november-2023&quot;&gt;November 2023&lt;/h2&gt;
  2366. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/11-november.DXekPCgH_1tyl4Q.webp&quot; alt=&quot;Christian Löffler with 84 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2367. &lt;p&gt;“Parallels: Shellac Reworks” by Christian Löffler is another record that popped up after my regular selection and stuck. The perfect music for the gray, rainy German autumn. What fascinates me about this record is that the samples sound kind of creepy, also because they sometimes don’t fit the timing and key of the rest of the song
&lt;/p&gt;
  2368. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/christian-loffler/parallelsshellacreworksbychristianloffler&quot;&gt;Liste to “Parallels: Shellac Reworks” by Christian Löffler&lt;/a&gt;&lt;/p&gt;
  2369. &lt;h2 id=&quot;december-2023&quot;&gt;December 2023&lt;/h2&gt;
  2370. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/12-december.CSesiJcN_1d0JmS.webp&quot; alt=&quot;Sleep Token with 34 streams&quot; width=&quot;1080&quot; height=&quot;1680&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2371. &lt;p&gt;What would a musical review of the year be without “Take Me Back To Eden” by Sleep Token, eh? Even though I think the hype is justified, as an album it’s not as strong as “Sundowning” for me. The songs are either REALLY rad or just meh. “Chokehold” isn’t just the best Sleep Token song, it’s simply the best song of 2023.&lt;/p&gt;
  2372. &lt;p&gt;&lt;a href=&quot;https://songwhip.com/sleep-token/take-me-back-to-eden&quot;&gt;Listen to “Take Me Back To Eden” by Sleep Token&lt;/a&gt;&lt;/p&gt;
  2373. &lt;h2 id=&quot;award-ceremony&quot;&gt;Award ceremony&lt;/h2&gt;
  2374. &lt;p&gt;Hm
 Rival Consoles doesn’t really count for me because I haven’t actively listened to it, so I’d pick the three winners as follows:&lt;/p&gt;
  2375. &lt;ul&gt;
  2376. &lt;li&gt;1st place: Circa Survive đŸ„‡&lt;/li&gt;
  2377. &lt;li&gt;2nd place: Charley Crockett đŸ„ˆ&lt;/li&gt;
  2378. &lt;li&gt;3rd place: Slowdive đŸ„‰&lt;/li&gt;
  2379. &lt;/ul&gt;
  2380. &lt;p&gt;That looks better and two of the artists have even released a album in 2023. 😅 Looking at these artists, I can safely say that a lot has been going on musically in the last year. A very diverse list!&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>My thoughts on accessibility overlays</title><link>https://www.stevefrenzel.dev/blog/my-thoughts-on-accessibility-overlays/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/my-thoughts-on-accessibility-overlays/</guid><description>Predicting what will happen and a couple useful links.</description><pubDate>Fri, 05 Jan 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;I predict that Overlay vendors will make a lot of money with their false promise of adding a widget (with AI) to solve all accessibility problems.&lt;/p&gt;
  2381. &lt;p&gt;Once the first lawsuit comes in because they do not work and worsen the accessibility of a website, users will start suing website owners. In return web site owners aka companies will start suing overlay vendors because they got sued (who could’ve known).&lt;/p&gt;
  2382. &lt;p&gt;Then comes the part where they hire professionals to ACTUALLY fix their problems.&lt;/p&gt;
  2383. &lt;h2 id=&quot;related-links&quot;&gt;Related links&lt;/h2&gt;
  2384. &lt;ul&gt;
  2385. &lt;li&gt;
  2386. &lt;p&gt;&lt;a href=&quot;https://commission.europa.eu/resources-partners/europa-web-guide/design-content-and-development/accessibility/testing-early-and-regularly/accessibility-overlays_en&quot;&gt;European commission on accessibility overlays&lt;/a&gt;: It’s nice to have it in writing from a big institution that these widgets are scams and will make it worse for certain users.&lt;/p&gt;
  2387. &lt;/li&gt;
  2388. &lt;li&gt;
  2389. &lt;p&gt;&lt;a href=&quot;https://yatil.net/blog/level-access-userway&quot;&gt;Level Access crosses the line; buys accessibility overlay company&lt;/a&gt;: Eric Eggert sharing his thoughts about a accessibility acquiring an overlay vendor, with many useful links.&lt;/p&gt;
  2390. &lt;/li&gt;
  2391. &lt;li&gt;
  2392. &lt;p&gt;&lt;a href=&quot;https://www.levelaccess.com/blog/the-many-pitfalls-of-accessibility-overlays/&quot;&gt;The Many Pitfalls of Accessibility Overlays&lt;/a&gt;: This company wrote an article more than three years ago why these overlays are bad
 I expect it to be gone soon, so I attached a screenshot.&lt;/p&gt;
  2393. &lt;/li&gt;
  2394. &lt;li&gt;
  2395. &lt;p&gt;&lt;a href=&quot;https://karlgroves.com/the-financial-argument-for-using-an-outside-firm-for-accessibility-remediation/&quot;&gt;The financial argument for using an outside firm for accessibility remediation&lt;/a&gt;: Somewhat related to the topic, as this is about hiring a person to hand accessibility, no relying just on a widget. Also comes with ROI formulas!&lt;/p&gt;
  2396. &lt;/li&gt;
  2397. &lt;/ul&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>The great confusion: Links &amp; Buttons</title><link>https://www.stevefrenzel.dev/blog/great-confusion-links-and-buttons/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/great-confusion-links-and-buttons/</guid><description>Me trying to explain the key differences between links, anchors and buttons.</description><pubDate>Fri, 11 Aug 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;It’s fascinating to see how people can get creative when it comes to making a link look (and work) like a button and vice versa. Both elements couldn’t be more different from each other and yet many web designers and developers seem to think it doesn’t matter which to use for what.&lt;/p&gt;
  2398. &lt;p&gt;But when we talk about links, we’re actually talking about anchor elements. So let’s get some facts straight before using a really helpful analogy.&lt;/p&gt;
  2399. &lt;h2 id=&quot;1-the-actual-link-element&quot;&gt;1. The (actual) link element&lt;/h2&gt;
  2400. &lt;p&gt;Are you currently creating the look of a link for your design system? Have you implemented the newly designed link and handing it over for testing? I really doubt it, because this element won’t be visible to your users and is yet very important. Here’s the description from MDN:&lt;/p&gt;
  2401. &lt;blockquote&gt;
  2402. &lt;p&gt;&lt;em&gt;The &lt;code&gt;&amp;#x3C;link&gt;&lt;/code&gt; HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both “favicon” style icons and icons for the home screen and apps on mobile devices) among other things.&lt;/em&gt;&lt;/p&gt;
  2403. &lt;/blockquote&gt;
  2404. &lt;p&gt;And here’s what it looks like (also from &lt;a href=&quot;https://developer.mozilla.org/&quot;&gt;MDN&lt;/a&gt;):&lt;/p&gt;
  2405. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;link&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; href&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;/media/examples/link-element-example.css&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; rel&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;stylesheet&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt; /&gt;&lt;/span&gt;&lt;/span&gt;
  2406. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2407. &lt;p&gt;Now that’s curios, isn’t it! Because all this time you and maybe your entire company were referring to something that has absolutely nothing to do with what your talking about. What you actually meant was&lt;/p&gt;
  2408. &lt;h2 id=&quot;2-the-anchor-element&quot;&gt;2. The anchor element&lt;/h2&gt;
  2409. &lt;p&gt;This work horse is what get’s the job done and it comes with tons of functionality and screen reader support out-of-the-box. But don’t take my word for it, here’s how MDN describes it:&lt;/p&gt;
  2410. &lt;blockquote&gt;
  2411. &lt;p&gt;&lt;em&gt;The anchor HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each anchor should indicate the link’s destination. If the href attribute is present, pressing the enter key while focused on the anchor element will activate it.&lt;/em&gt;&lt;/p&gt;
  2412. &lt;/blockquote&gt;
  2413. &lt;p&gt;Here’s what an anchor element looks like. It might be a bit underwhelming but let me tell you in just a bit of all the things it can do:&lt;/p&gt;
  2414. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; href&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://stevefrenzel.dev&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Website&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2415. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2416. &lt;p&gt;Do you want it to open an e-mail client with a pre-filled recipient, subject and body? Start your &lt;code&gt;href&lt;/code&gt; string with &lt;code&gt;mailto:&lt;/code&gt; and adjust it accordingly. Do you want it to make it very easy to call a certain number when clicking on it? Add the &lt;code&gt;tel:&lt;/code&gt; attribute, the respective telephone number and you’re good to go. Do you want it to download a file when clicking on it? Add the &lt;code&gt;download&lt;/code&gt; attribute, as well as the file path and YOU ARE GOLDEN. đŸ€©&lt;/p&gt;
  2417. &lt;p&gt;All this functionality comes without any JavaScript, by the way. The anchor element is a real bang for the buck! Let’s have a brief look at the last member of this love triangle:&lt;/p&gt;
  2418. &lt;h2 id=&quot;3-the-button-element&quot;&gt;3. The button element&lt;/h2&gt;
  2419. &lt;p&gt;You’re probably on the internet at least once a day, so chances are high you visited a website were some dreadful cookie banner asked for your consent. The rectangle saying “Agree”, which makes you give up all your privacy rights? That’s a button! And here’s what MDN has to say about it:&lt;/p&gt;
  2420. &lt;blockquote&gt;
  2421. &lt;p&gt;&lt;em&gt;The button HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.&lt;/em&gt;&lt;/p&gt;
  2422. &lt;/blockquote&gt;
  2423. &lt;p&gt;Button example from MDN:&lt;/p&gt;
  2424. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;button&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;favorite styled&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; type&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;button&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Add to favorites&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;button&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2425. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2426. &lt;p&gt;Pay extra attention to the part saying “performs an action”. To simplify: A button does something. A link takes you somewhere.&lt;/p&gt;
  2427. &lt;h2 id=&quot;4-the-analogy&quot;&gt;4. The analogy&lt;/h2&gt;
  2428. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/flow-chart.CvSu1EpB_1NtPrM.webp&quot; alt=&quot;Flow chart showing the difference between a button and link (which is an anchor element): It&amp;#38;#x27;s a button. No. If not, then it&amp;#38;#x27;s a link. Sure. That&amp;#38;#x27;s it.&quot; width=&quot;1024&quot; height=&quot;576&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2429. &lt;p&gt;This flow chart was taken from the article &lt;a href=&quot;https://www.smashingmagazine.com/2019/02/buttons-interfaces/&quot;&gt;When Is A Button Not A Button&lt;/a&gt; by &lt;a href=&quot;https://www.smashingmagazine.com/author/vadim-makeev/&quot;&gt;Vadim Makeev&lt;/a&gt;. As you can see, in their default form, they look very different from each other. You may also noticed that Vadim is calling it a link, even though he’s showing an anchor element. Is it correct? No, but it makes sense because people will understand what he’s talking about.&lt;/p&gt;
  2430. &lt;p&gt;This “naming convention” is so common, that I also notice it in Notion and Storyblok, which I use for writing and publishing my blog posts. Have a look at the screenshots:&lt;/p&gt;
  2431. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/screenshot-1.DBnC6zUL_9oyC5.webp&quot; alt=&quot;Overlay in Storyblok showing the options for adding a link, although it&amp;#38;#x27;s actually an anchor element.&quot; width=&quot;1248&quot; height=&quot;586&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2432. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/screenshot-2.-UhlOlMR_25kgwR.webp&quot; alt=&quot;Screenshot showing a toolbar in the Notion app offering to turn the marked text into a link (which is actually an anchor element).&quot; width=&quot;2308&quot; height=&quot;642&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2433. &lt;p&gt;To make the difference between links, anchors and buttons easier to understand, I came up with the analogy of switching a light on:&lt;/p&gt;
  2434. &lt;ul&gt;
  2435. &lt;li&gt;Link: This is how your lightbulb is decorated. 💡&lt;/li&gt;
  2436. &lt;li&gt;Anchor: The wires leading from the lightbulb to the button. 🔌&lt;/li&gt;
  2437. &lt;li&gt;Button: It’s the button for switching it on or of. Surprise! ⚡ &lt;/li&gt;
  2438. &lt;/ul&gt;
  2439. &lt;p&gt;Even though their purposes are very different, how come we not only misuse them but also use the wrong names when describing them? Before exploring these issues, let’s talk about the looks of these elements.&lt;/p&gt;
  2440. &lt;h2 id=&quot;5-the-problem&quot;&gt;5. The problem&lt;/h2&gt;
  2441. &lt;p&gt;I would say it is a chain of events that leads to this great confusion. It starts with the fact that we often use the wrong name. Instead of anchor, we say link element. It continues with the fact that in the design, anchor elements are made to look like buttons and the other way around.&lt;/p&gt;
  2442. &lt;p&gt;This in itself is not too big a problem, as long as the correct HTML elements are used in the implementation. Although it would be nice if they’d look like they’re supposed to look. Here is usually when people get really creative and give an anchor element the functionality of a button (and the other way around). To illustrate this, here are a few of the wildest examples from real websites:&lt;/p&gt;
  2443. &lt;pre class=&quot;astro-code github-dark&quot; style=&quot;background-color:#24292e;color:#e1e4e8; overflow-x: auto;&quot; tabindex=&quot;0&quot; data-language=&quot;html&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; type&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;button&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; class&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;button&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; href&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;/signup&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; tabindex&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;-1&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Sign up&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2444. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2445. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; href&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; onclick&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;modal&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt;open&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;()&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Login&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2446. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
  2447. &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#B392F0&quot;&gt; href&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color:#9ECBFF&quot;&gt;&quot;https://example.com&quot;&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&amp;#x3C;&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;button&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;Example&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;button&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&amp;#x3C;/&lt;/span&gt;&lt;span style=&quot;color:#85E89D&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color:#E1E4E8&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  2448. &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
  2449. &lt;p&gt;These examples are from &lt;a href=&quot;https://www.htmhell.dev/&quot;&gt;HTMLHell&lt;/a&gt;, one of my favourite websites for having a laugh and weeping at the same time because it is quite unbelievable.&lt;/p&gt;
  2450. &lt;h2 id=&quot;6-conclusion&quot;&gt;6. Conclusion&lt;/h2&gt;
  2451. &lt;p&gt;This article is supposed to inform you about the key differences between links, anchors and buttons. It’s also a way for me to think out loud why there’s so much confusion and wrong usage of these elements. What could be your takeaway?&lt;/p&gt;
  2452. &lt;p&gt;Next time when you’re communicating with your team, you could start using the term “anchor” instead of “link”. If this raises any eyebrows, you now have the knowledge to explain the differences between these two.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>How the Washington Post design system made me learn about Perceptual Contrast (APCA)</title><link>https://www.stevefrenzel.dev/blog/learning-about-perceptual-contrast/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/learning-about-perceptual-contrast/</guid><description>Using the Accessible Perceptual Contrast Algorithm on a real world example.</description><pubDate>Sun, 06 Aug 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;em&gt;Disclaimer: All screenshots in this article were taken on macOS Ventura 13.4.1, in Arc Browser 1.2.1. I have the dark theme as default, which is why the website was rendered accordingly. Depending on what settings you have, the site will be rendered with the light theme.&lt;/em&gt;&lt;/p&gt;
  2453. &lt;p&gt;Recently someone pointed me to the &lt;a href=&quot;https://build.washingtonpost.com/resources/accessibility&quot;&gt;design system of the Washington Post&lt;/a&gt;, especially the part about accessibility. What I noticed immediately was the poor readability of the body text and anchor elements:&lt;/p&gt;
  2454. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/wp-screenshot-1.DWTLqKH__Zm3r1A.webp&quot; alt=&quot;Screenshot of a section about color contrast standards for the Washington Post Design System. It has a black background, white headlines but dark grey body text and links.&quot; width=&quot;1577&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2455. &lt;p&gt;So I went to the &lt;a href=&quot;https://build.washingtonpost.com/resources/accessibility/color&quot;&gt;Color&lt;/a&gt; section and saw that the Washington Post’s minimum requirement is the level AA standard:&lt;/p&gt;
  2456. &lt;blockquote&gt;
  2457. &lt;p&gt;&lt;em&gt;The Post’s &lt;a href=&quot;https://www.washingtonpost.com/accessibility/&quot;&gt;accessibility statement&lt;/a&gt; notes that we are guided by the &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=143&quot;&gt;WCAG 2.1 Level AA standard&lt;/a&gt;. However, we strongly encourage meeting the &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=143%2C146&quot;&gt;level AAA standard&lt;/a&gt; whenever possible.&lt;/em&gt;&lt;/p&gt;
  2458. &lt;/blockquote&gt;
  2459. &lt;p&gt;If I want to make automatic accessibility checks in the browser very quickly, I use the Stark extension. Here my assumption was confirmed that despite poor readability almost all requirements were met:&lt;/p&gt;
  2460. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/wp-screenshot-2.CVLmmdSi_Zg32H5.webp&quot; alt=&quot;Screenshot of the Washington Post Design System with the Stark browser extension open. It shows a contrast ratio of 5.62 to 1 for the body text.&quot; width=&quot;1577&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2461. &lt;p&gt;To get a second opinion, I switched to APCA (Advanced Perceptual Contrast Algorithm). Lo and behold, the requirements for “Large text” and “Body text” were not met. You can read more about it in this article: &lt;a href=&quot;https://www.getstark.co/blog/stark-APCA-beta&quot;&gt;Announcing Stark’s APCA beta&lt;/a&gt;.&lt;/p&gt;
  2462. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/wp-screenshot-3.Alg6Gkp5_ZbfqNn.webp&quot; alt=&quot;Screenshot of the Washington Post Design System with the Stark browser extension open. It shows a APCA value of -37.&quot; width=&quot;1577&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2463. &lt;p&gt;If you switch to the light theme, the criterion for “Large text” is met, but not for “Body text”:&lt;/p&gt;
  2464. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/wp-screenshot-4.DadL7lRG_Z1RT1Hs.webp&quot; alt=&quot;Screenshot of the Washington Post Design System light theme with the Stark browser extension open. It shows a APCA value of 78.&quot; width=&quot;1577&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2465. &lt;p&gt;It is very important to say that the APCA value is not yet an official reference, but rather can be understood as another tool to check color contrast. However, I was interested in the details of what these numbers are all about and how to understand them. On &lt;a href=&quot;https://git.apcacontrast.com/documentation/WhyAPCA&quot;&gt;Why APCA as a New Contrast Method?&lt;/a&gt; there is a simplified listing of the different levels, which are also partly found in the Stark extension (Lc stands for lightness contrast):&lt;/p&gt;
  2466. &lt;blockquote&gt;
  2467. &lt;ul&gt;
  2468. &lt;li&gt;Lc 90: Preferred level for fluent text and columns of body text with a font no smaller than 14px/weight 400 (normal).&lt;/li&gt;
  2469. &lt;li&gt;Lc 75: The minimum level for columns of body text with a font no smaller than 18px/400. L 75 should be considered a minimum for text where readability is important.&lt;/li&gt;
  2470. &lt;li&gt;Lc 60: The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: 24px normal weight (400) or 16px/700 (bold). These values based on the reference font Helvetica.&lt;/li&gt;
  2471. &lt;li&gt;Lc 45: The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines. This is also the minimum for pictograms with fine details.&lt;/li&gt;
  2472. &lt;li&gt;Lc 30: The absolute minimum for any text not listed above. This includes placeholder text and disabled element text. This is also the minimum for large/solid semantic &amp;#x26; understandable non-text elements.&lt;/li&gt;
  2473. &lt;li&gt;Lc 15: The absolute minimum for any non-text that needs to be discernible and differentiable, and is no less than 6px in its smallest dimension. This may include disabled large buttons. &lt;strong&gt;Designers should treat anything below this level as invisible&lt;/strong&gt;, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.&lt;/li&gt;
  2474. &lt;/ul&gt;
  2475. &lt;/blockquote&gt;
  2476. &lt;p&gt;One last question I have is what the minus in the APCA score is all about. On the screenshots with the dark theme the value -37 is displayed and on the one with the light theme the value 78. I understand that a positive value is displayed when the text is darker than the background and vice versa. If you want to try it yourself, have a look at the &lt;a href=&quot;https://www.myndex.com/APCA/&quot;&gt;APCA Contrast Calculator&lt;/a&gt;.&lt;/p&gt;
  2477. &lt;p&gt;&lt;strong&gt;Conclusion: It is unclear when APCA will become an official standard for accessibility. Still, it’s a good tool to get feedback on the extent to which color contrasts are perceived “in the real world”. For me personally, the different levels (see quote above) are less abstract than the level A, AA and AAA classifications.&lt;/strong&gt;&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item><item><title>The six most common accessibility issues on the web</title><link>https://www.stevefrenzel.dev/blog/six-most-common-accessibility-issues/</link><guid isPermaLink="true">https://www.stevefrenzel.dev/blog/six-most-common-accessibility-issues/</guid><description>When creating a website or fixing one, look for these issues: Low contrast text, missing alternative text, empty links, missing form labels, empty buttons and missing document language.</description><pubDate>Sat, 24 Jun 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;The screenshot above was taken on the &lt;a href=&quot;https://webaim.org/projects/million/#errors&quot;&gt;The WebAIM Million&lt;/a&gt; website from their 2023 report. I added the percentages for a better understanding.&lt;/p&gt;
  2478. &lt;p&gt;Accessibility is a crucial aspect of web design, ensuring that everyone can access and use your website. However, it is often overlooked or considered secondary to other design elements. Wether you’re just getting started with this topic or want to dive deeper, the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility&quot;&gt;accessibility tutorial on MDN&lt;/a&gt; is a great resource!&lt;/p&gt;
  2479. &lt;p&gt;Many accessibility issues are low-hanging fruits and easy to fix with a bit of effort and attention. Also accessibility and SEO (search engine optimization) go hand in hand. So the more accessible your website, the higher are the chances for a great ranking on search engines. The first five images are screenshots from the &lt;a href=&quot;https://inaccessible.gallery/&quot;&gt;Inaccessible Gallery&lt;/a&gt; by &lt;a href=&quot;https://www.matuzo.at/&quot;&gt;Manuel Matuzovic&lt;/a&gt;.&lt;/p&gt;
  2480. &lt;h2 id=&quot;1-low-contrast-text&quot;&gt;1. Low Contrast Text&lt;/h2&gt;
  2481. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/exhibit-1.CVEE0gtn_Yetc4.webp&quot; alt=&quot;Example from Inaccessible Gallery showcasing low contrast text&quot; width=&quot;2240&quot; height=&quot;1054&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2482. &lt;p&gt;The problem: Low contrast text is when there is not enough contrast between the text and the background, making it difficult to read for people with visual impairments.&lt;/p&gt;
  2483. &lt;p&gt;The solution: Increase the contrast by using darker / lighter text or background color. There are two great tools out there for checking the color contrast ratio:&lt;/p&gt;
  2484. &lt;ul&gt;
  2485. &lt;li&gt;&lt;a href=&quot;https://webaim.org/resources/contrastchecker/&quot;&gt;Contrast Checker by WebAIM&lt;/a&gt;&lt;/li&gt;
  2486. &lt;li&gt;&lt;a href=&quot;https://www.tpgi.com/color-contrast-checker/&quot;&gt;Colour Contrast Analyser by TPGi&lt;/a&gt;&lt;/li&gt;
  2487. &lt;/ul&gt;
  2488. &lt;h2 id=&quot;2-missing-alternative-text&quot;&gt;2. Missing Alternative Text&lt;/h2&gt;
  2489. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/exhibit-2.BvWzCVE__kaqTC.webp&quot; alt=&quot;Example from Inaccessible Gallery showcasing missing alternative text&quot; width=&quot;2240&quot; height=&quot;1516&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2490. &lt;p&gt;The problem: Alternative text, or alt text, is a description of an image that is read by screen readers for people with visual impairments. When it’s missing or not descriptive enough, people will have no clue what it’s about or for.&lt;/p&gt;
  2491. &lt;p&gt;The solution: When using a CMS, look for an option called “alternative text” or “alt text” when uploading your image. When coding, add it to the image element via alt=“Your image description”. If it’s purely decorative, just add alt=&quot;&quot; and you’re good to go!&lt;/p&gt;
  2492. &lt;h2 id=&quot;3-empty-links&quot;&gt;3. Empty Links&lt;/h2&gt;
  2493. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/exhibit-3.CAk3MTRT_Z14X6Je.webp&quot; alt=&quot;Example from Inaccessible Gallery showcasing empty links&quot; width=&quot;2240&quot; height=&quot;1280&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2494. &lt;p&gt;The problem: Empty links are links that contain no text, only an image or icon. This is a common issue for social media icons or download links.&lt;/p&gt;
  2495. &lt;p&gt;The solution: Add descriptive text to the link that describes the action or destination of it. This will help screen readers understand the purpose of the link.&lt;/p&gt;
  2496. &lt;h2 id=&quot;4-missing-form-labels&quot;&gt;4. Missing Form Labels&lt;/h2&gt;
  2497. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/exhibit-4.C7pjXD9K_1JnIBk.webp&quot; alt=&quot;Example from Inaccessible Gallery showcasing missing form labels&quot; width=&quot;2240&quot; height=&quot;1089&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2498. &lt;p&gt;The problem: Forms that are missing labels make it difficult for users to understand what information is required. Often instead of labels, placeholders are being used to convey meaning. This is not sufficient, because once you start typing, the placeholder will be gone.&lt;/p&gt;
  2499. &lt;p&gt;The solution: Add descriptive labels to form fields. This helps screen readers provide a more meaningful experience to visually impaired users, as well as people with no impairment. More information about the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label&quot;&gt;label element&lt;/a&gt; can be found on MDN.&lt;/p&gt;
  2500. &lt;h2 id=&quot;5-empty-buttons&quot;&gt;5. Empty Buttons&lt;/h2&gt;
  2501. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/exhibit-5.a3z8N5JF_12SrG8.webp&quot; alt=&quot;Example from Inaccessible Gallery showcasing empty buttons&quot; width=&quot;2240&quot; height=&quot;1139&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2502. &lt;p&gt;The problem: Empty buttons are buttons that contain no text, only an image or color. This is pretty much the same problem as with empty links.&lt;/p&gt;
  2503. &lt;p&gt;The solution: Add descriptive text to the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button&quot;&gt;button element&lt;/a&gt; to determine the action of it. This will help everyone to understand what the button is for. Do not use only an image or color to convey meaning. If you cannot (for whatever reason) add text to the button, use the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label&quot;&gt;aria-label&lt;/a&gt; to add it. This will at least make it possible for screen reader users to understand what it’s for.&lt;/p&gt;
  2504. &lt;h2 id=&quot;6-missing-document-language&quot;&gt;6. Missing Document Language&lt;/h2&gt;
  2505. &lt;p&gt;&lt;img =&quot;&quot; src=&quot;https://www.stevefrenzel.dev/_astro/language-flowers.BCaXqRFh_Z1V1T6e.webp&quot; alt=&quot;Collection of flower illustrations saying goodbye in different languages&quot; width=&quot;1000&quot; height=&quot;618&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;&lt;/p&gt;
  2506. &lt;p&gt;The problem: Missing document language can be a common issue, but it is easy to fix.&lt;/p&gt;
  2507. &lt;p&gt;The solution: Simply add the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang&quot;&gt;language attribute&lt;/a&gt; to the HTML tag of your website. This helps screen readers provide a more meaningful experience to visually impaired users who use screen readers in a specific language. If there are sections (for example a quote) that have a different language than the rest of the site, add the lang attribute here and adjust it accordingly.&lt;/p&gt;
  2508. &lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;
  2509. &lt;p&gt;By addressing these six common accessibility issues, you can make your website more inclusive and accessible to everyone. The best part is, that all of these issues are low-hanging fruits and can be fixed with a bit of effort and attention.&lt;/p&gt;</content:encoded><author>Steve Frenzel</author></item></channel></rss>

Home · About · News · Docs · Terms

 
Software created by Sam Ruby, Mark Pilgrim, Joseph Walton and Phil Ringnalda

RSS icon

Main Menu
RSS Advisory Board
RSS Specification
RSS Profile
RSS Validator
RSS Autodiscovery
Board Members
Charter
RSS-Public Mailing List
RSS Language Codes
RSSCloud Interface
RSS History
RSS Feeds
Subscribe to Really Simple Syndication This Weblog
Social Media
Mastodon
Other Formats
Atom
RDF Site Summary

Hosted by Workbench