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.
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;
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.
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:
If you’re unfamiliar, Peppa Pig is…
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.
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!
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…
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.
It’s a valid question. Why inform someone that activating a link might open a new…
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…
Esc key—wait, where is it? Argh…
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…
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! …