Whether you’re a seasoned ecommerce expert or just getting started, fellow Shopify merchants, this post is for you.
Table of contents:
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?
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.
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!
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…
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
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
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!
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…
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
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
