Improve accessibility somewhat

This commit is contained in:
MeowcaTheoRange 2023-12-21 10:04:15 -06:00
parent e4958b6520
commit 016c988c73
5 changed files with 49 additions and 16 deletions

Binary file not shown.

Binary file not shown.

View file

@ -9,8 +9,22 @@ var accSaturation;
var accBase; var accBase;
// if interface.js is existent
var propagateStyles = propagateStyles ?? null; var propagateStyles = propagateStyles ?? null;
const FONTS = [
["Lexend Deca"],
["Renogare"],
["Mojangles", "Minecraft"],
["Nintendo DS", "NDS12"],
["System Default", `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol"`],
["Sans-serif", "sans-serif"],
["Serif", "serif"],
["Mono", "monospace"]
]
function createAccessibilityNodes() { function createAccessibilityNodes() {
document.querySelector("#accessibility").innerHTML = `<details> document.querySelector("#accessibility").innerHTML = `<details>
<summary>Accessibility controls</summary> <summary>Accessibility controls</summary>
@ -34,18 +48,9 @@ function createAccessibilityNodes() {
value="50" value="50"
/> />
</label><br /> </label><br />
<label for="acc-font">Font family: <label for="acc-font">Page font:
<select id="acc-font"> <select id="acc-font">
<option value="Lexend Deca" selected>Page Default</option> ${FONTS.map(([name, value]) => `<option value="${value ?? name}" selected>${name}</option>`)}
<option value="-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto,
Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;,
&quot;Segoe UI Symbol&quot;">System Default</option>
<option value="Minecraft">Mojangles</option>
<option value="sans-serif">Sans-serif</option>
<option value="serif">Serif</option>
<option value="mono">Monospace</option>
<option value="cursive">Cursive</option>
<option value="fantasy">Fantasy</option>
</select> </select>
</label><br /> </label><br />
<label for="acc-hue">Page hue: <label for="acc-hue">Page hue:

View file

@ -50,6 +50,11 @@
/* The weight of the font used in the document. */ /* The weight of the font used in the document. */
--font-weight: normal; --font-weight: normal;
/* The font used for headers in the document. */
--header-font-family: var(--font-family);
/* The weight of the font used for headers in the document. */
--header-font-weight: bold;
/* The underlay color of the document. */ /* The underlay color of the document. */
--underlay-color: hsl(var(--base-color), 10%); --underlay-color: hsl(var(--base-color), 10%);
/* The page color. */ /* The page color. */
@ -74,6 +79,18 @@
} }
html.base { html.base {
--base-color: 0, 0% !important;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--font-weight: normal;
--header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--header-font-weight: bold;
--underlay-color: #fff !important; --underlay-color: #fff !important;
--background-color: transparent !important; --background-color: transparent !important;
--color: #000 !important; --color: #000 !important;
@ -81,11 +98,6 @@ html.base {
--accent-color-bg: #000 !important; --accent-color-bg: #000 !important;
--accent-color-fg: #000 !important; --accent-color-fg: #000 !important;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important;
--font-weight: normal;
--border-width: calc(1em / 16); --border-width: calc(1em / 16);
--border-style: solid; --border-style: solid;
--border-color: var(--color); --border-color: var(--color);
@ -139,6 +151,8 @@ main {
} }
h1 { h1 {
font-family: var(--header-font-family);
font-weight: var(--header-font-weight);
font-size: 2em; font-size: 2em;
line-height: 1.5em; line-height: 1.5em;
margin: 0; margin: 0;
@ -146,6 +160,8 @@ h1 {
} }
h2 { h2 {
font-family: var(--header-font-family);
font-weight: var(--header-font-weight);
font-size: 1.5em; font-size: 1.5em;
line-height: 1.25em; line-height: 1.25em;
margin: 0; margin: 0;
@ -153,6 +169,8 @@ h2 {
} }
h3 { h3 {
font-family: var(--header-font-family);
font-weight: var(--header-font-weight);
font-size: 1.1em; font-size: 1.1em;
line-height: 1.25em; line-height: 1.25em;
margin: 0; margin: 0;
@ -160,6 +178,8 @@ h3 {
} }
h4 { h4 {
font-family: var(--header-font-family);
font-weight: var(--header-font-weight);
font-size: 1em; font-size: 1em;
line-height: 1.25em; line-height: 1.25em;
margin: 0; margin: 0;

View file

@ -6,6 +6,14 @@
font-family: "Minecraft"; font-family: "Minecraft";
src: url("/assets/fonts/Minecraft/Regular.otf"); src: url("/assets/fonts/Minecraft/Regular.otf");
} }
@font-face {
font-family: "Renogare";
src: url("/assets/fonts/Renogare/Regular.otf");
}
@font-face {
font-family: "NDS12";
src: url("/assets/fonts/NDS12/Regular.otf");
}
:root { :root {
--font-family: "Lexend Deca"; --font-family: "Lexend Deca";
} }