Three Common Accessibility Problems
and How to Fix Them
If you're an absolute beginner to web accessibility, this article is for you! Accessibility is a very broad topic with a lot of different considerations, so naturally you may be overwhelmed and have no idea where to start. This page will show you how to fix three very common accessibility problems on personal sites!
If you're looking for something more comprehensive, check out my more indepth accessibility guide.
Note that your site doesn't have to be minimalist to be more accessible! Fun aesthetics and accessibility can coexist!
Inaccessible by Owl's Roost demonstrates why accessibility is important.
Make sure that users can read your text against its background. This is difficult to do if they are a similar shade, the letters are small/thin, or your background varies a lot in color. This is especially important for readers who have limited vision. Generally, you will want light text on dark backgrounds, and dark text on light backgrounds.
This text has high contrast and a simple font.
This text also has high contrast.
This text has low contrast.
These colors don't vary enough in lightness/darkness.
These colors are fully saturated.
This text is on a busy background.
This text is in a thin font.
Combined, contrast issues make it even harder to read.
This text is thin and has low contrast.
This text is thin, fully saturated, and on a busy background.
You can check your text contrast against accessibility standards using WebAIMs Contrast Checker. Either copy paste the hex color codes from your styling, or color pick them using your browser! If you have Firefox, go to: hamburger menu > more tools > eyedropper. You may need to add an extention for other browsers.
Relevant images should have a description so that Blind users have access to the same information. Blind browsers may use screen readers (programs that read outloud content on their screen) to navigate their computer and online sites. Image descriptions give the screen reader something to read aloud in place of the image.
The most common way to provide image descriptions is by putting the description in the image's alt attribute.
<img src="orangecat.jpg" alt="Orange cat sitting on a counter.">
The description should be tailored to the context and purpose of the image.
- pet cat care page: a basic description like the one above.
- cat fur pattern guide: describe the cats fur in more detail.
- photo gallery: describe the lighting, pose of the cat, and background.
Alt text should be brief, rarely more than two sentances. Decorative images like dividers or unimportant gifs should have an empty alt text like so: alt="". This is to prevent cluttering the listening experience with irrelevant details.
Small images like blinkies and buttons may have an empty alt attribute if they are mostly used for decoration, but if you use them to display things you believe, your interests, or your site characteristics, you may want to transcribe their text. A page collecting gifs should have each gif described, since thats the main point of the page.
On the other hand, artwork and diagrams usually deserve longer descriptions since they are meant to be studied.
Images like screenshots or scans of book pages should have the text fully and accurately transcribed.
If you use an image as a link (such as a house icon for your homepage) put the destination title in the alt text rather than a description of the image.
<img src="houseicon.png" alt="homepage">
You generally don't need to begin the description with "image of", "picture of", or "graphic of" since screen readers announce that the element is a graphic. If its relevant, however, you may want to specify that its a photo, painting, illustration, diagram, graph, etc.
Here's WebAIMs guide on alt text.
Gifs and Animations
Gifs and other animations are very prelevant on personal sites, especially those inspired by the old web, but unfortunately some motion graphics can cause eye strain, headaches, nausia, and even seizures.
Seizure inducing animations have all three traits:
- flash more than 3 times in 1 second
- are large
- and have high contrast flashes
High contrast flashes are usually flashes of white against black, flashes of red, or flashes of yellow. Animations with all three traits should be removed or editted.
Most gifs often seen on personal sites will not cause seizures due to being small, but they can cause nausia or headaches. Gifs that are slow and do not flash should be fine, but fast, flashing, or large collections of gifs should have some sort of barrier.
Notable animations are CRT filters, which are large, affecting the whole screen. They often have thin dense lines that may scroll and flicker, which can cause adverse effects, thus you shouldn't add them unless you have a way for viewers to turn them off.
Here are some precautions, from easy to more complex.
alert("This page contains flashing gifs.");
You can even encourage viewers to add this gif pauser extention in your entry message!
However, if you're like me, you may not want a splash page. In that case, you can hide or pause the gifs to reduce risks.
Details and Summary elements
You can used the
summary elements to hide gifs.
Show gifs (this is the summary element)
These are the hidden details.
Select the summary again to close the details.
This is best for a large block of gifs like a blinkie collection, you probably don't want to make a details element for random gifs sprinkled around, since you will have to make one for each gif, each of which will have to be opened/closed by the user.
Prefers-reduced-motion media query
Some users may have their browser preferences set to show necessary motion only. You can use a media query to style elements for these users!
Unfortunately, this method does not let users choose if they want to see the gif(s) or not.
JS can be used to pause and play gifs, but first lets use JS to show and hide gifs. JS hiding may be better than CSS hiding because you can hide all gifs on a page with buttons.
If it is only a few images or gif containers, you can use getElementById() to select elements by their id.
If you have a lot of elements you want to toggle, but you can't fit them in only a few containers, you can use slightly more complex JS.
Of course this doesn't let you pause or play gifs.
Freezeframe.js is not without flaws however, so if you can't get it to work how you want, you can create static png files for all of your gifs, and use JS to swap these files. The JS is simple, but it is tedious creating pngs for every gif.
These are just three of many accessibility issues, but I believe they are the most significant ones on Neocities and other small webhosts. I hope that this tutorial has made it easier to approach accessibility!
If you feel comfortable with these three topics, and want to make your page more accessible in other ways, check out my much longer web accessibility guide which has many links to other resources!