2026-09-23 16:28:48 -07:00
<!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 : 40 rem ;
line-height : 1.5 ; /* 4. Increase line-height */
-webkit- font-smoothing : antialiased ; /* 5. Improve text rendering */
}
main {
padding : 1 rem ;
}
section + section {
margin-top : 4 rem ;;
}
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 : 2 rem ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
text-wrap : balance ; /* 9. Improve line wrapping */
}
h1 {
font-size : 2.5 rem ;
margin-top : 0 ;
}
h2 {
font-size : 1.9 rem ;
padding-bottom : .1 rem ;
border-bottom : .1 rem solid var ( -- color - pink );
}
h3 {
font-size : 1.5 rem ;
padding-bottom : .05 rem ;
border-bottom : .05 rem solid var ( -- color - pink );
}
h4 {
font-size : 1.2 rem ;
}
li {
line-height : 1.5 ;
}
. long-items li + li {
margin-top : .75 rem ;
}
a {
color : var ( -- color - text );
text-decoration-thickness : .2 rem ;
text-decoration-color : var ( -- color - blue );
border-radius : .1 rem ;
outline-offset : .1 rem ;
}
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 : .15 rem 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 : 1 px ;
overflow : hidden ;
position : absolute ;
white-space : nowrap ;
width : 1 px ;
}
/* 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 : .8 em ;
}
/* location spans */
. location :: before {
2026-09-23 23:58:43 +00:00
content : "📍 " / "is based out of " ;
2026-09-23 16:28:48 -07:00
}
. online :: before {
2026-09-23 23:58:43 +00:00
content : "🌐 " / "is " ;
2026-09-23 16:28:48 -07:00
}
. location ,
. online {
margin : 0 ;
text-align : right ;
color : var ( -- color - text );
font-size : 1 rem ;
font-weight : bold ;
}
/* Posts list */
. providerlist {
padding : 0 ;
}
. providerlist-item {
display : flex ;
flex-wrap : wrap ;
align-items : baseline ;
margin-bottom : 1 rem ;
}
. providerlist-item + . providerlist-item {
border-top : .1 rem dotted ;
margin-top : 2.25 rem ;
padding-top : 1.5 rem ;
}
. providerlist-link {
font-size : 1.35 rem ; /* 19px /16 */
font-weight : 700 ;
flex-basis : 100 % ;
border-bottom : .05 rem solid var ( -- color - pink );
text-decoration : none ;
color : var ( -- color - blue );
display : inline-flex ;
align-items : baseline ;
column-gap : .5 rem ;
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 : .5 rem ;
list-style : none ;
padding : 0 ;
margin : 0 ;
}
/* related providers section on provider pages */
. related-providers {
border-top : .1 rem dotted ;
padding-top : 1 rem ;
margin-top : 4 rem ;
}
/* services page */
. service-list {
display : flex ;
flex-flow : row wrap ;
padding-left : 0 ;
column-gap : 1 rem ;
row-gap : 2 rem ;
margin-top : 3 rem ;
}
. service {
list-style : none ;
}
. service a {
border : .1 rem dotted ;
padding : .5 rem ;
border-radius : .75 rem ;
}
. service a : focus-visible {
border-color : var ( -- color - bg );
}
/* post metadata */
. post-metadata {
display : flex ;
flex-flow : column nowrap ;
align-items : flex-end ;
gap : .5 rem ;
}
. post-time {
font-size : .9 rem ;
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 : .75 rem ;
}
/* team page specific */
. team-contact {
display : block ;
text-align : center ;
}
header {
border-bottom : .2 rem dotted ;
display : flex ;
gap : 1 rem ;
flex-wrap : wrap ;
justify-content : space-between ;
align-items : center ;
padding : 1 rem ;
}
# skip-link {
text-decoration : none ;
background : var ( -- color - bg );
color : var ( -- color - text );
padding : 0.5 rem 1 rem ;
outline-offset : 0 ;
border-radius : .25 rem ;
}
/* Prevent visually-hidden skip link fom pushing content around when focused */
# skip-link . visually-hidden : focus {
position : absolute ;
top : 1 rem ;
left : 1 rem ;
/* 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 : .25 rem ;
display : flex ;
gap : .5 rem ;
outline-offset : .25 rem ;
text-underline-offset : .2 rem ;
}
. home-link : link : not ( : hover ) {
text-decoration : none ;
}
a [ href ] . home-link : focus-visible {
outline-width : .25 rem ;
}
header img {
height : 3 rem !important ;
width : 3 rem !important ;
border-radius : .5 rem ;
}
header h2 {
margin : 0 ;
outline-offset : .25 rem ;
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 : .5 rem 1 rem ;
padding : 0 ;
margin : 0 ;
list-style : none ;
}
. nav-item {
display : inline-block ;
}
. nav a [ href ][ aria-current = "page" ] {
text-decoration : underline ;
text-decoration-thickness : .2 rem ;
}
. nav a [ href ][ aria-current = "page" ] : hover {
text-decoration-color : var ( -- color - pink );
}
/* Pagination */
. pagination {
display : flex ;
justify-content : space-between ;
gap : 1 rem ;
border-top : .2 rem dotted ;
margin-top : 2.25 rem ;
padding-top : 2 rem ;
padding-left : 0 ;
}
. pagination li {
list-style : none ;
}
. pagination li : not ( : has ( a )),
. pagination a {
display : block ;
border : .1 rem dotted ;
padding : .5 rem ;
border-radius : .75 rem ;
}
/* Footer */
footer {
border-top : .2 rem dotted ;
margin-top : 1.5 rem ;
padding : 1 rem 0 ;
text-align : center ;
}
. footer-links {
display : flex ;
gap : 1 rem ;
justify-content : space-between ;
}
footer p {
margin : 0 ;
}
footer . year {
width : 30 % ;
padding-top : .5 rem ;
margin : 1 rem auto ;
border-top : .05 rem solid ;
}
@ media ( max-width : 500px ) {
. footer-links {
flex-flow : column ;
gap : .1 rem ;
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" >
2026-09-23 23:31:07 +00:00
< img src = "/img/logo.jpg" alt = "the Spoonfairies logo, showing a spoon with fairy wings" loading = "lazy" decoding = "async" width = "585" height = "585" >
2026-09-23 16:28:48 -07:00
< 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 = "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 >
2026-09-24 16:26:24 +00:00
< p >< a href = "/accessibility" title = "accessibility statement" > accessibility</ a ></ p >
2026-09-23 16:28:48 -07:00
< p >< a href = "https://heckin.technology/inherentlee/spoonfairies" target = "_blank" title = "source code" > source</ a ></ p >
</ div >
2026-09-24 16:26:24 +00:00
< p class = "year" >< a href = "/" title = "home page" > © Spoonfairies 2026</ a ></ p >
2026-09-23 16:28:48 -07:00
</ footer >
2026-09-24 16:26:24 +00:00
<!-- This page `/accessibility/` was built on 2026-09-24T16:26:13.169Z -->
2026-09-23 16:28:48 -07:00
</ body >
</ html >
