---
title: "Top 6 HTML Issues in Panorama"
canonical: "https://help.cccs.edu/space/KnowledgeBase/1006174211/Top%206%20HTML%20Issues%20in%20Panorama"
format: markdown
---
## Overview

MyCourses lets you easily create course content in HTML format. While HTML is designed to be an accessible file format, your course content is ultimately as accessible as you design it. These six issues slip into MyCourses content more frequently than others, and both Panorama and the HTML editor make them very easy to fix. For any of these issues, you can select **Learn more **to learn how to fix the issue in its native software.

## 6. This link is missing a text description

Severity: **Minor**

This invisible error is caused by a HTML link tag with no text inside. Empty links are unusable to anyone trying to read your file. Sighted users will not see the tag, text-to-speech users will not hear it, and screen reader users will hear the full URL read aloud with no other context.

### Fixing in MyCourses

1. Open the Web Page from your course module.
2. Select **Edit HTML, **the first option below the file preview.
3. Select the **ellipse icon **at the right side of the toolbar in the HTML editor to show all tools.
4. Select the **code block (</>) icon **to open the Source Code editor.
5. Press **Ctrl + F **to open the search tool.
6. Type **<a **in the search box to find the next link in the file.
  1. Links are tagged as <a>. We leave out the closing bracket as the links may have varying attributes, i.e. <a href=”help.cccs.edu”>.
7. Check if the link has text between the brackets, i.e. <a href=”help.cccs.edu”>**CCCS Help**</a>. If not, add text that states the title or purpose of the target link.
8. Repeat step 7 for all remaining links in the file.
9. Press **Save **in the source code editor to apply the changes.
10. Select **Save and Close **to save changes to the HTML file.

### Fixing in Panorama

1. Open the Accessibility Report.
  1. Select the **badge next to the file’s name **if viewing your module in MyCourses.
  2. Select the **Panorama dial icon **if editing the file in the HTML editor.
2. Locate the link label issue and select **Fix Issue**.
3. Type a descriptive label in the **Replace Link Description field.**
4. Select **Add Change**.
5. Repeat steps 3 and 4 for all links that do not have labels.
6. Select **Apply Changes **section in the Panorama accessibility Report once all accessibility issues are repaired.

