Skip to main content

Brooklyn College Library & Academic IT | Creating Accessible OER | OER Platform Comparisons | OER Guide for Faculty | Library Guides

Digital Tool Box for Teaching and Scholarship: Accessibility of Digital Tools (Updated 2020)

Digital Tool Box for Teaching and Scholarship

Global Accessibility Logo.

Accessibility is important for everyone and benefits everyone. Open access and open pedagogy is about building and sharing knowledge with as many people as possible. Accessibility is part of that mission and means making sure your OER, your projects and your content are accessible by people of all abilities.

With the increase in digital scholarship, open pedagogy and student centered content creation we also must ensure the content creator's side of a digital project is accessible, in addition to the public side of the project or digital tool.

Making sure your course and materials are accessible to as many people as possible is not only ethically responsible, it is also legally required by the ADA.  Currently many schools and businesses are being sued because their sites and content are not accessible. In 2015, Harvard and MIT were sued external link. by advocates for the deaf for falling to caption online lectures, courses and other educational materials.

In 2019 Harvard settled external link. agreeing to “caption Harvard-produced content posted on or after Dec. 1, 2019. For pieces of content posted earlier, Harvard will provide captions within five business days. Harvard will also provide captions for livestreams of University-wide events.” 

In 2020 MIT settled external link. agreeing "to provide industry standard captioning for publicly-available online content, including video and audio content posted on MIT.edu as well as MIT’s YouTube, Vimeo, and Soundcloud pages, certain live-streaming events and online courses such as Massive Online Open Courses (MOOCs), MITx and MIT OpenCourseWare."

In 2016 the University of California, Berkeley was found by the DOJ's civil rights division to have violated disability law external link. by not providing the appropriate accommodations for its own free video lectures and podcasts. Beyoncé isn't even above the ADA. In January 2019, a class action lawsuit against Beyoncé External link. was filed, claiming her website violated the ADA because it employs an exclusively visual interface and those with vision issues cannot browse the site and make online purchases without the assistance of a sighted companion (Cullins, 2019).

"The City University of New York (CUNY) is committed to providing students, faculty, staff, and the general public with the technology and information they need, and to making these resources accessible to all... a person with a disability must be able to acquire the same information, engage in the same interactions, and enjoy the same services as a person without a disability, and be able to do so in an equally effective manner, with substantially equivalent ease of use. The person with a disability must be able to obtain the information and services as timely, fully, equally, and independently as a person without a disability." The City University of New York's Accessibility Statement

More Detailed Accessibility Information

To learn more detailed accessibility information, look at the CUNY Accessibility Toolkit for OER by the CUNY Accessibility Librarian, Amy Wolfe. This guide provides detailed platform and program specific instructions on creating accessible content, evaluations of digital platforms and instructions on how to evaluate your digital sites and content.

Accessibility Best Practices

Learn accessibility best practices.

Select a tab to learn about WCAG, POUR, and Accessibility Best Practices regarding Titles, Text/Typography Layout, Headings, Lists, Tables, Meaningful Link Text, Alternative Text (alt-text), Videos, Audio and Color/Contrast.

What is WCAG? 

The web content accessibility guidelines (WCAG) were created by the World Wide Web Consortium (W3C) to be world-wide web accessibility standards. CUNY strives for (WCAG) Version 2.0 external link., AA conformance level, as its accessibility standard.

  • Since it’s release, WCAG 2.0 has become the internationally recognized benchmark for web accessibility.
  • The Revised 508 Standards external link. are based on WCAG 2.0.

WCAG 1.0

Focused heavily on the techniques for accomplishing accessibility, especially as related to HTML. 

