Skip to main content

A11Y Web Accessibility: Web Accessibility Training

A resource to help faculty create accessible digital course content, learn about digital accessibility, and meet the diverse needs of their learners.

The Basics

Welcome 

This guide was created to serve as a resource for faculty who are new to the concept of Web Accessibility.  In general, accessibility is imperative to the student experience. The FCC Employee Handbook, pp. 62-63 states"...text book selection and use guidelines have been established to reduce costs, increase access and maintain a student-centered environment."  These practices prioritize the needs of learners and reduces barriers to instruction.  There are countless numbers of low- or no-cost digital educational materials available that may alleviate out-of-pocket expenses but cannot guarantee access to all students unless it meets certain Web Accessibility standards.  Committing to a shared value in meeting the diverse needs of our college community, this guide provides support for faculty in verifying the accessibility of selected or created required materials. 

"The Basics" is intended to increase faculty awareness of digital accessibility on campus and learn to make low-effort, high-impact adjustments to created materials that support a variety of learners.  Used in conjunction with Blackboard ALLY, learners can instantaneously engage with course content in alternate formats without the need for accommodations or slow turnaround times for third-party remediation.  Faculty can be confident in providing this flexibility of use to their learners and know their materials are compatible with assistive technology software and devices, such as screen readers.

Blackboard ALLY Supports Inclusive Learning

Blackboard ALLY is a support tool that is integrated into our LMS and available to help faculty assess the digital accessibility of the course materials they load into the LMS. Blackboard ALLY allows for materials to be scored against *WCAG 2.1 AA standards and displayed on a color-coded icon called a "Content Accessibility Indicator" to help faculty members determine how well the content meets these standards. 

Red indicator needs helpRed indicators need immediate attention because the content has significant accessibility issues (0%-33%)

Orange indicator a little betterOrange indicators needs further attention because content is somewhat accessible but still has remaining issues (34%-66%)

Green indicator getting thereGreen indicators are fairly accessible, although further improvements might be possible (67%-99%)

Dark green indicator perfect!Dark green indicators do not need any further attention (100%) 

*Blackboard ALLY analyzes documents and files against WCAG 2.1 AA standards, which exceed the Section 508 federal minimum standards required for institutions receiving federal funding. More information about the laws that prohibit discrimination against people with disabilities can be found under About Web Accessibility.

Alternate Formats

While students do not see Blackboard ALLY's score of the web content, they can download it in alternative formats using Blackboard ALLY.  File types include (1) Tagged PDF, (2) HTML, (3) ePub, (4) Electronic braille, and (5) Audio file.  It is important to keep in mind that content scored "red" and "orange" will negatively impact the student's experience with the content.  Green and dark green scores will ensure a universally-designed and equitable student experience with your course content available to the student immediately.   

Electronic Formats Compatible with Assistive Technologies

Faculty who assess their content using Blackboard ALLY receive feedback and guidance on fixing the accessibility issues and upload an improved version overtop of the original version. The feedback contains detailed and contextual guidance for remediation using the file's original source.  It will primarily focus on issues that can be resolved without requiring a lot of additional time and can be used in conjunction with "The Basics" to provide more context.  The improved files stay on the LMS and contribute to the repository of files designed with accessibility in mind.

Closed Captioning for Audio and Video Content

At this time, Blackboard ALLY does not provide a solution for transcriptions or closed-captioning for audio or video content, but this guide does offer guidance, practices and resources available to faculty to help their courses meet the needs of all learners. Additionally, best practices for conducting accessible, live video-conferencing is included in The Basics training.


Training adapted from ©WebAIM

The content found in "Web Accessibility Basics" has been reproduced from WebAIM: Web Accessibility in Mind webaim.org permitted within its "Terms of Use" and adapted along with other educational resources to support members of faculty in their course materials selection and creation. 

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:​Frederick Community College institution logo difficult to read after enlarging.

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" Using Arial font, the captial I and lowercase l look virtually identical whereas the same letters are clearly defined when using a font such as Verdana.
  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:

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 

Take this box for example: Black text hexidecimal code is #000000 and in the foreground. An off white background hexidecimal code #E3E3E3 would look like this in the WebAIM Color Contrast Checker:

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.

Heading styles should be incorporated into your content design to help users navigate content

  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: 

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 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.

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.

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:

Two signs with a toilet drawn in the center.  A sighted reader would read "Basement Toilets Must Flush UP!" but screen reading software would read "Basement UP! Toilets Flush Must"

 

© 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,” “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.”

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

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.

An old document scanned as an image with highlighted text and handwritten annotations that are not accessible to screen readers

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. 

The 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”).

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. 

Blackboard ALLY Instructor Training

Accessible Publisher/3rd Party Materials

How accessible are the digital materials of publishers or other third parties? It depends, but as faculty, you have a responsibility to your learners that ensures your required materials meet federal compliance standards (learn more in the About Web Accessibility page). Using The Basics, you can review the content to ensure that you are using accessible materials. 

Open Educational Resources (OERs) must also comply with federal standards. While they come with the benefit of being free or low-cost, their accessibility is not always guaranteed.  However, it is easier to retrofit OERs to meet these standards without having to navigate around copyrights.  Contact Services for Students with Disabilities for more information. 

 

Frederick Community College prohibits discrimination against any person on the basis of age, ancestry, citizenship status, color, creed, ethnicity, gender identity and expression, genetic information, marital status, mental or physical disability, national origin, race, religious affiliation, sex, sexual orientation, or veteran status in its activities, admissions, educational programs, and employment.