In the early days of the internet, everything was text. I wasn’t there; I didn’t really start using the internet until well after the advent of the Web, though before we had good search. But my father made use of, even moderated, Usenet messaging boards (think forums you subscribe to via your internet provider), and he communicated with people in many different situations. Relevant to this article, I recall his mention of having talked with a woman who used a Braille display; a device which displays text in the bumpy writing system accessible to the visually impaired. That system had some advantages when all it had to deal with was text, but don’t take that to mean we haven’t made improvements since then; we just have to be careful now to make our non-text media more available.
Consider the different ways in which people may be limited in their use of computers. There’s visual impairment, which includes full blindness as well as partial vision such as color blindness, blurriness, and other issues. In truth, the eye is a delicate organ capable of many unusual problems when it falls outside the normal configuration. We rely so heavily on vision for interfacing with computers, you may have never considered what it takes to make use of one if your vision were more limited.
Then you have an audio impairment, such as full deafness, limited ranges of hearing, and also central processing loss, which when you hear the sounds just fine but your brain isn’t so good at resolving it into the meanings of language. This is where closed captioning on videos and audio transcripts become very important.
Consider also, limitations in someone’s ability to interact with timed events, limits on their ability to use a mouse, brain issues such as dyslexia which may make input difficult. Even people with normal abilities may find an auto-rotating slider/carousel difficult to use. We humans are an incredibly varied lot, and while there’s a lot of things we consider normal, with seven billion people and counting there’s no small number of people who are outside the normal range of ability in some way or other. Accessibility is all about making your content available to more people who have some barrier to interacting with it typical ways.
In the United States, we have the Americans with Disabilities Act standards for Accessible Design, which specifies requirements for public accommodations. But even if you don’t have to meet ADA requirements, you may want to make your content more accessible. And there are some simple ways you can make that happen.
Images are an important part of most web pages; logos, decorative images, headers, photos... we like our images. But someone who uses a screen reader or a braille display won’t be able to see them. Rather, by default, a screen reader will tell the user that there is an image, and what the filename is. You’re probably familiar with Alt Text, the alt property of the HTML img tag provides text to use if an image cannot be loaded or must be treated as text, instead of reading the filename. So your site logo would have alt=”Your Site Name”, but specifically would not have alt=”logo for Your Site” because it’s not really important that it’s an image, is it? But what you may not know is when not to use Alt text. While you should have text on every link, and representing all your content, purely decorative images do not need Alt text; instead, the image should be made a background so that screen readers ignore it completely. This is a little more complicated than a regular image, and unfortunately, most visual page editors don’t make it any easier. But you can add images through styles which are ignored by screen readers. One example of such would be, instead of <img src=”/path/to/image.jpg” alt=”alternate text”> you can use:
<div style=”background-image:url(/path/to/image.jpg);
background-position:cover;
background-repeat:none;
height:100px; width:100px;”>
</div>
Note that in this case, you will need to specify the size of the image. You can use this technique when the content of the image is already in text on the page, such as a decorative image on a link that also has text or a photo of a person with their name right below it.
Then there’s the opposite case, where you want to display text on an element which does not normally allow for alt text. In this case, you can use a technique of visually hiding text. Again using styles, you might add something like this under a video:
<div style=”height: 0;
width: 0;
overflow: hidden;
position: absolute;”>
Transcript or link to a transcript of the video
</div>
And of course, a CSS class can be used if you’ll be making much use of that technique, so you could instead use <div class=”visually-hidden”>Hidden content</div>. A screen reader will still find this text and read it out, but someone looking at the page won’t see it.
These are just a couple techniques which can make your content more useful to someone who can’t make use of it how you’d expect, and that’s really what accessibility is all about: considering the ways people may be interacting with your content and making the end user experience a good one.