Accessible Technology

How to Create Accessible Web Pages

 

Guides

Web Page Elements

  • Images
    Provide text equivalents for all images with communicative value.

  • Keyboard Accessibility
    Be sure people can navigate web pages using just a keyboard, no pointing device. Additionally, be sure there is a visible indication of where keyboard focus is.

  • Accessible Multimedia
    Ensure that all videos embedded in web pages or linked to from web pages are captioned. Provide transcripts for all audio files.

  • Heading Styles
    Structure documents by applying heading styles in a logical order.

  • Color
    Never use color alone to communicate.

  • Contrast
    Use good contrast.

  • Hyperlinks
    Create hyperlink text that makes sense out of context.

  • Flashing, Blinking and Strobing
    Avoid creating or linking to any web content that flashes, blinks, or strobes.

  • Timing
    Avoid timed responses unless the user has sufficient notice to request more time, as appropriate.

  • Lists
    Use the numbered list (ordered) and/or bulleted list (unordered) features to emphasize points or communicate sequence.

  • Complex Tables, Forms, and Interactive Content
    Get support from SMC experts for creating complex tables, forms, and interactive content.

  • Good Design
    Apply good design principles to web pages.

  • Additional Resources on Creating Accessible Web Pages

Images

Tip: Include alternative text for all images with communicative value. This alternative text ("alt text") must be a brief, concise description of the image in the context of the web page. Provide longer descriptions for more complex images. Images only for decorative purposes should be examined to see whether it is of value to the text on the web page.

Process to Add Alt Text and Longer Descriptions

Text within Images

Rationale for Providing Text Equivalents for Images

Examples of Alt Text

Additional Resources

Process to Add Alt Text and Longer Descriptions

Adding Alt Text with CANVAS

  1. Insert an image beginning with clicking on the Embed Image icon in the Rich Media Editor toolbar.

  2. Add alt text in the Alt text edit box within the Attributes controls in the Insert/Edit Image dialog box.

    Canvas Alt Text  

Longer Descriptions

Complex images that require lengthy text descriptions (e.g. graphs and charts) also need brief alt text to describe its basic function and then provided with longer text descriptions within the web page or a linked web page.

Text within Images

Avoid using text in an image versus actual text. Screen readers cannot read text in an image and text in the image becomes blurry when enlarged. Additionally, the text is more difficult to edit and may result in longer downloading time.

Rationale for Providing Text Equivalents for Images

Many people who are partially sighted and all people who are blind interact with web pages by listening to them with screen reading software and/or feeling the content through a refreshable Braille display.

People listening to the web using screen readers or Braille displays can only hear or feel text, not images. Therefore, each image needs to be described with text. All web authoring tools used at SMC facilitate adding text to describe images. This text is called alternative text (or alt text). Thoughtful alternative text provides a succinct description of the image’s function and reflects the context in which the image has been placed.

Examples of Alt Text and Long Description

Below are examples of alternative text for the same image of Winston Churchill used in two different contexts.

Winston Churchill  

First Context: Web page on hats worn by well-known historical figures

Alt Text: Winston Churchill wearing his signature Homberg hat

Second Context: Web page on Cuban cigars

Alt Text: Churchill smoking his favorite Cuban cigar, Romeo y Julieta

Complex images that require lengthy text descriptions (e.g., graphs and charts) should be given alt text to describe its basic function and then provided with longer text descriptions within the web page or a linked web page.

Below is an example of alt text contrasted with a longer description of a Kandinsky painting.

Wassily Kandinsky  

Alt Text: Wassily Kandinsky, Composition 8, 1923

Example of a Longer Description:

Kandinsky shows the evolution of his style while an instructor in the new regime surrounded by Russian avant-garde artists like Kazimir Malevich. The gestural, linear quality of Kandinsky’s work is here replaced by a strict linear and geometric style prevalent in Suprematism and Russian Constructivism

Additional Resources

WebAIM Alternative Text

Keyboard Accessibility

Tip: Make sure people can navigate web pages using just a keyboard, with no pointing device. Also make sure a visible indication of the keyboard focus is noticeable.

Keyboard Accessibility Evaluation

Rationale for Keyboard Accessibility

Additional Resource on Keyboard Accessibility

Keyboard Accessibility Evaluation

