Loopcode/css-for-accessibility.html at main · Dharmandra-singh/Loopcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D0ENCWPZL9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-D0ENCWPZL9');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>22. CSS for Accessibility</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Poppins', sans-serif;
      background: #1cc9be;
      color: #222;
    }
    .section {
      background: rgba(255, 255, 255, 0.3);
      padding: 20px;
      margin: 25px auto;
      border-radius: 12px;
      max-width: 1000px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    h2, h3 { color: #333; margin-bottom: 15px; }
    p {
      font-size: 18px;
      margin-bottom: 20px;
      line-height: 1.7;
    }
    textarea {
      width: 100%;
      height: 180px;
      font-family: 'Courier New', monospace;
      font-size: 16px;
      padding: 14px;
      background: #fff;
      border: 2px solid #ccc;
      border-radius: 10px;
      margin-bottom: 12px;
      resize: vertical;
    }
    button {
      background: linear-gradient(135deg, #00c6ff, #0072ff);
      color: white;
      padding: 8px 18px;
      font-size: 15px;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      margin-bottom: 15px;
    }
    iframe {
      width: 100%;
      height: 160px;
      border: 2px solid white;
      border-radius: 10px;
      background: #fff;
    }
  </style>
</head>
<body>
  <div class="section">
    <h2>22. CSS for Accessibility</h2>

    <h3>I. Color Contrast and Legibility</h3>
    <p><strong>Explanation:</strong> Text aur background ke beech clear contrast hona chahiye taaki users, especially low-vision waale, text easily padh sakein. <br><strong>Kyon important hai:</strong> Agar contrast low hoga to text mushkil se dikhega ya bilkul nahi dikhega — isliye high contrast zaroori hai.</p>
    <textarea id="code1">
<style>
  .good {
    background-color: black;
    color: white;
    padding: 20px;
    font-size: 18px;
  }
</style>

<div class="good">High contrast text for better readability</div>
    </textarea>
    <button onclick="runCode('code1', 'output1')">Run Code</button>
    <iframe id="output1"></iframe>

    <h3>II. Accessible Font Sizes</h3>
    <p><strong>Explanation:</strong> Accessible websites me font sizes relative units (jaise <code>rem</code>) me hone chahiye taaki zoom karne par scale ho sake. <br><strong>Kyon important hai:</strong> Fixed px size se low-vision users ko dikkat hoti hai. `rem` use karne se font screen settings ke according adjust ho jata hai.</p>
    <textarea id="code2">
<style>
  body {
    font-size: 1rem;
  }
  h1 {
    font-size: 2rem;
  }
</style>

<h1>Scalable Font Example</h1>
    </textarea>
    <button onclick="runCode('code2', 'output2')">Run Code</button>
    <iframe id="output2"></iframe>

    <h3>III. Focus States</h3>
    <p><strong>Explanation:</strong> Keyboard se navigate karne wale users ke liye focus state dikhana zaroori hota hai. <br><strong>Kyon important hai:</strong> Focus outline batata hai ki abhi user kis element pe hai. Agar ye missing ho, to keyboard users confuse ho jaate hain.</p>
    <textarea id="code3">
<style>
  button:focus {
    outline: 3px solid orange;
    outline-offset: 4px;
  }
</style>

<button>Click or Tab to Focus</button>
    </textarea>
    <button onclick="runCode('code3', 'output3')">Run Code</button>
    <iframe id="output3"></iframe>

    <h3>IV. ARIA Roles & Attributes</h3>
    <p><strong>Explanation:</strong> ARIA roles aur attributes screen readers ko help karte hain element ka function samajhne me. <br><strong>Kyon important hai:</strong> Visual users ko dikhta hai ki kya hai, lekin screen reader ke users ko ye ARIA batata hai ki nav menu, button ya dialog kya kaam karta hai.</p>
    <textarea id="code4">
<nav role="navigation" aria-label="Main Menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

<button aria-label="Close Menu">&times;</button>
    </textarea>
    <button onclick="runCode('code4', 'output4')">Run Code</button>
    <iframe id="output4"></iframe>
  </div>

  <script>
    function runCode(textareaId, iframeId) {
      const code = document.getElementById(textareaId).value;
      const iframe = document.getElementById(iframeId);
      const doc = iframe.contentDocument || iframe.contentWindow.document;
      doc.open();
      doc.write(code);
      doc.close();
    }
  </script>
</body>
</html>