Back in December I stumbled across Montreal’s Open Data portal. When I spotted a data set of the city’s beautiful murals and their locations, I decided to create MTL Murals, a simple website that plots out Montreal’s murals on a Google Map.
My original goal was to learn about the Google Maps JS API and practice my ES6 chops but I ended up getting much more out of it. In this post I talk about what I learned from making MTL Murals and how much mileage I got from this little side project.
I wrote about common accessibility issues, using MeUndies.com as an example.
Check out the article here!
The other day I published an article on Medium for the first time, under the Shopify UX publication.
It’s about accessible, mobile-friendly data tables, and the lessons that I learned making it. You can check it out here 🙂
Hopefully many more to come!
These past few months I’ve been super-interested in web accessibility (a11y). As I was learning more about it, I was also compiling a list of a11y-related issues on my own blog. This weekend I spent some time to finally scratch the ol’ itch and crush a bunch of these issues. This is great news for all ten of my readers!
I was working more on tables when I ran into another weird issue in VoiceOver. I needed to visually hide a column in a table, but not use
display: none so that it could still be accessible by screen readers.
I tried out the “position content off-screen” technique outlined by WebAim.org, and that worked great until I started testing in VoiceOver.
The past few weeks at work I’ve been working a lot with tables. I was testing for accessibility using VoiceOver when I ran into an interesting discovery.
Oftentimes websites have modals with scrollable content inside. A common annoyance with modals is the ‘over-scrolling’ that happens when the user scrolls past the bottom of the modal’s contents. In other words, the browser starts to scroll the contents of what’s behind the modal.
Scrolling past the bottom of a modal will cause the content behind it to scroll, and vice versa. Demo of this annoying behaviour here