Use these keyboard commands to test web pages for keyboard accessibility.

  • Press the Tab key to move forward through links and forms.

  • Press Shift + Tab to move backwards through links and forms.

  • While tabbing, make sure the focus moves through the page in a logical order. Navigate as if

  • While tabbing, make sure there is a visual indication of the selection on the page. In the image below, it is visible in the list of links which link has the keyboard focus because there is a dashed-line rectangle around it.

    keyboard focus  

  • Press Enter (Return) key to activate links and buttons.

  • Press the spacebar to activate check boxes and buttons.

  • Use the arrow keys to control radio buttons, select/dropdown menus, sliders, tab panels, autocomplete and tree menus.

  • If a mouse action displays any page content (e.g. fly-out menu), make sure the same content is available using the keyboard.

  • Press Esc to close any dialog box.

  • Check the reading order of tables. It should proceed from left to right across the first row and move to the first cell in the second row, etc.

Special Note for Using a Mac OS

When evaluating keyboard accessibility with a Mac, turn on keyboard access for all controls.

  1. Open System Preferences and choose Keyboard.

  2. Click the Keyboard Shortcuts tab and activate All Controls radio button.

Rationale for Keyboard Accessibility

Some people (e.g. people who are blind) interact with computers by keyboard alone. They do not use a mouse or any other pointing device.

Additional Resources for Keyboard Accessibility

 

 

Accessible multimedia

Tip: Make sure all videos embedded on web pages or linked from web pages are captioned. Provide transcripts for all audio files.

Support for Captioning

Rationale

Support for Captioning

Canvas

To integrate multimedia into Canvas courses, read the following information excerpted from the Canvas FAQ, Spring 2016. For support, contact Distance Education Multimedia Specialist Christine Miller (x3765, miller_christine@smc.edu) or Alternate Media Specialist Aaron French (x8934).

How does media storage work on Canvas?

If the Real Streaming format of videos was used on eCollege, they will not migrate over to Canvas from eCollege. To continue using these resources, contact Christine Miller.

For other types of video (.mp4, .mov, .wmv, .m4v or .flv), these should migrate over successfully to Canvas as long as it was output as a video file using programs such as Camtasia, Adobe Captivate or Articulate.

If video files are linked from outside websites, such as YouTube or Vimeo, the links and embedding should copy over. Make sure these did not break in the copy process.

Moving forward, all faculty members are encouraged to set up an account with 3C Media Solutions for all video/multimedia needs because Canvas has limited media storage.

Once a 3C Media account is set up with an smc.edu email, contact Christine Miller to be added to the 3C Media Santa Monica College Group account where faculty members can upload videos directly to 3C Media and request free captioning. Turnaround is about 1 week, depending on the video duration, time of the request, and if a transcript is provided. To upload video content to 3C Media Solutions, the file must be in a digital format. For assistance digitizing content, contact Christine Miller.

Benefits of using 3C Media solutions:

  1. Free, closed captioning service. Fast turnaround.

  2. Unlimited storage. Canvas default media storage size is smaller than eCollege, so 3C Media is a digital file cabinet for all digital resources.

  3. Any type of file is storable in 3C Media.

  4. Find and use existing content in the shared SMC Group folder.

Support for Captioning in SharePoint
Contact Web Coordinator Paul Trautwein (x4204) to embed videos on web pages.

Rationale for Captioning

All multimedia must be captioned, and all audio files need to be accompanied by a transcript to accommodate people who are deaf/hard-of-hearing.

  • If there is a deaf/hard-of-hearing student and chosen multimedia is not captioned, this multimedia cannot be shown or assigned.

  • If there is a deaf/hard-of-hearing student and online multimedia is not captioned, links to that multimedia need to be inactive until the captioning is completed.

  • Exception: No students need captioning if an accommodation and the multimedia will be used for the current class ONLY (e.g., YouTube video on a current event).

Heading Styles

Tip: Structure document by applying heading styles in a logical order.

Creating Headings

Rationale

Creating Headings

Canvas

  1. Select text.

  2. Open the Paragraph options from the Rich Media Editor toolbar, and choose the heading level.

Special Note: Reserve heading level 1 for the title of the page.

Canvas Headings  

 Rationale

Providing clear section titles with heading styles makes it easy for people to understand information in an easy-to-understand manner. It also makes it possible for blind people listening to web pages when screen readers use heading styles to navigate a web page.

When sighted people look at the web page below, they immediately know the title is Producing Chocolate, the first major section is Harvest, the second major section is Fermentation and Drying because these titles are stylized consistently and also labeled as well.

document structured with headings  

How can a visually impaired individual understand this page? Structure the page with consistent headings (H1, H2, H3 and H4.) created using the Styles feature accessible through the Home Ribbon on Microsoft Word. (Refer to How-To section)

