Digital Accessibility for ALEC

Melissa Waller, Director of Web Development, College of ACES

University of Illinois graduate in graphic design.

Self-taught web developer.

Currently designing, developing, and testing the new Illinois campus web themes.

Slides, Notes, and Examples

Accessibility (a11y) showing the 11 stands for the 11 characters in the word between "a" and "y"

What is digital accessibility and who needs it?

Digital accessibility is the practice of making sure that websites, applications, files, and digital tools are designed and built in such a way that they can be used by people of all abilities.

This includes people with physical, visual, auditory, and cognitive impairments, and people with learning disabilities.

Accessibility graphic of cognitive situations including dylexia, flu or intoxication.
digital accessibility graphic showing a state of permanence for each of the senses - touch, see, hear, and speak

Importance of Digital Accessibility

  1. Accessibility is a legal requirement: In the United States, digital accessibility is mandated by law under the Americans with Disabilities Act (ADA). This means that websites, online resources, and other digital content must be accessible to people with disabilities, including those with visual, auditory, or mobility impairments. This requirement applies to all industries and sectors, and it is a responsibility that falls on everyone who creates and shares digital content. The university is required to pass Web Content Accessibility Guidelines (WCAG) 2.1 AA standards.
  2. Accessibility is a social responsibility: Beyond legal requirements, digital accessibility is a social responsibility. By making digital content accessible, we can ensure that people with disabilities have equal access to information, services, and opportunities. This can help to reduce discrimination, promote inclusion, and create a more equitable society.
  3. Accessibility can impact job opportunities: Who wants to make more money? Employers increasingly value digital accessibility skills when hiring communicators, designers, content creators, web developers, and other digital professionals. Those who understand digital accessibility and have experience creating accessible content will have a competitive advantage in the job market. Additionally, employers may be more likely to hire candidates who demonstrate a commitment to accessibility and social responsibility.
  4. Accessibility can improve the user experience for everyone: Creating accessible digital content not only benefits people with disabilities but also improves the user experience for everyone. For example, accessible websites are often easier to navigate, faster to load, and more consistent across different devices and platforms. By designing with accessibility in mind, students can create better products that meet the needs of a diverse range of users.

Consuming Digital Media

  1. Text: Read it to yourself.
    It can also be accessed through text-to-speech software or other assistive technologies that read to you.
  2. Audio: Listen to it.
    It can also be accessed through text-to-speech software or other assistive technologies. Can’t hear? Turn on closed captioning and read it.
  3. Video: Watch it.
    Can’t hear it or see it? It can also be accessed through closed captioning or other assistive technologies.
  4. Images: Look at them.
    Can’t see well? Use image alternative text, recognition software, or other assistive technologies.

Print vs. Digital

Is there a difference anymore? Not much in my opinion.

Most of what we create today gets transmitted electronically via email or put online in some fashion instead of printed only. We need to design and create documents in the same fashion we do on web pages as well as traditional files such as Microsoft Word. We need to make sure our pdfs are accessible. It’s not just kind. It’s the right thing to do.

How does this affect YOU?

  • Websites
  • Social Media
  • Presentations
  • PDFs
  • Portfolio
  • Resume
  • Emails

Quick Agenda

Topics to be covered today:

  • Information structure – hierarchy and semantic content
  • Legible and quickly scannable content
  • Alternative text for images/charts/graphs, etc
  • Captions and transcripts
  • Color contrast
  • Testing for accessibility

Information Structure

Use Semantic Structure

The semantic structure provides a clear framework for your documents, making it easier for users with assistive technologies, such as screen readers, to navigate and understand the content. Word and Acrobat offer accessibility checker tools, and most CMS and email-creating platforms will have the “heading 1″ styles built-in

Hierarchy

The hierarchy should be established through the use of headings, subheadings, and other organizational elements. Think of your documents like an outline for an essay. Heading 1 (H1) should be the page title and there is only one on a page. The next level down would be the H2s. Under those headings, you would use H3, etc… Be consistent. Write clear headings to convey the meaning and structure of the content.

One h1 heading with several h2s and h3 creating subsections. One subsection’s heading is ”(h3) Sapphire Eyes” which has a subsection “(h4) How they are made”. The next heading is an h2, indicating that the (h4) and (h3) subsections are both closed now.

Attention?

Attention span is 8.25 seconds on average.

2 seconds in a video to get anyone’s attention.

