MTL Murals

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.

MTL Murals preview

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

I wrote about common accessibility issues, using MeUndies.com as an example.

Check out the article here!

I wrote my first Medium article

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!

Accessibility improvements to my blog

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!

VoiceOver, tables and visually hiding columns

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.

a11y: Tables and Borders

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.

Preventing the annoying over-scrolling inside modals

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.

bad-scrolling

Scrolling past the bottom of a modal will cause the content behind it to scroll, and vice versa. Demo of this annoying behaviour here.

I was working on modals with my coworker Dom when we discovered an easy way to prevent this with CSS and a bit of Javascript!