I've been interested in coding and tech that's accessible but never had a chance to really dive deep into it and learn the practicalities of what makes a site accessible.
Working on a portfolio site I've taken the chance to learn the nitty-gritty of some tech I hadn't had a chance to play with before, accessibility design being one of them. It didn't take long for me to learn things I'd never considered, despite my continued interest in it throughout my career transition into programming.
Here are a couple of the things I've recently learned on, plus some of the issues I see come up that people might not realize hurt a site's accessibility.
1. Using <div> for everything
I always knew there were other, more semantic tags that should be used besides <div>, but it wasn't until I went out of my way to find some better, more specific tags that I realized just how many there were.
Some useful ones that I don't often see are:
-
<article>and<section> <blockquote><cite><aside>-
<time>And so many more!
They're used just like any other div tag but make content much more meaningful. It makes it easier to organize and quickly scan and know what each part of a site contains without having to scan the contents. This makes navigating through content with a screen reader a lot easier and faster, without forcing users to navigate through a hellscape of <div> after anonymous <div>.
Try to get as specific as possible with HTML tags and use the div tag as a last resort.
2. Design that relies on color with no text (or vice versa)
This one can be a little insidious because it feels like it makes a lot of sense, and as soon as you learn about it, it feels like it's something you already knew. But hear me out, because, despite this feeling like common knowledge, it's still something often forgotten about.
Screen readers can't read colors, which means users with disabilities or impairments that necessitate a screen reader won't know what information you're trying to show. Make sure you're using alt text for images that convey information and labels and names for everything else.
For those without screen readers, telling colors apart might still be a problem, so keep in mind what color combinations you're using.
The opposite can be a problem too. If you have a site that relies on text with no visual representation it can be difficult for someone who isn't a native in your language or simply for someone who forgot their reading glasses in the next room.
Obviously there are issues you won't always be able to work around. If your site's main purpose is geared towards English speakers specifically, having text (that can be screen read), probably isn't a problem you should worry about. But it's important to think about who your targeted user is and whether or not some of them might be limited by certain design choices.
3. Using the wrong kinds of icons and fonts
This one can be complicated because there are just so many different options for fonts and icons and icon fonts that it's easy to forget that a lot of these options, though very pretty and easy to use, aren't always very accessible.
One problem is that, for screen readers, certain icons will be skipped over or 'unpronounceable' or, maybe worst of all, actually read aloud. Fonts that are actually text embedded in images instead of being 'real fonts' also won't be read by a screen reader. This is where an alt tag would be necessary.
For users with reading or learning disabilities, certain fonts make reading unnecessarily difficult.
Instead, stick to some tested font guidelines that keep a site readable and look into using SVGs instead of icon fonts.
4. Not having captions or transcripts for anything with audio
For videos, captions are useful for so many reasons:
- deaf and hard-of-hearing folks,
- people with learning disabilities,
- visual learners who need to read information instead of hear it (ironically, since videos are supposed to be a visual medium),
- being in a noisy location,
- being in a quiet location,
- the video's language isn't the user's first and the words are needed to supplement their understanding,
- and more!
If you have any video on your site, make sure there are good, accurate captions, or you're very much limiting how many users can interact with it.
Transcripts are good for any other audio files for the reasons mentioned above but are super awesome for people to browse through if there's a lot of info jam-packed in there. If there's a podcast that has some specific information I'm looking for, and I have to somehow try to find it somewhere in a 45-minute audio clip, I'm going to lose my friggin' marbles. Transcripts are good for videos too (even if they already have captions)!
5. Captchas
This was definitely something that never truly occurred to me until recently. Yes, they're annoying for everyone, but they're images. They completely restrict access for people with visual impairments. They can't answer whatever they're being asked to describe or which pictures contain a stop sign because they can't see the picture! Even the simpler point-and-click captchas can be difficult for folks who struggle with fine motor skills.
I know some captchas have a voiced option, which is great, but not all do. This one can be a tricky problem to solve because we do want to maintain site security, but not at the cost of excluding a disadvantaged population. So what are some other ways that won't unfairly restrict anyone's access?
This is something I myself would want to know more about and haven't seen much so far, so I'm interested if anyone has any experience or know-how on this.
This is definitely not an exhaustive list, and some of these issues go way deeper and complicated. These are some of the ones I've recently found most interesting/frustrating. What are some other accessibility issues you often see on the web that most people don't think of?
Top comments (0)