ALLY Web Accessibility: Web Accessibility Training

Choose a font that will reach all of your readers by keeping these principles in your consideration: 

1. Use real text rather than text with graphics – select basic, simple, easily-readable fonts. 
2. Do not use pictures in place of text, as text within graphics can be difficult to read for those with low vision after enlarging their screen. Also, some assistive technologies can recognize typed characters and may incorrectly read letters out loud.

• ​​Example:​

Use a limited number of fonts and be consistent in how they are used. This is a stylistic recommendation too, as documents with no more than 2 or 3 font faces look more organized, streamlined and coherent.​​

• Example: Take the word "Illustration" 

1. Most readable fonts available in modern operating systems: Arial, Book Antiqua, Comic Sans MS, Georgia, Courier New, Tahoma, Times New Roman, Trebuchet MS, Verdana – some are more stylized than others but are still much more readable than other fonts not included in this list.
2. Fonts from Times family is best for printed text and Verdana, Tahoma, Trebuchet MS and Georgia were developed specifically for use in electronic media.
3. Some fonts have unique shapes that differentiate letters and some fonts make letters look identical, especially when scrunched together.
4. Ensure there is sufficient contrast between the text and the background. 

• Example:  Yellow text on black background is good contrast. Maroon text on black background is not good contrast.

© WebAIM

Ensure your content meets a specific WCAG 2.0 AA guideline for color contrast.

As mentioned in "fonts," Ensure there is sufficient contrast between the text and the background. 

• Example:  Yellow text on black background is good contrast. Maroon text on black background is not good contrast.

Your color contrast ratio must be 4.5:1 to be in compliance.  The best way to ensure you met this important ratio is to use the Color Contrast analyzers and identify the hexadecimal codes of the colors you are using.  These checkers will display a “PASS” rating indicator when you have met or exceeded this ratio. 

To determine the contrast of your texts and backgrounds, check out these tools:

• Web-based: WebAIM's Color Contrast Checker https://www.webaim.org/resource/contrastchecker
• Download: Paciello Group Contrast Analyzer  https://developer.paciellogroup.com/resources/contrastanalyser/

If you need the hexidecimal codes of colors for the WebAIM's Color Contrast Checher, you can use the Colorzilla tool to extract the hexadecimal code of the text color you want to use and place it in the foreground color box and do it for the background colors you want to use to calculate the ratio.

Colorzilla is a Mozilla Firefox add-on from https://www.colorzilla.com/firefox

Colorzilla is a Google Chrome extension from https://www.colorzilla.com/chrome 

Foreground color: #000000 

Background color: #E3E3E3 

And the ratio exceeds the WCAG 2.0 AA guidelines at 16.36:1 ("PASS")

© WebAIM

Sighted users often scroll web content for big, bold texts. This is because content is normally structured with titles and headings as landmarks that help users to navigate. For users relying on assistive technologies, content needs to be tagged with proper heading styles.

In Microsoft Word, on the Home ribbon, it is best to use Heading Styles to define the structural elements, including titles, subtitles, headings, paragraph body, lists etc.

1. Do not use text formatting alone, such as font size or bold, to give visual appearance of headings because assistive technologies do not recognize these as structural elements until they have been defined as a title, heading 1, etc.
2. Use heading styles properly, they should not be used to achieve visual results only. In MS Word, clicking on a heading element to automatically style your text gives the element a specific meaning to a screenreader. If the element is not important and you want to stylize it using the same font, size, variation, etc. then you will have to choose these features from the Font area of the Home ribbon. In Adobe Acrobat DC, tagging the PDF will apply these structural elements to the document automatically and you can verify it for accuracy by running the Accessibility Checker tool.
3. Use Lists functions correctly. Lists can be unordered, ordered or definitions. Choose the list style for the right purpose and never for indenting or layout purposes.
   1. Unordered: There is no order of sequence or importance, must contain list items
   2. Ordered: There is a progression or sequence, must include list items
   3. Definition: Explicitly presenting a structure for definitions, must include definition description

© WebAIM

