Sign in

Scott Vinkle

Whether you’re a seasoned ecommerce expert or just getting started, fellow Shopify merchants, this post is for you.

7 garden carrots on a chopping board.
7 garden carrots on a chopping board.
Photo by Sarah Pflug from Burst

Table of contents:

  1. Write inclusive content
  2. Provide enough contrast
  3. Describe product images
  4. Embrace the keyboard focus ring
  5. Headings are navigation, too
  6. Use lists for list content
  7. Next level inclusivity with captions and transcripts

Accessibility is about being mindful when creating content, designing experiences, and writing code. The purpose of which is to be inclusive of people who rely on assistive technology. Making a site or app accessible has the added bonus of increasing usability for everyone. It also places your business at an advantage over the competition.

When it comes to ecommerce, providing an accessible storefront has the potential to increase revenue and…


And what are those item-something attributes for, anyway?

A pile of lime green lego blocks.
A pile of lime green lego blocks.
Photo by Murilo Cardoso from Burst

I’ve been studying HTML from an accessibility blog written by a blind developer. I was curious how they structured their markup and wanted to see if there were any extra bits that made it even more accessible.

The markup from this particular blog seemed to go above and beyond what I’d call basic semantic structure; article, header, logically ordered headings, etc. It also featured some attributes I've recognized from before ( item-something?) but I never took the time to learn about: Microdata.

What is Microdata?

Microdata, as described from schema.org and/or the Microdata spec, are attributes to help browsers build out a machine-readable…


How a children’s cartoon incorporates accessibility best practices to be more inclusive.

Peppa Pig and baby George splash in the mud puddles.
Peppa Pig and baby George splash in the mud puddles.

Being a new dad to a 4 year old, you end up watching a lot of children’s programming you’ve likely never heard of before. (Why would you?) I do pay some attention to what our daughter watches and consumes. I want to make sure it’s nothing inappropriate and to share learning opportunities when they present themselves.

Each morning before I take her to school, we have breakfast in bed and watch a little TV. Here’s how a typical morning begins:

  • 👨‍🦲 “Sweetie, what would you like to watch this morning?”
  • 👧 “Um, Peppa Pig!”

If you’re unfamiliar, Peppa Pig is…


Let’s add a dynamic content sections to our pages!

Four blank pages hang on paint covered easels in an elementary school classroom.
Four blank pages hang on paint covered easels in an elementary school classroom.
Photo by Shopify Partners from Burst

Shopify Themes feature dynamic Sections on each homepage. Content such as hero banners, carousels, featured blogs, and collections to name a few. This makes editing your homepage and giving your Store a custom look a breeze!

However, wouldn’t it be nice to have some of these dynamic content Sections available elsewhere? Have you ever wanted to add a hero banner or a featured product to a regular content page?

Before we get started, I’d recommend setting up a local development environment for editing your Theme files. Using Theme Kit allows you to edit right on your local machine using your…


A mother embraces a newborn baby boy lovingly in her arms. Photo circa 1982.

Hi Mom, it’s your baby, Scott.

I’m just writing to say thank you for raising me, encouraging me, loving me, and taking care of my every need. For sharing your sweetness, kindness, and strength. I didn’t understand as a child, but getting to know you as an adult I came to realize and appreciate so much about you.


Find out what alt text is, why it’s so important, and how to write content for your images

Creative writing objects on a table; pens, pencils, a sketch book, and a cup of coffee.
Creative writing objects on a table; pens, pencils, a sketch book, and a cup of coffee.
Photo by Sarah Pflug from Burst.

Alt text. We know it’s something that can be added to images on the web, but what is it really? Who is it for? Why should we care? And, perhaps most important, how do we write it?

Let’s explore these questions and more!

What is alt text?

Alt text, or “alternative text” as the long-form name suggests, is a written text description for an image on the web. It helps to describe the image for the reader to understand what the image is about.

In other words, alt text is content. And like any other content on your site, it should be well written…


Find out how to warn people ahead of time and why it’s so important

Photo by Matthew Henry from Burst

You’ve probably seen this bit of HTML before:

<a href="https://mysite.com" target="_blank" rel="noopener">My site</a>

Specifically, check out the target="_blank" attribute. This is what allows a link to open a new tab or window automatically. Whether or not you should even use this attribute is debatable, but this is out of scope of this post.

The information being shared here is an approach I’ve been using to help inform people who rely on assistive technology, such as a screen reader, when a link opens a new window.

Why?

It’s a valid question. Why inform someone that activating a link might open a new…


Because let’s face it, no one asked to have our function keys taken away!

Photo by Matthew Henry from Burst

I don’t know how many times I’ve set my hand down to rest only to accidentally hit something on the Apple Touch Bar and end up losing my work…

Or how about when I actually need to use the Touch Bar to switch the currently playing song, adjust the volume level, or change the display brightness; 2 taps instead of 1…

And the Esc key—wait, where is it? Argh…


Photo by Nicole De Khors on Burst

I spent the majority of Hacktoberfest 2017 working with some great folks over at freeCodeCamp. My focus was specifically on helping to bring the accessibility of their Guide site to the next-level.

The first time I saw the site I knew it would be a fantastic resource for lots of people out there, so I took on the challenge to help ensure its usability was top notch for everyone!

Working on the site was also a lot of fun as it’s built with React, so this brought a few extra coding challenges along the way.

Let’s check out the 5…


Ensure the code you write generates an accessible user experience

Photo by Matthew Henry from Burst

When creating or maintaining an existing React app, do you wonder about how to make sure the code you write helps to ensure an accessible user interface? Can this even be done with React? Are there any tools to help automate this process? This may surprise you, but I’m happy to report that there is something available to help developers write more accessible code, and it comes pre-packaged with React; a utility called a “code linter.”

This article explores various ways of using React’s accessibility code linter by taking you through the process of creating a new React app! …

Scott Vinkle

Accessibility specialist @Shopify • Speaker, writer, workshop instructor • W3C ARIA WG • IAAP CPWA • https://ScottVinkle.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store