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.
Importance of Digital Accessibility
- 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.
- 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.
- 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.
- 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
- Text: Read it to yourself.
It can also be accessed through text-to-speech software or other assistive technologies that read to you.
- 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.
- Video: Watch it.
Can’t hear it or see it? It can also be accessed through closed captioning or other assistive technologies.
- 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 in my opinion.
Most of what we create today gets transmitted electronically via email or put online in some fashion. We need to create all design documents the same as Microsoft Word documents and web pages. We need to make sure our pdfs are accessible.
How does this affect YOU?
- Social Media
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
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
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.
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 – 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 (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.
What does this all mean?
We can only use Illini Orange text for larger headings on a white background for all media.
- 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.
- 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.
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!
Testing and Links
- Colour Contrast Checker – Chrome extension
- High Contrast – Chrome extension
- University of Illinois Website Accessibility
- Web Content Accessibility Guidelines (WCAG) Quick Reference Guide
- WCAG Color Contrast Checker – Chrome extension
- Web Accessibility Evaluation Tool (WAVE), Chrome extension
- Web Accessibility in Mind – Color Contrast Checker, Link contrast checker
- A11y Project: Checklist
- Functional Accessibility Evaluator (FAE)
- Lighthouse – chrome extension
- AInspector WCAG | Mozilla Add-ons
- Accessibility Bookmarklets
- Speechify – chrome extension
- Be curious. Ask questions!
- Squint for a quick test.
- Pretend you are explaining it to your grandma.
- Be consistent. (many times, it has more impact on a user than being right)