Mastodawn

I'm really proud of the accessibility work we did on this site. A huge thanks to Michael Berger from 37signals who walked us through the basics of web a11y and thanks to the Rails Foundation for investing in it.

It's sadly not usually something that's prioritised.

Take a peek at the code to see how we've made modals accessible .... The Turbo Frame powered "tabbed" layout on the Agenda page was also a bit tricky, but I think we've got an elegant solution.

I think we've also used Turbo Frames in a pretty cool way to make the modals work in a static website.

All the JS is vanilla because we were working in Jekyll without a JavaScript pipeline. Thanks to web components and modern JS, this wasn't an issue at all.

I'm also so chuffed that everything except the two buttons on the carousel on the home page works with JS disabled.

Let me know what you think! If you run into any a11y issues, please let us know. We're not experts, just learning :).

@ayush Initial look is pretty good! Nice use of inert! I haven't run it through a screen reader but it looks solid. The only issue I'm finding is I can't tab to the "close button"

@konnorrogers Thanks! ... Ah that's strange, which browser are you using?

@konnorrogers 🤔

@ayush Hmmm...in firefox...it seems to be working now...

@ayush Don't know what happened on first page load, but a refresh solved it for me 🤷‍♂️

@konnorrogers Haha weird! The classic: "have you tried turning it off and on again" 😄

@ayush Yea no idea what happened, but this is solid! I wish more modal took this level of attention to detail!

@konnorrogers Thanks 🙌, it's really amazing to hear that ... we put a lot of effort into it 😄