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.
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.
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.
Take advantage of resources for captioning, distance ed, and more from Chancellor’s Office: www.toolsthatinspire.com