Skip to content

Commit 43fc8e5

Browse files
dy0gudy0gu
committed
feat: add screen reader accessibility
1 parent 8ac6834 commit 43fc8e5

File tree

3 files changed

+101
-142
lines changed

3 files changed

+101
-142
lines changed

‎index.html

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
<!DOCTYPE html>
22

33
<html lang="en">
4-
<div id="preload-font">.</div>
54
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
6-
<link rel="stylesheet" type="text/css" href="./styles/globals.css" as="style" />
7-
<script type="text/javascript" src="./scripts/main.js" defer="true"></script>
5+
<link rel="stylesheet" as="style" type="text/css" href="./styles/globals.css" />
6+
<script type="text/javascript" src="./scripts/main.js" defer></script>
87

98
<head>
10-
<title>NEI</title>
9+
<title>NEI/AAC</title>
1110
<meta charset="utf-8" />
1211
<meta name="viewport" content="width=device-width, initial-scale=1" />
13-
<meta name="description" content="Website under development!" />
12+
<meta name="description" content="Website under development." />
1413
</head>
1514

16-
<body aria-description="Website under development!">
17-
<canvas id="canvas" role="button" aria-label="Click to change canvas color..." tabindex="0">
15+
<body>
16+
<noscript>Enable JavaScript to use this website.</noscript>
17+
<p role="note" aria-label="This website is still being built by NEI/AAC."></p>
18+
<canvas id="canvas" tabindex="0" role="button" aria-label="Click to change the page color!">
1819
</canvas>
1920
</body>
2021

‎scripts/main.js

+86-118
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,118 @@
11
"use strict";
22

