Skip to main content

Web Accessibility Guidelines

What is Web Accessibility?

Web Accessibility

Adhering to web accessibility guidelines while developing your online course will benefit all students including those with visual, hearing, mobility and learning disabilities.

Guidelines

The Accessibility Guidelines for Online Course Content are based on the internationally accepted Web Content Accessibility Guidelines AA standards (WCAG 2.0).* These guidelines are a reference guide. For more information, visit www.byui.edu/accessibility. *Web Content Accessibility Guidelines 2.0, W3C World Wide Web Consortium Recommendation Dec 11, 2008 (http://www.w3.org/TR/2008/REC-WCAG20-20081211/, Latest version at http://www.w3.org/TR/WCAG20/)

Required by Federal Law

“Requiring use of an emerging technology in a classroom environment when the technology is inaccessible to an entire population of individuals with disabilities... is discrimination prohibited by the Americans with Disabilities Act of 1990 (ADA) and Section 504 of the Rehabilitation Act of 1973 (Section 504) unless those individuals are provided accommodations or modifications that permit them to receive all the educational benefits provided by the technology in an equally effective and equally integrated manner.”
Source: 6/29/2010 Dear Colleague letter sent to every college and university president http://www2.ed.gov/about/offices/list/ocr/letters/colleague-20100629.html

Web Accessibility Guidelines

Headings 
Use properly formatted headings to structure a page.

Headings help organize your content, making it easier for everyone to read. Headings are also a primary way to navigate pages using screen reading software.

Lists
Format lists as proper lists.

When typing a list, use the proper tools to make a list. Properly formatted numbered lists and bulleted lists are accessible.

Links
Write meaningful link text.

Links embedded in text should describe the link’s destination. It helps users navigate the page more quickly.

Tables
Create tables with column and/or row headers, and ensure a proper reading order.

Why Column Headers in a Data Table are Important:
  • Table headers are essential to understanding how the information is organized.
  • Why the Reading Order in a Table is Important:
  • Screen readers read tables from left to right, top to bottom, one cell at a time (& only once). If cells are split or merged, check the reading order.

Color
Use sufficient color contrast.

Don’t use color alone to convey meaning. Without sufficient color contrast between font and background, people who are color blind and low vision will not benefit from the information. And using color alone to convey meaning will leave those who are color blind or blind unable to interpret the meaning.

Keyboard Accessibility
Ensure that any action that uses a mouse can also be competed using only the keyboard.

Mobility and visual disabilities often prevent people from using a mouse. If content is not keyboard accessible, it will limit many people’s opportunities to learn from the content.

Image ALT Text 
Provide alternative (alt) text descriptions for images.

Alt text is read by a screen reader. It should adequately describe what is being displayed and why it’s important. This allows screen reader users to benefit from the information being conveyed by the image, even if they cannot see it.

Navigation
Design clear and consistent navigation.

Clear and consistent navigation in your course will allow students to focus on your content rather than on how to find it.

Blinking Limit
Eliminate or limit blinking/flashing content to 3 seconds.

Blinking content is not only distracting it can cause seizures in persons with a photosensitive disorder.

Forms
Label form fields and buttons clearly, and ensure a proper reading order in a form.

Why the reading order of a form is important:
  • Using the tab key, your cursor should follow through the form in the same order it is intended to be completed.
  • Why labeling buttons and form fields is important:
  • A screen reader will identify the field by reading the label. It should adequately describe what should be filled in.

Caption Video 
Provide captions or transcripts for video that you or BYU-Idaho produced if it will be used for more than one term.

Video captions benefit everyone. Captions are essential for deaf and hard of hearing viewers. They also assist non-native English speakers who can read along while listening. (Note: Videos should have a keyboard accessible player.)

Transcribe Audio
Provide a transcript for audio that you or BYU-Idaho produced, if it will be used for more than one term.

Audio transcripts benefit everyone. They are essential for the deaf and hard of hearing and they assist non-native English speakers who can read along while listening.

Required Software
Require only accessible software & applications.

Inaccessible software and applications will shut students with disabilities out. Ask the software developer for a VPAT (Voluntary Product Accessibility Template) to help determine the product’s accessibility.

Math & Science 
Write math and science equations accessibly.

Use an accessible equation editor to write scientific notations, equations and formulas. This will allow screen readers to read equations properly.
Outline View 
Check the outline view - Compose your outline in the outline view, and then move to the slide view to add images and design.
  1. Click on View tab in the Presentation Views group (Mac: View menu.)
  2. Choose Normal (PowerPoint 2013: click on Outline View instead of Normal button.)
  3. In the Outline panel, make sure all text from the slides appears in the Outline View.

Slide Layout
Use the PowerPoint provided slide layouts when building slides.

From Home tab, choose the New Slide drop down menu and select a slide template.

Reading Order
Use the PowerPoint provided slide layouts when building slides.
  1. Click on the slide without selecting any of the content placeholders.
  2. Using the keyboard, tab through the slide. This is the reading order of the slide (meaning that is the order a screen reader will read the content.)

Check the reading order.
  1. On the Home tab, click on Arrange and choose Selection Pane (Reorder Objects for Mac - MS PowerPoint 2011.)
  2. Tab through the slide and the corresponding element will highlight.
  3. On the Selection Pane, click arrow up and down icon (On Mac, drag layers) to re-arrange the reading order, reading order begins at the bottom and moves to the top (On Mac, highest number is read first.)

Images, Clipart, and Shapes
Add alternative (Alt) text to images and shapes.
  1. On the Home tab, click on Arrange and choose Selection Pane (Reorder Objects for Mac - MS PowerPoint 2011.)
  2. Tab through the slide and the corresponding element will highlight.
  3. On the Selection Pane, click arrow up and down icon (On Mac, drag layers) to re-arrange the reading order, reading order begins at the bottom and moves to the top (On Mac, highest number is read first.)

Lists
Format a list as a list using Numbering or Bullets lists.

Click on the Home tab. In the Paragraph group, select the Numbering or Bullets icon.
  • Use Numbering lists if a sequential order is important to the list. Use Bullets lists if all items are of equal value.
  • Use Bullets lists if all items are equal value.

Links
Create a meaningful link that describes its destination.
  1. Type out text that describes the destination of the link. For example: BYU-Idaho Homepage.
  2. Select the text, right click and choose Hyperlink... from the menu.
  3. The Insert Hyperlink window will open. Enter a complete URL address in the Address field (Mac - PowerPoint 2011: Link to field.) For example: http://www.byui.edu.
  4. Click the OK button to save the link.

Tables
Indicate column headers for data tables - Note: You cannot create row headers in MS Word and PowerPoint.
  1. Place the cursor in the top row of your data table.
  2. Click on the Design tab under Table Tools (Mac PowerPoint 2011: Table tab.)
  3. In the Table Style Options group, select the Header Row check box.
  4. Now the cells in the top row of your table make up the headers for the columns.

Check the reading order.
  • The screen reader reads a table from left to right, and top to bottom (never repeating a cell.)
  • Merged, nested, and split cells may change the reading order of a table.
  • Make sure you construct your table in a way that accommodates a good reading order.

Color
Use sufficient color contrast.
  • Make sure there is enough color contrast between the text and background colors.
  • Without sufficient color contrast, people who are low-vision and color blind will not benefit from the information.
  • For information on how to check color contrast, go to http://www.byui.edu/accessibility

Math & Science
Math cannot be written accessibly in PowerPoint.

Video & Audio
Link out to media.

Provide captions or a transcript for video that you or PCC produced, if it will be used for more than one term. Make sure the video player is keyboard accessible.
Template
Use the most current Desire2Learn template.

If you don’t have the most current template, contact the Faculty Help Desk or your campus Instructional Technology Specialist.

Headings
Properly format headings.
  1. Highlight the text and select the Heading # from the drop-down Format menu on the tool bar.
  2. Use headings in the correct order.
  3. There can be only one Heading 1 (h1) per page. But there can be multiple h2, h3, h4, h5, h6. DO NOT skip heading levels.
Images
Add alternative (Alt) text to images.
  1. Place the cursor where you want to insert an image, and click the Insert image icon from the toolbar. The Add a File window will open
  2. Browse to the image location and select the image file. Click Done button (Add button in D2L 10.4).
  3. The Provide Alternative Text window will open. Describe the purpose of the image in the Alternative Text field or check the box if the image is just decorative.
  4. Click OK.
Lists
Format a list as a list using Ordered or Unordered lists.
  1. Select the content you want to make into a list.
  2. From the toolbar, click the Unordered List icon if the order doesn’t matter or select Ordered List from the drop-down menu if the order does matter.
Links
Write meaningful link text that indicates the link’s destination.
  1. From the toolbar, click on the Insert Quicklink icon.
  2. Select URL in the Insert Quicklink window
    • Type in the URL (web address).
    • Enter text that describes the link’s destination in the Link Caption field (in the Title field in D2L 10.3)
    • Select Whole Window in the Open In section (Target section in D2L 10.4).
  3. Click the Insert button.
  4. Click the Update button to save your changes.
Tables
Identify column or row headers for data tables.
  1. Place the cursor in one of the cells to be marked up as a column header.
  2. Click on the drop-down menu next to the Table icon in the toolbar.
  3. Choose Table Cell Properties. The Table cell properties window will open.
  4. In the Cell type field, click on the drop-down list and select Header.
  5. In the Scope field, click on the drop-down list and select Col.
  6. To make all of the cells in this row into headers, choose Update all Cells in the Row.
  7. Click Update to save.
Check the reading order.
  • A screen reader reads tables from left to right, and top to bottom, never repeating a cell.
  • Merged, nested, and split cells may alter the reading order of a table.
  • Make sure you construct your tables in a way that accommodates a good reading order.

Color
Use sufficient color contrast.
  1. Select the text that you want to change to another color and click drop-down menu next to the Color icon in the toolbar.
  2. Select the color and click Save. Note: When picking a color for your text in Desire2Learn, make sure you choose a color that registers with a green checkmark for WCAG AA in the Select a Color palette.

Don’t use color alone to convey meaning.
Don’t use color alone to make a distinction, a comparison or to set something apart from the rest of the web page. If you categorize something by color alone, those who are color blind or blind will not benefit from the color distinction.

Math & Science
Write math and science equations using MathML.
Use the D2L equation editor.
For more information, go to the Math & Science page in this handbook.

Multimedia
Animation, Interactive graphics, Video & Audio.
  • Eliminate or limit blinking/flashing content to 3 seconds.
  • Make sure all mouse actions can be completed with a keyboard alone (without a mouse.)
  • If you create video, it must be captioned. If you create audio file, it must be transcribed.
For more information, go to the Video & Audio page in this handbook.
Headings
Properly format headings.
  1. Select the text that you want to make into a heading.
  2. Go to the Home tab.
  3. Choose the appropriate heading level from the Styles group.
Use headings in the correct order
The Heading 1 should only be used ONCE per page. Heading 2, 3, etc. can be used multiple times.
DO NOT skip heading levels.

Images
Add alternative (Alt) text to images.
  1. Right click on the image, and select Format Picture....
  2. The Format Picture window will open.
  3. Select Alt text (Word 2013: select the icon. Then click on to expand Alt text.)
  4. Enter your image description in the Description field (Not in the Title field.)
Links
Create a meaningful link that describes its destination.
  1. Type out text that describes the destination of the link. For example: PCC Homepage.
  2. Select the text, right click and choose Hyperlink... from the menu.
  3. The Insert Hyperlink window will open. Enter a complete URL address in the Address field (Mac - Word 2011: Link to field.) For example: http://www.byui.edu.
  4. Click the OK button to save the link.
Math & Science
Use MathType (a MS Office plug-in) to write equations.
  • Use the MathType plugin http://www.dessci.com/en/ for MS Word to create math and science
  • For LibreOffice, just use the native equation editor which easily converts to an accessible format.

Tables
Indicate column headers for data tables.
  1. Place the cursor in the top row of your data table.
  2. Click on the Design tab under Table Tools (Table tab on Mac - Word 2011.)
  3. In the Table Style Options group, select the Header Row check box.
  4. Click on the Layout tab under Table Tools (Table Layout tab on Mac - Word 2011.)
  5. Click the Repeat Header Row button. This will indicate the top row as the table’s header.

Check the reading order.
  • A screen reader reads tables from left to right, and top to bottom, never repeating a cell.
  • Merged, nested, and split cells may alter the reading order of a table.
  • Make sure you construct your tables in a way that accommodates a good reading order.

Color
Use sufficient color contrast.
  • Make sure there is enough color contrast between the font and its background colors.
  • Without sufficient color contrast, people who are low-vision and color blind will not benefit from the information.
  • For more information on how to check color contrast, go to www.byui.edu.

Don’t use color alone to convey meaning.
Don’t use color alone to make a distinction, a comparison or to set something off or apart from the rest of the document. If you categorize something by color alone, those who are color blind or blind will not be able to benefit from the information.

Forms
Label form fields and buttons.
  • Use real text labels or alternative text when creating buttons and form fields.
  • Use a form template to create a form.
Check the reading order of forms.
  • To check, press the tab key repeatedly to replicate the order a screen reader would navigate through the form. If it doesn’t land on the form fields in the correct order, you will need to edit the form.
  • The tab order (or reading order) is important to those who are blind or physically disabled.
MS Office to PDF
Microsoft Office 2010
  1. Start with a well-structured word document or presentation.
  2. Click the File tab and select Save as. In the Save as type field, select PDF (*.pdf.)
  3. Enter a file name in the File name field.
  4. Click on the Options button and make sure the Document structure tags for accessibility and Create bookmarks using Headings checkboxes are checked.
  5. Click OK and Save. This will tag all of the text formatting so page headings and lists are correctly interpreted by a screen reader.
Microsoft Office 2011 (for Mac)

Scan & Create PDF
Scanner - Knowledge Imaging Center (KIC) kiosks in the library.
  1. Place the document on the scanner bed.
  2. Touch Scan on the interactive touch screen. Then answer the copyright notice/question.
  3. An image of the scanned page will be displayed on the screen.
  4. For multiple pages, repeat step 1 through 3.
  5. With the default settings, the KIC scanner will create an accessible (& searchable) PDF.
  6. Save to USB, E-mail or Cloud.
Flatbed scanners in the faculty production lab.
  1. Open Adobe Acrobat Pro.
  2. From the File menu, select Create > PDF from Scanner & click Autodetect Color Mode.
  3. Follow the instructions from the pop-up window, and select your choices.
  4. When done, click OK.
Optical Character Recognition (OCR)
Adobe Acrobat Pro
  1. If you’ve already scanned your document, open your PDF file.
  2. Open the Tools panel (click Tools in top right) and click Recognize Text.
  3. Click In This File and the Edit button to adjust your OCR settings. Select the language of the text and choose Searchable Image for PDF Output Style and Downsample to 600 dpi.
  4. Click OK when done.
Video
Provide captions or transcripts for video that you or BYU-I produced, if it will be used for more than one term.

A screen reader will identify the field by reading the label. It should adequately describe what should be filled in.
  • Resolution: 640 x 480px (Standard) / 640 x 360px (Widescreen) or 800 x 600px (Standard) / 1280 x 720px (Widescreen.)
  • Video format: mp4, mov, wmv, m4v, avi.
  • Audio: Make sure you record in a quiet location with minimal background noise.
Caption video using YouTube.
After uploading your video to YouTube, go to the following link for captioning instructions:
  1. Go to 
  2. Click on YouTube under Captioning Tools.
Caption video using Camtasia (Windows)
  1. Select the audio tracks.
  2. Click on Captions tab > Speech-to-text button at the top.
  3. The Speech-to-Text window will open. Click the Continue button. To improve accuracy, select Train your computer to understand your voice > Start voice training and follow the instructions.
  4. After your captions have been generated, they will appear on the top track in the timeline. Check for accuracy, if editing is needed, press the tab key to edit each line.
Audio
Provide a transcript for audio that you or PCC produced, if it will be used for more than one term.

What to do when you have an audio file that needs transcription:
  1. Have the audio file ready as mp3, wav, aiff, or wma format.
  2. Go to www.pcc.edu/access/video to check out transcription tools.
  3. Transcribe your audio.
  4. When done, save the file as a document file such as .txt, .rtf, .doc or .docx.
  5. Post the transcript file along with the audio file in your course.
Tips when transcribing an audio recording:
  • Headsets: Ensure that you have good quality headsets.
  • Quiet environment: A quiet space will help maximize your ability to hear the audio.
  • Spell check: Use Spelling & Grammar check on MS Word.
Equations, Formulas, and Notation
Desire2Learn (D2L)
Why the reading order of a form is important.
Given the awards and recognition D2L has won in the area of accessibility, we recommend that as much of the online class as possible be conducted within D2L. All output from D2L’s equation editor is stored as MathML, which is screen reader-accessible.

MathML
MathML stands for ‘Math Markup Language’ which is the standard for online math accessibility. Typically, a user does not create MathML from source, but instead uses a conversion process to output MathML.

LaTeXt
LaTeX is a mark-up language. Converting LaTeX documents into an accessible format is usually straightforward as the accessible formats are also mark-up languages.

MS Word + MathType
MathType is an equation editor created by Design Science that is compatible with MS Word for Windows. Together, MS Word with MathType can be exported as MathML or it can be converted to braille. (Save your source files.)

LibreOffice
LibreOffice (with its native equation editor) converts easily to web pages that contain MathML.

Graphs
There are many ways to create graphs, including Winplot, Excel, Graph, pgfplots, PSTricks, etc. Any graph or graphic, regardless of how it was created, will always be read as an image by a screen reader. As such, appropriate alt text must be included.

WeBWorK
WeBWorK has a variety of screen output options, including MathJax which can be configured (easily) to use MathML.

MS PowerPoint
Math is not accessible in PowerPoint.

PDF
Math is not accessible in PDF.
Accessibility of Materials
Are the videos captioned and audio recordings transcribed?

There should be transcripts for audio recordings and captions or subtitles for video. If they aren’t available, ask the publishing representative if they would provide a captioned version in a timely manner if a student who needed them registered for your class.

Can all of the text that is displayed on the screen be read aloud by text-to-speech software?

Screen readers (assistive technology used by people who are blind) read real text. They cannot read images of text or text embedded in Flash animations/movies/simulations.

How accessible are the E-books?

Check to see if you can find a Document Accessibility Profile (DAP) (currently in beta) on the e-book. The goal of DAP is to make it easy to find and use accessibility information for electronic textbooks and other documents.

Can all interactivity (media players, quizzes, flashcards, etc.) be completed by keyboard alone (no mouse required)?

People who are blind or people who have upper mobility disabilities cannot use a mouse. They use the keyboard to navigate and interact with the Web. It is required that any interactive elements on a publisher’s website (or on a DVD included with the book) be operable by a keyboard alone if they are used in your course.

Is there any documentation available (VPAT or White Paper for example) that confirms accessibility or usability testing results?

A VPAT is a Voluntary Product Accessibility Template. It is used by many organizations to report the level of accessibility of their software products.

Usability of Materials
Is your multimedia (Adobe) Flash or (Oracle) Java-based? Or Can your materials be watched on mobile devices?

Content created in Flash or Java can be inaccessible and may not run on mobile devices and tablets, which are becoming more prevalent.

Does any software need to be installed on student or PCC computers?

If software needs to be installed on PCC computers in a particular lab, consult with that lab’s coordinator.

What are the computer requirements for using their materials? Will the materials work on mobile devices?

Distance Learning informs online students about the computer requirements for taking an online course in the Distance Education Orientation for students. If your course requirements are different, make the computer requirements known in the course syllabus.

How will students get access to the materials?

Does it require an access code? If so, students should be aware that used books may not have the necessary access code or may have an old and unusable code.

Can the electronic content be made available for purchase through the bookstore?

Some students would like to own the material so they have it for future reference (rather than just online during the term.)¬
Contact Us