WCAG 2.0 and 2.1

  • Subsequent versions of WCAG (WCAG 2.0 and 2.1) took a different approach: they focused more heavily on the principles of accessibility. By focusing more on principles rather than techniques, these future versions of the guidelines are more flexible, and encourage developers to think through the process of accessibility conceptually.
  • WCAG 2.0 is based on four main guiding principles of accessibility.
  • These four principles are known by the acronym POUR
    • Perceivable
    • Operable
    • Understandable
    • Robust
  • The guidelines are an excellent foundation upon which to build accessible content, but unless content developers understand the reasons behind the guidelines, they might apply the guidelines incorrectly or ineffectively.
  • Another excellent online resources created by the W3C is the WebAIM website external link. (Web Accessibility in Mind) at “http://webaim.org” . Based at Utah State University, it provides information, training, and practical tools for creating accessible content.

What is POUR?

CUNY has pledged to make their digital tools and content accessible. To that end CUNY uses the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG AA) as its accessibility standard. The Web Content Accessibility Guidelines (WCAG) were created to help define how to make web content more accessible with the goal of providing a single shared standard.

There are four main guiding principles of accessibility upon which WCAG has been built.  These four principles are known by the acronym POUR.

POUR is a way of approaching web accessibility by breaking it down into four main aspects:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Perceivable Definition:

Information and user interface components must be presentable to users in ways they can perceive. Users need to be able to identify content and interface elements by means of the senses. For many users, this means perceiving a system primarily visually, while for others, perceivability may be a matter of sound or touch.

Perceivable problem examples:

  • A website's navigation consists of a number of links that are displayed in a different order from page to page. If a user has to relearn basic navigation for each page, how can she effectively move through the website?
  • A Word document contains a number of non-English words and phrases. If the languages are not indicated, how can assistive technology present the text correctly?

Perceivable solutions:

Text Alternatives
  • Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Time-based Media
  • Provide alternatives for time-based media.
Adaptable
  • Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Distinguishable
  • Make it easier for users to see and hear content including separating foreground from background.

Operable Definition:

Means that a user can successfully use controls, buttons, navigation, and other interactive elements of your OER. For many users this means using assistive technology like voice recognition, keyboards, screen readers etc.

Operable problem examples:

  • Mouse-dependent web content will be inaccessible to a person cannot use a standard mouse.
  • People with low or no vision also relay on the functionality of the keyboard. They may be able to manipulate a mouse just fine, but it doesn't do them much good because they can't see where to click on the screen. The keyboard is much easier for a person who is blind to manipulate.

Operable solutions

Keyboard Accessible
  • Make all functionality available from a keyboard.
  • Keyboard accessibility is one of the most important principles of Web accessibility because it cuts across disability types and technologies
Enough Time
  • Provide users enough time to read and use content.
Seizures
  • Do not design content in a way that is known to cause seizures.
  • Provide ways to help users navigate, find content, and determine where they are.

Understandable definition:

Users should be able to comprehend the content, and learn and remember how to use your OER site. Your OER should be consistent in its presentation and format, predictable in its design and usage patterns, and appropriate to the audience in its voice and tone.

Understandable problem examples:

  • A website's navigation consists of a number of links that are displayed in a different order from page to page. If a user has to relearn basic navigation for each page, how can they effectively move through your OER?
  • A site makes use of numerous abbreviations, acronyms, and jargon. If these are never defined, how can users with disabilities (and others) understand the content?

Understandable solutions

Readable
  • Make text content readable and understandable.
Predictable
  • Make Web pages appear and operate in predictable ways.
Input Assistance
  • Help users avoid and correct mistakes.

Robust Definition:

Content must be robust enough that it can be interpreted reliably by a wide variety of users, allowing them to choose the technology they use to interact with websites, online documents, multimedia, and other information formats. Users should be allowed to choose their own technologies to access OER content.

Robust problem examples:

  • A website requires a specific version of a web browser to make use of its features. If a user doesn't or can't use that browser, how can that user experience the features of the site?
  • A document format is inaccessible to a screen reader on a particular operating system. If a user employs that OS for day-to-day tasks, how can she gain access to the document?

Robust solutions:

  • Maximize compatibility with current and future user agents, including assistive technologies.

Titles General Information:

