ACCESSIBILITY GUIDE Online 1 Accessibility Basics 2 Accessibility Guidelines 3 Accessible D2L Webpages 4 Accessible PowerPoint & Google Slides
6
7
8
5 Accessible Word Documents & Google Docs
Accessible PDFs
Accessible Video & Audio
Accessible Complex Images
9
10
11
Accessible Math & Science
Accessible 3rd Party Tools
Accessibility Checkers
Anatomy of an Accessible Page
Writing meaningful link texts
Syllabus
Heading 1
Heading 3
Services for students with disabilities: Students may receive reasonable accommodations if they have a diagnosed disability and present appropriate documentation. Students seeking accommodations are required to contact the Disability Support Services (DSS) office as early as possible. Students may contact a DSS staff member for an appointment at dss@hagerstowncc.edu or at 240-500-2530. DL 101 - ONLINE LEARNING BEST PRACTICES Best practices when using complex graphics:
DL 101 - INTRODUCTION TO ONLINE LEARNING Course Information: • Course Title: Introduction to Online Learning • CRN: 12345 • Credits: 3 • Term: Spring 2022 Course Description: Add Alternative (Alt) text to images
Heading 2
Heading 3
Format lists as lists
Heading 2 Heading 3
Heading 3
Home Broadband Users
%
This course prepares students to succeed in online college courses with skills required for the distance learning environment, including time management, technology skills, and effective communication. The course uses open educational resources (OER). All instructional materials are free and available in the course site. Assignments/Assessments:
10 15 20 25 30 35 40 45 50
Heading 3
Heading 4
Grading Scale
0 5
Table Column Header
Grade Scale
By Points
By Percentage 90 - 100%
Jan 04 Jul 04 Jan 05 Jul 05 Jan 06 Jul 06 Jan 07 Jul 07 Jan 08
A B C D F
202 - 225+ 180 - 201 157 - 179 135 - 156
80 - 89% 70 - 79% 60 - 69%
Table Row Header
< 134
< 59%
Late Work & Make-up Policy Assignments must be completed on time in order to earn full credit. (Late assignments will earn 50% credit.)
When using complex images, include Alt text as you would for any other image but also include additional description as a caption. If more description is needed, include it in the content of the page.
Heading 4
Enough Color contrast
Page 2
Page 1
WEB Accessibility
Required by Federal Law
Web Accessibility
“Requiring use of an emerging technology in a classroom environment when the technology is inaccessible to an entire population of individuals with disabilities... is discrimination prohibited by the Americans with Disabilities Act of 1990 (ADA) and Section 504 of the Rehabilitation Act of 1973 (Section 504) unless those individuals are provided accommodations or modifications that permit them to receive all the educational benefits provided by the technology in an equally effective and equally integrated manner.” Source: 6/29/2010 Dear Colleague letter sent to every college and university president http://www2.ed.gov/about/offices/list/ocr/letters/colleague-20100629.htmle
Adhering to web accessibility guidelines while developing your online course will benefit all students, including those with visual, hearing, mobility and learning disabilities.
Web Accessibility Guidelines
The accessibility guidelines in this document are based on the internationally accepted Web Content Accessibility Guidelines AA standards (WCAG 2.0).*
* Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation 12 Month Year (http://www.w3.org/TR/2008/RECWCAG20-20081211/, Latest version at http://www.w3.org/TR/WCAG20/)
1
WEB Accessibility Guidelines Component Guideline
Why is this important?
Use properly formatted headings to structure a page.
Headings help to organize content, making it easier for everyone to read. Headings are also a primary way for people using screen reading software to navigate a page of text. Formatting is conveyed to assistive technologies and mobile devices so they can present information as it’s meant to be presented. Properly formatted documents are more understandable and accessible. Links embedded in text should describe the link’s destination. This helps all users navigate more efficiently, especially screen reader users. • Why column headers in a data table are important Using table headers is important to conveying tabular data accurately. • Why the reading order in a table is important Screen readers read tables from left to right, top to bottom, one cell at a time (& only once). If cells are split or merged, it could throw the reading order off which may make the table difficult to comprehend by users who are blind & using a screen reader to navigate. Without sufficient color contrast between font and background, people who are color blind and low vision will not benefit from the information. And using color alone to convey meaning will leave those who are color blind or blind unable to interpret the meaning. Mobility and visual disabilities often make using a mouse impossible or ineffective. If content is not keyboard accessible, it will limit who can learn from the content. Alt text is read by a screen reader. It should adequately describe what is being displayed and why it’s important. This allows screen reader users to benefit from the information being con - veyed by the image, even if they cannot see it.
HEADINGS
LISTS
Format lists as proper lists.
Write meaningful link text.
LINKS
TABLES
Create tables with column and/or row headers, and ensure a proper reading order.
• Use sufficient color contrast. • Don’t use color alone to convey meaning. Ensure that any action that uses a mouse can also be completed using only the keyboard. Provide alternative (Alt) text descriptions for images.
COLORS
KEYBOARD
IMAGES
2 A
WEB Accessibility Guidelines Component Guideline
Why is this important?
Design clear, consistent navigation.
Clear and consistent navigation in your course will allow students to focus on your content rather than on how to find it. Blinking content is distracting, and it can cause seizures to occur in people with a photosensitive disorder. • Why the reading order of a form is important Using the tab key, your cursor should follow through the form in the same order it is in - tended to be completed. This benefits users who cannot use a mouse. • Why labeling buttons and form fields is important A screen reader will identify the button or form field by reading the label. The label should adequately describe the button’s action, and the form field label should indicate what infor - mation should be filled in to the form field. Video captions benefit many viewers. Captions are essential for those who are deaf and hard of hearing, but they also aid in comprehension for non-native English speakers, those who are unfamiliar with vocabulary, and viewers with some learning disabilities or in a noisy environment. Audio transcripts benefit many students. They are essential for those who are deaf or hard of hearing, but they also assist anyone who would like to read or search the transcript. Inaccessible software and applications will shut students with disabilities out. Contact us to have your interactive applications and software accessibility tested. For web pages, use an equation editor that outputs MathML. For MS Word and PPT documents, use the MathType plugin.
NAVIGATION
Eliminate or limit blinking / flashing content to 3 seconds.
BLINKINGS
FORMS
• Label form fields and buttons clearly. • Ensure a proper logical reading order in a form.
Keep a list of videos and audio recordings that are not cap- tioned / subtitled or transcribed. DSS will ask you for that list when you have a student with a captioning accommodation.
VIDEO
AUDIO
Require only accessible software & applications. Write math and science equations accessibly.
SOFTWARE
MATH & SCIENCE
2 B
HOW TO MAKE Accessible D2L Web Pages Component Guideline
How to make it accessible
• Use a D2L document template.
DOCUMENT TEMPLATE
• When creating a File, select and use a Document Template.
• Highlight the text and select the Heading # from the Format drop-down menu on the tool bar. • There should be only one Heading 1 (h1) per page. But there can be multiple h2, h3, h4, h5, h6. DO NOT skip heading levels. 1. Place the cursor where you want to insert an image, and click the Insert image icon from the toolbar. The Add a File window will open. 2. Browse to the image location and select the image file. Click Add button. 3. The Provide Alternative Text window will open. Describe the purpose of the image in the Alternative Text field, or check the box if the image is just decorative. 4. Click OK . 1. Select the content you want to make into a list. 2. From the toolbar, click the Lists icon.If the order doesn't matter, select Bulleted List from the drop-down menu. If the order does matter, select Numbered List. 1. Highlight meaningful text for the link (e.g., Hagerstown Community College) 2. From the toolbar, click on the Insert Quicklink icon. 3. Select URL in the Insert Quicklink window • Type in the URL (e.g., https://www.hagerstowncc.edu). • Select New Window in the Target section. 4. Click the Insert button.
• Properly format headings. • Use headings in the correct order.
HEADINGS
• Add alternative (Alt) text to images.
IMAGES
• Format a list as a list using Ordered or Unordered lists.
LISTS
• Write meaningful link text that indicates the link’s destination.
LINKS
3 A
HOW TO MAKE Accessible D2L Web Pages Component Guideline
How to make it accessible
1. Select the cells to be marked up as a row or column header. 2. Click on the drop-down menu next to the Table icon in the toolbar. 3. Choose Cell> Cell Properties. The Table cell properties window will open. 4. In the Cell type field, click on the drop-down list and select Header cell. 5. Click Save button.
• Indicate column (or row) headers.
1. Select the table and click on the drop down menu next to the Table icon. 2. Select Table Properties , and check Show Caption . 3. Click Save when done. 4. A small cell/row will appear at the top of the table, extending the width of the table. Type the caption here. • A screen reader reads tables from left to right, and top to bottom, never repeating a cell. • Merged, nested, and split cells may alter the reading order of a table. • Construct your tables in a way that accommodates a good reading order. 1. Select the text that you want to inspect or change. 2. Click the Select Color icon in the toolbar. 3. Select the color and click Save . Note: When picking a color for your text in D2L, choose a color that registers with a green checkmark for WCAG AA in the Select a Color palette • Don’t use color alone to make a distinction, a comparison, or to set something apart from the rest of the web page. If you categorize something by color alone, people who are color blind or blind will not benefit from the color distinction.
TABLES
• Add table caption.
• Check the reading order.
• Use sufficient color contrast.
COLOR
• Don’t use color alone to convey meaning.
• Write math and science equations using MathML.
MATH & SCIENCE
Use the D2L equation editor. For more information, go to the Math & Science page in this guide.
• Eliminate or limit blinking/flashing content to 3 seconds. • Make sure all mouse actions can also be completed with a keyboard alone (without a mouse). • Use an accessible media player like Panopto.
MULTIMEDIA
3 B
HOW TO MAKE A ccessible PowerPoints & Google Slides Component PowerPoint (2011/2013/2016)
Google Slides
OUTLINE VIEW • Check the outline view.
1. Click View tab (Mac: View > Outline View icon - PPT 2016 .) 2. In the Presentation Views group, click Outline View . 3. In the Outline panel, make sure all text from the slides appears in the Outline View .
• There is no Outline View in Google Slides.
SLIDE LAYOUT • Use the PPT provided slide layouts when building slides to help your slide’s reading order remain intact.
• From Home tab, choose the New Slide drop down menu and select a slide template. (Don’t use the Blank slide template.)
1. Create a new slide ( Slide > New Slide ). 2. Go to Slide menu, click on Apply Layout and choose one of the slide templates (not the Blank slide template).
READING ORDER • Ensure the tab
1. On the Home tab, click on Arrange and choose Selection Pane ( Reorder Objects for Mac - PPT 2011 & 2016 .) 2. To see the reading order of the slide, tab through the slide and the corresponding element will highlight. 3. To re-arrange the reading order, click arrow up/down button on the Selection Pane (Mac: drag layers. Highest number is read first.) 4. Test reading order with the Tab key again. 1. Right click on the image and select Format Picture . 2. Click the icon to open Alt Text field. 3. Enter appropriate alt text in the Description field (not the Title field.) 1. Select the text to make into a list and click on the Home tab. 2. In the Paragraph group, select the Numbering or Bullets icon. • Use Numbering lists if a sequential order is important. • Use Bullets lists if all items are of equal value.
1. Tab through the slide and the corresponding element will high - light. 2. In the slide area, click on the element that you want to change. 3. To change the reading order, click on Arrange menu > Order . Send backward will raise the element to a higher reading order. Bring forward will make the element lower in the reading order. 4. Test reading order with the Tab key again. 1. To insert an image, choose Image from the Insert menu and follow the instructions. 2. To add Alt text, click on the image. Then in the format menu, select Alt text (at the very bottom of the menu). 3. Enter alt text in the Description field (not the Title field). Go to Format menu > Lists and select one of list styles. • Use Numbered lists if a sequential order is important to the list. • Use Bulleted lists if all items are of equal value.
order = the reading order
IMAGES • Add alternative (Alt) text to images and shapes.
LISTS • Format a list as a list.
4 A
Save your original files. You may need them if you have a student who needs alternative formats.
HOW TO MAKE A ccessible PowerPoints & Google Slides Component PowerPoint (2011/2013/2016)
Google Slides
1. Type out text that describes the destination of the link (e.g., HCC Homepage). 2. Select the text, right click & choose Hyperlink from the menu. 3. The Insert Hyperlink window will open. Enter a URL address in the Address field (e.g., hagerstowncc.edu). Mac - PPT 2011: Link to field. 4. Click the OK button to save the link.
1. Type out text that describes the destination of the link. 2. Select the text, right click and choose Link from the menu. 3. Paste or type in a hyperlink. 4. Click Apply button to save the link.
LINKS • Create a meaningful link that describes its destination. TABLES • Check the reading order. • Indicate column headers for data tables. Note: A table in Slide Show view is not accessible. Use Alt text! COLOR • Use sufficient color contrast. • Don’t use color alone to convey meaning. MATH & SCIENCE • Use MathType to write Math equa- tions.
• A screen reader reads a table from left to right, & top to bottom (never repeating a cell.) • Merged, nested, and split cells may change the reading order of a table. • Construct your table in a way that accommodates a good reading order.
1. Place the cursor in the top row of your data table. 2. Click the Design tab under Table Tools (Mac - PPT 2011/2016: Tables tab) 3. In the Table Style Options group (Mac-PPT 2011 - Table Options > Options / Mac-PPT 2016 - Table Design tab) , select the Header Row check box. 4. The cells in the top row of your table make up the column headers.
You cannot create table column/row headers in Google Slides.
• Use enough color contrast between the text (e.g., black color) and the background color (e.g., white color). • Without sufficient color contrast, people who are low-vision and color blind will not benefit from the information. • Go to www.pcc.edu/access-powerpoint for How to Check Color Contrast.
Don’t use color alone to make a distinction. If you categorize something by color alone, those who are color blind or blind won’t benefit from the information.
Use the MathType plugin http://www.dessci.com/en/ for MS Word to create math and science equations, formulas and notations. ( DO NOT use MS equation editor.)
Math and science equations and formulas cannot be written to be accessible in Google Slides..
Don’t embed the video. Instead, link out to videos.
VIDEO & AUDIO
4 B
Do not use Prezi or Canva for presentations.They cannot be made accessible.
HOW TO MAKE ACCESSIBLE Word Documents & Google Docs Check Word Document (2011/2013/2016)
Google Docs
HEADINGS • Properly format headings.
1. Select the text that you want to make into a heading 2. Go to the Home tab. 3. Choose the appropriate heading level from the Styles group
1. Select the text that you want to make into a heading. 2. Go to the Styles menu (or “ Normal text”) and choose the appropriate heading level from the Normal text drop down list.
• Use headings in the correct order • Heading 1 should only be used ONCE per page. Heading 2, 3, etc. can be used multiple times. ( DO NOT skip heading levels. )
1. Select the image. 2. From the Format menu choose Alt text . 3. Type in description text in the Description field. ( NOT in the Title field .) 4. Click the OK button when done Select the text that you want to make into a list, and do one of these: • On the Format menu, choose Lists & select Numbered or Bulleted list . • Go to the icon toolbar, & choose the Numbered or Bulleted list icon. 1. Type out text that describes the destination of the link (i.e. HCC). 2. Select the Insert link icon (Ctrl/Cmd + K) . 3. The Link window will open. Type the URL of the webpage in the Link field (e.g., hagerstowncc.edu). 4. Then click the Apply button to save the link.
1. Right click on the image, and select Format Picture.... 2. The Format Picture window will open. 3. Select the icon & click on the ALT TEXT to open Alt text field . 4. Enter image description in the Description field (Not the Title field).
IMAGES • Add alternative (Alt) text to images
1. Select the text that you want to make into a list 2. On the Home tab, in the Paragraph group, select the Bullets or Numbering list .
LISTS • Format a list as a list
1. Type out text that describes the destination of the link. (i.e. HCC). 2. Select the text, right click and choose Hyperlink... from the menu. 3. The Insert Hyperlink window will open. Enter a URL address in the Address field ( Mac - Word 2011 : Link to field). 4. Click the OK button to save the link.
LINKS • Create a link that describes its destination.
• Use the MathType plugin http://www.dessci.com/en/ for MS Word to create math and science equations, formulas and notations. DO NOT use Microsoft’s equation editor.
• Math and Science equations and formulas cannot be written accessibly in Google Docs.
MATH & SCIENCE
5 A
Save your original files. You may need them if you have a student who needs alternative formats.
HOW TO MAKE ACCESSIBLE Word Documents & Google Docs Check Word Document (2011/2013/2016)
Google Docs
TABLES • Indicate column
1. Place the cursor in the top row of your data table. 2. Click on the Design tab under Table Tools ( Table tab on Mac - Word 2011 / Table Design tab - Word 2016 ). 3. In the Table Style Options group, select the Header Row check box. 4. Under Table Tools , click the Layout tab ( Table Layout tab - Word 2011 ) 5. In the Data group (Word 2016 - Table Design > Layout tab), click the Repeat Header Row button. This will indicate the top row as the table’s header.
Google Docs doesn’t allow you to designate column or row headers. Keep your tables small so they are understandable without headers.
headers for data tables.
• Screen reader reads a table from left to right/top to bottom (never repeating a cell.) • Merged, nested, and split cells may change the reading order of a table. • Construct your table in a way that accommodates a good reading order. • To test the reading order, place your cursor in the first cell of the table. On the keyboard, press the Tab key repeatedly to navigate through the table. This will be the reading order that assistive technologies will use.
• Check the reading order.
COLOR • Use sufficient color contrast.
• Use enough color contrast between the font and its background colors. • Without sufficient color contrast, people who have low-vision or are color blind will not benefit from the information. • Go to www.pcc.edu/access-word to learn How to Check Color Contrast .
• Don’t use color alone to convey meaning.
• Don’t use color alone to make a distinction. If you categorize something by color alone, those who are color blind or blind will not be able to benefit from the information.
FORMS • Label form fields & buttons.
• Use a form template to create a form.
• Use Google Forms, NOT Google Docs
• Use real text labels for form fields and alternative text for buttons.
• Check the reading order of forms.
• Press the tab key repeatedly to check the order a screen reader would navigate through the form. If it doesn’t land on the form fields in the correct order, you will need to edit the form. • The tab order (or reading order) is important to those who are blind or physically disabled and rely on keyboard access.
5 B
Save your original files. You may need them if you have a student who needs alternative formats.
HOW TO MAKE Accessible PDFs
Method
How to make it accessible
Software / Hardware
1. Start with a well-structured word document or presentation. 2. Click the File tab and select Save as . In the Save as type field, select PDF (*.pdf.) 3. Enter a file name in the File name field. 4. Click on the Options button and make sure the Document structure tags for accessibility and Create bookmarks using Headings checkboxes are checked. 5. Click OK and Save . This will tag all of the text formatting, so page headings and lists are correctly interpreted by a screen reader. • Microsoft Word & PowerPoint 2011 for the Mac cannot produce a fully accessible PDF. • Go to http://www.pcc.edu/resources/instructional-support/access/pdfs-from-mac.html for options on how to create an accessible PDF. 1. Open the scanned PDF file. 2. Open the Tools panel (click Tools in top right) and click Text Recognition . 3. Click In This File and the Recognize Text window will open. 4. Click the Edit button to adjust OCR settings. Select English (US) for Primary OCR Language, Searchable Image for PDF Output Style and 600 dpi for Downsample To . 5. Click OK when done.
• Microsoft Office 2010 & 2013 Pro.
Convert MS Office to an Accessible PDF document
• MS Office 2011 (for Mac)
Save your original files (PPT, Word)
• Adobe Acrobat Professional (Version XI Pro)
Run Optical Character Recognition (OCR) on scanned document
1. Click the Tools tab to open the Accessibility panel on the right hand side. • If you don’t see it, click the View menu and select Tools > Accessibility .
• Adobe Acrobat Professional (Version XI Pro) All versions. No matter what you are converting to PDF, it’s
Run Adobe Acrobat Built-in Accessibility Checker
important to save your original files in case a student needs an alternate format. 2. Under Accessibility , select the Full Check button. 3. The Accessibility Checker window will open. • Under the Report Options , check on the Create Accessibility Report . • Under the Checking Options section: • Category: Document and check all the items. 4. Click the Start Checking button. 5. The Accessibility Checker Report will display on the left pane. Save your original files. You may need them if you have a student who needs alternative formats.
6
HOW TO MAKE Accessible Video & Audio Component Best practices
How to make it accessible
• To test for keyboard accessibility, press the Tab key to navigate to the player, and use the Tab, Arrow keys, Enter, and Spacebar to interact with the media player buttons.
MEDIA PLAYER The buttons need to be properly labeled so a screen reader user can operate the player.
Keyboard navigation It is important to accessibility that stu- dents can access and operate a media player with the keyboard alone (not using a mouse). Search for captioned media The HCC Library has a wide selection of captioned media. Contact the library for help.
How do I find human transcribed captioned videos on YouTube? (Search from YouTube site) 1. Enter your search keyword in the YouTube Search field . 2. Add a: , CC (a comma, CC) 3. Press Enter or click the magnifying glass icon How do I find human transcribed captioned videos from Google ? 1. Fill out the Advanced Video Search fields (http://www.google.com/advanced_video_ search ) that you need.
CAPTIONED MEDIA
We recommend you first search for captioned media, but you are not required to use only captioned media. Use the best media for your lesson. Uncaptioned media will be accommodated at the time of need.
2. Choose the “ Subtitles: Closed captioned only ” option. 3. Press Enter or click the Advanced Video search button .
How do I know? • Click the Settings button and check the Subtitles field. Avoid auto-generated subtitles and the Translate feature which are not usually accurate.
Make sure the YouTube video you use IS NOT Auto-generated .
Create your own captioned videos
Add and easily edit Automatic Speech Recognition (ASR) captions in Panopto. Visit https://support.panopto.com/s/article/ASR-Generated-Captions for a tutorial.
7
Save your original files. You may need them if you have a student who needs alternative formats.
HOW TO MAKE Accessible Complex Images
Complex images include graphs, charts, diagrams, maps, and illustrations. Below are three ways to provide alternative (alt) text-based description for complex images, when a simple alt text attribute is insufficient. Choose the best alt text method for your image types.
B
C
A
Describe in surrounding text
Link out to a web page with a longer description
Use a caption
If the image cannot be described using methods A or B, use the ‘longdesc’ attribute (requires HTML editing). Example code: <img src=”images/fig9.jpg” alt=”Fig.9- Graph of the length of daylight from March 21 through December 21 at various latitudes.” width=”400” height=”290” longdesc=”fig9-longdesc.html ” />
For Web Pages: Your caption must be associated with the image, so make sure to properly add a caption using the ‘ figcaption ’ html tag. (Requires HTML editing). Note: For MS Word and PowerPoint: Right click on the image and select Add Caption . Example Code: <figure><img src=”images/fig9” alt=”” width=”160” height=”120” /> <figcaption><em> Caption goes here, Fig.9-Graph.. </em></figcaption></figure>
If the image is adequately described in surrounding text (including text-based data tables), so that the image is just reinforcing the text, no further description is needed
necessary. Example:
Modeling amount of daylight as a function of time of year, Figure 9 and the table beside it, show the number of hours of daylight as functions of the time of the year at several latitudes, from March through December.
Month Hours in varied latitudes 20° 30° 40° 50° 60° Mar 12 12 12 12 12 Apr 12.3 13.2 13.5 14 17.5 May 12.9 13.7 14.3 15.5 17.7 Jun 13 14 14.9 16.1 18.2 Jul 12.8 13.8 14.2 15.7 17.8 Aug 12.5 12.8 13.2 14 15 Sep 12 12 12 12 12 Oct 11.6 11.2 10.8 10 9 Nov 11 10.2 9.7 8.3 6.5 Dec 10.9 10 9.1 7.9 5.7 Example of Data Table for Figure 9
<html> <p>Modeling amount of daylight as a function of time of year Figure 9 shows graphs of the number of hours of daylight...</p> </html>
Figure 9
Figure 9
Fig.9 - Graph of the length of daylight from March throughDecember at various latitudes. For example, at 40 degree latitude there are 12 hours of daylight in March. In October, there are 10.8 hours of day- light at 40 degree.
fig9-longdesc.html
8 A
The graph image is from Lucia C. Harrison, Daylight, Twilight, Darkness and Time (New York: Silver, Burdett, 1935) page 40.
HOW TO MAKE Accessible Complex Images
Resources for image description
Tactile representations
Sometimes touching a model or a tactile graphic is the best way to describe something. Tactile graphics Tactile graphics have different sized raised dots to show variation in graphs, charts and maps. Contact Disability Support Services for information. Example:
• NCAM: Guidelines for Describing STEM (Science Technology Engineering and Math) images ( http://goo.gl/TBT01Z ) • Art Beyond Sight: How Do We Access Meaning in Art? (Describing art images in alt text) - (http://goo.gl/dAXZOx) • Video: How to Describe Complex Images for Accessibility (From Diagram Center’s Webinars) https://www.youtube.com/watch?v=oSdz6KZpLjs • Diagram Center: Accessible Image Sample Book http://goo.gl/N0arvW
Indicate if a model is available If you know where a 3D model of the image is available, indicate that in your image caption or on the same page as the image.
A 3D model of chest anatomy
8 B
HOW TO MAKE Accessible Math & Science
Component
Best practice
Math tools
MathML stands for ‘Math Markup Language’ which is the web standard for accessible online math and science notation, equations and formulas. Typically, a user does not create MathML, but instead uses a conversion process to output MathML. We recommend that as much of the online class as possible be conducted within D2L. All output from D2L’s equation editor is stored as MathML, which is screen reader-accessible. MathType is an equation editor created by Design Science that is compatible with MS Word for Windows and Mac. Together, MS Word with MathType can be exported as MathML or it can be converted to braille. (Save your original files.) DO NOT use Microsoft’s equation editor. Math IS NOT accessible in PDF. Save the original file with the original MathType or LaTeX equations. Disability Services will ask for your original files when there is an accommodation need. For MS PowerPoint 2013, use the MathType 6.9 plugin or later to create math and science equations, formulas and notations. DO NOT use Microsoft’s equation editor. If you convert to a PDF or export to a webpage, save your original MS PowerPoint files which Disability Support Services may ask for. To make graphs accessible, do your best to describe them using alternative text, long descriptions, or captions. We can supplement with tactile graphics if necessary. LaTeX is a mark-up language. Converting LaTeX documents into an accessible format is usually straightforward. Keep LaTeX original files if you convert to other formats.
Math & science equations, formulas and notation
• MathML
• D2L
• Word documents
•
PDFs
•
PowerPoints
•
Graphs
•
LaTeX
•
WeBWorK is an accessible and free online homework platform for math and sciences courses.
WeBWorK
•
LibreOffice (with its native equation editor) exports easily to web pages that contain MathML.
LibreOffice
9
Save your original files. You may need them if you have a student who needs alternative formats.
LINKING TO Third Party Online Materials
Component
Best practice
How accessible are their digital materials?
• Are the videos captioned and audio recordings transcribed? There should be transcripts for audio recordings and captions or subtitles for video. If they aren’t available, ask the publishing representative when they plan to have them. If they have no plans, ask them to give HCC written permission to transcribe or caption the media. • Are images described in alternative text? PowerPoint slides from publishers often have images without any alt text. Ask your publishers if their images have alt text. • Can all of the text that is displayed on the screen be read aloud by text-to-speech software? Screen readers (assistive technology used by people who are blind) read real text. They cannot read images of text or text embedded in Flash animations/movies/simulations. • How accessible are the E-books? Are the images described? Are embedded objects like videos keyboard accessible and captioned? Is the E-reader keyboard and screen reader accessible? • Can all interactivity (media players, quizzes, flashcards, etc.) function using only the keyboard (no mouse)? People who are blind or have upper mobility disabilities cannot use a mouse. They use the keyboard to navigate and interact on the Web. Any interactive elements on a publisher's website or DVD must be operable by keyboard alone if they are used in your course. • Is there any documentation available that confirms accessibility or usability testing results (e.g., VPAT or White Paper)? A VPAT (Voluntary Product Accessibility Template) is used by many organizations to report the level of accessibility of software products. • Is your multimedia (Adobe) Flash or (Oracle) Java-based? Can your materials be watched on mobile devices? Content created in Flash or Java can be inaccessible and may not run on mobile devices and tablets, which are becoming more prevalent. • What are the computer requirements for using their materials? Will the materials work on mobile devices? Distance Learning informs online students about the computer requirements for taking an online course in the Distance Education Orientation for students. If your course requirements are different, make them known in the course syllabus. • OERs have the same accessibility requirements as all other digital materials. If they are not accessible, they can sometimes be retrofitted to be accessible. That is not possible if the materials reside on a publisher's server. Contact the Fletcher Faculty Development Center for help inspecting materials for accessibility.
Open Educational Resources (OER)
10
AUTOMATED Accessibility Checkers
Software
How to check
Tools
1. Go to the File tab. 2. Select Info from the sidebar menu. 3. Click on the Check for Issues button.
• A built-in accessibility checker ( Note: The accessibility checker checks only .docx and .pptx files )
MS Office 2010 & 2013 Windows (Word, PowerPoint)
4. Select Check Accessibility from the drop-down list. The Accessibility Checker panel will open to the right of the document. The accessibility checker provides you with a list of errors, warnings & tips . When you click on an error or warning, instructions on how to fix it appear below in “Additional Information”.
• A built-in accessibility checker (View > Tools > Accessibility)
PDF (Adobe Acrobat Pro DC)
1. Click the Tools tab to open the Accessibility Tool panel on the right. (If you don’t see it, click the View menu and select Tools > Accessibility ). 2. All boxes should be checked. Click Start Checking . 3. Expand items in the side panel to review accessibility issues.
D2L & Web Pages
1. Download & Install the WAVE toolbar ( http://wave.webaim.org/toolbar/ ) 2. Open the D2L page in its own window by clicking on the Open in a new window icon. 3. Right-click on the page in the new window, and select WAVE , then choose “ Errors, Features, and Alerts ” to see what accessibility errors you have on the page. 4. Error icons in green, red, yellow and blue will appear on the page. If you hover over an error icon, more information on the error will appear. 5. Return to the original D2L page, and open the D2L editor to repair the problems you found.
• A browser-based checker, WebAIM WAVE accessibility
add-on to the Chrome or Firefox browser
11
Ally checks course accessibility.Visit D2L Instructor Resources for guides.
Training & Support
Testing Tools
Online Training & Resources • online.hagerstowncc.edu>Instructor Resources • hagerstowncc.libguides.com/fletcher • www.pcc.edu/access
Chrome & Firefox:WAVE Toolbar http://wave.webaim.org/extension/
MS Word Built-in 2010, 2013, 2016 (PC)
Fletcher Faculty Development Center Linda Cornwell, Coordinator Phone: 240-500-2230 Email: ljcornwell@hagerstowncc.edu D2L Support Brenda Huffman, Learning Management System Specialist Phone: 240-500-2378 Email: bkhuffman@hagerstowncc.edu Course Design Support Leia Wood, Instructional Designer Phone: 240-500-2727 Email: ljwood@hagerstowncc.edu Disability Support Services Jaime Bachtell, Manager, Disability Support Services & Cohort Programs Phone: 240-500-2273 Email: jlbachtell@hagerstowncc.edu
MS PPT Built-in 2010, 2013, 2016 (PC)
PDF Built-in Adobe Acrobat Pro
Color Contrast Analyzer http://www.paciellogroup.com/resources/contrastAnalyser
12
This resource was adapted from a guide developed by Portland Community College: pcc.edu/access
The production of this guide was supported by a grant from the Alice Virginia and David W. Fletcher Foundation
“Online Accessibility Guide” by Hagerstown Community College is licensed under Creative Commons BY-NC-SA 4.0
2022 Second Edition
Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10 Page 11 Page 12 Page 13 Page 14 Page 15 Page 16 Page 17 Page 18 Page 19 Page 20Made with FlippingBook Annual report maker