Digital Accessibility

Creating accessible content is ultimately about honoring how individuals experience the world regardless of ability.  When designing digital spaces, we have to ensure the design and functionality of the communication - whether its a social media post, newsletter, or email - reaches its audience, regardless of how they perceive it.

Making Visuals Readable

For visual content, readability starts with the basics: strong color contrast between text and background ensures that words don't get lost in the noise.

Equally important is keeping text off images whenever possible. Words embedded directly into a graphic present two major hurdles: Scaling Issues and Screen Reader Blind Spots:

Scaling Issues

Unlike standard body text, embedded text doesn't adjust to different screen sizes, often rendering it microscopic on mobile devices.

Screen Reader Blind Spots

Assistive software sees an image as a single picture, leaving visually impaired users completely unable to access the message inside.

The solution is straightforward: keep image text minimal and place the bulk of your messaging directly into the body of an email, presentation, or social media post. For the visual itself, alternative text, commonly referred to as "alt text," provides concise descriptions that capture the content and meaning of photos, diagrams, and/or icons.

Connecting Sound and Sight in Video

When it comes to video, accessibility requires a two-way translation: Captions and Video Descriptions:

Captions

Every spoken word needs to be converted into visible, on-screen text. Because platforms like Instagram and TikTok do not always support native closed captions such as YouTube. For program that do not have closed captioning available, burning captions directly onto video content ensures no message is muted.

Video Descriptions

Auditory content isn't the only thing that needs translating. Any vital visual details—actions, setting changes, or text on screen—that aren't mentioned in the spoken audio should be captured in a clear video description. By aligning what we see with what we hear, digital content becomes a more navigatable and welcoming space for everyone.

Under the Web Content Accessibility Guidelines (WCAG) and ADA compliance standards, operability requires that every interface element—from basic navigation to forms —must be fully usable regardless of how a person interacts with the digital space.

When users interact with online forms, friction often turns into a complete barrier. Achieving operability in form design begins by keeping inputs simple, short, and strictly focused on essential data, minimizing the physical and cognitive effort needed to complete an action. Furthermore, technical operability depends on defining specific, unique input types for every field—such as email, telephone, or date—which allows users to execute native browser validation and assist screen readers in declaring the exact type of data required.

Navigating a website demands the same level of clear feedback and mechanical ease. Interactive elements like navigation items and dropdown menus must display unmistakable, high-contrast visual focus indicators as users tab through a page, ensuring that keyboard-only users never lose track of their position. Finally, all web pages must feature generous, clear target areas with ample surrounding space, making interactive controls easy to activate on the first attempt without requiring hyper-precise cursor control or risking accidental misclicks.

Digital content and interfaces must be clear, predictable, and easy to comprehend. It is not enough for content to be visible or interactive.   Users must be able to consume the information presented and grasp how to operate the interface without encountering ambiguous phrasing or chaotic layouts. Achieving this begins with using clear, plain language that avoids unnecessary jargon or acronyms.  When industry terms or acronyms are necessary, they should be fully spelled out on their first use to ensure all users—including those with cognitive disabilities or non-native language speakers—can fully digest the material.

This clarity extends directly to descriptive link text. Vague phrases like "click here" or "read more" fail to communicate context, particularly for screen reader users who frequently navigate pages by extracting a standalone list of links. Links must feature explicit, meaningful text—such as "To learn more, visit the Portrait of a Graduate Informational Page"—where the hyperlink clearly identifies its exact destination or purpose. Hyperlinking the descriptive phrasing also provides easy-to-select context.

Finally, logical structural organization is essential for making complex digital pages understandable and navigable. Digital content requires strict, semantic hierarchy to convey how ideas relate to one another. Utilizing proper sequential heading structures (H1, H2, H3) allows users to scan and mentally map the page, while screen readers rely on these tags to construct an accurate outline for quick navigation. Similarly, tabular data must use explicit table structures—distinguishing structural Table Headers (<th>) from Table Data (<td>)—so users can easily track relationships between data points rather than getting lost in an unstructured grid of text.

Being "robust" requires digital content to remain fully functional, stable, and reliable across an ever-evolving ecosystem of platforms, operating systems, and assistive technologies. This principle demands that digital experiences perform seamlessly across fundamental hardware and operating systems, such as macOS versus Windows PC. 

Similarly, robustness provides adaptability between web browsers and native mobile applications. Mobile environments introduce variables, including responsive viewports, touch-based screen readers, dynamic orientation changes, and varied system font scaling settings. Robust digital design ensures that whether a user visits a responsive web page on a desktop screen or opens a dedicated native mobile app on a smartphone, the underlying architecture, interactive components, and programmatic markup adapt fluidly—preserving full compliance, readability, and operational integrity across every environment.

Adding Alt Text To Images On X

