Instructional Guides on Creating Accessible OER: Accessibility (Updated 2020)

These accessibility best practices can be used across items. Think of them when you are creating a word document, a Power Point presentation, a website, or a PDF.

Page Titles

Why are page titles important?

• Screen readers announce the page title when they load web pages or documents.
• A good page title helps orient users to the content of the page or document.

How to create good page titles:

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

Layout

Why is layout important in accessibility?

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

How to create good layout?

• Use headings to separate sections.
• Use lists.
• Don't use tables for layout.
• Don't only use visual cues to show the layout.

Headings

Why use headings?

• Organizing a web page, word document or pdf with HEADINGS helps users get an idea of the page's structure and organization. 
• 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.
• For those who use screen readers, the use of headings allows them to listen to a list of all the headings and skip to the desired area on the page or document.
• For those who can see, the use of visually apparent headings allows them to quickly visually scan the document or site to get an overall idea of meaning of the site or document. 
• Headings also help those with cognitive disabilities understand and navigate.

How to use 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

Why use lists?

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

How to create 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.

Meaningful Link Text

Why use meaningful link text?

• Screen readers pull up lists of links and reads them out so they need to be written in meaningful text to provide users with meaning.
• Links such as "Click Here" or "More" don't provide any information to screen readers and are meaningless out of context.

How to create meaningful link text:

• Make sure the link text is informative and provides context.

Alt-text for Images

Why use alt-text for images?

• Making images and graphics "visible" to all users is one of the first principles of accessibility. 
• Adding alternative text ("alt text") will make images and graphics "visible".
• 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.

How to create 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.
• TIP: Place a "." period at the end of your alt-text, this notifies screen readers the alt-text is done.

Videos

Why make videos accessible?

• Videos should be produced and delivered in ways that ensure that all members of the audience can access their content. An accessible video includes captions, a transcript, and audio description and is delivered in an accessible media player.
• Captions are text versions of the audio content, synchronized with the video. They are essential for ensuring your video is accessible to students, employees, and members of the public who are deaf or hard of hearing.
• They also help non-native English speakers to understand the video, make it possible to search for content within the video, help all students learn the spelling of technical terms spoken in the video, and make it possible to generate an interactive transcript where users can click anywhere in the transcript to watch the video where that text is spoken.
• Video captions not only benefit those who are deaf or hard of hearing, but learning disabled students, ESL learners, those who are in a quiet public environment and don’t have access to headphones (such as a library), and students in general.
• Also, video captioning improves comprehension and retention of information for all types of students.

How to make videos accessible:

• Create captions for your video

• CUNY Assistive Technology Services (CATS) provides an unlimited license for a captioning software called MovieCaptioner available to CUNY faculty and staff.  You do NOT need to be a student, needing an accommodation, to ask CATS to create video captioning for your videos, they will help and produce captions for all video content being created for use. If you want to use MovieCaptioner and/or have questions contact the CATS office.

Tables

Why make tables accessible?

• Tables used for layout are not accessible. Using tables for layout is bad practice.
• 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.
• Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers.

How to use tables:

• Make sure your tables have header rows.
• Tables which are not formatted with table headings are not accessible.
• Always use the simplest table configuration possible.

Color Contrast

• Check to see if the colors you've picked for your tabs and background are accessible.
• Use these color contrast evaluation tools.
• WCAG Contrast Checker 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 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.

Why worry about color contrast?

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

How to use color correctly:

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

People who use the web have a growing variety of characteristics. As web developers, we can not assume that all our users are accessing our content using the same web browser or operating system as we are, nor can we assume they’re using a traditional monitor for output, or keyboard and mouse for input. Consider these user characteristics:

• Unable to see.  Individuals who are blind use either audible output (products called screen readers that read web content using synthesized speech) or tactile output (a refreshable Braille device).
• Has dyslexia. Individuals with learning disabilities such as dyslexia may also use audible output, along with software that highlights words or phrases as they’re read aloud using synthesized speech.
• Has low vision. Individuals with low vision may use screen magnification software that allows them to zoom into all or a portion of the visual screen. Many others with less-than-perfect eyesight may enlarge the font on websites using standard browser functions, such as Ctrl + in Windows browsers or Command + in Mac browsers.
• Has a physical disability. Individuals with physical disabilities that effect their use of hands may be unable to use a mouse, and instead may rely exclusively on keyboard or use assistive technologies such as speech recognition, head pointers, mouth sticks, or eye-gaze tracking systems.
• Unable to hear. Individuals who are deaf or hard of hearing are unable to access audio content, so video needs to be captioned and audio needs be transcribed.
• Using a mobile device. Individuals who are accessing the web using a compact mobile device such as a phone face accessibility barriers, just like individuals with disabilities do. They’re using a small screen and may need to zoom in or increase the font size, and they are likely to be using a touch interface rather than a mouse. Also, Apple’s iPhone and iPad do not support Adobe Flash.
• Limited bandwidth. Individuals may be on slow Internet connections if they’re located in a rural area or lack the financial resources to access high-speed Internet. These users benefit from pages that load quickly (use graphics sparingly) and transcripts for video.
• Limited time. Very busy individuals may have too little time to watch an entire video or audio recording, but can quickly access its content if a transcript is available.

An accessible website works for all of these users, and countless others not mentioned.

Attribution:
University of Washington's "Developing Accessible Websites" Retrieved from: https://www.washington.edu/accessibility/web/