Content should be structured in a hierarchical manner, generally with one 1st degree headings (<h1>) being the most important (titles, for example), then 2nd degree headings (<h2> - usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on. Technically, lower degree headings should be contained within headings of the next highest degree (do not skip heading levels, such as from an <h2> to an <h4>, going down the document). For example:

Heading 1

Heading 2

Heading 3

Heading 3

Heading 4

Heading 2

Heading 3

Heading 2

Heading 2

© WebAIM

Adding alternative text (alt text, alt text descriptions, or alt attributes) provides a text equivalent for an image, and while it is difficult to properly implement, it universally provides a description of visual content to all users. For blind and low vision users, assistive technologies can only recognize that there is an image, making it completely inaccessible without alt text.  Additionally, alt text can provide more content to users with certain cognitive disabilities, English language learners, picked up by search engines, all of which makes images with alt text more accessible to all users. Be sure to add alt text to all images by using the original file and accessing the image's properties.  Use Blackboard ALLY for instructions on how to add alt text based on the original file type and consider the practices below.

Alt text should:

1. Present the CONTENT and FUNCTION of the image
2. Be succinct
3. Describe the image in context

Alt text should not:

1. Be redundant
2. Start with the phrase “image of…”, “a graphic of…”

When determining how to use alt text, images should be determined whether they are serving a decorative or informative purpose in your content.

Decorative

1. If the decoration serves very little to no purpose, consider not incorporating it to avoid auditory cluttering by assistive technologies. For example, decorations next to page numbers.
2. On the web, images placed on a page for decorative purposes can either be avoided, or marked by adding an empty alt attribute (alt=” “) so that assistive technologies can skip over them. In ALLY, there is a button that does this for you!
3. Some images are placed for ambiance, as long as it does not convey information and is there to improve the look of the page, mark it as decorative.

Informative

1. Sometimes decorative images serve an informative purpose, such as a thematic break (change of scene in a story, transitioning to another topic), describe it in the alt text to make it obvious to the user.
2. Images with informative purposes may already have a description adjacent to them in the form of a caption that all users access. There is no need to place an alt text description if the caption is sufficient, just mark the image as decorative so that the assistive technologies skip over it and reads just the informative caption.
3. Sometimes images are placed next to links to make the clickable area for the link larger and more accessible but does not provide the user with more information than what the provided link does, marking the image as decorative is also acceptable. However, when an image is used within a link, a redundant caption can be used in the alt text so that assistive technologies can identify it as a link.
4. Images that contain only text displayed can be used as the alternative text.

It is important to be both descriptive and specific in your alt text descriptions, however, the alt text can use value if context is not considered when describing an image. For example, the same image in an Art course would not have the same alt text if the same image were featured in a History course.

Another example: 

If this image was on the webpage for the Learning Centers advertising for an upcoming study workshop, an acceptable alt text description could be: A female student sits with a stack of textbooks in front of her, overwhelmed by the amount of studying she has to do before her big test.

If the image was on the webpage of the Library in the area informing students on how to pay their overdue book fines, an acceptable alternative text description could be: A female student is upset after realizing all of the books she borrowed are overdue from the library and she will have to pay a hefty fine.

Complex images, such as graphs, may be impossible to keep succinct due to key details, relationships, etc. These descriptions can be linked out to another page with the full description for the user to access separate from the content they are currently viewing so that they can access the full amount of information the graph provides.  

Examples of how to add appropriate alt text descriptions to a variety of images within context can be found at https://webaim.org/techniques/alttext/

© WebAIM

Stylistically, using tables for layout purposes presents content in an organized manner, but it is not very accessible to those using assistive technologies. Tables should be used for tabular data, which means there are row headers, column headers or both and data within the cell has a specific location based on the headers provided.

Table headers is the row at the top of a table used to label each column. Always indicate in the table’s properties that a table has a header row to help assistive technologies guess that there is a data table presented versus a layout table.  In MS Word, you will select “Repeat header row at the top of each page.”

Assistive technologies usually identify whether there is a layout or table data based on a guess. It will default to reading the content in literal order of appearance. If it appears in a logical order, then it will be read logically and make sense to the user. However, some reading orders are collective of the visual information presented.

In the example from ©WebAim training:

© WebAIM

A basic element of web accessibility is that ability for users who navigate to and select links using keyboards commands alone, no mouse. In a browser, users can tab through using the Tab key to jump from link to link then use the Enter key to select it. If the only way to access a link is with a mouse, such as mousing the cursor over an element on the page to trigger a link to display, it is not very accessible.  

When using a graphic as a link, there is no need to include “link” or “link to” in the alt text.  The assistive technology can recognize that it is serving its function as a link and would therefore redundantly refer to the graphic as “link graphic link to …”

Users of assistive technologies often navigate from link to link and skip the text in between.  This is how content is skimmed to find a particular section of a web site. Therefore links should make sense out of context.  Phrases to avoid would include “click here,” “learn more,” “click for details.”  On the other end, too much detail about a link destination can result in auditory clutter. Keep the link label succinct, such as a Products link on a page to be read as “products.”  Additionally, when you want a user to do a "clickable" action, use the word "select" to be more inclusive.

Some links need distinguishing information, which should be presented at the beginning of the link for assistive technologies to identify, especially for users initiating a keyboard command to list all links alphabetically. A user quickly navigating a website will need to know where the link will take them if they select it and then would need to know if it opens on the same page, in a new window, etc.  For example, for a link that opens in a new window, put the most important information first in your description, such as “Products (opens in a new window).”

© WebAIM

When creating hyperlinks, avoid using vague phrases like the following:

• here
• more
• read more
• learn more
• link to [some link destination]
• info

Instead, it is recommended that hyperlinks meet these criteria:

• Are as descriptive and concise as possible
• Start with a keyword
• Contain concrete nouns
• “Is not a verb phrase”
• Provide “information when read out of context” (remember how screen readers read them)
• Don’t discuss specific mechanics

For people using assistive technologies, scanned PDFs only provide content that is accessed visually. Assistive technologies cannot determine what is being displayed without alt text or a rendering of the text through Optical Character Recognition (OCR).  OCR software can be found in a number of document tools such as Adobe and other proprietary software, open source as well as built-in to scanning devices.  Beware, OCR can often misrecognize text, such as “l” for “1,” “m” for “rn,” etc. It allows for text in a document to be searchable and the potential to be editable/correctable.  View the video for a quick tutorial on using the OCR tool in Adobe Acrobat DC.

Scanned documents, especially poor quality scans or handwriting on scans are difficult to read for everyone. Scanned documents should be avoided as much as possible. If it cannot be avoided, consider adding alt text to the image scanned so that all of the information can be accessible to a variety of users.  If the original document can be found in the library, tell the users that the original is available in the library.

Avoid using materials where you cannot retrieve the original file unless you create an accessible version of it.

Saving a document from MS Word to PDF ensures that the text is still live and searchable. This is why it is important to have access to the original, editable files when using PDFs in your learning design.  Turning PDFs into MS Word documents is not as reliable as MS Word documents converted to PDFs and requires a review of the document to ensure accuracy.  In the conversion process from PDF to MS Word, artifacts or font styles may be picked up incorrectly as suspected text and incorporated into the content.  The higher the quality of the scan, the lower the number of issues you will have in the conversion process. Many devices allow you to change the dots per inch (DPI), where the higher the DPI the finer the quality, which can result in a more reliable conversion.

If it is necessary to use a scanned PDF, use Adobe Acrobat DC. It is available on all faculty and staff college-owned computers. This is different from Adobe Reader, which is a free download and does not have an accessibility checking tool. Both of these tools allow you to view Portable Document Files (PDFs), but Acrobat DC will allow you to remediate your inaccessible document.  Learn more in the "Creating Accessible Materials" tutorial available in this guide.

© WebAIM

Frederick Community College's Services for Students with Disabilities office has established closed-captioning guidelines for all course materials.

Closed-captioning guidelines:

1. All applicable class materials should be captioned to provide students with full access to class content. Any inclement weather class modifications must also be fully accessible.
2. YouTube, MS Stream, and any other automatic speech recognition (ASR) video captions are often inaccurate. Please check these for accuracy.
3. If current audio/video materials do not contain accurate captions, please use alternate accessible materials to comply with federal accessibility guidelines.
4. If you have a video that is not captioned and believe it is the best source to be used in your class, you may send the source video to the SSD office for captioning; however, copyright laws may not allow some videos to be captioned. The SSD office will need to receive this information as soon as possible to ensure its use in your class.  Please send your request to research captioning options by emailing the SSD office.

We recommend you complete a review of your class content to ensure compliance.  This includes any embedded links or videos for assignments.  Thank you so much for your cooperation. 

Services for Students with Disabilities office is located in Annapolis Hall, A105.

Need help locating captioned content?

Films On Demand: Library Services has a subscription to Films On Demand. All of the content meets or exceeds web accessibility standards. 

Films can be found in the Research Databases under "F" for "Films On Demand."  Accessing through the Research Database will allow you to browse the content available under our subscription package.  

If a video that you want to use does not have closed-captioning, a librarian can help you find a copy with captioning or find something comparable that would meet your needs.  Send a request using the form to Ask A Librarian.

YouTube: Captioned videos are identified with "CC."  However, this does not guarantee the quality of the captions.

To limit a YouTube search to captioned videos only, perform a search as usual, and then select "Filter" (upper right), and under "Features," select "Subtitles/CC."

You can also type your search terms into the YouTube search bar, followed by a comma and the letters "cc" (e.g. “web accessibility, cc”).

FCC ENDORSES 3 METHODS FOR GENERATING CLOSED CAPTIONS/ TRANSCRIPT DEVELOPMENT:

1. YouTube  (for video captioning and hosting after recording in Bb Collaborate): To address video accessibility requirements
   • Help with YouTube – channel link: https://web.microsoftstream.com/channel/b393d045-1d82-47e6-a718-bfde6bf29840
   • How to link Gmail account with YouTube: https://web.microsoftstream.com/video/632c28f1-99c2-4087-8539-0ad736a05d10
   • Closed captioning in YouTube: https://youtu.be/oGEjVOMDGFc
   • Guide on how to edit Youtube captions in Word: https://youtu.be/dMYZ-WlvLkk


2. Microsoft Stream (for video captioning and hosting  after recording in Bb Collaborate– Use only for synchronous recordings that do not have student images or identifiable voices)
   • Help with Stream – channel link https://web.microsoftstream.com/channel/15fd5aab-7dda-4343-9220-34e80e7c3adb
   • Deleting and changing permissions in Stream https://web.microsoftstream.com/video/e2de4928-5497-4668-ae2b-38b8a4eb8339
   • Closed captioning in Stream https://web.microsoftstream.com/video/016346d9-fd4f-41c3-a593-a2cd591952ad


3. ZOOM (for video captioning and hosting after recording in ZOOM cloud recording)
   • Zoom Instruction Tutorial
   • Guide for Synchronous Instruction Via Zoom
   • How to See Presentation Notes While Presenting PowerPoint Slides on ZOOM
   • Interpreting Services ZOOM Guide

TIPS TO IMPROVE THE CLOSED CAPTIONING EXPERIENCE

When recording:

• Control the audio: For a cleaner caption, control the audio during the meeting.  Have students use the “raise hand” feature or type in the chat that they have a question or comment. Have all students on mute during the recording unless called on
• Record shorter videos: For multiple lecture hours – record an hour at a time so you have a shorter video upload.  The upload time may be improved

After the recording:

• Download the video and post to Blackboard immediately: you can post to Bb right away while you are working on the editing process.  The same link is used and is updated automatically as you edit. Just notify students the captions are corrected, 
• Edit for major errors: Remember that the editing is to correct major errors.  There is no need to edit to perfection. Spoken word is not as a grammatically correct as the written word so there is not expectation to correct the captions for all grammatical errors, ums, uh huhs, etc……….
• Scan the captions to find where corrections are needed:  You may save time by scanning the captions and mark the time stamp of corrections needed.  They go back to those time stamps to fix them
• Invite students to identify confusing sections of captions:  Once you have scanned and done edits to the captions given the time you could devote to it, let students know they can bring confusing caption errors to your attention to fix.
• Stop the recording at the end of the meeting:  Some processing delays in Zoom may occur if you leave the meeting without stopping the recording

Using video’s previously shown in a face to face class

• Try to use Professional videos that already have closed captioning.
• You could consult with CTL for video content topics that match videos without captions that you may have been using in a face to face format.
• You could also check YouTube for videos on the topic with captions included.
• You could play the video on one of the platforms in screen sharing mode and record. Be sure you are sharing computer audio. The captions can be generated from this recording.

Practice: If captioning is a new skill for you we recommend you practice with a short recording (not during class)- 5 mins or less to get the captioning process down.

About Best Practices for Accessible Virtual Meetings

While it is highly recommended that video lectures are pre-recorded and captioned before posting, live video-conferencing can be made accessible for all students. The Accessibility Tips for Better Zoom/Virtual Meeting Experience was created by the Director of the Technology Access Program at Gallaudet University, Christopher Vogler. These tips support deaf and hard of hearing participants in virtual workplace meetings and transfer well to delivering instruction through live, video-conferencing regardless of the service used (Zoom,GoToMeeting, etc.). 

These tips are focused on the needs of deaf and hard of hearing participants in virtual workplace meetings. Tips for how to apply these practices to the virtual classroom have been added to the summary below.  Details are available by visiting the website.

• Many of these also have been tested in cross-disability meetings. Meetings included a mix of deaf, hard of hearing, DeafBlind, hearing blind and hearing sighted participants.
• Additional scenarios will be covered in future updates, send questions by email to the author.
• Keep meetings as small as possible, there are recommendations for groups up to 4, 5-7, 8+ , groups with some attending locally and some remotely, and communication tips for controlling each kind of scenario and with a mixture of audio and sign language.​

  • Encourage participants who are not presenting to turn off their webcams to assist those who may be participating using a mobile device and WiFi.

  • Larger meetings require more defined meeting rules and roles (e.g., chair, turn-taking manager, note-taker)

  • CART (Communication Access RealTime Translation) is a speech interpreting service that streams live captions and is a highly recommended practice for accessible, online video-conferencing in addition to sign language interpreter. It is recommended that a sign language interpreter is featured in a pinned window, and if possible, minimizing the number of webcams to the interpreter and speaker. A transcription of the meeting can be provided at the end to all participants. 

• Turn-taking management is critical
• In larger meetings, default to video off except for chairs, interpreters, turn-taking manager, and people who have the floor
• Get a second screen, if at all possible. This does not need to be a monitor, a phone or tablet to view streaming text while viewing the video on a monitor works well.
• Run Ethernet cables instead of WiFi, if at all possible.  This will minimize connection hiccups and freezing sessions that interfere with the interpreter.