Accessibility in the Classroom: Where to Start

What is Accessibility?

Accessibility is a broad topic that can’t be covered in a single post, but here we’ll focus on a few website accessibility guidelines that also apply to classroom materials, handouts, and visuals.

The overall goal of accessibility is to create things in a way that all people can access it, especially people with disabilities.

However, accessibility is not just for people with disabilities. When we design things with accessibility in mind, it actually helps everyone.

Consider a Google Form. Have you ever missed a required field and received an error message?

This is an example of accessibility benefitting everyone. There are official guidelines for making webpages accessible, including WCAG 3.3.1 which states, “If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.”

Imagine the frustration you’d experience if the form did not let you move forward, and it also didn’t tell you which required fields were left blank. Accessibility standards make life easier for everyone.

Accessibility in the Classroom

Again, there are too many things to talk about here, so for now, we’ll focus on several quick tips to get started, including standards around use of color, images, and content layouts.

Color Contrast

Many people have various levels of color visual impairment. In addition, as our eyes age, we can also have trouble seeing colors that don’t have high contrast.

WCAG 1.4 has many guidelines for color including the following criteria:

• All text must have at least a 4.5:1 contrast ratio

• All non-text must have at least a 3:1 contrast ratio

To illustrate, check out the following table. Which column is easier to see?

Low Contrast	High Contrast
Can you see this?	Can you see this?

The left column is difficult to see because the yellow text only has a 1.24:1 contrast with the white background. However, the right column is easier to see because it has a 6.51:1 contrast which meets the minimum 4.5:1 standard.

How do we figure out these contrast ratios? Thankfully, there are contrast checker websites available for free including WebAIM and Coolors. Simply type in the color codes, and the checkers will instantly reveal the contrast.

When could this apply to our daily classrooms? Here is a sample improvement.

Before	After

In the first graph, the orange line only has 2.14:1 contrast with white. In addition, the grid lines only have 2.07:1 contrast with white. Therefore, we changed the orange to a blue with 4.51:1 contrast and updated the grid line colors to a gray with 3.03:1 contrast.

It’s important to note that many online programs do not have default colors that meet color contrast standards. Therefore, we can’t assume accessibility has been met, and we may need to adjust it ourselves. Accessibility is still a new venture for many, and it will take time for more programs to upgrade their features.

Color Alone Can’t Identify Things

One standard that especially helps people with color blindness is to avoid using color alone to identify information. For example, we might ask students to write the transformation rule that maps the red parabola to the blue parabola.

However, many people have visual impairments that make it difficult to distinguish colors. Even though these colors meet contrast standards, some may still be unable to tell which parabola is red and which is blue.

Instead, two helpful practices include labeling the parabolas with the words “red” and “blue” or adding a pattern along with color to differentiate them. Check out these examples.

Using Labels	Using Patterns

In the labels example, we can keep our initial prompt the same because the labels make it clear which color is which.

However, in the patterns example, we would need to change our prompt to, “Write the transformation rule that maps the solid parabola to the dashed parabola.”

We can still use color! We just need to take an extra step to differentiate colors if it’s an important detail we’d like students to pay attention to.

Avoid Images of Text

Another standard requires the use of text instead of images of text. For example, we’ve often used images of equations in our curriculum handouts, including the quadratic formula.

This is an image of text because it’s an actual image, not a real font typed in this web browser.

There are a couple accessibility issues here. First, many students require text to be in a particular font size, foreground and background color, font family, line spacing or alignment. If text is truly text, the student’s accessibility tools can make the necessary adjustments.

However, an image is just an image. It can’t be modified and is simply a static object.

Second, when you zoom in on an image (unless it’s an SVG file), it becomes blurry and loses clarity. In contrast, real text stays sharp at any zoom level—no more fuzzy visuals on the projector!

Therefore, whenever possible, use your word processor’s equation editor to create your formulas and equations as natural text instead of pasting images of equations into the document.

Exceptions include cases where a program can’t create the type of text you need (for example, Google Slides currently lacks an equation editor, making images of equations necessary) or when a specific text presentation is essential to convey the information.

Consistent Naming, Styling and Layouts

WCAG Guideline 3.2 calls for web pages to appear and operate in predictable ways, and this includes consistent layouts and identification of objects on the page.

For example, one mistake we made when updating our site design was using buttons inconsistently.

On our Teachers page, we had black buttons labeled “Dive In”.

But, on our Curriculum page, the Dive In call to action was no longer a button but just simple, hyperlinked text.

A site user kindly pointed this out because they had trouble accessing the Algebra 1 curriculum page. Since the “Dive In” link looked different, it was easy to overlook and not click.

How does this relate to our classes?

There are many applications. For example, consider your handouts: Is the section for a student’s name always in the same spot?

Do certain elements, like a notes sidebar, appear in a consistent location across materials?

Keeping key features in the same place makes them easier to find and use.

Closing Thoughts

There’s much more we could cover, and if there’s interest, we might even create a full workshop someday.

For now, here’s a note of encouragement:

The goal is progress, not perfection. The purpose isn’t to overwhelm, but to raise awareness of a topic we ourselves only recently began to understand.

Perfect accessibility doesn’t exist, but there’s always room for improvement.

Start small—take a few ideas at a time and gradually integrate them until accessibility becomes a natural part of your process.