Skip to content

Commit f0b6f59

Browse files
pradipchaudharypradipchaudhary
authored
Merge pull request #114 from pradipchaudhary/project81
init app [project81]
2 parents d27b89f + c5eb57c commit f0b6f59

File tree

4 files changed

+150
-0
lines changed

4 files changed

+150
-0
lines changed

‎81-Screen Reader Compatibility/app.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const toggleButton = document.getElementById("toggleButton");
3+
const content = document.getElementById("content");
4+
5+
toggleButton.addEventListener("click", function () {
6+
const isVisible = content.style.display === "block";
7+
content.style.display = isVisible ? "none" : "block";
8+
const buttonText = isVisible ? "Show Content" : "Hide Content";
9+
toggleButton.innerHTML = buttonText;
10+
11+
// Update ARIA attributes
12+
content.setAttribute("aria-hidden", isVisible ? "true" : "false");
13+
toggleButton.setAttribute(
14+
"aria-expanded",
15+
isVisible ? "false" : "true"
16+
);
17+
});
18+
});

‎81-Screen Reader Compatibility/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
<link rel="stylesheet" href="styles.css" />
7+
<title>Screen Reader Compatibility</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<h1>Screen Reader Compatibility Test</h1>
12+
<p id="info">
13+
This is a simple web app to test screen reader compatibility.
14+
</p>
15+
<button id="toggleButton" aria-live="assertive" aria-atomic="true">
16+
Toggle Content
17+
</button>
18+
<div id="content" aria-hidden="true">
19+
<p>This is the content that will be toggled.</p>
20+
</div>
21+
</div>
22+
23+
<script src="app.js"></script>
24+
</body>
25+
</html>

‎81-Screen Reader Compatibility/readme.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
Creating a fully-featured screen reader compatibility web app involves a combination of HTML, CSS, and JavaScript, along with proper semantic markup and ARIA (Accessible Rich Internet Applications) attributes. Here's a basic example to get you started:
2+
3+
### HTML (index.html):
4+
5+
```html
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="UTF-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<link rel="stylesheet" href="styles.css" />
12+
<title>Screen Reader Compatibility</title>
13+
</head>
14+
<body>
15+
<div id="app">
16+
<h1>Screen Reader Compatibility Test</h1>
17+
<p id="info">
18+
This is a simple web app to test screen reader compatibility.
19+
</p>
20+
<button id="toggleButton" aria-live="assertive" aria-atomic="true">
21+
Toggle Content
22+
</button>
23+
<div id="content" aria-hidden="true">
24+
<p>This is the content that will be toggled.</p>
25+
</div>
26+
</div>
27+
28+
<script src="app.js"></script>
29+
</body>
30+
</html>
31+
```
32+
33+
### CSS (styles.css):
34+
35+
```css
36+
body {
37+
font-family: Arial, sans-serif;
38+
}
39+
40+
#app {
41+
max-width: 600px;
42+
margin: 0 auto;
43+
padding: 20px;
44+
text-align: center;
45+
}
46+
47+
button {
48+
padding: 10px;
49+
font-size: 16px;
50+
}
51+
52+
#content {
53+
display: none;
54+
margin-top: 20px;
55+
}
56+
```
57+
58+
### JavaScript (app.js):
59+
60+
```javascript
61+
document.addEventListener("DOMContentLoaded", function () {
62+
const toggleButton = document.getElementById("toggleButton");
63+
const content = document.getElementById("content");
64+
65+
toggleButton.addEventListener("click", function () {
66+
const isVisible = content.style.display === "block";
67+
content.style.display = isVisible ? "none" : "block";
68+
const buttonText = isVisible ? "Show Content" : "Hide Content";
69+
toggleButton.innerHTML = buttonText;
70+
71+
// Update ARIA attributes
72+
content.setAttribute("aria-hidden", isVisible ? "true" : "false");
73+
toggleButton.setAttribute(
74+
"aria-expanded",
75+
isVisible ? "false" : "true"
76+
);
77+
});
78+
});
79+
```
80+
81+
In this example:
82+
83+
- A button is provided to toggle the visibility of content.
84+
- ARIA attributes such as `aria-live`, `aria-atomic`, `aria-hidden`, and `aria-expanded` are used to enhance screen reader compatibility.
85+
- Proper semantic HTML elements and attributes are used for better accessibility.
86+
87+
This is a basic example, and depending on your specific requirements, you may need to implement more features and enhancements. Additionally, testing with real screen readers like NVDA, JAWS, or VoiceOver is crucial to ensure the compatibility of your web app.

‎81-Screen Reader Compatibility/styles.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
}
4+
5+
#app {
6+
max-width: 600px;
7+
margin: 0 auto;
8+
padding: 20px;
9+
text-align: center;
10+
}
11+
12+
button {
13+
padding: 10px;
14+
font-size: 16px;
15+
}
16+
17+
#content {
18+
display: none;
19+
margin-top: 20px;
20+
}

0 commit comments

Comments
 (0)