When you create a web page, a word document, a PowerPoint, a spreadsheet make sure you create a meaningful title for your item.

Why are page titles important?

  • Screen readers announce the page and slide titles when they load web pages, documents and presentations.
  • A good page title helps orient users to the content of the page or document.
  • A good title helps users understand, a POUR principle.

How to Create good page titles:

  • Page titles should be brief, clear, informative, and unique.

Text/Typography General Information:

When you create a web page or document which has well organized content it helps users to orient themselves and to navigate effectively.

Why is layout important?

  • A site or document which is well-structured is easier to understand and navigate.
  • Everyone can benefit from a site which is well-structured.
  • A well laid out page helps people with visual impairments, including low vision, orient themselves on the page and understand content.
  • Keyboard users can browse pages and their sections more efficiently.
  • People with cognitive and learning disabilities can more easily find and prioritize content on a well laid out page.
  • A well laid out page helps users perceive, operate and understand, POUR principles.

How to create good layout

  • Use headings to separate sections.
  • Use lists.
  • Don’t use tables for layout.
  • Don’t only use visual cues (such as color) to show the layout.

Specific Tips

  1. Text Alignment

  • For English and other left-top-right languages, the best practice is to align text on the left.
  • Some circumstance may allow for other alignment: Center-aligned headings or a right-aligned date on a document
  1. Margins, Padding, and White Space

  • Documents with "white space" around blocks text are easier to read than documents in which the margins of the text are close to the edge of the viewing area.
  • Documents with limited white space appear more cluttered and are difficult for some readers with reading disabilities.
  • Paragraphs should be easily distinguishable from each other.
  • In Print materials indentation is sometimes used to distinguish paragraphs, instead of white space, that is ok for print. 
  • In Online materials, white space is needed to distinguish paragraphs because without it users can get lost on a long scrolling page.

Screen shot of web-style paragraphs, separated by white space.Screen shot of print-style paragraphs, with the first line indented.

  1. Line Length

  • While an optimal line length value may vary based on the content, font face, etc., in general, fewer than around 50 or more than around 120 characters per line will likely introduce difficulty.
  • One way to address line length is to add left and right margins that increase the white space on the sides.
  • Another way is to limit the width of the text column.
  1. Text Decorations

  • Best practice is to only use underline for hyperlinks.
  • Using underlined text for non-link purposes on the web will likely confuse some users.
  1. Delete <del>, strike-through, and insert <ins>

  • Words or characters with strike-through effects visually appear crossed out or canceled, unfortunately screen readers do not notify users of this fact.
  • Likewise, screen readers do not notify users when the <ins> element (insert) tag is used.
  • For documents (legal for example) where it is important to use strike-through and follow-along as changes are made, see the WebAim text decoration section external link. for workaround suggestions.
  1. Blink and marquee

  • People with attention deficits or cognitive disabilities could become distracted.
  • People with limited fine motor abilities may not be able to click on scrolling links accurately.
  1. Fonts

  • It is generally best to use standard fonts that are available on the end users device.
  • Using too many font faces can create a confusing visual layout.
  • For print materials:
    • Serif fonts such as Times and Times New Roman are generally regarded as the most readable font family for printed text.
  • For web-based content:
    • There is conflicting information about which font is the best to use for web-based content.
    • Conventional wisdom is sans-serif fonts are more suited to electronic formats.
    • Fonts such as Verdana, Tahoma, Trebuchet MS, and Georgia, were developed specifically for use in electronic media, and are now quite commonly used.
  • For more detailed information on fonts, look at WebAIM's article on Fonts. external link.

These tips are based on WebAim's article "Text/Typographical Layout"external link.. WebAIM is a non-profit organization based at the Center for Persons with Disabilities at Utah State University.

  1. Blank Spaces

  • When large chunks of white space is needed between sections of a document don't just use the <ENTER> key.
  • Screen readers will read aloud each and every blank space.
  • If the white space is needed between pages then use Insert - Page Break.
  • If large white space is needed between two specific paragraphs, then use "Add Space Before and After a Paragraph" in Home - Paragraph to set that specific space between those individual paragraphs.
    • This is especially important when doing cover pages which have large chucks of white space.