Headings are titles given to sections of a document or web page. The title of a web page is usually considered the top level heading otherwise known as heading 1. The major document section titles are known as heading level 2. For example, the document about how chocolate is produced is called “Producing Chocolate.” The title “Producing Chocolate” is a heading level 1. The titles of the major sections (Harvesting, Fermentation and Drying) are classified as heading level 2.

Well-structured headings enable visually impaired people who are listening to the web with screen reading software to hear an outline of the document. Below is an image of what screen readers read aloud when prompted to provide the heading structure of the same page, Producing Chocolate. And this allows screen reader users to navigate efficiently to their section of choice.

Chocolage Heading  

Color

Tip: Never use color alone to communicate.

Rationale for not using color alone to communicate.

Use of Color Examples

Color Blindness Simulators

Rationale for Not Using Color Alone to Communicate Information

People who are color blind or severely visually impaired cannot visually discriminate on the basis of color.

Use of Color Examples

Inaccessible Use of Color

The new vocabulary words are listed below. The words in red will definitely be on the test.

  1. diffident

  2. homeostatis

  3. diabesis

  4. prolix

  5. sagacious

All homework is due before the exam.

Accessible Use of Color

The new vocabulary words are listed below. “Diffident” and “prolix” will definitely be on the test.

  1. diffident

  2. homeostatis

  3. diabesis

  4. prolix

  5. sagacious

All homework is due before the exam (Bold and italic are used in addition to color to make "before" stand out.)

Color Blindness Simulators

Color Blindness Vision Simulator

Contrast

Tip: Use good contrast.

Rationale

Examples

Color Contrast Standard

Color Contrast Analyzer Tools

Additional Color Contrast Resources

Rationale

Good contrast is mission critical for many people who are visually impaired and simply good design for everyone.

Examples

Good Contrast

Questionable Contrast

Poor Contrast

Color Contrast Standard

SMC must comply with web accessibility design standards in the Web Content Accessibility Guidelines 2.0, Conformance Level AA. These standards require a contrast ratio between foreground text and background of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).

In general, if the contrast is in question, assume it is not. To confirm whether a contrast ratio complies with standards, use a color contrast analyzer tool.

Color Contrast Analyzer Tools

Additional Color Contrast Resources

Color and Contrast on Web Pages

Tip: Create hyperlink text that makes sense out of context.

Process for Creating Hyperlink Text

Rationale for Creating Hyperlink Text that Makes Sense out of Context

Examples of Accessible and Inaccessible Hyperlink Text

Process for Creating Hyperlink Text

Creating Hyperlinks with SharePoint

  1. Select link text.

  2. Choose the Insert tab from the Editing Tools options.

  3. Click the Link  button, choose SharePoint or From Address, and provide the URL link and description for the link.

    Adding hypertext links through the Links icon from the SharePoint Insert Editing Tools options  

Creating Hyperlinks with Canvas

  1. Select link text.

  2. Choose the Link icon from the Rich Media Editor toolbar, and add the address.

Adding hypertext link through the link icon on the Canvas Rich Media Editor toolbar  

Rationale

Creating link text that makes sense out of context is important because screen reader users will be able to listen to a list of all links extracted from a web page and navigate within that list by first letter. Listening to a list with items like “Click here” or “More” is not helpful.

Below is an image of a screen reader’s link list. A blind user listening to a web page navigates through the list using up and down arrow keys and/or by typing the first letter of the link needed.

JAWS link list from smc.edu  

Accessible and Inaccessible Examples

Unclear Link Text

Click here to go to the Getty Museum.

Read More…

Usable Link Text

Getty Museum

For more information, go to the Getty Museum website.

Additional Resources on Link Text

Link Text from Penn State Accessibility

Flashing, Blinking and Strobing

Tip: Avoid creating or linking to any web content that flashes, blinks, or strobes.

Rationale for avoiding flashing, blinking and strobing

Additional Resources on Flashing, Blinking and Strobing

Rationale

These features can trigger seizures.

Additional Resources on Flashing, Blinking and Strobing

Web Aim Seizure Disorders

University of Minnesota Blinking Elements and Marquees

Timing

Tip: Avoid timed responses unless the user has sufficient notice to request more time.

Canvas and Extended Time

Rationale for Avoiding Timed Responses or Providing Timing Accommodations

Canvas and Extended Time

Faculty is responsible for providing extended time on all quizzes and exams on Canvas. Providing this accommodation in Canvas is simple and does not require altering testing time for all students. Faculty must remember to extend the test time on each quiz/exam for students who need extended time.

Visit “Once I publish a timed quiz, how can I give my students extra time?” for information on how to add extended time for students. For assistance, contact the Canvas Support Hotline at (844) 243-8408 or email the SMC Canvas mentors at canvasmigration@smc.edu.

