ѿý

Skip to main content

Student Access
Equity & Engagement

  2. Access
  3. Webpage Accessibility

Webpage Accessibility

Webpages have the potential to contain the highest level of accessibility for the widest audience! In fact, international accessibility guidance is based onٲԻ岹.

Most web content shared with students will be through our learning management system, Brightspace. Inside Brightspace, instructors can share documents, spreadsheets, presentations and more, but the information below will focus on the pages that can be created with .Use the following info to add accessible information to your pages.

templates iconTemplates

checker iconAccessibility Checker

alt text iconAlternative Text Tags

list iconLists

form iconForms

table iconTables

headings iconHeading Structure

color contrast iconColor and Contrast

O C R iconMachine-readable Text

math iconMath Content

link iconDescriptive Links

languages iconDocument Language

Consistency

Templates

Brightspace page templates can help you format your content in a consistent and highly accessible way.

In Brightspace:

  1. Go to the Content area of your course.
  2. Go into a module and choose the Upload/Create button:
    upload slash create button
  3. Choose Create a File
  4. Give your page a title and then choose a template from the Select a Document Template dropdown:
    Brightspace template dropdown button with box to show location

Brightspace's built-inAccessibility Checker

Brightspace's Accessibility Checker will advise you on how to make your content more accessible to individuals with disabilities who access your course content.

  1. Follow the instructions above in the Templates section to create a new HTML file in Brightspace.
  2. Look at the bottom right of the editor for the Check Accessibility button (eyeball with a checkmark):

checker icon is an eyeball with a checkmark under it

Keep information perceivable

Alternative Text Tags

() Back to 🔝

Descriptions of images (alt text) allowusers to benefit from the information being conveyed by an image.

What information should you include or exclude from alternative text descriptions? See the.

In Brightspace:

  1. Place the cursor where you want to insert an image, and click theInsert imageicon (camera icon) from the toolbar. TheAdd a Filewindow will open.
  2. Browse to the image location either on your computer or in your course offering files. Navigate to where the image is, select the image file, and click theOpenbutton.
  3. Click theAddbutton
  4. TheProvide Alternate Textwindow will open. Type in descriptive text for the image. For example: “penguin with traditional black and white 'tuxedo' pattern”
    • It’s important to write a description that conveys the content and the purpose of the image. If the image is for decorative purposes, just checkThe image is decorativebox instead.
  5. Click theOKbutton, and then theDonebutton to save.

Video:

SeeComplex Image Accessibilityfor images that cannot be adequately described in alternative text (which should be limited to one or two brief sentences).

Lists

()Back to 🔝

Page formatting (lists, headings and links) isread aloud tousers so that the content can beunderstood in context.If order is important in your list, make it a numbered list. If order is not important, a bulleted list is a better choice.

In Brightspace:

  1. Select/highlight the content you want to make into a list.
  2. On the toolbar, click on theUnordered (Bulleted) Listicon if the order doesn't matter, or selectOrdered (Numbered) Listfrom the drop-down menu if the order does matter.

Video:

Forms

()Back to 🔝

The most common form in Brightspace is a quiz. When creating quiz questions, be sure totag images with alt text, set up, and use theequation editor when adding math content.

Follow this .

Tables

()Back to 🔝

Designating column and row headers in a table is essential. You can also add alternative text descriptions to tables to give an overview of the information in the table.

In Brightspace

  1. Put your cursor in one of the cells you want to mark up as a table header.
  2. Then click on the drop-down menu next to theTableicon in the toolbar.
  3. ChooseTable Cell Properties. TheTable cell propertieswindow will pop-up.
  4. In theCell typefield, click on the drop-down list and selectHeader.
  5. Next, in theScopefield, click on the drop-down list and selectCol.
    • (If you were making the headers for rows instead of columns, you would do the same steps but change the drop-down list in theScopefield toRow.)
  6. If you want to make all of the cells in this row into headers, you can chooseUpdate all Cells in the Rowfrom the last drop down menu field in this window..
  7. When you are done, clickUpdate. You will know you have successfully changed the row to table headers because the look of the table cells will change.

