Sara Joy

sara

Hi! Welcome :)

A picture of me!

I am a techy, creative person with a front end develop­ment 'Schwer­punkt' :)

I'm learning everything I can about Web Accessibility (a.k.a. a11y), because the internet is for *everyone*.

This site is built with vanilla HTML, CSS and just a little JS in Astro. If it is all a bit much, there is a simpler version to be found at sarajoy.dev/basic

What's new /now?

Code Skills

I have varying experience using:

stuff

Title card still frame from a talk on YouTube: Easy Dark Mode with color-scheme. It's just black and white. But should it be? 🤔

color-scheme: dark

I had already written a blog post about color-scheme, and another which had a section on contrast levels and what they mean for different people - in this talk I smash those together into something hopefully coherent about how easily you can cater to lots of people at once :)

Another shorter version of this talk can also be found on youtube as part of the 11ty conference in 2024 - see also the janky online slide deck.

Benjamin Dickson, Comics Writer & Artist desktop website screenshot. His four most recent comic covers are displayed in a row under the title.

Benjamin Dickson

My friend Ben needed a new responsive website to replace an ageing Wordpress site which was not responsive at all. I love building sites with such interesting content!

I built this site with Astro.

A very simple web page with a round profile picture and links to twitter, email, website

QR Code Card

I had an idea to make a digital business card, to use at my very first web-development conference.

In the end, it wasn't really used - but no matter, it was fun to make :)

A placeholder image with my initials.

W.I.P.

I have many works in progress going on...

A screenshot of the Whimsica11y website in dark mode - a video is embedded: The Greatest, by Apple.

Whimsic​a11y

Via my CSS webring, I've come across a whole new world of hobbyist websites, and they're just wonderful!

A lot of them are however not very accessible. I'm not going to call anyone out - because this is people building their own stuff fun, not as a service for people to use. But, many of them actually do want to be more inclusive, while also finding themselves bewildered by the advice and resources available out there. This is my attempt to be helpful. Very much a work in progress!

ASCII Art

When I was 15 or so I frequented several USENET newsgroups,
particularly alt.fan.eddie-izzard and alt.ascii-art.

If in dark mode, consider switching to to see it properly! 

                       ______
                _.-=,-" _... """-.,_
              /"  .- "'-.,-- " ' _  \
            ,'  -  . -'" _",- -" . \ '.
           / /   /  __ -"  /)_)\ (\ '. \
          / /  (  _(  \ )\/     )/ |/) \
         (   -   _\   /'            /') )
         / '  "  )                    / /
         | /  ( (                     ')(
         \ |  / /    _.,,.      _,,._  /
         \  - //  .:'`'_```'   '``_`''./
         \ /"\_:   /<(8)_>)    (<(8)>' |\
          |/|\T:      ".'/     `-_"    ||
          | LJ|'               |       ||
          `\ *             .   `       /
           >\_,           (_    |      J
            <' \            `'/'       |
             <_\                      /
               <\      `<-':'-':'-    /
             _/\|A        .,___,-    /
            / / |'M.        ```     /
        _.,/ <  | ''M.             /\-.._
    _/'`   | |  o . '''A.       _-`\ (   `-,
   "  sjw  / >./o   ' '''''''''' |o \ \     '.
           |  \  o      ' ' ' ' ' o ) \
           \   \  o   '   '  '   o  /  )
           |  / |   o           o .'   /
           \ (   \     o  o  o  .".    /
            \\  \ )            / _ \   /
             "\  (            / (:) ) /
                  \          /      /" Self-portrait!



            \_/                    \\
          --(_)--                 < "_)
            / \     .--.-.--.     / /
                        V        /#/
                  ______________/(/
    )\      _,--,/           .-/#/\
    "\"-._.oo ' /             \)/_\\
      "-.___. ./____________________\
           \__  | (  )  |__|  |__| |
           ,-,\_|_|__|_____________|__,-,
           | |________________________| |
           L L________________________J J
_.'._.'._.'T T________________________P P_.'._.'._.'._
            \ \______________________/ /
'._.'._.'._.'._\ \____________________/ /'._.'._.'._.'
         sjw  ","-.______________.-","
                "-._""--------""_.-"    Noah's Ark
                    ""--------""



         \)       /\__/\       (/ 
       _.-:-._   (<|><|>)   _.-:-._
   _.-'  / \  '-._'(VV)'_.-'  / \  '-._
.-'     /   \    .      .    /   \     '-.
 '-.   /     \   .      .   /     \   .-'
    \ /  _.._ \  .\    /.  / _.._  \ / 
    |/.-`    `.\'  '))'  '/.'    '-.\|
               '   ((     '