Demonstration/Comparison

Here is a video showing the difference between how a screen reader reads aloud a word document which has inaccessible blank spaces with one with accessible blank spaces.


Attribution: Normandale Community College [2012, Mar.19] Accessible vs. Inaccessible - Can you Hear the Difference? - Normandale Community College. Retrieved from https://youtu.be/5TNU_t-9w1A

Headings General Information:

Organizing a web page, word document or pdf with headings helps all users get an idea of the page’s structure and organization.

Why headings are important?

  • Headings provide structure to your documents.
  • When people can follow a site or document’s organization and structure, it is easier for them to comprehend the content.
  • Headings become a navigation tool for both those who can see visually and those who use screen readers.
  • Assistive technology allows users to pull up a list of headings.
  • Screen readers read aloud heading text only if it is coded as a header.
    • If you only change an item's text color, size or weight, only sighted users will be aware.
  •  
For those who use screen readers
  • The use of headings allows them know an item is a heading.
  • They can listen to a list of all the headings and skip to the desired area on the page or document.
For those who can see
  • Use of visually apparent headings allows people to quickly visually scan site to get overall idea of meaning of site. 
  • Headings also help those with cognitive disabilities understand and navigate.
  • Headings helps users perceive and understand, POUR principles.

Demonstration/Comparison

Here is a video showing the difference between how a screen reader reads aloud a web page which has inaccessible headers versus one with accessible headers.


Attribution: Normandale Community College [2012, Mar.19] Accessible vs. Inaccessible - Can you Hear the Difference? - Normandale Community College. Retrieved from https://youtu.be/5TNU_t-9w1A

How to create headings?

  • Make heading text brief, clear, informative, and unique.
  • There should only be one Heading 1 <h1> per page, however there can be more than one <h2> to <h6> per page.
  • Each level of heading, indicates the relationship from one part of the content to the other parts.
  • The sub-sections under a heading relates logically to a heading above it.
  • Duplicate headings can exist on separate pages, but each heading should be unique within the same page, if at all possible.

Lists General Information:

Semantic Lists (ordered and unordered) provide orientation for users by organizing information in meaningful ways.

Why lists are important?

  • Use different types of lists to group information according to its nature to provide orientation for users.
  • When list are used correctly, assistive technologies are able to convey information to their users as they navigate to and within lists, such as the total number of items and the relative position of each item in the list.
  • Lists are recommended as potential replacements for simple tables, as tables can be more difficult to navigate and sometimes we provide info in tables that really would be better suited to lists.
  • Semantic lists helps users perceive, operate,  and understand, POUR principles.

How to create accessible semantic lists?

  • Use the built in “lists” option in WYSIWYG editors (what you see is what you get) to create lists.
  • Don’t create lists by manually typing in numbers or indenting, these are not accessible.
  • Create Ordered Lists <ol> for when there is a defined sequence or order intended for the items in the list.
  • Create Unordered Lists <ul> for when there is no specific order intended for the list you are creating.
  • Create Description Lists <dl> for when a specific structure is needed to provide definitions for terms.

Tables General Information:

Creating a properly structured table helps a blind, low-vision and/or screen reader user make sense of a table by reading out the heading titles and then cell content.

Why is making tables accessible important?

  • Tables without structural markup to differentiate and properly link data between header and data cells, create accessibility barriers.
  • Tables used for layout are frowned upon because unless they are designed correctly they are not  considered accessible
  • Many accessibility advocates consider using tables for layout bad practice.
  • Accessible tables allows users to perceive, operate understand, access in a robust manner, POUR principles.

