Ingeniux Website Accessibility Resources

Meaningful images should be described through alternative text. 

What Is Alt Text? 

Alt text—short for “alternative text”—is a short-written description that explains what appears in an image. Typically, one or two sentences that capture important visual details a user needs to know in an image. If an image includes written text, that text should also be included in the description. You don’t need to start with phrases like “image of,” because screen readers already inform users that they are encountering an image before reading the alt text. 

Why Is Alt Text Important? 

Alt text allows people who are blind or have low vision to access the information conveyed by images. Without a description, the content of an image is inaccessible. 

Will Everyone See the Alt Text? 

No. Alt text is typically hidden from view on webpages and documents. It is read aloud by screen readers so users can understand what the image represents. 

What If My Alt Text Is Longer Than 1–2 Sentences? 

Alt text should be brief—around 150 characters or one to two sentences. 
For detailed visuals such as charts or complex diagrams, include a longer explanation in the main text or in supplemental material. Your alt text should then indicate that a full description is available (e.g., “Krebs Cycle diagram; full description provided below”). 

How Do I Write Effective Alt Text? 

Think about why the image matters in the context of your content. Focus on the essential visual details and place the key information first. Avoid phrases like “image of…” because screen readers already identify images, and keep the description neutral and objective. 

Where to add alt text in the CMS? 

• For Mastheads, please refer to the "Create a Masthead" step-by-step video tutorial. Begin at 3:10, where alternative text is covered.
• For Images in the content area, please refer to the "Create a Media Component - Image" step-by-step video tutorial. Begin at 3:47 where alternative text is covered.

All meaningful content should have adequate color contrast to be perceptible to sighted readers. 

What Is Color Contrast? 

Color contrast describes the difference in brightness between the foreground content—such as text or icons—and the background behind it. For example, black text on a white background has very high contrast, while light gray text on white has low contrast. 

Why Does Color Contrast Matter? 

When contrast is too low, many people struggle to see or read content clearly. High contrast makes text and graphics easier to recognize, while low contrast can cause readers to overlook important information or strain their eyes, especially in bright or high-glare environments. Strong color contrast is especially important for individuals with low vision or colorblindness, but it benefits everyone. If something appears on your webpage or document, it should be easy for all sighted users to perceive. 

What Level of Contrast Is Required? 

The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios for readability: 

• 4.5:1 for normal-sized text 
• 3:1 for large text (18 pt or larger, or 14 pt and bold) 

Meaningful icons or graphics—such as warning symbols, checkmarks, or buttons—should also meet at least a 3:1 contrast ratio to ensure they are visible to most users. 

How Do I Check Color Contrast? 

Use a color contrast checker tool to verify that your text and graphics meet accessibility standards. Because everyone perceives color differently, it’s best not to rely on visual judgment alone—contrast-checking tools offer accurate, objective measurements. 

• Contrast Check Tool by WebAIM

Provide digital text rather than images of text. 

What Is an Image of Text? 

An image of text is created when text is captured as a picture—such as through scanning a printed page, taking a photo of text, or grabbing a screenshot. Unlike true digital text, the words in an image cannot be selected, copied, edited, or resized without losing clarity. Digital text, however, can be scaled and adjusted without degrading in quality. 

Why Is Digital Text Important? 

To make content accessible, images of text often need to be converted into real, editable digital text. Digital text allows readers to change font size, color, spacing, and other settings that support visual or cognitive accessibility. It can also be recognized by assistive tools like screen readers. 

Images containing text—such as scanned PDFs, photos, or screenshots—create accessibility barriers. Users cannot customize the appearance of the text, and many assistive technologies cannot read text embedded in an image. As a result, individuals with low vision, cognitive disabilities, or those who rely on text-to-speech tools may be unable to access the information. 

While using digital text doesn’t guarantee a fully accessible document, replacing images of text is an essential first step toward accessibility. 

 Link text should be unique, concise, and descriptive of the link destination. 

What Is Meaningful Link Text? 

Meaningful link text uses descriptive wording that tells readers where a hyperlink will take them. Instead of vague phrases like “click here,” good link text names the destination such as “Digital Accessibility Resources.” 

Why Does Meaningful Link Text Matter? 

People using screen readers often listen to a list of all links on a page, which is read aloud as the link text—not the full URL. If multiple links use generic text like “click here,” users cannot tell one link from another. Unique, descriptive link text ensures each link is understandable even when read out of context. 

Additionally, users expect a hyperlink to open a webpage. If the link points to a downloadable file instead, the sudden change can be unexpected or confusing. Clear link text helps readers know when they are about to open a document rather than a standard webpage. 

How Do I Write Meaningful Link Text? 

Avoid Using the URL 

Link text should describe the destination—not display the full URL. 

• Bad: https://www.kutztown.edu/about-ku/administrative-offices/web-and-digital-media/cms-training-resources.html 
• Good: Website Content Management System Training Resources 

Exceptions apply when users need to remember or type the exact URL, such as campus portals or login pages. 

Describe the Destination 

Avoid vague text like “here,” “click here,” or “read more.” 

• Bad: For accessible technology resources, click here. 
• Good: Explore our Accessible Technology Resources. 

Identify the File Type 

If a link leads to a document instead of a webpage, include the file type in the link text. 
Example: “Digital Accessibility Standards (PDF)”. Also, define the document type in the link class in Ingeniux. Including both ensures the document link is more accessible and usable for all audiences.