Nobody reads anymore.
We scan content.

Make use of bulleted lists and shorter content online.

Keep it simple.

Most web content is written at an 8th-grade level.

Links

Links – write helpful links. Pretend someone is reading this to you and you can’t see it? Does it make sense?

  • Put key words at the beginning of the link phrase.
  • Search your page for “Click Here” – You shouldn’t find it. Please reword your link.
  • Spell out email addresses, students will need to copy and paste them.
  • Use links with your text, don’t spell out the URL in your text unless you are trying to get the users to memorize the short url or specifically see the link they need.

Alternative Text

Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. It is read aloud to users by screen reader software, and it is indexed by search engines. It also displays on the page if the image fails to load.

  • Add alt text to all non-decorative images. Leave alt text blank if the image is purely decorative.
  • Keep it short and descriptive, like a tweet.
  • Don’t include “image of” or “photo of”.
  • Your description should match the context. Be detailed if necessary.
  • Hide or remove your image and read the alt text to see if it fits.

Alt-text with no context:

A mostly empty stadium.

Alt-text on a page about recent turnout for track tryouts:

Harvard Stadium with two lone runners bounding up the steps.

Alt-text on page about renovation projects:

Harvard Stadium with cracked concrete pillars.

Captions and Transcripts

Captions and transcripts allow people with hearing impairments or other disabilities to access and understand the audio content in videos or other multimedia. Captions provide a short text version of the audio, while transcripts provide the full words of the content. Captions and transcripts can also help people with cognitive disabilities or who are non-native speakers of the language of the video to understand the audio content more easily.

This is the most critical piece of this talk today.

Did you get the most critical piece of this talk? Could you read the heading? Why not?

Remove your glasses if you have them on. Put your sunglasses on.

Maybe this is the most critical piece of this talk today?

Did you get the most critical piece of this talk? Could you read the heading? Why not?

Wait…this is how you should show the most critical piece of this talk today.

Now you can read it with more color contrast.

TIP: squint at your page. If you have any issues seeing the contrast, it’s not enough.
Use an accessibility color contrast checker to verify.

Color Contrast Testing

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. (Currently, UIUC doesn’t follow AAA.)

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Normal text is anything less than.

Screenshot of the WCAG website color contrast checker using illini orange on white background.

What does this all mean?

We can only use Illini Orange text for larger headings on a white background for all media.

Large Text:

  • If bold: they need to be bold text at least 19px or 14 points depending on your font size selection.
  • Not bold: at least 24px or 18 points depending on your font size selection.
  • Contrast ratio of at least 3:1 for large text.

Normal Text:

  • If bold: smaller than 19px or 14 points depending on your font size selection.
  • Not bold: smaller than 24px or 18 points depending on your font size selection.
  • Contrast ratio of at least 4.5:1 for normal text.

Check out the XD themes document for the Illinois branded web theme style guide. Take a look at orange. We actually use multiple shades of orange to pass accessibility on different background colors at different sizes.

Design document for developers showing the sizing and colors for all of our Illinois themes.

Your Resume

Don’t use white text on orange.
Don’t use light gray text on any light color 😉

Don’t use fancy fonts that are hard to read – Use the squint test.

Don’t use text going up the page or down. Use the traditional left to right if applicable. Be consistent.
Keep the text short and scannable. Readers don’t want to read blocks of text.

Tables and Graphs

Color contrast for accessibility is required here too!

Portfolio Tips

  1. Designing for yourself is the hardest!
  2. Ask your friends to describe you.
  3. Tell a story about you, not just your skills and work examples.
  4. Have your friends or family read through your site and see if it makes sense to them. You have to think all types of people may be looking at your site as you interview. They may not know the subject matter or what is best.
  5. Look at your portfolio – mobile first. You don’t know how someone is viewing it. In an Uber on the way to a meeting? At their desk? Think about all viewing sizes and screens.
  6. Think about people with disabilities – temporary or permanant. How will they be able to consume your content?
  7. Not a great example: a UX portfolio sample.
  8. Don’t let perfect be the enemy of done! Get started.

My Tips

  1. Be curious. Ask questions!
  2. Squint for a quick test.
  3. Pretend you are explaining it to your grandma.
  4. Be consistent. (many times, it has more impact on a user than being right)

Lasting Impression

Accessibility makes it better for EVERYONE!

Slides, Notes, and Examples