How to create accessible tables:

  • Make sure your tables have header rows and/or header columns.
  • Make sure your header row or header column cells are NOT blank.
    • It is okay to have blank data cells, just not a blank header cell.
  • Avoid spanned rows and columns in data tables, especially as headers, many screen readers cannot properly read these correctly.
  • Always use the simplest table configuration possible.
  • After you’ve created headers, you need to associate the data cells with the appropriate headers .The scope attribute identifies whether a table header is a column header or a row header. <th scope=”col”>Name</th> or <th scope=”row”>Max</th>
  • Data tables very often have brief descriptive text before or after the table that indicates the content of that table.
    • This text should be associated to its respective table using the <caption> element. The <caption> element must be the first thing after the opening <table> tag.

Meaningful Link Text General Information:

  • Assistive technology allows users to pull up a list of links so links need to be meaningful out of context.
  • Since links are read aloud, don't repeat the same link text over and over on a single web page.
  • Meaningful link text provides a clear description of where users will go once they click on the link.

Why is meaningful link text important?

  • Links such as “Click Here” or “More” don’t provide any information to screen readers and are meaningless out of context.
  • Link text which is the actual url is bad for screen reader users, if you can, avoid using just the url.
  • Meaningful link text allows users to perceive, operate and understand, POUR principles.

Demonstration/Comparison

Here is a video showing the difference between how a screen reader reads aloud a web page which has inaccessible hyperlink text and one with accessible hyperlink text.


Attribution: Normandale Community College [2012, Mar.19] Accessible vs. Inaccessible - Can you Hear the Difference? - Normandale Community College. Retrieved from https://youtu.be/5TNU_t-9w1A

Alt-Text (Alternative Text) General Information:

Making images and graphics “visible” to all users is one of the first principles of accessibility. The way you make your image visible to everyone is by adding "alternative text" or "alt-text".

Adding alt-text to an image allows it to be discoverable and understood by users in a variety of ways.

Alt-text should convey the purpose of an image.. For example, alt-text for a search button would be “search” rather than “magnifying lens”.

Why using alternative text (alt-text) is important

  • Adding alternative text (“alt text”) will make images and graphics “visible”.
  • Text alternatives serve as labels for controls and functionality to aid keyboard and voice recognition navigation.
  • For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
  • Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 
  • Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
  • Alternative text (alt-text) covers POUR principles perceive, operate understand, robust.

How to create good alt-text?

  • Remember that context matters when creating alt-text.
  • Always ask yourself “What is the context and purpose of this image/graphic?
  • Create alt-text which provides a textual alternative to non-text content.
  • Describe the content and function represented by the image/graphic.

Demonstration/Comparison

Here is a video showing the difference between how a screen reader reads aloud a web page which has inaccessible images versus one with accessible images. In the first instance you will hear the file name of the image. Many times if you leave an image without alt-text, screen readers will read aloud the file name of the image, which usually is not accessible information.


Attribution: Normandale Community College [2012, Mar.19] Accessible vs. Inaccessible - Can you Hear the Difference? - Normandale Community College. Retrieved from https://youtu.be/5TNU_t-9w1A

The World Wide Web Consortium (W3C) has created a very useful guide on how to create useful alt-text.

Informative images
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
 
Decorative images
Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
 
Functional images
The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
 
Images of text
Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
 
Complex images such as graphs and diagrams
To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.
 
Groups of images
If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
 
Image maps
The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

Video General Information:

Videos are great and they should be produced and delivered in ways that ensure that all members of your audience can access their content. Providing captions, audio descriptions and transcripts make your videos accessible to a wide audience,

Why making videos accessible is important?

  • Video captions not only benefit those who are deaf or hard of hearing, but people who are learning disabled, ESL learners, those who are in a quiet public environment and don’t have access to headphones (such as a library).
  • Video captioning improves comprehension and retention of information.

How to create accessible videos:

  • Create captions, a transcript, and audio descriptions for your videos.
  • YouTube provides automatic captioning, however it is not without errors.  If you use the automatic captioning, edit out errors.
  • Make sure it is delivered in an accessible media player.