sjw                 ))  Cat-bat? Erm...
                   "



                   __..-----')
         ,.--._ .-'_..--...-'
        '-"'. _/_ /  ..--''""'-.
        _.--""...:._:(_ ..:"::. \
     .-' ..::--""_(##)#)"':. \ \)    \ _|_ /
    /_:-:'/  :__(##)##)    ): )   '-./'   '\.-'
    "  / |  :' :/""\///)  /:.'    --(       )--
      / :( :( :(   (#//)  "       .-'\.___./'-.
     / :/|\ :\_:\   \#//\            /  |  \
     |:/ | ""--':\   (#//)              '
     \/  \ :|  \ :\  (#//)
          \:\   '.':. \#//\
           ':|    "--'(#///)
                      (#///)
                      (#///)
                       \#///\
                       (##///)
                       (##///)
                       (##///)
                       (##///)     Mmm desert island...
                        \##///\
                        (###///)
                        (sjw////)__...----....___
                        (#/::'''                 ""--.._
                   __..-'''                             "-._
          __...--""                                         '._
_____..--"""                                                     "-.._______
  (_ ""---....___                                          ___...--"" _)
  """--...   __"""""----.......__________.......-----""""      --"""
               """"  ---.....                    ___....----



 __________________________
|                          |
|    NO LIVE TURTLES OR    |   _,,.------..,
|                         _|-'`-``_//\/'/-_ `\
|    FROGS ARE TO LEAVE  ((_,.-,.-''      '`\|
|                        ||-''`               \
|        THE STORE.     /           / /        \.
|                      /           /)/&rbrace;T  /\     \_
|  ZXZXZHXHZXZHXZHXZHXH    | )    ) | &lbrace; ('( \(',- <
|                     [    /|/)-')             |  |
|_____________________|    /                   |  )
                      |   |  _,.,,_    .  .:'`: L (
                      \  /  '`/(o)\`:   \/(o)>\ L /
                       \ |     --_'` :  |`'''`  |/
                        ||                      Y|
                         \          .    '.     |J
                         |\         [* _-*/     |
                         ',\           ||       |
                           _L    `_.,::--::,.   |
                         ,/ |        - ... -    /
                      _,/   |\        _ _      :`'\
                    ,/ / /'`|VA               /\   \,_
              _sjw/~  / (   |:VAa.    ,, .   /| |\    `\
           ,-'   /   (   \_-/\ ::OHAa.___,.-' | / \     `\
          /     /     \       \ : :VHHHH: :' / \|  \\
               /       \-._ () \    : : :   /  :_    \
              |         |  `'\  \         _/ _  /     \
              /    __.. |     \   \.   _/'` '_,/       \
             / _,-'    \ \     \ () \_/ _,.-'`
             '`         \(      \    /-'`
                         )       \ _/|   EDDIE IZZARD
                        /        |   /
                       /         |() |
                      /          |   |
                                 :.__:



             _    __   __   _         __     _|_
   .-""-/   (o)    \\ (()) /| ()()  ."__".  / | T
  /     '   /\\    |\\ "" /|| Y--T / T__) \ \\|
-||====\/  /__\\   | \\  / || |_.  | |\\  |  '|,
  \    || /    \\  |  \\/  || | '  \ J \\ /   |\\
   '-..-'/\     /\ /\  V   /\ L--J  ".__."  L | /
                               _       __    "|"__            _
                         sjw  (o)    ."  ".   ." _". ,|,  ,|, V  ()    () ()()
                              /\\   / T // \ / // T \ ||  ||  \/ \\    \/ Y--T
   "GAMERS ARCHIVE"          /__\\  | |//  | | ||   | ||==||- ||  \\   /  |_.
                            /    \\ \ J__) / \ \\_. / ||  ||  ||   \\ /   | '
                           /\     /\ ".__."   ".__."  /\  /\  /\    \/    L--J
                                                                    ()



                          _,..,_
                         /::::::\
                        /::::::::\
                       /::::/\::::\
                      /::::/  \::::\
                     /::::/    \::::\
                    /::::/      \::::\
                   /::::/        \::::\
                  /::::/          \::::\
                 /::::/            \::::\
                /::::/              \::::\
               /::::/WW/ww/          \::::\
              /::::/ _0000ooo,        \::::\
             /::::/ C0000000000000000o \::::\
            /::::/     V00000000000000  \::::\
           /::::/        000000000000000o\::::\
          /::::/         V000V""""000V"00 \::::\
         /::::/         A0  VA   oAV    00 \::::\
        /::::/         AV    "0oAV"         \::::\
       /::::/        oAV      o0"Vo          \::::\
      |::::/__________________________________\::::|
      \::::::::::::::::::::::::::::::::::::::::::::/
       '-;;;;;;;;;;;;;;;;;;sjw;;;;;;;;;;;;;;;;;;;-'
                          |:.  |
                          |:.  |   Warning, Moose!
                          |:.  |   Se upp, älg!
                          |:.  |
                          |:.  |



                           .ee._
                  ,       /$$$$$$e.
                   '.    /$$.$'$$$$$.
                     \   |$/$$$$$$$$$\
                ""--._|_ |/$'$$$$$$\"*'
          .ee.   .-" .  ""*$$$$$$)"-'
         /$$$$ee/ //\|'-/""V"\"**'
         |$$$$$/|/ ' e$*-    _\ \"-.
         /$$$$$|"   $$.-   ."\'\ \  '.
         |$$$$$|\ (_$/  / /.-"\ \ ),  \
          \$A/\|"-_"' -"  '\   \ |/    \
              /-"" "        \-"| /      \
           .-"""""-          | ||        \
        .-"                  |_|/         \
      .'     _.sjw.          |/ /        . \
     /   .e$$$$$$$$)         | /         | \
     | .e$$$$$$$$$$/     .-._/ |         |  \
     \ \$$***$$/  )      \  /  /         /  \
      \ '*(  \/ ."__      \/ ,"/        /   |
      /"-._)    ""  \   .-"." /         /   |
     /  -"/__.   --./--".-"   |        /    |
     |      /../\  )--""      |.  ,   /     /
     \      ""/| "-" ,        /\ /||\/      /
      "-.__.-" |     |         |\|  /-,     /
               /     |         \      )     /   /|
               |     |,        \ . --"|    /   / /
               /     \\         '.'-."     /  / /
               ||     \\          ""      / .' /_
               |\ .     \        .       /."  ".'
               |/\ \ .   \  .    /    .  / _.-'
MUTTLEY!!!     ' \ \ |\,    |,  /|/| /|,/__,7
                  \|\|\\\   |\|/ | |/ "V
                 .-',' \ '-.\ V  / V
                 >-. "-.\  |"   /_..--.
                 ( /".     |       .-._)
                  V       _A     "-.  \
                   "---"""  ".     )_."
                              '-.."



     __    __        __          __    __        __          __    __
    (//    \\)    __(//   __    (//    \\)    __(//   __    (//    \\)  
sjw /"      / __  \\)"    \\)_  /"      / __  \\)"    \\)_  /"      / __
  '|-..__..-''\_''-.\__..-''  '|-..__..-''\_''-.\__..-''  '|-..__..-''\
  (\\  \_    _(\\      _/     (\\  \_    _(\\      _/     (\\  \_    //)
   ""  (\\  //)""     //)      ""  (\\  //)""     //)      ""  (\\   ""
        ""  ""        ""            ""  ""        ""            ""




    _.._   *                .\_|_/.
  */ /`     _._  *    _._  _-/   \-_
  &lbrace;  |    *//`\\..-..//`\\  -\_ _/-
   \_\._*  \\_   ` `   _//  `/ | \`
 *   ``   __`|   |_|   |`__
 ________/  \\__//  \__//  \sjw_____
|**-     \_|/   \___/   \|_/     -**|
|* Sara Joy ------, ICQ# 32690270  *|
||         sara(a)------.as        ||
|____________/   \_/   \____________|
             \\_\/ \/_//




                       ___   ___
                   _.-'   '/?  '-.
               _.-'   _ --\/ _ \  `'\
              / _  -    _--\/  \  \  `\
             / /           _L      \   |
            | /      .,-'''  \     \    \
           /    /   /         |         |.
          /        ,'         '  |   \   |
          |    |   |          :   |   |  \
         /     |   |          |   |   |   |
         /  /    | |          \    \  \  `|
        J  /  /  | |           \       \_ |
        |  |    /  ) _.,,.      \_  \     .>
        \        .:'`'_```'    /''\_ _  _->\
         \   __.-` /<808_>|   |<808>`\`'  ,\
          |/|\T        / /     `-_    |/ ||
          | LJ|               |       || /
          `\ *            .   `       /' 
          > \_,          (_    |     *J |
         <'`   \           `'/'      - |&lbrace;
      _<`'   < \                    /|  |
      _>   <    \     `<-':'-':'-   / |  &rbrace;
      _/\ <   < |A       .,___,-   /|  \/
     /  <   <   |'M.       ```    /| |\|
  _.,    <   <  | ''M.           / -'\_    old
/'` /      |/|  o . '''A.      _-`-/ \_ `-,   self
  /         >'/o   ' ''''''''' |      \   '.  portrait
 /            \ o      ' ' ' 'o|           |
 |         \_  \ o   '  '  '. o'  /        |
/            \__\_o           o`|/        /    `\
|,._              \o         o  /       _/        \
    \              |oo       o |`      /           |
     \,._           \ oo    o  /      /            \
sjw      `'|_        \  oo o  /     _/              |
             \        \   o   |    /                |




 :::,
 '::::'._
   '.    '.                        __.,,.
     '.    '.                _..-'''':::"
       \     \,.--""""--.,-''      _:'
   /\   \  .               .    .-'
  /  \   \                   ':'
 /    \  :                     :
/      \:                       :
\       :                       :
 \      :      ,--,         ,-,  :
  \    :      |(_) |       |() | :
   \   :     __'--'   __    '-'_  :
    \  :    /  \      \/      / \ :
     \  :  (    )             \_/ :
  .-'' . :  \__/   '--''--'      :
  \  . .-:'.                   .:
   \' :| /  '-.__      ___...-' :
    \::|:        ''''''          '.
 .,:::'/  :                       '.
  \::\:   :                         '._
   \::    :     /             '-._     '.
    \:    :    /              .   :-._ :-'
     :    :   /               :   :   ''
     :   .'   )'.             :   :
sjw   :  :  .'   '.          :   :
      : '..'      :      _.' _.:
       '._        :..---'\'''  _)
          '':---''_)      '-'-'
             '-'-'  PIKACHU!



                            _,-""--.__  ___
                          /'  __      ''   '\_
                        ,'          \   __    '\
                       )           \    ___     (
                     ,'  _.--._ \     __         \
                    /   /      " \_.-.___         )
                    /  (               \,_        |
                    \ /                / /\_      \
                    // ,,_               ///      \
                   /\    '=,              /\      /
                   ||  \_  \      _.,,._   /)    (
                   (|    "" )  / _     '"   /   _/
                    |       /     ',__.-    / ,/)
                    |                      ",/ /
                    |     (     \          ' /,\
               _____\   ,  '-"-'           .'   )
           _,-"     \  ' -.__     '  .   ,'      )
        ,-'          \   \'-."-. )    ,-'   <    )_
       /              \   '-.-'      /      \  ,"  "-._
      /               ''._       _,-|        '<        "-._
    ,'                 '.__----:"    \         '.          "-.
   /    /           |      """'   /   |          '.
  /    /            \          ,-'    |            '._
 /    /              \             /  \               '-.
/     /                \         /    \                  '-,
/     /                         /       \                    '-
/ sjw  |   an old boyfriend (eyes closed)             \



                              _,-""--.__  ___
                            /'  __      ''   '\_
                          ,'          \   __    '\
                         )           \    ___     (
                       ,'  _.--._ \     __         \
                      /   /      " \_.-.___         )
                      /  (               \,_        |
                      \ /                / /\_      \
                      // ,,_               ///      \
                     /\=.,._=,              /\      /
                     || YMMMMM.   / .._,,._   /)    (
                     (|  MMMMMM)=,_.,,..  '"  /   _/
                      |   `"""/    qMMMMML    /,,/)
                      |             MMMMMM>-""',/ /
                      |     (     \  '"""'   ' /,\
                 _____\      '-"-'           .'   )
             _,-"     \  -,-.__     '  .   ,'      )
          ,-'          \   \'-."-. )    ,-'   <    )_
         /              \   '-.-'      /      \  ,"  "-._
        /               ''._       _,-|        '<        "-._
      ,'                 '.__----:"    \         '.          "-.
     /    /           |      """'   /   |          '.
    /    /            \          ,-'    |            '._
   /    /              \             /  \               '-.
  /     /                \         /    \                  '-,
 /     /                         /       \                    '-
sjw/MJP/LS   and a diddle for sunglasses!  \
A screenshot of the RSS JOY rss aggregator.

RSS JOY Aggregator

This little RSS aggregator is built with Astro. It outputs a fast, static page.

It randomises the list of supplied feed URLs each time it rebuilds, as well as updating the entries. Rebuilds are triggered at least every 6 hours via a Netlify build hook and a GitHub Action.

A slower-loading client-side RSS-parsing version is available at /live :)

Mega-zine teletext mock-up - pixellated neon letters and blocky image with a tongue sticking out on a black background

Mega-Zine

This is a mock-up in HTML and CSS of an old and slightly strange Channel 4 Teletext page I used to read avidly as a teen, Mega-zine.

With thanks to The Mega-zine Museum and teletext art for the great quality almost-source materials I could copy!

A website in dark mode

/basic

I got an itch to start redoing my website in a more basic, elegant way.

I'm not sure I'm succeeding with elegant visuals, but either way you can see the work-in-progress here!

A wall with stickers reading DER HUSTLE IST HART and DER STRUGGLE SO REAL

Swing​tänzerin

There is a lot of stuff on this old tumblr of mine:

Swing dance DJ sets, lindy-hop discussion, photography and crochet projects. Enjoy!

Yasmin Brinkmann's website - the headline is Praxis für systemische Beratung, Coaching & Biographiearbeit and there is a picture of her with her arms folded wearing a red top and a fetchingly striped blazer.

Yasmin Brink​mann

A friend from swing dancing needed a new landing page, and gracefully agreed to my coding it from scratch as a learning exercise.

Written in pure "vanilla" HTML, CSS and a smattering of JavaScript :)

Sara's main landing page - the screenshot shows the nagivation of the website with the INTRO: 'Hi! Welcome :)' and STUFF: 'Web Development & Design' tabs in view

tabs 2022

I had an idea about using the behaviour of the CSS property "position: sticky" to make a stack of cards that would land on top of each other when scrolling. Well, I made it and immediately applied it to my landing page :)

First written in Notepad++ in HTML and CSS only!

A screenshot of simple center-aligned text on a landing page

CSS JOY Web​ring

I set up a webring for people who enjoy CSS!
MK timelapse GmbH desktop website screenshot. The hero image is a skyscraper under construction.

MK time​lapse

I worked for MK timelapse GmbH, which in 2019 really needed an updated website. I hopped on to Wix, chose a template and then modified it heavily to reflect the feel of the new (at the time) MK logo.

In its current state it looks like it needs some love!
Screenshot of small explainer site - split into two halves, one light one dark

Light​/Dark Mode

I discovered the CSS property color-scheme and then ran with it.

People still really don't use it much, so this experimenting of mine has now also morphed into a blog post and talk!

A bunch of image tiles showing the most recent (but still very old) posts on my Blogger blog.

Blog​ger

An even older blog than my Tumblr!

Feel free to browse. Again, lots of swing dance related content but other stuff too.

blog

Other posts...

find

Guestbook image: Colourful speech bubbbles in watercolours

Sign my Guestbook!

I'm not tracking, analyzing, or feeding you cookies.

If you want to tell me something about this website, please sign!

Find me elsewhere:

Email me:

Or, find others!

CS.Sjoy.lol webring

← Prev &centerdot; Random &centerdot; Next →

←  An IndieWeb Webring 🕸💍 →

The Claw 🦋 Webring

ooh.directory

PERSONALSIT.ES

Privacy Policy

I do not track you, I do not run analytics, I do not set cookies.

I do write to session storage, so that you don't get surprised when your chosen high contrast or dark/light modes turn on or off as you navigate around the site. This disappears the moment you close the tab, or browse away.

The only data I receive from you, is that which you freely give me through the email or guestbook forms.

Because doing contact forms properly is surprisingly complicated, these are powered by Netlify Forms, which sends the input through Akismet spam filtering. Should you want a copy or would like me to delete anything you sent me, I will happily oblige - contact me in whichever way you prefer to ask for this.

Alternatively, you can directly email me if you add contact@ to the beginning of the domain of this website :)

Accessibility Statement

This is very much a hobby website built in my spare time, with many "to do's". I do however fully welcome any advice about where I need to fix something because something is inadvertently inaccessible.

I am extremely interested in making the web accessible to *everyone*. I read a lot of material related to a11y, and am learning so much while doing my best to apply as much of it as I can in my day job.

The Web Content Accessibility Guidelines (WCAG) 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. My personal website is partially conformant with WCAG 2.2 level AA. Partially conformant means that some parts of the content do not fully conform to the accessibility standard.

As the default site doesn't fully satisfy contrast requirements, I have an added contrast toggle available for those who need or prefer to view the site with high contrast.

I welcome your feedback on the accessibility of this website. Please let me know if you encounter accessibility barriers by contacting me via your preferred contact method.

Site Map
A badge with a smiley face and text 'made by a human', or 'I am not a robot' on hover or focus, and 'human content' when pressed You can find a whole set of these little anti-AI badges on Andy Carolan's Ko-Fi 😊
chevron pointing up