first
This commit is contained in:
@@ -0,0 +1,793 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
|
||||
|
||||
<title>accessibility | Spoonfairies</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<!-- Meta -->
|
||||
<link rel="canonical" href="/">
|
||||
<meta name="description" content="find the services you need from others who need you">
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta property="og:title" content="accessibility | Spoonfairies">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://spoonfairies.help/accessibility/">
|
||||
<meta property="og:description" content="find the services you need from others who need you">
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
<meta property="og:image" content="https://spoonfairies.help/favicon.ico">
|
||||
<meta property="og:image:alt" content="the Spoonfairies logo, a spoon with wings">
|
||||
|
||||
<meta name="generator" content="Eleventy v3.1.5">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- CSS -->
|
||||
|
||||
|
||||
<style>:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--font-family: "Atkinson Hyperlegible Next", sans-serif;
|
||||
|
||||
/* Theme colors */
|
||||
--color-light: #fbe8fd;
|
||||
--color-dark: #110526;
|
||||
|
||||
--color-pink-dark: #741189;
|
||||
--color-pink-light: #d972ef;
|
||||
--color-purple-dark: #421397;
|
||||
--color-purple-light: #9d6ff4;
|
||||
--color-blue-dark: #1243a7;
|
||||
--color-blue-light: #6586ea;
|
||||
|
||||
/* light/dark mode resolved colors */
|
||||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||||
|
||||
--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
}
|
||||
|
||||
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
|
||||
}
|
||||
|
||||
#root, #__next {
|
||||
isolation: isolate; /* 10. Create a root stacking context */
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
interpolate-size: allow-keywords; /* 3. Enable keyword animations */
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 40rem;
|
||||
line-height: 1.5; /* 4. Increase line-height */
|
||||
-webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
section + section {
|
||||
margin-top: 4rem;;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block; /* 6. Improve media defaults */
|
||||
max-width: 100%; /* 6. Improve media defaults */
|
||||
height: auto; /* 6. Improve media defaults */
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit; /* 7. Inherit fonts for form controls */
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word; /* 8. Avoid text overflows */
|
||||
}
|
||||
|
||||
p {
|
||||
text-wrap: pretty; /* 9. Improve line wrapping */
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
p + p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-wrap: balance; /* 9. Improve line wrapping */
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.9rem;
|
||||
padding-bottom: .1rem;
|
||||
border-bottom: .1rem solid var(--color-pink);
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
padding-bottom: .05rem;
|
||||
border-bottom: .05rem solid var(--color-pink);
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.long-items li + li {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text);
|
||||
text-decoration-thickness: .2rem;
|
||||
text-decoration-color: var(--color-blue);
|
||||
border-radius: .1rem;
|
||||
outline-offset: .1rem;
|
||||
}
|
||||
a:visited {
|
||||
text-decoration-color: var(--color-purple);
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration-color: var(--color-pink);
|
||||
}
|
||||
a:focus-visible {
|
||||
text-decoration: none;
|
||||
outline: .15rem solid var(--color-pink);
|
||||
}
|
||||
a.ha {
|
||||
color: var(--color-pink);
|
||||
outline-offset: 0;
|
||||
}
|
||||
span.ha-placeholder {
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
|
||||
.visually-hidden:not(:focus):not(:active) {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
/* name coloration */
|
||||
.brand {
|
||||
color: var(--color-pink);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* provider pronouns */
|
||||
.pronouns::after {
|
||||
content: ")" / "";
|
||||
}
|
||||
.pronouns::before {
|
||||
content: "(pronouns: " / "pronouns: ";
|
||||
}
|
||||
.pronouns {
|
||||
color: var(--color-text);
|
||||
opacity: .75;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
/* location spans */
|
||||
.location::before {
|
||||
content: "📍" / "is based out of ";
|
||||
}
|
||||
.online::before {
|
||||
content: "🌐" / "is ";
|
||||
}
|
||||
.location,
|
||||
.online {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Posts list */
|
||||
.providerlist {
|
||||
padding: 0;
|
||||
}
|
||||
.providerlist-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.providerlist-item + .providerlist-item {
|
||||
border-top: .1rem dotted;
|
||||
margin-top: 2.25rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
.providerlist-link {
|
||||
font-size: 1.35rem; /* 19px /16 */
|
||||
font-weight: 700;
|
||||
flex-basis: 100%;
|
||||
border-bottom: .05rem solid var(--color-pink);
|
||||
text-decoration: none;
|
||||
color: var(--color-blue);
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
column-gap: .5rem;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.providerlist-link:visited {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
.providerlist-link:hover,
|
||||
.providerlist-link:active {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
.providerlist-link:focus-visible {
|
||||
border-bottom-color: var(--color-bg);
|
||||
}
|
||||
.providerlist-link .location,
|
||||
.providerlist-link .online {
|
||||
flex-grow: 5;
|
||||
}
|
||||
.providerlist-item-active .providerlist-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.post-tag {
|
||||
display: inline-block;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Tags list */
|
||||
.taglist {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: .5rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* related providers section on provider pages */
|
||||
.related-providers {
|
||||
border-top: .1rem dotted;
|
||||
padding-top: 1rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
/* services page */
|
||||
.service-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding-left: 0;
|
||||
column-gap: 1rem;
|
||||
row-gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.service {
|
||||
list-style: none;
|
||||
}
|
||||
.service a {
|
||||
border: .1rem dotted;
|
||||
padding: .5rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
.service a:focus-visible {
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
/* post metadata */
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-end;
|
||||
gap: .5rem;
|
||||
}
|
||||
.post-time {
|
||||
font-size: .9rem;
|
||||
opacity: .75;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-metadata .taglist {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* provider contact info */
|
||||
.contacts {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
.contacts li {
|
||||
list-style: none;
|
||||
}
|
||||
.contacts li + li {
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
/* team page specific */
|
||||
.team-contact {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
header {
|
||||
border-bottom: .2rem dotted;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#skip-link {
|
||||
text-decoration: none;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
outline-offset: 0;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
/* Prevent visually-hidden skip link fom pushing content around when focused */
|
||||
#skip-link.visually-hidden:focus {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
/* Ensure it is positioned on top of everything else when it is shown */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* logo and title */
|
||||
.home-link {
|
||||
font-weight: 700;
|
||||
border-radius: .25rem;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
outline-offset: .25rem;
|
||||
text-underline-offset: .2rem;
|
||||
}
|
||||
.home-link:link:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
a[href].home-link:focus-visible {
|
||||
outline-width: .25rem;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 3rem !important;
|
||||
width: 3rem !important;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
margin: 0;
|
||||
outline-offset: .25rem;
|
||||
border: none;
|
||||
text-transform: lowercase;
|
||||
color: var(--color-pink);
|
||||
}
|
||||
header a:has(h2):hover {
|
||||
text-decoration-color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: .5rem 1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
.nav a[href][aria-current="page"] {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: .2rem;
|
||||
}
|
||||
.nav a[href][aria-current="page"]:hover {
|
||||
text-decoration-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border-top: .2rem dotted;
|
||||
margin-top: 2.25rem;
|
||||
padding-top: 2rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
.pagination li {
|
||||
list-style: none;
|
||||
}
|
||||
.pagination li:not(:has(a)),
|
||||
.pagination a {
|
||||
display: block;
|
||||
border: .1rem dotted;
|
||||
padding: .5rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: .2rem dotted;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
footer .year {
|
||||
width: 30%;
|
||||
padding-top: .5rem;
|
||||
margin: 1rem auto;
|
||||
border-top: .05rem solid;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.footer-links {
|
||||
flex-flow: column;
|
||||
gap: .1rem;
|
||||
align-items: center;
|
||||
}
|
||||
footer .year {
|
||||
width: 65%;
|
||||
}
|
||||
}</style>
|
||||
|
||||
<!-- JS -->
|
||||
|
||||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
|
||||
let globalInstanceIndex = 0;
|
||||
|
||||
class HeadingAnchors extends HTMLElement {
|
||||
static register(tagName = "heading-anchors", registry = window.customElements) {
|
||||
if(registry && !registry.get(tagName)) {
|
||||
registry.define(tagName, this);
|
||||
}
|
||||
}
|
||||
|
||||
static attributes = {
|
||||
exclude: "data-ha-exclude",
|
||||
prefix: "prefix",
|
||||
content: "content",
|
||||
}
|
||||
|
||||
static classes = {
|
||||
anchor: "ha",
|
||||
placeholder: "ha-placeholder",
|
||||
srOnly: "ha-visualhide",
|
||||
}
|
||||
|
||||
static defaultSelector = "h2,h3,h4,h5,h6";
|
||||
|
||||
static css = `
|
||||
.${HeadingAnchors.classes.srOnly} {
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.${HeadingAnchors.classes.anchor} {
|
||||
position: absolute;
|
||||
left: var(--ha_offsetx);
|
||||
top: var(--ha_offsety);
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.${HeadingAnchors.classes.placeholder} {
|
||||
opacity: .3;
|
||||
}
|
||||
.${HeadingAnchors.classes.anchor}:is(:focus-within, :hover) {
|
||||
opacity: 1;
|
||||
}
|
||||
.${HeadingAnchors.classes.anchor},
|
||||
.${HeadingAnchors.classes.placeholder} {
|
||||
display: inline-block;
|
||||
padding: 0 .25em;
|
||||
|
||||
/* Disable selection of visually hidden label */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@supports (anchor-name: none) {
|
||||
.${HeadingAnchors.classes.anchor} {
|
||||
position: absolute;
|
||||
left: anchor(left);
|
||||
top: anchor(top);
|
||||
}
|
||||
}`;
|
||||
|
||||
get supports() {
|
||||
return "replaceSync" in CSSStyleSheet.prototype;
|
||||
}
|
||||
|
||||
get supportsAnchorPosition() {
|
||||
return CSS.supports("anchor-name: none");
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
if(!this.supports) {
|
||||
return;
|
||||
}
|
||||
|
||||
let sheet = new CSSStyleSheet();
|
||||
sheet.replaceSync(HeadingAnchors.css);
|
||||
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
|
||||
|
||||
this.headingStyles = {};
|
||||
this.instanceIndex = globalInstanceIndex++;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (!this.supports) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.headings.forEach((heading, index) => {
|
||||
if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) {
|
||||
let anchor = this.getAnchorElement(heading);
|
||||
let placeholder = this.getPlaceholderElement();
|
||||
|
||||
// Prefers anchor position approach for better accessibility
|
||||
// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||||
if(this.supportsAnchorPosition) {
|
||||
let anchorName = `--ha_${this.instanceIndex}_${index}`;
|
||||
placeholder.style.setProperty("anchor-name", anchorName);
|
||||
anchor.style.positionAnchor = anchorName;
|
||||
}
|
||||
|
||||
heading.appendChild(placeholder);
|
||||
heading.after(anchor);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Polyfill-only
|
||||
positionAnchorFromPlaceholder(placeholder) {
|
||||
if(!placeholder) {
|
||||
return;
|
||||
}
|
||||
|
||||
let heading = placeholder.closest("h1,h2,h3,h4,h5,h6");
|
||||
if(!heading.nextElementSibling) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO next element could be more defensive
|
||||
this.positionAnchor(heading.nextElementSibling);
|
||||
}
|
||||
|
||||
// Polyfill-only
|
||||
positionAnchor(anchor) {
|
||||
if(!anchor || !anchor.previousElementSibling) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO previous element could be more defensive
|
||||
let heading = anchor.previousElementSibling;
|
||||
this.setFontProp(heading, anchor);
|
||||
|
||||
if(this.supportsAnchorPosition) {
|
||||
// quit early
|
||||
return;
|
||||
}
|
||||
|
||||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||||
if(placeholder) {
|
||||
anchor.style.setProperty("--ha_offsetx", `${placeholder.offsetLeft}px`);
|
||||
anchor.style.setProperty("--ha_offsety", `${placeholder.offsetTop}px`);
|
||||
}
|
||||
}
|
||||
|
||||
setFontProp(heading, anchor) {
|
||||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||||
if(placeholder) {
|
||||
let style = getComputedStyle(placeholder);
|
||||
let props = ["font-weight", "font-size", "line-height", "font-family"];
|
||||
let [weight, size, lh, family] = props.map(name => style.getPropertyValue(name));
|
||||
anchor.style.setProperty("font", `${weight} ${size}/${lh} ${family}`);
|
||||
let vars = style.getPropertyValue("font-variation-settings");
|
||||
if(vars) {
|
||||
anchor.style.setProperty("font-variation-settings", vars);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getAccessibleTextPrefix() {
|
||||
// Useful for i18n
|
||||
return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
|
||||
}
|
||||
|
||||
getContent() {
|
||||
if(this.hasAttribute(HeadingAnchors.attributes.content)) {
|
||||
return this.getAttribute(HeadingAnchors.attributes.content);
|
||||
}
|
||||
return "#";
|
||||
}
|
||||
|
||||
// Placeholder nests inside of heading
|
||||
getPlaceholderElement() {
|
||||
let ph = document.createElement("span");
|
||||
ph.setAttribute("aria-hidden", true);
|
||||
ph.classList.add(HeadingAnchors.classes.placeholder);
|
||||
let content = this.getContent();
|
||||
if(content) {
|
||||
ph.textContent = content;
|
||||
}
|
||||
|
||||
ph.addEventListener("mouseover", (e) => {
|
||||
let placeholder = e.target.closest(`.${HeadingAnchors.classes.placeholder}`);
|
||||
if(placeholder) {
|
||||
this.positionAnchorFromPlaceholder(placeholder);
|
||||
}
|
||||
});
|
||||
|
||||
return ph;
|
||||
}
|
||||
|
||||
getAnchorElement(heading) {
|
||||
let anchor = document.createElement("a");
|
||||
anchor.href = `#${heading.id}`;
|
||||
anchor.classList.add(HeadingAnchors.classes.anchor);
|
||||
|
||||
let content = this.getContent();
|
||||
anchor.innerHTML = `<span class="${HeadingAnchors.classes.srOnly}">${this.getAccessibleTextPrefix()}: ${heading.textContent}</span>${content ? `<span aria-hidden="true">${content}</span>` : ""}`;
|
||||
|
||||
anchor.addEventListener("focus", e => {
|
||||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||||
if(anchor) {
|
||||
this.positionAnchor(anchor);
|
||||
}
|
||||
});
|
||||
|
||||
anchor.addEventListener("mouseover", (e) => {
|
||||
// when CSS anchor positioning is supported, this is only used to set the font
|
||||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||||
this.positionAnchor(anchor);
|
||||
});
|
||||
|
||||
return anchor;
|
||||
}
|
||||
|
||||
get headings() {
|
||||
return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
|
||||
}
|
||||
|
||||
get selector() {
|
||||
return this.getAttribute("selector") || HeadingAnchors.defaultSelector;
|
||||
}
|
||||
}
|
||||
|
||||
HeadingAnchors.register();
|
||||
|
||||
export { HeadingAnchors }</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="/" class="home-link" title="home page">
|
||||
<img src="/.11ty/image/?src=src%2Flogo.jpg&width=585&format=jpeg&via=transform" alt="the Spoonfairies logo, showing a spoon with fairy wings" loading="lazy" decoding="async" width="585" height="585">
|
||||
<h2>Spoonfairies</h2>
|
||||
</a>
|
||||
|
||||
<nav aria-label="main navigation">
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="/providers/">all providers</a></li>
|
||||
<li class="nav-item"><a href="/services/">all services</a></li>
|
||||
<li class="nav-item"><a href="/get-involved/">get involved</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<main id="main">
|
||||
<h1><span class="brand">Spoonfairies</span> accessibility</h1>
|
||||
<section>
|
||||
<h2 id="program-accessibility-statement">program accessibility statement</h2>
|
||||
<p>tbd</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="site-accessibility-statement">site accessibility statement</h2>
|
||||
<p>This is an accessibility statement from <span class="brand">Spoonfairies</span>.</p>
|
||||
<h3 id="measures-to-support-accessibility">measures to support accessibility</h3>
|
||||
<p><span class="brand">Spoonfairies</span> takes the following measures to ensure accessibility:</p>
|
||||
<ul>
|
||||
<li>Include accessibility throughout our internal policies.</li>
|
||||
<li>Integrate accessibility into our procurement practices.</li>
|
||||
<li>Assign clear accessibility goals and responsibilities.</li>
|
||||
<li>Center disabled people in our program.</li>
|
||||
</ul>
|
||||
<h3 id="conformance-status">conformance status</h3>
|
||||
<p>The <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank" rel="external">Web Content Accessibility Guidelines (WCAG)</a> defines requirements for designers and developers to improve accessibility for people with disabilities. It defines three levels of conformance: Level A, Level AA, and Level AAA. <span class="brand">Spoonfairies</span> is, to the best of our knowledge, fully conformant with WCAG 2.2 level AA. Fully conformant means that the content fully conforms to the accessibility standard without any exceptions.</p>
|
||||
<h3 id="feedback">feedback</h3>
|
||||
<p>We welcome your feedback on the accessibility of <span class="brand">Spoonfairies</span>. Please let us know if you encounter accessibility barriers via <a href="https://leecat.art" target="_blank" rel="external">any of the contact methods listed for Lee Cattarin</a>.</p>
|
||||
<h3 id="technical-specifications">technical specifications</h3>
|
||||
<p>Accessibility of <span class="brand">Spoonfairies</span> relies on the following technologies to work with the particular combination of web browser and any assistive technologies or plugins installed on your computer:</p>
|
||||
<ul>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript</li>
|
||||
</ul>
|
||||
<p>These technologies are relied upon for conformance with the accessibility standards used.</p>
|
||||
<h3 id="assessment-approach">assessment approach</h3>
|
||||
<p>We assessed the accessibility of <span class="brand">Spoonfairies</span> by the following approaches:</p>
|
||||
<ul>
|
||||
<li>Self-evaluation</li>
|
||||
</ul>
|
||||
<h3 id="date">date</h3>
|
||||
<p>This statement was created on 4 February 2026 using the <a href="https://www.w3.org/WAI/planning/statements/" target="_blank" rel="external">W3C Accessibility Statement Generator Tool</a>.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-links">
|
||||
<p><a href="/attribution" title="site attribution">attribution</a></p>
|
||||
<p><a href="/team" title="meet or contact the Spoonfairies team">team</a></p>
|
||||
<p><a href="/privacy" title="data privacy">privacy</a></p>
|
||||
<p><a href="/accessibility" title="accessibility statements">accessibility</a></p>
|
||||
<p><a href="https://heckin.technology/inherentlee/spoonfairies" target="_blank" title="source code">source</a></p>
|
||||
</div>
|
||||
<p class="year"><a href="/" title="home page">Spoonfairies 2026</a></p>
|
||||
</footer>
|
||||
|
||||
<!-- This page `/accessibility/` was built on 2026-09-23T23:25:06.281Z -->
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user