Captions

Text versions of the audio content, synchronized with the video.

Audio Descriptions

Commentary and narration which guides the listener through the movie, tv show, theater or other art form with concise, objective descriptions of new scenes, settings, costumes, body language, and "sight gags," all slipped in between portions of dialogue or songs.

  • Audio Descriptions help with accessibility for people who are blind, have low vision, or who are otherwise visually impaired. 
  • Audio description supplements the regular audio track of a program. 
  • Audio description is usually added during existing pauses in dialog.
  • Audio description is also called “video description” and “descriptive narration”

Still not totally sure what audio descriptions are and how they are different from captions? Play these 2 videos of the same trailer for movie Frozen to see the difference.

Video with Subtitles



Attribution: [IMSTVUK] (2013, Nov 12) Frozen - Trailer with Subtitles [Video file]

Video with Audio Descriptions



Attribution: [IMSTVUK] (2013, Nov. 12) Frozen – Trailer with Audio Description [Video File].

Transcripts

  • Transcripts allow anyone that cannot access content from web audio or video to read a text transcript instead.
  • Transcripts provide a textual version of the content that can be accessed by anyone. They also allow the content to be searchable, both by computers (such as search engines) and by end users.
  • Screen reader users may also prefer the transcript over listening to the audio of the web multimedia.

Audio General Information

People who are deaf, hard of hearing and/or have difficulty processing auditory information can benefit from transcripts. Since they may not be able to use audio by itself, you need to make sure your audio is robust and the information and content can be conveyed in an alternative format. Transcripts convert audio into a readable text format but unlike captions, they do not necessarily display in real-time. There are three types of transcripts: basic, descriptive and interactive. Full transcripts support different user needs and is not a replacement for captioning.

Why making audio accessible is important

  • Adding transcripts to your audio-only content makes it “visible”.
  • Transcripts allow people to read the contents of your audio at their own pace.
  • Transcripts allow keyword searching of audio and video.
  • Transcripts can be downloaded, printed, used offline and/or converted to braille.
  • Students repurpose transcripts as study guides.
  • The text transcript should be a document that’s accessible, preferably HTML, but it can be an accessible document of another format, such as .TXT.
  • For pre-recorded, audio-only content (ex: podcasts) transcripts are required to meet WCAG Level A standards.

How to create accessible audio

  • Create downloadable transcripts for your audio.
  • There are three types of transcripts:
    • Basic transcripts are a text version of the speech and non-speech audio information needed to understand the content.
    • Descriptive transcripts include information about new scenes, settings, costumes, and “sound gags”.
    • Interactive transcripts highlight text phrases as they are spoken. Users can select text in the transcript and go to that point in the video. This is a feature of the media player. It uses the captions file.

Color Contrast General Information

Don't shy away from using colors but use color intelligently. Having a general understanding of color and color contrast is important to help communicate in an accessible manner. 

"Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color." - W3C Working Group Notes

Why using colors accessibly is important

  • Choosing accessible colors for your documents and site is important.
  • Colors affect the readability of your document and site for all users, not just those with vision impairments.
  • The only people for whom the color choices don’t matter are those using screen readers.
  • Some people cannot read text if there is not sufficient contrast between the text and background.
  • High contrast is required by some people with visual impairments, including many older people who lose contrast sensitivity from ageing.
  • While some people need high contrast, for others — including some people with reading disabilities such as dyslexia — bright colors are not readable. They need low luminance.
  • The WCAG 2.0 require that color combinations meet clearly defined contrast ratios. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).

How to use color accessibly

  • Choose colors with sufficient contrast.
  • Check the color contrast of your items to make sure they are accessible.
  • Don’t use color as the only way to communicate information, always make sure meaning is conveyed in multiple ways.
  • This is true for the main text of your document, links in blocks and images of text.
  • In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
  • Run your site and documents through color contrast checkers to make sure the contrast ratio is good.
  • To meet basic guidelines (Level AA) text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
    • WCAG Contrast Checker external link. is a Firefox browser plug-in.
      This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1.
    • Color Contrast Analyzer external link. is a Chrome browser plug-in.
      This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.
