Improve accessibility

This commit is contained in:
MeowcaTheoRange 2023-12-21 18:32:20 -06:00
parent 859bd74c59
commit 71b81d1e5b
5 changed files with 71 additions and 31 deletions

View file

@ -1,4 +1,4 @@
<section class="nav"> <section class="nav" role="navigation" aria-label="Site navigation">
<p> <p>
<a href="/">Home</a> <a href="/branding/">Branding</a> <a href="/">Home</a> <a href="/branding/">Branding</a>
<a href="/site/">Site Information</a> <a href="/site/">Site Information</a>

View file

@ -7,7 +7,7 @@ fetch("./public/projects.json")
.reduce( .reduce(
(html, project) => (html, project) =>
html + html +
`<h1>${project.name}${ `<h1><a href="${project.url}">${project.name}${
/*<span style="vertical-align: middle; /*<span style="vertical-align: middle;
font-size: 0.5em;">${project.tags.reduce( font-size: 0.5em;">${project.tags.reduce(
(html, tag) => (html, tag) =>
@ -20,19 +20,13 @@ fetch("./public/projects.json")
">${tag}</button>`, ">${tag}</button>`,
"" ""
)}</span>*/ "" )}</span>*/ ""
}</h1> }</a></h1>
<p><b>${new Date(project.date).toLocaleDateString()}</b></p> <p><b>${new Date(project.date).toLocaleDateString()}</b></p>
${project.description.reduce( ${project.description.reduce(
(html, descfragment) => html + `<p>${descfragment}</p>`, (html, descfragment) => html + `<p>${descfragment}</p>`,
"" ""
)} )}
<p> <p>
<button
onclick="window.location.assign('${project.url}')"
>
Open
</button>
or
<button <button
onclick="window.manager.createWindow('${project.url}', false${ onclick="window.manager.createWindow('${project.url}', false${
project.size?.[0] ? ", " + project.size[0] : "" project.size?.[0] ? ", " + project.size[0] : ""

View file

@ -27,7 +27,7 @@ const FONTS = [
function createAccessibilityNodes() { function createAccessibilityNodes() {
document.querySelector("#accessibility").innerHTML = `<details> document.querySelector("#accessibility").innerHTML = `<details>
<summary>Accessibility controls</summary> <summary>Site Modifiers</summary>
<fieldset> <fieldset>
<label for="acc-scale">UI scale: <label for="acc-scale">UI scale:
<input <input
@ -84,7 +84,6 @@ function createAccessibilityNodes() {
<label for="acc-base" class="checkbox">Base style: <label for="acc-base" class="checkbox">Base style:
<input id="acc-base" type="checkbox" /> <input id="acc-base" type="checkbox" />
<span class="checkbox"></span> <span class="checkbox"></span>
(requires reload)
</label> </label>
</fieldset> </fieldset>
</details>`; </details>`;
@ -138,7 +137,7 @@ function createAccessibilityNodes() {
accBase.addEventListener("change", function (e) { accBase.addEventListener("change", function (e) {
window.localStorage.setItem("acc-base", e.target.checked); window.localStorage.setItem("acc-base", e.target.checked);
window.location.reload(); changeBase(e.target.checked);
}); });
} }
@ -159,7 +158,7 @@ function initializeChanges(_, loading) {
} }
let width = window.localStorage.getItem("acc-width"); let width = window.localStorage.getItem("acc-width");
if (width == null) { if (width == null) {
window.localStorage.setItem("acc-width", 40); window.localStorage.setItem("acc-width", 50);
width = window.localStorage.getItem("acc-width"); width = window.localStorage.getItem("acc-width");
} }
let font = window.localStorage.getItem("acc-font"); let font = window.localStorage.getItem("acc-font");
@ -198,11 +197,7 @@ function initializeChanges(_, loading) {
changeColor(hue, sat, hueOver === "true", satOver === "true"); changeColor(hue, sat, hueOver === "true", satOver === "true");
changeFont(font); changeFont(font);
changeBase(base === "true");
if (loading) {
prevBase = base;
changeBase(base === "true");
} else if (base != prevBase) window.location.reload();
if (scale != null && accScale != null) accScale.value = scale; if (scale != null && accScale != null) accScale.value = scale;
if (width != null && accWidth != null) accWidth.value = width; if (width != null && accWidth != null) accWidth.value = width;

View file

@ -62,9 +62,9 @@
/* The foreground color of the page. */ /* The foreground color of the page. */
--color: hsl(var(--base-color), 85%); --color: hsl(var(--base-color), 85%);
/* The accent color of the page. */ /* The accent color of the page. */
--accent-color: hsl(var(--base-color), 40%); --accent-color: hsl(var(--base-color), 30%);
/* The background-adjacent accent color of the page. */ /* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 50%); --accent-color-bg: hsl(var(--base-color), 75%);
/* The foreground accent color of the page. */ /* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 95%); --accent-color-fg: hsl(var(--base-color), 95%);
@ -87,9 +87,9 @@
/* The foreground color of the page. */ /* The foreground color of the page. */
--color: hsl(var(--base-color), 15%); --color: hsl(var(--base-color), 15%);
/* The accent color of the page. */ /* The accent color of the page. */
--accent-color: hsl(var(--base-color), 60%); --accent-color: hsl(var(--base-color), 70%);
/* The background-adjacent accent color of the page. */ /* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 30%); --accent-color-bg: hsl(var(--base-color), 25%);
/* The foreground accent color of the page. */ /* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 5%); --accent-color-fg: hsl(var(--base-color), 5%);
/* The color of the borders used on certain elements. */ /* The color of the borders used on certain elements. */
@ -98,17 +98,17 @@
} }
html.base { html.base {
--base-color: 0, 0% !important; /* --base-color: 0, 0% !important; */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important; "Segoe UI Symbol" !important;
--font-weight: normal; --font-weight: normal !important;
--header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, --header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol" !important; "Segoe UI Symbol" !important;
--header-font-weight: bold; --header-font-weight: bold !important;
--underlay-color: #fff !important; --underlay-color: #fff !important;
--background-color: transparent !important; --background-color: transparent !important;
@ -117,10 +117,10 @@ html.base {
--accent-color-bg: #000 !important; --accent-color-bg: #000 !important;
--accent-color-fg: #000 !important; --accent-color-fg: #000 !important;
--border-width: calc(1em / 16); --border-width: calc(1em / 16) !important;
--border-style: solid; --border-style: solid !important;
--border-color: var(--color); --border-color: var(--color) !important;
--border-radius: 0; --border-radius: 0 !important;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -136,8 +136,32 @@ html.base {
} }
} }
html.base body { @media (forced-colors: active) {
margin: 0; :root {
/* --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 !important;
--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 !important;
--underlay-color: #fff !important;
--background-color: transparent !important;
--color: #000 !important;
--accent-color: #c0c0c0 !important;
--accent-color-bg: #000 !important;
--accent-color-fg: #000 !important;
--border-width: calc(1em / 16) !important;
--border-style: solid !important;
--border-color: var(--color) !important;
--border-radius: 0 !important;
}
} }
/* Size and type normalize */ /* Size and type normalize */

View file

@ -25,6 +25,7 @@ div.window-object {
min-height: 2em; min-height: 2em;
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--accent-color-fg); color: var(--accent-color-fg);
--border-color: var(--color);
border: var(--border-width) var(--border-style) var(--border-color); border: var(--border-width) var(--border-style) var(--border-color);
resize: both; resize: both;
overflow: hidden; overflow: hidden;
@ -36,6 +37,18 @@ div.window-object {
animation-duration: 0.25s; animation-duration: 0.25s;
} }
html.base div.window-object {
--background-color: transparent !important;
--color: #000 !important;
--accent-color: #c0c0c0 !important;
--accent-color-bg: #000 !important;
--accent-color-fg: #000 !important;
background-color: var(--accent-color);
color: var(--accent-color-fg);
border: var(--border-width) var(--border-style) var(--border-color);
}
div.window-object { div.window-object {
/* 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%);
@ -70,6 +83,20 @@ div.window-object {
} }
} }
@media (prefers-color-scheme: dark) {
html.base div.window-object {
--background-color: transparent !important;
--color: #fff !important;
--accent-color: #404040 !important;
--accent-color-bg: #fff !important;
--accent-color-fg: #fff !important;
background-color: var(--accent-color);
color: var(--accent-color-fg);
border: var(--border-width) var(--border-style) var(--border-color);
}
}
div.window-object.unfocused { div.window-object.unfocused {
opacity: 0.5; opacity: 0.5;
} }