https://guidedrails.com/blog/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Blog — Guided Rails</title>
7  <meta name="description" content="Accessibility and testing in Rails.">
8  <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
9  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
10  <link type="application/atom+xml" rel="alternate" href="https://guidedrails.com/feed.xml" title="Guided Rails" />
11  

11<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

11
12  

12<script>
13    tailwind.config = {
14      theme: {
15        extend: {
16          colors: {
17            brand: "#7a1f5c"
18          }
19        }
20      }
21    }
22  </script>

22
23  
24  

24<script src="https://cdn.usefathom.com/script.js" data-site="FLESYFAW" defer></script>

24
25  
26  <link rel="stylesheet" href="/assets/css/syntax.css">
27  <link rel="stylesheet" href="/assets/css/main.css">
28</head>
29<body class="bg-white text-gray-900 antialiased flex min-h-screen flex-col">
30  <header class="border-t-8 border-brand">
31    <div class="mx-auto flex w-[min(100vw_-_3rem,80rem)] items-center justify-between py-6">
32      <a href="/" class="flex items-center gap-2 text-lg font-semibold tracking-tight text-brand">
33        <svg aria-hidden="true" viewBox="0 4 64 44" class="h-7 w-auto" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
34          <path d="M6 44 A26 26 0 0 1 12.1 27.3 L11 8 L23.1 19.6 A26 26 0 0 1 40.9 19.6 L53 8 L51.9 27.3 A26 26 0 0 1 58 44"/>
35          <circle cx="23" cy="28" r="1.6" fill="currentColor" stroke="none"/>
36          <circle cx="41" cy="28" r="1.6" fill="currentColor" stroke="none"/>
37          <path d="M28.5 33 H35.5 L38 36 L32 42 L26 36 Z" fill="currentColor"/>
38          <path d="M26 36 H38 M28.5 33 L30.5 36 L32 42 M35.5 33 L33.5 36 L32 42" stroke="#fff" stroke-opacity="0.55" stroke-width="1"/>
39          <path d="M2 34 L14 36 M2 41 L14 40 M62 34 L50 36 M62 41 L50 40" stroke-width="2"/>
40        </svg>
41        Guided Rails
42      </a>
43      <nav class="flex gap-6 text-sm text-gray-600">
44        <a href="/blog/" class="hover:text-gray-900">Blog</a>
45      </nav>
46    </div>
47  </header>
48  <main class="flex-1 w-full max-w-2xl mx-auto px-6 py-16">
49    <div class="relative left-1/2 w-[min(100vw_-_3rem,80rem)] -translate-x-1/2">
50  <section class="prose mb-16">
51    <h1>Blog</h1>
52    <p>Accessibility and testing in Rails.</p>
53  </section>
54
55  <section>
56    <ul class="space-y-6">
57      
58        <li>
59          <a href="/blog/give-an-icon-only-button-an-accessible-name-with-aria-label/" class="block group">
60            <h2 class="text-lg font-medium group-hover:underline">Give an icon-only button an accessible name with aria-label</h2>
61            <time datetime="2026-04-29T00:00:00+00:00" class="text-sm text-gray-600">
62              April 29, 2026
63            </time>
64          </a>
65        </li>
66      
67    </ul>
68  </section>
69</div>
70
71  </main>
72  <footer class="border-t-8 border-brand">
73    <div class="mx-auto flex w-[min(100vw_-_3rem,80rem)] justify-between gap-6 py-8 text-sm text-gray-600">
74      <span>&copy; 2026 Guided Rails, LLC. All rights reserved.</span>
75      <nav class="flex gap-6">
76        <a href="/accessibility/" class="hover:text-gray-900">Accessibility</a>
77        <a href="/license/" class="hover:text-gray-900">License</a>
78        <a href="/privacy/" class="hover:text-gray-900">Privacy</a>
79      </nav>
80    </div>
81  </footer>
82</body>
83</html>