Loading ...

Digital Projects about Accessibility

Another way to incorporate accessibility into open education is to design projects and tools where not only are the learners acquiring accessibility skills and knowledge, they are also producing accessible content and tools which will allow content on numerous different disciplines to be made accessible to a much wider audience.

Below are two such projects. Describe It! is an Art alt-text accessibility project attached to the Frick Art Library's photo archive collection.  Mapping Access at Vanderbilt University, is a participatory mapping and data visualization project documenting the features of the campus built environment that facilitate inclusion.

Describe It

Initial landing page of Describe It!

 

 

Describe It! Project Description:

Describe It! is a Zooniverse project created by The Frick Collection and Frick Art Reference Library. A member of the Describe It! team is Brooklyn College alumni Sara Schwartz. In this project, online volunteers write short descriptions for works of art in the Library's Photoarchive collection. In order to obtain a variety of descriptions, each image is described three times before it is retired. Once an image is retired, the submitted descriptions are evaluated by library research staff who select the best description for each image. Each of the descriptions are then converted into alt-text (alternative text) which make its collections accessible to all users. Volunteers can help anonymously or create an account. The project includes a tutorial, instructions, tips and detailed metadata information about each work of art.

Describe It! Project Goals:

  • To collect descriptions for every image in the Library's digital Photoarchive.

  • To convert the descriptions into alternative text that can be accessed by assistive technologies, making their collection materials accessible to all users.

  • To provide volunteers with a greater understanding of the research collections available at the Frick Art Reference Library and the importance of art and accessibility.

Incorporate Describe It! into your courses:

This digital project can be incorporated into numerous types of courses. Below are just a few ideas.

  1. Art History classes can use it to teach art and how to write concisely about art.
  2. Museum Studies courses could use the project to reinforce the need for alt-text and accessibility in museums.
  3. Computer Science classes could participate in Describe It! as a way to teach about alt-text.
  4. Disability studies courses could use the project to teach how to write concise alt-text.
  5. ESL classes could participate in this project as a way students could work on their English writing skills by describing art.
  6. English composition courses could use the project as a way to practice writing short concise sentences.

Mapping Access

Google Campus Access Amenities map. Click to be taken to google map.

Mapping Access Project Description:

Mapping Access is a participatory data-collection and accessibility mapping project of the Critical Design Lab at Vanderbilt University. As they describe on their about page, typical approaches to accessibility focus on issues of code compliance and checklists of standards. Instead, this project draws upon the analytic frameworks of intersectionality and disability justice, as well as Universal Design methodology, to craft alternative standards for meaningful access. Through digital maps, Map-a-thon events, community conversations, photography, and film, the project explores mapping as a process of social transformation. Their broader body of work includes a podcast, experimental protocols, and workshops.

Mapping Access Goals:

Engage users as experts in the design process to generate surveys, collect data, create new mapping methods, and build a commitment toward broad accessibility.

Incorporate Mapping Access projects into your course:

The Mapping Access projects and ideas can be used in various courses on various different topics. Below are a few ideas.

  1. Mapping and GIS courses could coordinate Map-a-thons to create accessible amenities maps for their campus based on the Vanderbilt University Campus Access Amenities Map.
  2. Women's & Gender Studies courses (an numerous others) could create maps based on the Nashville Feminist Collective Accessibility Map.
  3. A photography class project could be to take photos for a Mapping Access map.
  4. Design and architectural students could create metadata and descriptions for the areas shown on the maps.
  5. Everyone could create alt-text to describe all the images attached to the maps.

Some documents may require Adobe Acrobat Reader. You can download Acrobat Reader for free.

Brooklyn College | Brooklyn College Library & Academic IT | Library Guides | Library Accessibility Information | CUNY Accessibility Statement