Use Unique Link Text 

Different destinations require different link labels so screen reader users can distinguish them. 

• Bad: We have a guide for Word accessibility and a guide for PowerPoint accessibility. 
• Good: We have guides for Word accessibility and PowerPoint accessibility. 

If multiple links take users to the same location, using identical link text for each one is recommended. 

Lists should be programmatically created in your content creation software. 

What Are Accessible Lists? 

Accessible lists are groups of items that are correctly structured using your editor’s built-in list tools. Lists can be: 

• Ordered lists, where the sequence matters (usually numbered or lettered) 
• Unordered lists, where the order doesn’t matter (usually shown with bullet points) 

To ensure accessibility, create lists using your content editor’s list buttons rather than manually typing symbols or numbers. 

Example: Properly Formatted Unordered List 

• Bear 
• Bird 
• Bee 

Example: Inaccessible Manually Typed List 

* Bear 
* Bird 
* Bee 

Why Are Accessible Lists Important? 

Users who are blind do not see visual indicators like bullets or numbers. Screen readers rely on proper list structure to communicate this information. When a screen reader encounters an accessible list, it announces something like “list, 3 items,” helping the user understand they are entering a grouped set of items. 

Without proper list formatting, screen readers may read the items as a continuous line of text, making the content confusing and harder to navigate. 

How Do I Create an Accessible List? 

Most text editors and website builders include tools for creating lists. Some will even convert typed symbols—like an asterisk and a space or a number followed by a period—into real list formatting automatically. 

Here are two easy ways to confirm your list is accessible: 

1. Check the toolbar: 
   Place your cursor inside a list item. If the list button appears highlighted, the list is correctly formatted. 
2. Press Enter at the end of a list item: 
   If a new bullet or number appears automatically, the list is recognized as a real list. 
   If you just get a blank line, the editor does not recognize it—select the items and apply the list formatting with the toolbar button. 

Accessible tables help all users navigate data effectively. 

Key Terms

Before discussing how to create accessible tables, it’s helpful to understand a few key terms. 

Header: A cell that identifies the content of a row or column.

• Row header - Describes the row
• Column header - Describes the column

Caption: A caption is a visible title that describes the table’s purpose, such as “Growth in Economics Enrollment, 2010–2020.” 

Simple vs. Complex Tables

Simple Table

• One set of row and/or column headers
• No merged cells
• Preferred format

Complex Table

• Multiple header levels
• Merged or grouped cells
• More difficult to make accessible (avoid when possible)

What Makes a Table Accessible?

An accessible table is structured in a way that users, including those relying on screen readers, can understand and navigate.

Accessible tables:

• Use properly tagged row and column headers
• Include a caption or context in the surrounding text
• Contain real data (not layout)
• Avoid unnecessary empty cells

Why Accessibility Matters

Without tagged headers, screen reader users cannot determine:

• Where they are in the table
• What row or column are they reading

Proper headers allow assistive technology to announce row and column information as users navigate.

How to Create an Accessible Table

1. Confirm a table is necessary (not for layout).
2. Add a caption or descriptive context.
3. Tag header rows and/or columns using your editing tool’s table properties (assign row or column scope).

Color, text formatting, or other visual cues should not be used as the only way of communicating meaning. 

What Is Visual Style? 

Visual style refers to formatting used to emphasize or organize content. Examples include: 

• Italics 
• Bold text 
• Underlines 
• Punctuation 
• Spacing or alignment 
• Color 

Visual styles can improve readability and comprehension for sighted readers, but they should never be the sole way to convey meaning. 

 How Should Visual Style Be Used? 

Visual style is most effective when it complements other ways of presenting information. For instance, a form might highlight required fields in red. If red is the only indicator of required fields, some users may miss that information. Always provide additional cues, such as text labels, icons, or other non-visual indicators. 

 Why You Shouldn’t Use Visual Style Alone 

Not all readers perceive visual styles in the same way: 

• Individuals with low vision or blindness may not see colors, bolding, or underlining. 
• Screen readers often do not announce colors or font styles. 
• People who are colorblind may not distinguish between certain colors (for example, red and green). 

Relying solely on visual style to convey meaning creates barriers and can prevent users from accessing important information. 

As a content contributor to the Kutztown University website, your work should reach as many people as possible — easily, clearly, and on any device. That is why we recommend building your content directly on the website using the components available in Ingeniux instead of using PDFs.

Better for Accessibility

Our web pages are designed to work with screen readers, keyboard navigation, and assistive technologies. Using the structure we created in Ingeniux makes your content more usable and inclusive — without the formatting issues that often come with PDFs.

Built for Mobile

A very large portion of our website visitors are using their phones. Web pages automatically adjust to different screen sizes, while PDFs require zooming, scrolling, and extra effort. Publishing directly to the site ensures a smooth, modern experience.

Greater Reach and Impact

Web content built directly into a page in Ingeniux:

• Loads faster
• Ranks better in search
• Is easier to update
• Performs better across devices and is responsive

When you publish content as a web page, your content is more discoverable, more accessible, and more engaging.

The Bottom Line

If it’s meant to be read online, it should live online.

By creating web-first content instead of PDFs, you help us deliver a better experience for every user and maximize the impact of your work.