"Fast Five" Essentials to Preparing Materials: Difference between revisions
No edit summary |
Some content wasn't inside expanders that should have been. Also edited/cleaned up some cards. |
||
| (10 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
Swarthmore employees and students can take advantage of these tools in order to create materials that all can use to work and learn with confidence. | |||
== In-program Styles == | == In-program Styles == | ||
<div class="mw-collapsible mw-collapsed"> | <div class="mw-collapsible mw-collapsed"> | ||
'''Use in-program styles to create structure''' | '''Use in-program styles to create structure''' | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Using appropriate headings in the appropriate order in your current program is necessary. They add structure and create consistency in documents and allow screen readers to easily—audibly—scan the information. Additionally, authors can easily create such things as a [https://support.microsoft.com/en-us/office/insert-a-table-of-contents-882e8564-0edb-435e-84b5-1d8552ccf0c0 Table of Contents] or [https://support.microsoft.com/en-us/office/use-the-navigation-pane-in-word-394787be-bca7-459b-894e-3f8511515e55 view an Outline]. | |||
{{Card | |||
| variant = warning | |||
| title = Title or Subtitle | |||
| content = It is an extremely rare instance that you will use the styles "Title" or "Subtitle" found in the Styles Gallery. If you have questions, please reach out to accessibility@swarthmore.edu. | |||
}} | |||
=== Apple === | === Apple === | ||
| Line 22: | Line 21: | ||
* [https://support.google.com/docs/answer/116338?hl=en-GB&ref_topic=1361461 Docs] | * [https://support.google.com/docs/answer/116338?hl=en-GB&ref_topic=1361461 Docs] | ||
** Our KB article: [[ | ** Our KB article: [[Change the Look of Headings and Paragraphs in Google Docs]] | ||
** Google's Support page: [https://support.google.com/docs/answer/116338?hl=en&ref_topic=1361461 Add a title, heading, or table of contents to a document] | ** Google's Support page: [https://support.google.com/docs/answer/116338?hl=en&ref_topic=1361461 Add a title, heading, or table of contents to a document] | ||
| Line 31: | Line 30: | ||
=== HTML === | === HTML === | ||
In HTML, titles should exist within the <code><title></code> tag. There should only be one, and it should also be somehow related—and maybe even exactly the same—as the <code><h1></code> | In HTML, titles should exist within the <code><title></code> tag. There should only be one, and it should also be somehow related—and maybe even exactly the same—as the <code><nowiki><h1></nowiki></code> Use headings to establish structure. | ||
[[Best Practices: Webpage Creation]] | |||
=== LaTeX === | === LaTeX === | ||
| Line 51: | Line 50: | ||
=== Markdown === | === Markdown === | ||
In '''Markdown''', your title exists after a singular hashtag, <code># Title</code>. Hashtags give markdown structure. The relationship between Markdown and HTML shows us that <code><h1></code> and <code><title></code> are often the similar or the same. | In '''Markdown''', your title exists after a singular hashtag, <code># Title</code>. Hashtags give markdown structure. The relationship between Markdown and HTML shows us that <code><nowiki><h1></nowiki></code> and <code><title></code> are often the similar or the same. | ||
* [https://www.smashingmagazine.com/2021/09/improving-accessibility-of-markdown/ Improving the accessibility of your markdown | Smashing Magazine] | * [https://www.smashingmagazine.com/2021/09/improving-accessibility-of-markdown/ Improving the accessibility of your markdown | Smashing Magazine] | ||
* [https://bookdown.org/yihui/rmarkdown-cookbook/html-accessibility.html 7.14 Improve accessibility of HTML pages | R Markdown Cookbook] | * [https://bookdown.org/yihui/rmarkdown-cookbook/html-accessibility.html 7.14 Improve accessibility of HTML pages | R Markdown Cookbook] | ||
{{Card | |||
{{Card|variant= | | variant = info | ||
| title = HTML, LaTeX, and Markdown to PDF | |||
It is not accessible to move .tex, .mdz, and .html files to PDF. If you give folks the source document, they can render or convert it to whatever preferred file | | content = It is not accessible to move .tex, .mdz, and .html files to PDF. If you give folks the source document, they can render or convert it to whatever preferred file format they'd like to read from. | ||
}} | |||
=== Microsoft === | === Microsoft === | ||
| Line 65: | Line 63: | ||
* [https://support.microsoft.com/en-us/office/make-your-powerpoint-presentations-accessible-to-people-with-disabilities-6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25 PowerPoint] | * [https://support.microsoft.com/en-us/office/make-your-powerpoint-presentations-accessible-to-people-with-disabilities-6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25 PowerPoint] | ||
* Word | * Word | ||
** Our KB article: [[Using Word's Style Gallery to Create Structure in Your Document|Using Word's Style Gallery to Create Structure in Your Document]] | ** Our KB article: [[Using Word's Style Gallery to Create Structure in Your Document|Using Word's Style Gallery to Create Structure in Your Document]] | ||
** Microsoft's Support page: [https://support.microsoft.com/en-us/office/make-your-word-documents-accessible-to-people-with-disabilities-d9bf3683-87ac-47ea-b91a-78dcacb3c66d Make your Word documents accessible to people with disabilities] | ** Microsoft's Support page: [https://support.microsoft.com/en-us/office/make-your-word-documents-accessible-to-people-with-disabilities-d9bf3683-87ac-47ea-b91a-78dcacb3c66d Make your Word documents accessible to people with disabilities] | ||
** Our KB article: [[Using Word's Properties to flow into a more accessible PDF|Using Word's Properties to flow into a more accessible PDF]] | ** Our KB article: [[Using Word's Properties to flow into a more accessible PDF|Using Word's Properties to flow into a more accessible PDF]] | ||
=== Moodle === | === Moodle === | ||
| Line 77: | Line 75: | ||
==== [https://docs.moodle.org/402/en/TinyMCE_editor TinyMCE Editor] ==== | ==== [https://docs.moodle.org/402/en/TinyMCE_editor TinyMCE Editor] ==== | ||
{{Card | |||
| variant = warning | |||
| title = Heading 1 | |||
| content = Heading 1 should only be used once in a document or webpage. | |||
Heading 1 may have the same text as the document or webpage's metadata title. | |||
}} | |||
[https://youtu.be/0xAv1l04aJI?si=zDevmiYLH1okRUaz <nowiki>Screen Reader Demo With Headings [YouTube]</nowiki>] | |||
</div> | |||
</div> | |||
== Convey Meaning with Words == | == Convey Meaning with Words == | ||
<div class="mw-collapsible mw-collapsed"> | <div class="mw-collapsible mw-collapsed"> | ||
'''How to use words to convey meaning | '''How to use words to convey meaning''' | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
=== Links === | === Links === | ||
| Line 113: | Line 109: | ||
When using color, always consider the contrast between the background and the text. Use [https://webaim.org/resources/contrastchecker/ WebAIM's Contrast Checker] or [https://www.siegemedia.com/contrast-ratio Lea Verou's Contrast Ratio Checker] to ensure all users who have sight can see the information. | When using color, always consider the contrast between the background and the text. Use [https://webaim.org/resources/contrastchecker/ WebAIM's Contrast Checker] or [https://www.siegemedia.com/contrast-ratio Lea Verou's Contrast Ratio Checker] to ensure all users who have sight can see the information. | ||
=== Alt | === Alt Text, Captions, Image Descriptions, etc. === | ||
When someone is accessing material with a screen reader, they may not see an image. They will not know the content of an image unless there is some sort of descriptive text in the form of alternative text (commonly referred to as "alt | When someone is accessing material with a screen reader, they may not see an image. They will not know the content of an image unless there is some sort of descriptive text in the form of alternative text (commonly referred to as "alt text"), a caption, an image description, or other form of text that their screen reader has access to. Providing this is necessary for all users to understand the meaning of the material and why an image is being included. | ||
A best practice is to include a description somewhere in the text so that everyone can see it. This can be very difficult to do. Below are a few resources we have found to be useful: | A best practice is to include a description somewhere in the text so that everyone can see it. This can be very difficult to do. Below are a few resources we have found to be useful: | ||
| Line 145: | Line 141: | ||
=== Google === | === Google === | ||
[https://bit.ly/GoogleAccessibilityChecker Install and run Grackle] for each program (Docs, Sheets, Slides, etc) | * [https://bit.ly/GoogleAccessibilityChecker Install and run Grackle] for each program (Docs, Sheets, Slides, etc.) | ||
=== LibreOffice === | === LibreOffice === | ||
'''Tools | * Go to '''Tools → Accessibility Check'''. | ||
=== [[Use Microsoft's Accessibility Checkers|Microsoft Office: How to use Accessibility Review KB article]] === | === [[Use Microsoft's Accessibility Checkers|Microsoft Office: How to use Accessibility Review KB article]] === | ||
'''Review | * Go to '''Review → Check Accessibility'''. | ||
=== '''Moodle''' === | === '''Moodle''' === | ||
| Line 171: | Line 167: | ||
<div class="mw-collapsible mw-collapsed"> | <div class="mw-collapsible mw-collapsed"> | ||
'''Ensure all | '''Ensure all videos have captions and transcripts. Ensure all audio has transcripts''' | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
=== [https://support.google.com/docs/answer/9109474?hl=en Google Slides] === | === [https://support.google.com/docs/answer/9109474?hl=en Google Slides] === | ||
| Line 179: | Line 175: | ||
Please see our article on [[Microsoft Office 365|installing and accessing Microsoft Office 365]] if you have questions about the program itself. | Please see our article on [[Microsoft Office 365|installing and accessing Microsoft Office 365]] if you have questions about the program itself. | ||
=== [[ | === [[Captioning Videos in Panopto|Panopto]] === | ||
=== [[Auto-Captioning Video in YouTube|YouTube]] === | === [[Auto-Captioning Video in YouTube|YouTube]] === | ||
| Line 188: | Line 184: | ||
== Setting a Language == | == Setting a Language == | ||
<div class="mw-collapsible mw-collapsed"> | |||
'''Setting your document or content language is an important indicator to all users''' | |||
<div class="mw-collapsible-content"> | |||
Many programs in most operating systems (OS) follow the overall system settings for language. To view your system's settings: | Many programs in most operating systems (OS) follow the overall system settings for language. To view your system's settings: | ||
* MacOS: [https://support.apple.com/guide/mac-help/change-the-system-language-mh26684/mac Change the language your Mac uses] | * MacOS: [https://support.apple.com/guide/mac-help/change-the-system-language-mh26684/mac Change the language your Mac uses] | ||
* Windows: [https://support.microsoft.com/en-us/windows/manage-the-input-and-display-language-settings-in-windows-12a10cb4-8626-9b77-0ccb-5013e0c7c7a2 Manage the input and display language settings in Windows] | * Windows: [https://support.microsoft.com/en-us/windows/manage-the-input-and-display-language-settings-in-windows-12a10cb4-8626-9b77-0ccb-5013e0c7c7a2 Manage the input and display language settings in Windows] | ||
=== Apple Pages === | === Apple Pages === | ||
| Line 202: | Line 196: | ||
# Select '''Advanced'''. | # Select '''Advanced'''. | ||
# Choose the''' Language & Region'''. | # Choose the''' Language & Region'''. | ||
# In the dialog box that appears, first choose''' Language''' | # In the dialog box that appears, first choose''' Language'''. | ||
# | ## '''Important Note: '''According to the Apple support page on [https://support.apple.com/guide/pages/format-a-document-for-another-language-tan2a7f8e5ce/mac#:~:text=Change%20a%20document's%20language%20and%20formatting&text=Choose%20File%20%3E%20Advanced%20%3E%20Language%20%26,a%20language%20and%20a%20region. <u>Change a document’s language and formatting</u>], changing the language of a document may reset the language and region of your computer. However, we have not experienced this. If you do discover this has happened, go to: | ||
# | ### System Settings, | ||
# | ### Search for Language & Region, | ||
# | ### Change to your preferred language, | ||
# | ### and ensure it is set as the Primary. | ||
# | # Choose''' Region'''. | ||
# Choose''' Okay'''. | # Choose''' Okay'''. | ||
=== Adobe Acrobat === | === Adobe Acrobat === | ||
# Navigate to [https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html#fix_accessibility_issues '''Fix accessibility issues (Acrobat Pro)'''] | # Navigate to [https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html#fix_accessibility_issues '''Fix accessibility issues (Acrobat Pro)''']. | ||
# Scroll down to '''Document Language '''or use '''Ctrl+ | # Scroll down to '''Document Language '''or use '''Ctrl+F''' to find "Document Language." | ||
# Follow the instructions to set document-wide language or the language of a part of a document, if it's different from the overall language of the document. | # Follow the instructions to set document-wide language or the language of a part of a document, if it's different from the overall language of the document. | ||
| Line 232: | Line 226: | ||
== Additional Resources == | == Additional Resources == | ||
* https://blogs.swarthmore.edu/its/2025/08/20/introducing-an-accessible-syllabus-template/ | * [https://blogs.swarthmore.edu/its/2025/08/20/introducing-an-accessible-syllabus-template/ Styling in Word: Introducing an accessible syllabus template | Swarthmore ITS Blog] | ||
* [https://webaim.org/blog/word-and-powerpoint-alt-text-roundup/ WebAIM article on Microsoft’s built-in alt text generator] | * [https://webaim.org/blog/word-and-powerpoint-alt-text-roundup/ WebAIM article on Microsoft’s built-in alt text generator] | ||
* [https://www.swarthmore.edu/accessibility/general-course-material-guidelines General Course Material Guidelines for Faculty] from [https://www.swarthmore.edu/accessibility Accessibility@Swarthmore]. | * [https://www.swarthmore.edu/accessibility/general-course-material-guidelines General Course Material Guidelines for Faculty] from [https://www.swarthmore.edu/accessibility Accessibility@Swarthmore]. | ||
* Google's [https://support.google.com/docs/answer/6199477?hl=en Make your document or presentation more accessible]. | * Google's [https://support.google.com/docs/answer/6199477?hl=en Make your document or presentation more accessible]. | ||
* Our [[Accessibility Filescan|Accessibility File Scan]] is a tool faculty, teaching and instructional staff, and anyone assisting in the preparation of course materials can utilize. These results are not currently viewable by students. This modal usually appears at the top right of every course page. | * Our [[Accessibility Filescan|Accessibility File Scan]] is a tool faculty, teaching and instructional staff, and anyone assisting in the preparation of course materials can utilize. These results are not currently viewable by students. This modal usually appears at the top right of every course page. | ||
* [https://teachaccess.org/resources/creating-accessible-course-content/ Creating Accessible Course Content] from our partner | * [https://teachaccess.org/resources/creating-accessible-course-content/ Creating Accessible Course Content] from our partner [https://teachaccess.org/ TeachAccess]. | ||
* [https://webaim.org/blog/webaim-million-2022/ WebAIM Million Report] documents the accessibility of websites over time. | * [https://webaim.org/blog/webaim-million-2022/ WebAIM Million Report] documents the accessibility of websites over time. | ||
| Line 243: | Line 237: | ||
[[Category:Accessibility]] | [[Category:Accessibility]] | ||
<!-- Imported from Confluence page id=20382112 (https://swatkb.atlassian.net/wiki/spaces/ALLY/pages/20382112/Fast+Five+Essentials+to+Preparing+Materials) -->[[Category:Google Workspace]] | |||
<!-- Imported from Confluence page id=20382112 (https://swatkb.atlassian.net/wiki/spaces/ALLY/pages/20382112/Fast+Five+Essentials+to+Preparing+Materials) --> | |||
Latest revision as of 22:20, 28 July 2026
Swarthmore employees and students can take advantage of these tools in order to create materials that all can use to work and learn with confidence.
In-program Styles
Use in-program styles to create structure
Using appropriate headings in the appropriate order in your current program is necessary. They add structure and create consistency in documents and allow screen readers to easily—audibly—scan the information. Additionally, authors can easily create such things as a Table of Contents or view an Outline.
Apple
- Apple's article: Create accessible documents, spreadsheets, or presentations with Pages, Numbers, or Keynote.
- Toronto Metropolitan University Pressbooks: Technique 5: Use Headings.
- London College of Communication Teaching Hub: Create accessible documents using Apple Pages and Keynote.
- Intro to paragraph styles in Pages | Mac help.
- Docs
- Our KB article: Change the Look of Headings and Paragraphs in Google Docs
- Google's Support page: Add a title, heading, or table of contents to a document
HTML
In HTML, titles should exist within the <title> tag. There should only be one, and it should also be somehow related—and maybe even exactly the same—as the <h1> Use headings to establish structure.
Best Practices: Webpage Creation
LaTeX
In LaTeX, title is again metadata. Insert the title in the preamble metadata: \title{_}.
Styles that are important to structure in a LaTeX file are:
- Insert sections in document body:
\section{_},\subsection{_}, etc. - Numbered lists in use:
\enumerate{_} \item \item ... \end{enumerate} - Bulleted list use:
\itemize{_} \item \item ... \end{itemize}
See also:
- Lewis Forbes – LaTeX and Accessibility | University of Edinburgh student intern blog
- LaTeX to HTML via PANDOC | Dan W. Joyce
Markdown
In Markdown, your title exists after a singular hashtag, # Title. Hashtags give markdown structure. The relationship between Markdown and HTML shows us that <h1> and <title> are often the similar or the same.
- Improving the accessibility of your markdown | Smashing Magazine
- 7.14 Improve accessibility of HTML pages | R Markdown Cookbook
Microsoft
- Excel
- PowerPoint
- Word
- Our KB article: Using Word's Style Gallery to Create Structure in Your Document
- Microsoft's Support page: Make your Word documents accessible to people with disabilities
- Our KB article: Using Word's Properties to flow into a more accessible PDF
Moodle
Atto Editor
- Swarthmore ITS Blog post about using Atto for accessibility features: Reach all users with Atto text editor in Moodle [Moodle accessibility, part 2].
- Moodle's Atto Editor documentation.
TinyMCE Editor
Convey Meaning with Words
How to use words to convey meaning
Links
When providing a link somewhere within your text, be sure to provide context. Screen readers provide users the opportunity to scroll through links, so links such as "click here" and "more" do not make sense to screen readers. You can see examples below:
- Deque University accessibility tips article: Use link text that makes sense when read out of context
- WebAIM's article: Links and Hypertext: Link Text and Appearance
Color
Sometimes the text needs to stand out. Ask a question as to how one might do that. Color is not read aloud, so consider also calling attention to important text with words. For instance:
- Important: Paper due on April 15th. All late papers will be deducted one grade per day late.
- Note: All applicants must sign on line 11 and line 15 in order to have their pay direct deposited.
- Urgent: Pay attention to all directions before handing in this form.
When using color, always consider the contrast between the background and the text. Use WebAIM's Contrast Checker or Lea Verou's Contrast Ratio Checker to ensure all users who have sight can see the information.
Alt Text, Captions, Image Descriptions, etc.
When someone is accessing material with a screen reader, they may not see an image. They will not know the content of an image unless there is some sort of descriptive text in the form of alternative text (commonly referred to as "alt text"), a caption, an image description, or other form of text that their screen reader has access to. Providing this is necessary for all users to understand the meaning of the material and why an image is being included.
A best practice is to include a description somewhere in the text so that everyone can see it. This can be very difficult to do. Below are a few resources we have found to be useful:
- The World Wide Web Consortium (W3C) Web Accessibility Initiative's (WAI) Images Tutorial singles out informative images, decorative images, functional images, images of text, complex images like graphs and diagrams, groups of images, and image maps.
- WebAIM goes more in-depth about images in its Accessible Images article but covers alt-text quite well in its Alternative Text article.
- Bojana Coklyat and Shannon Finnegan developed Alt Text as Poetry, a website and workshop dedicated to helping everyone understand how important alt-text is and also how to develop it. From Shannon's website:
"This project reframes alt text as a type of poetry and creates opportunities to practice writing it."
- Benetech's Diagram Center Poet Training Tool teaches you when and how to describe images, and lets you practice.
In-program Accessibility Checkers
Use in-program accessibility checkers to find and fix
Adobe Accessibility Checker
See also:
- Changing the title of an Adobe PDF | Swarthmore ITS Solutions
- Changing the global language of an Adobe PDF | Swarthmore ITS Solutions
- Install and run Grackle for each program (Docs, Sheets, Slides, etc.)
LibreOffice
- Go to Tools → Accessibility Check.
Microsoft Office: How to use Accessibility Review KB article
- Go to Review → Check Accessibility.
Moodle
Atto Editor
- Expand the editor's menu by clicking the down arrow, which is the first button on the left-hand side and top row of the editor. A screen tip will indicate "Show/hide advanced buttons."
- Click on the first item in the sixth section, which looks like a stick figure of a person in a circle.
Go to Tools → Accessibility Checker in the editor.
Captioning
Ensure all videos have captions and transcripts. Ensure all audio has transcripts
Google Slides
Microsoft Office 365 PowerPoint
Please see our article on installing and accessing Microsoft Office 365 if you have questions about the program itself.
Panopto
YouTube
Zoom
Setting a Language
Setting your document or content language is an important indicator to all users
Many programs in most operating systems (OS) follow the overall system settings for language. To view your system's settings:
- MacOS: Change the language your Mac uses
- Windows: Manage the input and display language settings in Windows
Apple Pages
- Choose File from the menu at the top of your screen.
- Select Advanced.
- Choose the Language & Region.
- In the dialog box that appears, first choose Language.
- Important Note: According to the Apple support page on Change a document’s language and formatting, changing the language of a document may reset the language and region of your computer. However, we have not experienced this. If you do discover this has happened, go to:
- System Settings,
- Search for Language & Region,
- Change to your preferred language,
- and ensure it is set as the Primary.
- Important Note: According to the Apple support page on Change a document’s language and formatting, changing the language of a document may reset the language and region of your computer. However, we have not experienced this. If you do discover this has happened, go to:
- Choose Region.
- Choose Okay.
Adobe Acrobat
- Navigate to Fix accessibility issues (Acrobat Pro).
- Scroll down to Document Language or use Ctrl+F to find "Document Language."
- Follow the instructions to set document-wide language or the language of a part of a document, if it's different from the overall language of the document.
See also: Changing the global language of an Adobe PDF | Swarthmore ITS Solutions
Microsoft Office | Add an editing or authoring language or set language preferences in Office
Google Docs | Translate documents or write in a different language
HTML
- The World Wide Web Consortium's (W3C) Declaring language in HTML article.
- W3Schools' Language Code Reference.
Additional Resources
- Styling in Word: Introducing an accessible syllabus template | Swarthmore ITS Blog
- WebAIM article on Microsoft’s built-in alt text generator
- General Course Material Guidelines for Faculty from Accessibility@Swarthmore.
- Google's Make your document or presentation more accessible.
- Our Accessibility File Scan is a tool faculty, teaching and instructional staff, and anyone assisting in the preparation of course materials can utilize. These results are not currently viewable by students. This modal usually appears at the top right of every course page.
- Creating Accessible Course Content from our partner TeachAccess.
- WebAIM Million Report documents the accessibility of websites over time.