3-
var current = 0;
4-
var bgColors = [
5-
[0, 100, 72],
6-
[123, 100, 134],
7-
[209, 92, 41],
8-
[174, 197, 223],
9-
[201, 214, 94],
10-
[76, 108, 175],
11-
[213, 220, 213],
12-
];
13-
var txtColors = [
14-
[198, 187, 214],
15-
[175, 186, 64],
16-
[213, 220, 213],
17-
[209, 92, 41],
18-
[115, 77, 78],
19-
[218, 172, 203],
20-
[6, 101, 74],
21-
];
22-
23-
(function () {
24-
window.addEventListener("load", main, false);
25-
})();
26-
27-
function resize(canvas, ctx) {
28-
canvas.width = window.innerWidth;
29-
canvas.height = window.innerHeight;
30-
draw(canvas, ctx);
31-
}
32-
33-
function draw(canvas, ctx) {
34-
ctx.fillStyle = `rgba(${bgColors[current][0]}, ${bgColors[current][1]}, ${bgColors[current][2]}, 1)`;
3+
const state = {
4+
currentColorIndex: 0,
5+
bgColors: [
6+
[0, 100, 72],
7+
[123, 100, 134],
8+
[209, 92, 41],
9+
[174, 197, 223],
10+
[201, 214, 94],
11+
[76, 108, 175],
12+
[213, 220, 213],
13+
],
14+
txtColors: [
15+
[198, 187, 214],
16+
[175, 186, 64],
17+
[213, 220, 213],
18+
[209, 92, 41],
19+
[115, 77, 78],
20+
[218, 172, 203],
21+
[6, 101, 74],
22+
],
23+
};
24+
25+
window.addEventListener("load", main, false);
26+
27+
function drawCanvas(canvas, ctx) {
28+
const { currentColorIndex, bgColors } = state;
29+
ctx.fillStyle = `rgba(${bgColors[currentColorIndex].join(", ")}, 1)`;
3530
ctx.fillRect(0, 0, canvas.width, canvas.height);
3631

37-
lines(canvas, ctx);
38-
text(canvas, ctx);
32+
drawLines(canvas, ctx);
33+
drawText(canvas, ctx);
34+
}
35+
36+
function resizeCanvas(canvas, ctx) {
37+
canvas.width = window.innerWidth;
38+
canvas.height = window.innerHeight;
39+
drawCanvas(canvas, ctx);
3940
}
4041

41-
function lines(canvas, ctx) {
42-
let margin = canvas.height / 20;
43-
let stroke = (canvas.height * canvas.width) / 400000;
42+
function drawLines(canvas, ctx) {
43+
const { currentColorIndex, txtColors } = state;
44+
const margin = canvas.height / 20;
45+
const stroke = (canvas.height * canvas.width) / 400000;
4446

45-
ctx.fillStyle = `rgba(${txtColors[current][0]}, ${txtColors[current][1]}, ${txtColors[current][2]}, 1)`;
47+
ctx.fillStyle = `rgba(${txtColors[currentColorIndex].join(", ")}, 1)`;
4648

4749
ctx.fillRect(margin, margin, canvas.width - margin * 2, stroke);
48-
ctx.fillRect(
49-
margin,
50-
canvas.height - margin,
51-
canvas.width - margin * 2,
52-
stroke
53-
);
50+
ctx.fillRect(margin, canvas.height - margin, canvas.width - margin * 2, stroke);
5451

5552
ctx.fillRect(margin, margin + stroke - 0.5, stroke, margin * 1.5);
5653
ctx.fillRect(margin, canvas.height - margin + 0.5, stroke, -margin * 11);
5754

58-
ctx.fillRect(
59-
canvas.width - margin - stroke,
60-
margin + stroke - 0.5,
61-
stroke,
62-
margin * 11
63-
);
64-
ctx.fillRect(
65-
canvas.width - margin - stroke,
66-
canvas.height - margin + 0.5,
67-
stroke,
68-
-margin * 3
69-
);
55+
ctx.fillRect(canvas.width - margin - stroke, margin + stroke - 0.5, stroke, margin * 11);
56+
ctx.fillRect(canvas.width - margin - stroke, canvas.height - margin + 0.5, stroke, -margin * 3);
7057
}
7158

72-
function text(canvas, ctx) {
73-
let line_height = 32;
74-
let margin = canvas.height / 20;
75-
ctx.font = "45px Satoshi Bold";
76-
77-
let dev = ["🚧"]
78-
ctx.textAlign = "end";
79-
ctx.textBaseline = "top";
80-
for (let i = 0; i < dev.length; i++) {
81-
ctx.fillText(
82-
dev[i],
83-
canvas.width - 1.5 * margin,
84-
margin + margin / 2 + i * line_height
85-
);
86-
}
87-
88-
ctx.font = "25px Satoshi Bold";
89-
let nei = ["NÚCLEO", "ESTUDANTES", "INFORMÁTICA"];
59+
function drawText(canvas, ctx) {
60+
const margin = canvas.height / 20;
61+
62+
ctx.font = "25px Satoshi Bold, sans-serif";
9063
ctx.textAlign = "start";
9164
ctx.textBaseline = "bottom";
92-
for (let i = 0; i < nei.length; i++)
93-
ctx.fillText(
94-
nei[nei.length - i - 1],
95-
margin + margin / 2,
96-
canvas.height - 1.5 * margin - i * line_height
97-
);
98-
}
99-
function sleep(ms) {
100-
return new Promise((resolve) => setTimeout(resolve, ms));
65+
const year = new Date().getFullYear();
66+
const text = `© ${year} NEI/AAC`;
67+
68+
ctx.fillText(text, margin + margin / 2, canvas.height - (1.5 * margin));
10169
}
10270

103-
async function fade(canvas, ctx) {
104-
var op = 1;
105-
var out = true;
106-
await new Promise((r) => setTimeout(r, 2000));
71+
async function fadeCanvas(canvas, ctx) {
72+
let op = 1;
73+
let out = true;
74+
await sleep(2000);
75+
10776
setInterval(async () => {
10877
if (op < 0.2) {
109-
current = (current + 1) % bgColors.length;
110-
draw(canvas, ctx);
78+
state.currentColorIndex = (state.currentColorIndex + 1) % state.bgColors.length;
79+
drawCanvas(canvas, ctx);
11180
out = false;
11281
} else if (op > 1) {
113-
await new Promise((r) => setTimeout(r, 2000));
82+
await sleep(2000);
11483
out = true;
11584
}
11685
canvas.style.opacity = op;
117-
canvas.style.filter = "alpha(opacity=" + op * 100 + ")";
11886
op += (out ? -1 : 1) * 0.01;
11987
}, 50);
12088
}
12189

90+
function sleep(ms) {
91+
return new Promise((resolve) => setTimeout(resolve, ms));
92+
}
93+
12294
function main() {
123-
let canvas = document.getElementById("canvas");
124-
125-
canvas.addEventListener(
126-
"keydown",
127-
function (e) {
128-
if (e.key == "Enter" || e.key == " ") {
129-
canvas.click();
130-
}
131-
},
132-
false
133-
);
134-
135-
let ctx = canvas.getContext("2d");
136-
137-
resize(canvas, ctx);
138-
139-
fade(canvas, ctx);
140-
141-
window.addEventListener("resize", () => resize(canvas, ctx), false);
142-
canvas.addEventListener(
143-
"click",
144-
() => {
145-
current = (current + 1) % bgColors.length;
146-
draw(canvas, ctx);
147-
},
148-
false
149-
);
95+
const canvas = document.getElementById("canvas");
96+
const ctx = canvas.getContext("2d");
97+
98+
const font = new FontFace("Satoshi Bold", "url(../assets/fonts/satoshi-bold.otf)");
99+
100+
font.load().then((loadedFont) => {
101+
document.fonts.add(loadedFont);
102+
drawCanvas(canvas, ctx);
103+
resizeCanvas(canvas, ctx);
104+
fadeCanvas(canvas, ctx);
105+
});
106+
107+
window.addEventListener("resize", () => resizeCanvas(canvas, ctx), false);
108+
109+
canvas.addEventListener("click", () => {
110+
state.currentColorIndex = (state.currentColorIndex + 1) % state.bgColors.length;
111+
drawCanvas(canvas, ctx);
112+
}, false);
113+
canvas.addEventListener("keydown", (e) => {
114+
if (e.key === "Enter" || e.key === " ") {
115+
canvas.click();
116+
}
117+
}, false);
150118
}

‎styles/globals.css

+7-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
@font-face {
2-
font-family: "Satoshi Bold";
3-
src: url(../assets/fonts/satoshi-bold.otf);
4-
}
5-
6-
html,
71
body {
8-
height: 100vw;
2+
width: 100vw;
3+
height: 100vh;
94
margin: 0;
105
border: 0;
6+
overflow: hidden;
117
overscroll-behavior-y: none;
128
touch-action: manipulation;
13-
overflow: hidden;
14-
display: block;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
font-weight: bold;
1513
}
1614

1715
canvas {
@@ -22,11 +20,3 @@ canvas {
2220
top: 0;
2321
cursor: pointer;
2422
}
25-
26-
#preload-font {
27-
font-family: "Satoshi Bold";
28-
opacity: 0;
29-
height: 0;
30-
width: 0;
31-
display: inline-block;
32-
}

0 commit comments

Comments
 (0)