Home

About

Services

Blog

Contact

What You Need to Know about Accessible Web Design

Written By:
Breé Shepard
|
Monday, March 8, 2021

Accessibility in web design is both a necessary component to include and an often-overlooked aspect when creating content. But it’s important to understand why it’s important.

The internet is where people go to look for information – from reading restaurant reviews to searching financial aid opportunities on a college website. But not everyone who’s on the internet has the same abilities. In fact, close to 1 and 5 Americans live with some kind of disability.  

Many people struggle with reading screens, seeing colors or hearing video. And that’s where accessibility comes into play. By ensuring your web design (email, portals, social media, etc.) is accessible, you’re evening the playing field by allowing anyone and everyone to consume your content.

Now, when we add in proprietary software like Slate, the ability to implement accessible design seems daunting and overwhelming. But our one piece of advice is this:

Doing something is better than doing nothing.

Underscore has started implementing accessible design in our portals, communications, and other student-facing content. There are a few tools we use regularly to assess accessibility within Slate (especially portals).

Before I dive into the specific ones we use, I should mention our number one resource in keeping updated on accessibility standards and other tools: theW3 Web Accessibility Initiative website. This resource offers strategies, standards, and supporting resources to help you make the web more accessible to people with disabilities. Other helpful websites we use include:

WebAIM or Web Accessibiltiy in Mind

Section508 Accessibility Testing for Websites and Software

Getting Down to the Basics

Every time you add a photo, add alternative text, and describe the image as completely as possible. SLATE TIP: Whenever you select a photo, the dialog box includes an option for Alternative Text. Get in the habit of writing a complete description in that text box when you add the photo.

Header 1 comes before Header 2. This might sound obvious, but sometimes folks will choose Header 2 where a Header 1 should go because of its appearance. Instead, choose Header 1 and use the tools available to change the font type, size, color, and attributes. Slate Tip: In any Deliver or static content block, there is an option for “paragraph format.” Click this dropdown menu and select the appropriate Header for the structure. If you want to change the appearance of the header, use the other tools available, such has font type, font size, highlight color, font color, bold, italics, underline, and alignment.

Color needs to have a high enough contrast that colorblind/grayscale can still show information correctly

Do not use color as the only means of relaying importance. (Example: Even though we highlighted the word “only” in yellow, we would also need to italicized it to signal the importance.)

Ensure hashtags include uppercase letters at the beginning on words (ex: #UnderscoreBlogPost not #underscoreblogpost). Slate Tip: If you are uploading a photo containing hashtags, remember to add the hashtags in the alternative text.  

Allow videos to be paused. Slate Tip: The controls primarily lie in the video player – so if you embed, select the box (on the video hosting website) to allow player controls.

Ensure content is mobile-friendly. Slate Tip: Mobile-friendliness depends largely on code. If you are not comfortable with code, then ensure you’re employing some of these principles: use tables sparingly, use percentages when available for photo width, and get your deliver templates properly coded first for mobile responsiveness (including using your I.T. office or outside services or vendors).

If you are undecided about something, always err on the side of “more accessible.”

The Easy Checks – A First Review of Web Accessibility is a great resource for getting started with looking at a webpage.

Evaluate Accessibility

Here are great resources we recommend to begin improving your accessibility efforts:

General

Designing for Web Accessibility is very useful for Slate users to run through a checklist for the basics of accessible design.

The Easy Checks – A First Review of Web Accessibility is a great resource for getting started with looking at a webpage.

Webpage

ANDI (Accessible Name & Description Inspector)  

WAVE Web Accessible Evaluation Tool

Colors

Color Contrast Analyzer

WebAIM Color Contrast Checker

Need a Helping Hand?

Let’s face it– ensuring your website, emails and other designs are accessible for all can be complicated and confusing. But you don’t have to navigate this major undertaking alone. To learn more about improving your institution’s accessibility efforts, reach out to Underscore. We’re here to help!

Contact Us

About the Author

The documenter. You could say Breé does it all. Some of the many things she's mastered includes documenting business processes like a boss, keeping up on deadlines and getting people on track. Oh, and she really likes logic puzzles. With more than 8 years of experience in a variety of sectors ranging from education to career development, Breé understands what it takes to get things done.

704-806-8627

More from our blog...

Maximizing the Power of Slate for Yield

The importance of a solid yield strategy cannot be understated. But with COVID-19 and NACAC’s recent changes to their guidelines, yield communications are more vital than ever. Over the years, Underscore has identified tools and strategies you can use to finish strong during yield. And the best part, these can all be done in Slate.

Underscore + St. John Fisher College: Success Story

St. John Fisher College had a problem – they were ready to implement Slate but had concerns about whether their small team could manage a new CRM all while trying to conduct business as usual. With the help of Underscore, Fisher was able to successfully launch Slate while still achieving their admissions goals.

Getting to Know U: Morgan Cook

Swiss Army Knife? Yea, that’s how senior project manager Morgan Cook describes herself. Her “can-do” attitude is truly felt by all, whether she’s busy nailing down timelines, writing campaigns, or leading client calls. Learn more about our favorite dog lover (and soon-to-be wife!) in the latest installment of “Getting to know U.”