Accessibility Home: Difference between revisions

Revision as of 20:35, 12 June 2026

At our institutional core is the desire to contribute to the creation of a world that is just, humane, and sustainable.

Incorporating accessibility considerations in all aspects of what we do at Swarthmore is part of how we make our aspirations a reality.

We incorporate thinking about accessibility throughout our work and in the documentation of tools available to the Swarthmore College community. This section of our KnowledgeBase (KB) focuses on some of the fundamental principles and how-to's. You will find other accessibility tips and information in most of our other documentation as well.

Some examples include:

Getting Started with Accessibility

New to accessibility at Swarthmore? Start here for key concepts and Swarthmore-specific guidance.

Document Accessibility

Create Word documents, PDFs, and other files that work for everyone, including people who use screen readers.

Images & Visual Content

Make sure images and visual materials convey their meaning to all users, including those who can't see them.

Video & Media Accessibility

Add captions and transcripts to videos so all users can access your content, including recordings of classes and meetings.

Web & Digital Accessibility

Ensure that web pages, course materials, and other digital content meet accessibility standards.

Assistive Technology & Device Settings

Learn about screen readers, keyboard navigation, and built-in accessibility features on your devices.

Microsoft Office Accessibility

Step-by-step guidance for making Office files accessible using Microsoft's built-in tools.

Links to Other Resources

External tools and Swarthmore-specific resources to support your accessibility work.

@@ Line 17: / Line 17: @@
 <hr aria-hidden="true" style="margin: 1.75em .25em 2em 0.25;"/>
+<!-- add the grid class -->
-<div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;">
+<div class="wik-card-grid-2-col" style="display: grid; grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin: 1em 0;">
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card2" style="
+background-color: rgba(132, 1, 14, 0.08);
+    border: 2px solid #990000;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    margin: 1em 0;
+    >
 == Getting Started with Accessibility ==
 ''New to accessibility at Swarthmore? Start here for key concepts
@@ Line 28: / Line 41: @@
 * [[I have a Mac, do I have the right version of Office to use the Accessibility Checker?]]
 </div>
-<div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;">
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card" style="background-color: rgba(132, 1, 14, 0.08);
+    border: 2px solid #990000;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    >
 == Document Accessibility ==
 ''Create Word documents, PDFs, and other files that work for everyone,
@@ Line 42: / Line 63: @@
 * [[Google Docs: Changing The Look of Headings and Paragraphs]]
 </div>
-<div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;">
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card" style="background-color: rgba(132, 1, 14, 0.08);
+    border: 2px solid #990000;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    >
 == Images & Visual Content ==
 ''Make sure images and visual materials convey their meaning
@@ Line 49: / Line 78: @@
 * [[Guidelines for creating accessible digital signage]]
 </div>
-<div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;">
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card" style="background-color: rgba(132, 1, 14, 0.08);
+    border: 2px solid #990000;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    >
 == Video & Media Accessibility ==
 ''Add captions and transcripts to videos so all users can access
@@ Line 59: / Line 96: @@
 * [[Live Captions and Transcripts on Personal Devices]]
 </div>
-<div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;">
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card" style="background-color: rgba(132, 1, 14, 0.08);
+    border: 2px solid #990000;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    >
 == Web & Digital Accessibility ==
 ''Ensure that web pages, course materials, and other digital content
@@ Line 68: / Line 113: @@
 * [[Accessibility and Online Teaching]]
 </div>
-<div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;">
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card2" style="
+background-color: rgba(132, 1, 14, 0.08);
+    border: 2px solid #990000;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    margin: 1em 0;
+    >
 == Assistive Technology & Device Settings ==
 ''Learn about screen readers, keyboard navigation, and built-in
@@ Line 78: / Line 133: @@
 * [[Accessibility Filescan]]
 </div>
-<div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;">
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card2" style="
+background-color: rgba(132, 1, 14, 0.08);
+    border: 2px solid #990000;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    margin: 1em 0;
+    >
 == Microsoft Office Accessibility ==
 ''Step-by-step guidance for making Office files accessible
@@ Line 88: / Line 153: @@
 * [[Using Word's Style Gallery to Create Structure in Your Document]]
 </div>
+<!-- hide the original and add the wiki-card class <div style="background-color:#f9f6f0; border-left:3px solid #990000; padding:0px 1.0em ; margin-top:28px; margin-bottom:1.75em;"> -->
+<div class="wik-card2" style="
+;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;"
+    margin: 1em 0;
+    >
 == Links to Other Resources ==
 ''External tools and Swarthmore-specific resources to support
@@ Line 96: / Line 172: @@
 * [https://blogs.swarthmore.edu/its/2026/01/15/you-too-can-create-better-alt-text/ Gem Alt Text Tool]
+<!--close the card grid --></div>
 [[Category:Accessibility]]