From 675180e746b482a3d9ccf740a032dd981ec1357a Mon Sep 17 00:00:00 2001
From: Peter <limacopiter@gmail.com>
Date: Mon, 23 Mar 2026 12:08:17 -0500
Subject: [PATCH] fix: improve accessibility and standards compliance in
 simple-timer

- Add missing <!DOCTYPE html> declaration
- Add lang="en" attribute to <html> tag for screen readers
- Add aria-label attributes to icon-only buttons (reset/play)
- Fix typo in comment: "cirlce" -> "circle"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 simple-timer/index.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/simple-timer/index.html b/simple-timer/index.html
index 63d2ded..6e628a0 100644
--- a/simple-timer/index.html
+++ b/simple-timer/index.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -26,7 +27,7 @@
       >
         <p id="timer" class="text-blue-200 relative text-5xl z-10">00:00</p>
 
-        <!-- Create the inner cirlce and line -->
+        <!-- Create the inner circle and line -->
         <div
           class="w-[calc(100%-4px)] aspect-square bg-gray-800 rounded-full absolute inset-[2px]"
         ></div>
@@ -41,6 +42,7 @@
       <div class="flex justify-center gap-6">
         <button
           id="reset"
+          aria-label="Reset timer"
           class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full"
         >
           <i class="fas fa-refresh"></i>
@@ -48,6 +50,7 @@
 
         <button
           id="play"
+          aria-label="Play or pause timer"
           class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full group"
         >
           <i class="fas fa-play"></i>
