I made a website to host all my #CAPTCHAlice questions and answers for your date night pleasure.  

(It's been ages since I made a website, so let me know if anything looks wonky)

https://bunnyalice.com/

CAPTCHAlice

@alice it’d be super to respect light-dark preferences :)

these days that’s as easy as <meta name="color-scheme" content="light dark" type="tex/css"> in the <head> element and using light-dark in the css a bit.

something like background: linear-gradient(135deg, light-dark(#ffc0cb,#804040), light-dark(#a0c4ff,#204480), light-dark(#d0aaff,#502a80)); for the page and background: light-dark(white, black); for the card would do it.

@tryst definitely! I just wanted to make it work first, but dark theme is a high priority! I'll see if I can add that after lunch.
@tryst how's it look now?

@alice better :)

i have more accessibility nitpicks if you want them, but…

@tryst totally, lay 'em on me.

I checked Firefox's accessibility tool and it all passed, but if there are simple things I can do to improve the experience, I'm game.

@alice okay!

  • <main> instead of <div id="content">, without other content there’s no real chance of confusion, but why not?
  • the <div id="question"> relies solely on css to indicate that its special. i’d maybe use an <h2>?
  • if you switch between dark and light modes, you might notice that the button text in light mode is a little harder to read, like it’s lower contrast even though the button is looks much darker. this comes from its proximity to the white background. making the font a little bolder would help that.
  • one answer has a link that is not a link :) and could be a link to a different question-answer.
  • there’s no way to link to a specific question-answer pair.
  • with edbrowse (a line-oriented browser written by a blind person), no question-answer loads until i press the button.
  • no-javascript folks see nothing.