Digital Tool Box for Teaching and Scholarship: Accessibility

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

Navigable

• 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

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

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

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

5. 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 for workaround suggestions.

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

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

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

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

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.

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.

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.

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

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.

• Open captions are part of the video and cannot be turned off.
• Closed captions are not part of the video and can be turned off and on.
• YouTube’s automatically generated captions are a good STARTING point but they need to be manually checked to fix errors.
• Jessica Kellgren-Fozard is a great teacher and champion of captioning. These 4 videos cover the importance of captions, how to caption, and captioning best practices.
  • How to get 80% more views! – Captions and why they are useful.(11 min)
  • How To Caption Your Videos On YouTube (6 min)
  • Don’t Do This! – How to do captions right! (15 min)
  • The Secret Language of Captions DECODED (8 min)

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.

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. 

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