Three Common Accessibility Problems
and How to Fix Them

Home

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.

Text Contrast

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.

Image Descriptions

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.

Warning

A warning to any page that has flashing images is the easiest precaution. A splash, entry, or warning page is a simple HTML document that has a link to your homepage (or page with flashing gifs), and any relevent information you want users to know before they enter (flashing, eyestrain, sensitive topics, sexual content, etc). Alternatively you could include a very simple JavaScript alert in the body of your HTML.

<script type="text/javascript">
  alert("This page contains flashing gifs.");
</script>

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.

CSS Hiding

Details and Summary elements

You can used the details and 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.

HTML for the details element and the gifs inside.

<details>
  <summary>Show gifs</summary>
  <img src="cat1.gif">
  <img src="cat2.gif">
</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!

@media (prefers-reduced-motion) {
  .exampleclass {
    display: none;}

@media (prefers-reduced-motion) {
  .gifs img {
    filter: blur(5px);}}

You can hide, blur, darken, etc images or groups of images in the prefers-reduced-motion media query. You can also restyle CSS animations to be more subtle for in this query.

Unfortunately, this method does not let users choose if they want to see the gif(s) or not.

CSS is pretty limited, not letting the users play and pause gifs, and you may have an important gif you don't want to be completely hidden. JavaScript will have to be used to toggle gifs.

JS hiding

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.

Gifs in a div with an ID

<div id="blinkies">
  <img src="cat1.gif">
  <img src="cat2.gif">
</div>

JavaScript functions hiding and showing elements with the "blinkies" and "buttons" IDs

<script>
  function hide() {
    document.getElementById('blinkies').style.display = 'none';
    document.getElementById('buttons').style.display = 'none';}
  function show() {
    document.getElementById('blinkies').style.display = 'block';
    document.getElementById('buttons').style.display = 'block';}
</script>

HTML buttons that activate the JS function

<button onclick="hide()">hide blinkies</button>
<button onclick="show()">show blinkies</button>

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.

<script>
  var x = document.querySelectorAll('.gifs');
  function hide() {
    for(var i=0; i<x.length; i++) {
      x[i].style.display = 'none';}}
  function show() {
    for(var i=0; i<x.length; i++) {
      x[i].style.display = 'block';}}
</script>

This basically allows all elements of a class (or other selector) to be changed, rather than just one at a time. Note that you don't have to use block, you can use inline-block, inline, or flex. You could also do this for filter instead of display.

Of course this doesn't let you pause or play gifs.

JS pausing

Some personal sites use the JavaScript library Freezeframe.js to pause gifs. Bechnokid has written a tutorial on how to use Freezeframe.js. Punkwasp also has a simplified code snippet from Freezeframe.js you can use.

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.

<script>
  function pausegifs() {
    var x = document.querySelectorAll('.freeze img, img.freeze'); 
      for(var i=0; i<x.length; i++) {
        x[i].src = x[i].src.slice(0, -3) + 'png' ;}
  function resumegifs() {
    var x = document.querySelectorAll('.freeze img, img.freeze'); 
      for(var i=0; i<x.length; i++) {
        x[i].src = x[i].src.slice(0, -3) + 'gif' ;}
</script>

These functions replace the file extention for each image with the freeze class or in a freeze class container. To work, the gif and png must have the same name and folder. Heres a more indepth tutorial: Freezing Gifs - Without Freezeframe.js

End note

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!

Three Common Accessibility Problems and How to Fix Them