Video:

Ensure a proper reading order in tables

read tables from left to right, top to bottom, one cell at a time (no repeats). If cells are split or merged, the reading order can be thrown off.

Read your table left to right, top to bottom (never repeating a cell). Does it make sense? A screen reader reads tables in this way.

Merged, nested, and split cells change the reading order of tables. Make sure you construct your table in a way that accommodates good reading order.

Heading Structure

(WCAG and )Back to 🔝

It isn't enough to make text big and bold to look like headings. Section titles need to be formatted as headings.

In Brightspace

  • Highlight the section title and then choose an appropriateHeading #from the drop-down Format menu on the tool bar.

Video:

In addition, headings need to be used in the correct order. Headings chunk your content making it easier for everyone to read. Headings are also a major way of navigating with a.

Headings must be used in the correct order for them to be useful.

  • Heading 1 is like the title of a book and there is just one Heading 1 per page. Heading 2s are like chapter titles. Heading 3s are sub-sections of those chapters, and so on.
  • Heading order is also similar to the order of an outline.
  • DO NOT skip heading levels. Eg. Heading 2 to Heading 4 could confuse screen reader users. Instead, only step down one level at a time.
  • See below for a visual display of correct heading structure.

Order of headings

Color and Contrast

(WCAGand)Back to 🔝

Using color or text cues alone to make a distinction, a comparison or to set something apart from the rest of the web page can exclude students that aren't able to perceive those text changes. If you categorize something by color or size alone, those who are color blind or blind will not benefit from the distinction.

Instead, add some text that makes the element stand out to people with a vision impairment. I.e. "DON'T MISS THE DEADLINE!"is better written as"Important note: Don't miss the deadline!"because it announces"Important note" aloud to text-to-speech users, instead of using visual text cues.

Use sufficient color contrast

If you print your documents or pages on a black and white printer, would they be understandable? Without sufficient color contrast, people who are color blind or have low vision will not be able to benefit from the information.

Check color contrast with D2L's color tool

  1. Go to the module and click on the page you want to check the color contrast.
  2. Select the text that you want to change to another color and click the drop down menu next to theColoricon in the toolbar.
  3. Select the color and clickSave.
    Note:When picking a color for your text in D2L, make sure you choose a color that registers with a green checkmark for WCAG AA in theSelect a Colorwindow.

Video:

For a stand-alone tool that can test in many applications (not just Word), try the Colour Contrast Analyzer Tool

  • Downloador

Machine-readable Text

()Back to 🔝

Scanned pages are often put into PDF format. If these pages do not have text recognition performed on them, they will simply be images of scanned content. Assistive software is not able to access the text if it has not been recognized with optical character recognition (OCR).

Text inside JPEGs, PNGs, etc. is also not readable by assistive technology. SeeAlternative Text Tags

  • If you insert an image with text in it, make sure to type the text in thealternative textor in the body of the document.

Math Content

()Back to 🔝

The D2L equation editor outputs MathML, and you can publish Microsoft Word with theto MathML. For more information, see theMath and Science Accessibility page.

Video:

Make interfaces operable

Descriptive Links

()Back to 🔝

Links are important to everyone. If the links are embedded into meaningful text, they are much more useful.

In Brightspace:

  1. From the toolbar, click on theInsert Quicklinkicon.
  2. SelectURLin theInsert Quicklinkwindow,
    • Type or paste in the URL (web address).
    • Enter text that describes the link's destination in theLinkCaptionfield.
      • For example, if the link will take you to the MTSUwebsite, for the meaningful description I will use "MTSU homepage" instead of the URL "www.mtsu.edu" or "click here" which aren't descriptive.
    • SelectWhole Windowin theOpen Insection.
  3. Click theInsertbutton.
  4. And don't forget to click on theUpdatebutton to save your changes.

Video:

Createunderstandablepages

Document Language

()Back to 🔝

will help assistive technologies to synthesize speech correctly.

creative commons attribution + noncommercial + share alike

Information for this page was adapted fromand is based on the Creative Commons license.