• On “X” (formerly Twitter), when you add a photo (whether on a post or scheduled) you can select either:
• “Edit” (top left corner) or “Add Description” below photo
• Type in your Alt text and press “save”

Adding Alt Text To Images On Facebook

• On Facebook, when you add a photo (whether on a post or scheduled):
• Select “Edit” in the top left corner and enter your alt text

Additional Social Media Accessibility Resources

• Accessibility on X
• Accessibility on Facebook
• Accessibility on Instagram
• Accessibility on LinkedIn

Maintaining strong color contrast is essential for ensuring your documents and presentations are accessible to everyone, including individuals with low vision or color blindness. Sufficient contrast allows text and key visual elements to stand out clearly against their background, making content effortless to read.

When designing materials, you can verify your color choices using WebAIM's free, online Contrast Checker. Simply enter the six-digit hex code—the specific code for your foreground and background colors—to identify see if your design meets standard accessibility guidelines. Taking this quick step ensures your message is clear and readable for every member of your audience.

WCAG 2.1 AA guidelines require a contrast ratio of 4:5:1.

When it comes to links, the text you use needs to convey where the link will take the user. Avoid generic phrases like "Click here," as they offer no context when read out of context by a screen reader. Instead, integrate the link naturally into descriptive words or highlight the whole sentence. For example, instead of saying "Click here to read more," write a self-explanatory sentence such as: "To learn more, visit the Portrait of a Graduate Informational Page."

Gmail does not have a built in accessibility checker. To add “alt text” to a digital signature:

• Copy/paste or import the image into a Google Document
• To add alt text to images, click the  “Image Options” from the menu bar (See Google Docs below)
• Click “Alt text”
• Type in the associated alt text
• Copy and paste the photo into your digital Gmail signature
   

• Name your document
• You can designate Titles, subtitles, and headers from the menu bar
  • The highlights in the image below show where the task bar indicates which document structure you are using
    • Title
    • Subtitle
    • Header 1, Header 2, Header 2 
    • Normal text

• To add alt text to images, click the  “Image Options” from the menu bar
  • Click “Alt text”
    • Type in the associated alt text

• Once you've edited your Google Google Doc, you can download it as a Microsoft Word document or PDF.  The District recommends running the Accessibility Checker in those programs to ensure features remain accessible.
• To create tables in Google Docs, please review this guide by the Stanford University’s Office of Accessibility.  

• Name your document
• Structured vs. Unstructured document
  • Headings and information are established in templates and layout
• If adding photos/graphics, click the image/dialogue box
  • Click “Alt text”
    • Type in associated alt text

• Once you've edited your Google Slides presentation, you can download it as a PowerPoint presentation or PDF.  The District recommends running the Accessibility Checker in those programs to ensure features remain accessible.

• Name your document
• Name the associated sheets if adding more than one sheet to database
• Row 1 should designate column headings
• Avoid merging cells

Once you've edited your Google Slides presentation, you can download it as a PowerPoint presentation or PDF.  The District recommends running the Accessibility Checker in those programs to ensure features remain accessible.

• In the presentation or design (flyer, etc) click “File”
  • Click "Accessibility" and then select “check design accessibility”
    • Canva will highlight typography (readability)
    • Color contrast
    • And any alt text issues that need to be remediated

• Top navigation bar → Review menu → Check Accessibility
  • Check Accessibility
  • Alt Text

• Structured vs. Unstructured document
  • Headings and information that aid a screen reader
  • Designate appropriate titles
  • Designate appropriate headings
  • Add alt text to images in document
    • Designate if it is a “decorative figure”

• If creating tables in Microsoft Word, please review the best practices and guide from Microsoft.

• Structured vs. Unstructured document
  • Headings and information are established in templates
• Top navigation bar → Review menu → Check Accessibility
  • Check Accessibility
  • Alt Text

• Images
  • Double click the and select “Alt Text” on the toolbar
    • Type in the ALT text description or designate as a “decorative figure”

• Name your document
• Name the associated sheets if adding more than one sheet to database
• Row 1 should designate column headings
• Avoid merging cells

Please also review the best practices and guide from Microsoft regarding Excel.

• If you are scanning documents and uploading them, they are not ADA compliant
  • Screen readers cannot read the text on a scanned document
• If you’re exporting your document, presentation, or sheet as a PDF, it is best to use the ADA Accessibility Checker BEFORE exporting or using the “save as” function to convert to a PDF
• It is important for flyers and documents built in Adobe programs such as inDesign or Photoshop to have the appropriate headers, titles, and tags prior to exporting
• Inside a PDF, go to the search bar and type in “Accessibility” and the option to select the "Accessibility Check”
  • Click “Start Checking”

• The side panel will populate with the elements of the PDF and what needs to be remediated
  • Some of these will require a manual check and change, like a title or alternate text

• WCAG 2.1 AA Checklist
• Screen Reader Demo