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:
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
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.
Here are great resources we recommend to begin improving your accessibility efforts:
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.
ANDI (Accessible Name & Description Inspector)
WAVE Web Accessible Evaluation Tool
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!
Join Slate Strategist Chris Carl as he gives us a behind the scenes look into life in the Special Projects Division.
Meet the one and only Ashlie Perry: She has a knack for board games. She loves cuddling her dogs, Bernie and Bug. And she's the creative genius behind the curtain of Underscore.
If you missed Underscore + Creighton University’s Innovation Festival presentation earlier this year (or have some more questions about making your portal dreams a reality), you’re going to want to keep reading. Implementation Slate strategist Emma Hayek shares her tips on how to improve the student experience through dynamic Slate portals.