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>
4 months ago · 675180e746
parent c92b0bc3a8
commit 675180e746
1 changed files with 5 additions and 2 deletions
--- 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>