Rationale for Avoiding Timed Responses or Providing Timing Accommodations

Some people with disabilities may require extra time to process information and/or navigate websites.

Lists

Tip: Use the numbered list (ordered) Ordered List Icon and/or bulleted list (unordered) Unordered List Icon features to emphasize points or communicate sequence.

Examples of Lists

Rationale for Using the Lists Features

Examples of Lists

Foods High in Antioxidants

  • Purple, red, and blue grapes

  • Blueberries and red berries

  • Nuts

  • Dark green veggies

  • Sweet potatoes

Top 5 Livable Cities in the United States

  1. Denver, Colorado

  2. Austin, Texas

  3. Fayetteville, Arkansas

  4. Raleigh-Durham, North Carolina

  5. Colorado Springs, Colorado

Rationale for Using the Lists Features

When using the numbered list and/or bulleted list features, screen reading software used by blind people announces the presence of list items and, depending on the context, how many items are in the list.

Complex Tables, Forms, and Interactive Content

Tips

  • To create pages with complex tables, forms, and/or interactive content, consult a campus expert.

  • To help students access information from complex tables, complete forms, or engage with interactive web pages, determine if these features are accessible.

  • Do not merge, nest or split table cells.

  • Provide titles and summaries for tables.

Rationale

Example of Simple and Complex Table

Support for Using Complex Tables, Forms, and Interactive Content

Rationale

Creating accessible complex tables, forms, and interactive web content requires complex HTML coding.

Table Examples

Example of Simple Table

In a simple table, there is only one header column and one header row.

Types of Chocolate and Their Cacao Content

Chocolate Type Cacao Content
Unsweetened chocolate 100% chocolate
Dark chocolate 30 to 80% cacao content plus sugar, vanilla, and lecithin (emulsifier)
Bittersweet chocolate At least 35 to 80% chocolate liquor plus cocoa butter and sugar
Semisweet In USA refers to chocolate that is darker than sweet chocolate, but sweeter than bittersweet
Milk chocolate 10-20% chocolate liquor plus cocoa butter, sugar, and at least 12% milk in some form
White chocolate At least 20% cocoa butter, about 14% milk and sugar

Example of Complex Table

In a complex table each data cell refers to more than just one row header and one column header. For example, in the table below, “verde” means “green” in “Spanish,” AND it is a “Romance Language.”

Color Names in Multiple Languages

This table provides the words for “green,” “blue,” and “black” in the Romance languages Spanish and French. It provides words for the same colors in the Celtic languages Irish and Welsh.

Complex Table Example  

Credit: Accessibility and Usability at Penn State, Complex Table Example

Support for Using Complex Tables, Forms, and Interactive Content

Omni CMS

  • Paul Trautwein, Web Content and Social Media Manager, x4204

Canvas

Email Canvas mentors and Distance Education staff at canvasmigration@smc.edu.

Support for Evaluating the Accessibility of Complex Tables, Forms and Interactive Content

Good Design/Fonts

Tip: Apply good design principles to all web pages.

Some Good Design Principles

Rationale

Additional Resources on Accessible Print Design

Some Good Design Principles

  • Avoid tiny fonts.

  • Choose easy-to-read, simple fonts (e.g., Verdana, Arial, or Georgia vs. Brushscript MT or Impact.

  • Use appropriate white space between lines and paragraphs to facilitate reading.

  • Allow user to skip over repetitive or lengthy list of links.

  • Be sure the page is readable and navigable when zooming in or out.

Rationale

Applying good design principles facilitates navigation and comprehension of pages for everyone.

Additional Resources on Accessible Print Design

WebAIM Fonts

Checking for Accessibility

Web Accessibility Toolbars

Web Accessibility Toolbar for Internet Explorer by Vision Australia and the Paciello Group

Wave Chrome Extension Web Accessibility Toolbar for Mac OS or Windows by WebAIM

Color Contrast Analyzer Tools

Additional Resources on Creating Accessible Web Pages

Web Accessibility Perspectives explains how "web accessibility is essential for (many) people with disabilities and useful for all." Examples are provided through effective videos that are models of accessibility; providing captions, video description, and transcripts.
 

WebAIM

The National Center on Disability and Access to Education Cheatsheets

PDF Format of Presentations by Jared Smith, Associate Director of WebAim, Santa Monica College, October 2, 2014

Implementing an Accessibility Policy: An Insider's Guide by Lucy Greco and Anna Gazdowicz

Other Colleges

University of Washington, Accessible Technology, Developing Accessible Web Sites

University of Washington, 30 Web Accessibility Tips

Portland Community College Accessibility for Online Course Content