Accessible Technology

Quick Guide: Universal Design for All

 

Below are common elements to fix and tools to help you make sure your webpages are accessible.

Common Elements to Fix

  • Alt Text: Every image needs a text alternative (alt text) that provides an equivalent to the image content. You can do this using Insert > Alt Text.
    Example: Photography Department includes alt text and a comment description.

  • Clearly Structured Content: Your webpages need to be organized using headings and lists found under the Paragraph and Styles sections. Use Paragraph, Heading 2, and Heading 3. This is a great opportunity to update your webpages and restructure your navigation.
    Example: SMC in the Community

  • Ensure Links Make Sense out of Context: Using links like "click here" or "learn more," are confusing for screen reading technology, as they provide no context. Ensure all links identify what content is provided when clicked.
    Example: Transfer Counseling and Services

  • Color Blind-Friendly Colors: Make sure the contrast of text and background colors are high enough. Use the Styles section and you’ll be good to go! 
    Example: Success and Engagement Center – buttons, headings, and box colors are accessible.

  • Provide Video Captions and Transcripts: While this is perhaps the most cumbersome process of them all, it is essential for ADA compliant content. However, this shouldn't hold back a website launch as you can simply not post a video on your website until it is captioned and transcribed.
    Example: Proud to be SMC 💙 

  • Make All PDFs Accessible or Ditch Them: PDF tags provide a hidden structured, textual representation of the PDF content that is presented to screen readers. They exist for accessibility purposes only and have no visible effect on the PDF file. Non-compliant PDFs are removed if it is not accessible after a 10-day notice.
    Example: Payroll Schedules – first 3 bullets. If possible, avoid PDFs and turn them into webpages.

  • Designate Documents: When linking to a PDF, Word document, or PowerPoint, make sure you make note of it with an icon (Insert > Link > Display icon) or with text like “2017-18 Annual Report (PDF)”.
    Example: Trustee Meetings

  • Label Tables: Need to add headings for columns and rows. Example: TPC Meetings.
    If possible, avoid tables for accessibility and for mobile-friendly design and use headings and bulleted lists instead.
    Example: Extended Hours.

Tools

Federal Standards and Guidelines

Because the SMC website is a public, government communications platform, carefully review federal standards and guidelines below on how to ensure a positive, accessible user experience for students and staff.

Free Assistance

Take advantage of resources for captioning, distance ed, and more from Chancellor’s Office: www.toolsthatinspire.com

Contact