91̽��

Content headings ("Heading 1", "Heading 2") form a navigable table of contents for screen reader users, labelling all content until the next heading. Table headers label specific columns or rows within a table.

What happened?

When creating the table header, the text inside the table was set to a header. This is not necessary. 

How to fix

Remove heading formatting. Use row and column headers instead. This can be done by 

1. Highlight the text.

2. Click on the Heading button in the toolbar.

   
3. Select Paragraph.
4. Save the page. 

When exploring tables, screen readers repeat table header cells as needed to orient users. Without headers, it is very easy to get lost; screen reader users have to count columns and rows and try to remember which columns went with which rows.

What happened?

The table is not properly formatted. Different web browsers treat HTML markup errors differently and will treat those errors with unexpected behaviors. 

How to fix

Click on the Source button and remove any blank <th> tags (or tags labeled as <th>&nbsp;<th> from the source code. You may have to adjust any <th> tags that has the attribute, colspan, appropriately. 

For example, a 3-column layout table may be constructed as followed:
<thead>
 <tr>
 <th colspan="3">First Year - <strong>Fall Semester</strong></th> // 3-columns long
<th>&nbsp;</th> // 1 blank column
<th>&nbsp;</th> // 1 blank column
</tr>
</thead>

This code produces 5 columns instead of the intended 3. The colspan tells the table to be 3 columns long and then adds the remaining 2 blank columns. By deleting the last 2 <th> tags, the table header will expand all 3 columns and will properly be labeled as Fall Semester. 

Headings and subheadings create a navigable table of contents for assistive devices. The numbers indicate indents in a nesting relationship:

• Heading level 1
  • Heading level 2: a topic
    • Heading level 3: a subtopic
  • Heading level 2: a new topic

Empty headings create confusing gaps in this outline: they could mean the following content is still part of the previous section, or that the text was unpronounceable for some reason.

To fix: add text to this heading, or delete this empty line.

What happened?

If this appears in the group block, it means that the Group Block Title is blank. Fill out the Group Block with Contact Information to fix.

How to fix

1. Go to your Department's subsite home page.

2. Click on the Edit tab. 

   

3. Click on Edit in the Group Block to display the Group Block settings. 

   

4. Fill out the Title field. 

   
5. Save your edits by clicking on the Save button.

When screen readers encounter an image with no alt attribute at all, they dictate the url of the image file instead, often one letter at a time.

To fix: either add an empty alt (alt="") to indicate this image should be ignored by screen readers, or add descriptive alt text.

Note that a good alt describes the image's message, not simply what it contains. Depending on the context, the alt for the picture of a child kicking a ball might emphasize the setting, the child, the kick or the ball:

• The sunny spring day brought kids to the park for some soccer.
• A.J. wearing the new team uniform.
• The game-winning kick curved in from the left sideline!
• The size 4 ball is the right size for this 9-year-old child.

What happened?

When the image was uploaded to the site, the alternative text field was left blank.

How to fix

Determine how the image is displayed:

If the image is placed within a card, carousel, or hero

Add the alternative text to an image

Step 1: Identify the image 

1. Click on the Layout tab.
2. Edit the component by clicking on the Edit tab.
3. Find the filename of the image that is causing the error. 

Step 2: Find the image

1. In a new window, open the Media view (click on Content -> Media) 

   
2. Search for the file name by using the Name filter.
3. Once the file is found, click on the Edit link.

4. Fill out the Alternative text field and click on the Save button. 

   

If the image is placed within the Edit page

1. Click on the Edit tab.
2. In the editor, click on the image.

3. Click on the Override media image alternative text button. 

   
4. Enter the alternative text and click on the check to save.
5. Save your edits by clicking on the Save button.

This image's alt text is "filename.png," which probably describes the file name, not the contents of the image.

What happened?

Instead of describing the image, the file name was used as the alternative text. 

How to fix

Set this image's alternative text to a concise description of what this image means in this context.

1. Click on the Edit tab.
2. In the editor, click on the image.
3. Click on the Override media image alternative text button.
4. Enter the alternative text and click on the check to save.
5. Save your edits by clicking on the Save button.

Note that a , not simply what it contains. Depending on the context, the alt for the picture of a child kicking a ball might emphasize the setting, the child, the kick or the ball:

• The sunny spring day brought kids to the park for some soccer.
• A.J. wearing the new team uniform.
• The game-winning kick curved in from the left sideline!
• The size 4 ball is the right size for this 9-year-old child.

When a link is wrapped around an image, the image's alt text .

What happened?

Images that were migrated over from the previous website or are coming from links from other websites may not include alternative text tags. 

How to fix

Set this image's alternative text to something that describes the link's destination, or add text next to the image, within the link. To solve this issue, use the edit link button and label the image using the Aria-Label attribute in the Advanced Settings tab. However, the best solution is to upload a copy of the image to the 91̽�� website using the media browser. Once uploaded, add the appropriate alternative text. This also solves the corresponding alert “Image has no alternative text attribute” that can appear with this issue. 

If this table contains data that is meaningfully organized by row and column, edit the table's properties and specify whether headers have been placed in the first row, column or both. This lets screen reader users hear the headers repeated while navigating the content.

If this table does not contain rows and columns of data, but is instead being used for visual layout, remove it. Tables overflow the page rather than reflowing on mobile devices, and should only be used when the horizontal relationships are necessary to understand the content.

What happened?

The table does not have header cells (<th></th> tags).

How to fix

Solution 1: Add a header to the table.

1. In the text editor, click on the table.

2. Select the row button. 

   
3. If the top row is the header, click on the Header row slide.
4. If there is no header row, click on 'Insert row above'.
5. Click on the newly created row.
6. Click on the Header row slide.
7. Enter text for the header row.
8. Save your edits by clicking on the Save button. 

Solution 2: If the table is being used for visual layout, remove the table altogether and use the layout builder. 

Readers can always choose to open a link in a new window. When a link forces open a new window, it can be confusing and annoying, especially for assistive device users who may wonder why their browser's "back" button is suddenly disabled.

There are two general exceptions:

• When the user is filling out a form, opening a link in the same window would cause them to lose their work.
• When the user is clearly warned, a link will open a new window.

To fix: set this link back to its default target, or add a screen-reader accessible warning (text or an icon with alt text).

What happened?

A link opens in a new window. Is this expected behavior?

How to address this issue?

Links that open in a new window can be disorienting for some users, regardless of using screen readers or a web browser, unless there is a visual warning. This also disables the use of the back button, preventing users who may be using a screen reader from accessing it because it disables the browsing history in that new tab.

There are exceptions to this rule including:

1. Pop-up boxes to complete forms. For example, sharing an article through LinkedIn or Facebook.
2. Instructions for completing a form that is too long to exist on a page.
3. Links to instructions that open in a new window or tab so that people will not lose progress in completing the form. 

How to fix

1. Click on Edit to edit the page or the Layout Builder.
2. Clicking on the link.
   1. If the link is in the Layout Builder, click on the block and Edit to edit the block.

3. Click on the link properties button.

   

4. Disable the ‘Open in a new window’ slide. 

   

Many mobile and assistive device users struggle to read content in PDFs. PDFs generally do not allow for changing font sizes, and often contain features that are incompatible with screen readers.

Ideally, make the content of this linked PDF available on a Web page or in an editable document, and only link to this PDF as a "printable" alternative. If this PDF is the only way you are providing to access this content, you will need to manually check that the PDF is well-structured, with headings, lists and table headers, and provides alt text for its images.

What happened?

Your link goes to a downloadable file that may not be accessible.

How to fix

For now, this is a manual check asking you to review the document you are linking to. For more information, please review the Web Content Guidelines for Downloadable Documents page. 

This link's text is: Learn more

Readers skim for links. This is especially true of screen reader users, who navigate using a list of on-page links.

Generic links like "click here," "read more" or "download" expect the reader to be reading slowly and carefully enough to figure out each link's purpose from context. Few readers do this, so click-through rates on meaningless links are extremely poor.

How to fix

Instead of using "click here", "read more", or "download", text should be meaningful. 

• Ideal: "Learn about 
• Not meaningful: "Click  to learn about meaningful links."
• Not concise: ""