![Panorama link label window with a text field to enter the link description..](media://ab862d97-7f71-431d-b39b-1797689e2019)

## 5. The font size is smaller than 9 points

Severity: **Minor**

MyCourses' default text size is 12 px or 9 pt, which is the smallest possible font size YuJa Panorama will allow. While text below this size will result in an accessibility error, it is a good accessibility practice to use at least 16 px or 12 pt for your body text. 20 px matches most of the text in MyCourses and results in an easily readable HTML file.

### Fixing in MyCourses

1. Open the Web Page and select **Edit HTML**.
2. Select the font that is under 12 px (or 9 pt).
3. Change the font size to **at least 16 px, preferably 20 px.**
4. Repeat step 3 for any other font under 12 px.
5. Select **Save and Close**.

![MyCourses HTML editor with selected text labeled 1, font size dropdown labeled 2, and 20 px option labeled 3.](media://557413a4-337d-4656-9ccc-f04f35771d59)

### Fixing in Panorama

1. Open the Accessibility Report.
2. Locate the font size issue and select **Fix Issue**.
3. Choose a font size greater than 9 pt, preferably **at least 16 pt**.
4. Select **Add Change**.
5. Select **Apply Changes **section in the Panorama accessibility Report once all accessibility issues are repaired.

![Panorama font size window with a dropdown to choose a new font size.](media://f627170e-c19d-4f97-9f29-d3b3fd8ec655)

## 4. This link is broken

Severity: **Major**

Links can deprecate over time as websites are changed or removed from the internet. Broken links negatively affect everyone trying to complete your courses, especially if the external web content is required reading.

**NOTE: **Fair use copyright law allows you to use copyrighted content in your course if used explicitly for educational purposes.

### Fixing in MyCourses

1. Open the Web Page and select **Edit HTML**.
2. Select the broken link and either select the **pencil icon** that appears or **Ctrl + K.**
3. Change the link in the **Link field **to a functional link.
4. Select **Apply.**
5. Repeat steps 3-5 for all other broken links in the file.
6. Select **Save and Close**.

### Fixing in Panorama

1. Open the Accessibility Report.
  1. Select the **badge next to the file’s name **if viewing your module in MyCourses.
  2. Select the **Panorama dial icon **if editing the file in the HTML editor.
2. Locate the link label issue and select **Fix Issue**.
3. Type a descriptive label in the **Replace Link Description field.**
4. Select **Add Change**.
5. Repeat steps 3 and 4 for all links that do not have labels.
6. Select **Apply Changes **section in the Panorama accessibility Report once all accessibility issues are repaired.

![Panorama link URL window with a text field for the new URL.](media://d49e0c07-c354-40c0-a9a8-50d8fd372e2d)

Fixing a broken link in Panorama.

## 3. The item does not have an alternative description

Severity: **Major**

Alternative descriptions (or alternate text) are brief, descriptive captions embedded into images. Screen reader users will hear alt text read aloud when encountering an image. This helps them understand the image, and without it they would only hear the image read as “Image.” Alt text also helps users with poor internet connections where images may not load.

**NOTE: **MyCourses flags images with alt text over 120 characters.

### Fixing in MyCourses

1. Open the Web Page and select **Edit HTML**.
2. Select the image that is missing alt text.
3. Select the **landscape icon **to edit the image options.
4. Type a description less than 120 characters in the **Alternative description **field.** **

![MyCourses HTML editor with image labeled 1, image options button labeled 2, and Alternative description text field labeled 3.](media://d4d5e8b3-fcb0-428f-88b4-8048335e4671)

### Fixing in Panorama

1. Open the Accessibility Report.
2. Locate the alternative description issue and select **Fix Issue**.
3. Enter a brief description that summarizes the contents of the image. Aim for less than 120 characters.
4. Select **Apply Changes **in the Accessibility Report once all accessibility issues are repaired.

![Panorama alt text window with a text field labeled 'Add Alt Text' and a checkbox to update all images in the document.](media://a23ac897-f381-4e76-8523-e0a354c0d608)

## 2. Insufficient contrast between foreground text and background

Severity: **Major**

While use of vibrant colors can make your course content look more appealing, it should be balanced with maintaining proper color contrast on a white background. MyCourses makes this easy by incorporating a contrast checker into its color picker. The contrast checker checks for both small text (up to 24 px or 19 px and bolded) and large text (at least 24 px or 19 px and bolded).

### Fixing in MyCourses

1. Open the Web Page and select **Edit HTML**.
2. Select the text with insufficient contrast.
3. Select the **A and paintbrush icon **in the top toolbar to open the color picker.
4. Choose a new font color and ensure it passes the built-in contrast checker.
5. Select **Save **if the contrast passes.

![MyCourses HTML editor with selected text labeled 1, text picker icon in the top toolbar labeled 2, the black swatch at the bottom right in the Select a Color window labeled 3, and the Save button labeled 4. The black text color passes both contrast checks.](media://2f7b9b69-c64f-49f1-ae13-b095c1551312)

### Fixing in Panorama

1. Open the Accessibility Report.
2. Locate the contrast issue and select **Fix Issue**.
3. Select the color swatch underneath **Text Color**.
4. Use the color sliders or the syringe tool to choose a new color. Pay attention to the Contrast Ratio on the right side. A ratio of at least 4.5:1 is ideal.
5. Once you have chosen a new color, select **Add Change**.
6. Repeat until all issues are fixed.
7. Select **Apply Changes **in the Accessibility Report once all accessibility issues are repaired.

![Panorama Contrast window with the text color set to red and the background color set to white. The contrast ratio is 4.63 to 1, which means it passes both large and small font checks.](media://298f06ac-c7b4-4511-a3ad-1fc24bcd935c)

## 1. This link should have a descriptive title

Severity: **Minor**

Users who cannot see links and need to hear them read out loud perceive them differently than sighted users. Assistive technology users often hear links read out of context, whether tabbing through a webpage or reading a list of links. Full URLs can be cumbersome to read and “Click here” or “Read more” are vague and say nothing about where the link goes. Instead, use labels that state the name of the website or describe where the link will go.

### Fixing in MyCourses

1. Open the Web Page from your course module.
2. Select **Edit HTML, **the first option below the file preview.
3. Select the link without a descriptive label and either select the **pencil icon** that appears or **Ctrl + K.**
4. Add or change the text in the **Text **field and ensure the **Current Window **radio button is selected instead of New window.
5. Select **Apply.**
6. Repeat steps 3-5 for all other problematic links in the file.
7. Select **Save and Close **at the bottom left of the window to save the changes to the file.

![Selected link labeled 1, pencil icon labeled 2, Text field labeled 3, Current window radio button labeled 4, and Apply button labeled 5.](media://72ddca82-198d-4ea5-938e-863b000c4430)

The steps to fix this issue in Panorama are identical to #6 or **This link is missing a text description**. Add a descriptive label to the link which states the name or purpose of the target page.