Purpose of Alternative Text

Alternative text  (alt-text) provides an alternate description of non-text content. The most common use for alt-text is for images, and the principle can be applied to any other non-text content on your website.

The crucial purposes of Alt-text can be summarized by the following:

• It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
• It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
• It provides a semantic meaning and description to images that can be read by search engines or be used to later determine the content of the image from page context alone.

Important Rules when writing Alternative Text

The alt attribute should typically:

• Be accurate and equivalent in presenting the same content and function of the image.
• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
• NOT be redundant or provide the same information as text within the context of the image.
• NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

When adding alt-text to images, context is everything, for example, while content images require a short and accurate description, decorative images are usually fine without alt-text, and functional images simply need a more accurate/equivalent name.

For more information and examples on alternative text, you can visit https://www.webaim.org/techniques/alttext.

When you first upload an image into Cascade, it will automatically have its file name as its alternative text as shown below. 

However, this is not ideal for accessibility because the image name will not always be descriptive on its own. An image file name that is 'image123456.jpg' would offer no accessible information to those who need it. This has a simple solution though; simply erase that name and type in a more descriptive one, and the error should be averted. You can view alternative text guidelines in the Image is missing alternative text accordion above this one. 

As discussed in the 'Image missing alternative text' accordion some images may be classified as "decorative" images, which would mean that they do not need alt-text. Although if the image is alone in paragraph tags, a decorative image would leave the tags without any text in it. This will bring up an error in Cascade as displayed below:

This issue can be fixed by entering the 'Source Code' of the page located on the toolbar and removing the <p> tags from both sides of the <img ....> tag. 

Structuring Headings

Headings create sections in your website to help organize information; they come in 4 heading levels starting at the top of the hierarchy heading 1 (h1) and moving down to heading 4 (h4). When creating content please start with h2 because in most cases h1 is assigned automatically to the title of the page. The two major rules for headings to keep in mind are:

• When adding a smaller heading under a larger one, it must be the next smallest level: an h2 followed by an h3 (not an h4)
• You may begin a new section by adding a higher-level heading under a previous lower-ranked heading. Such as putting an h2 under an h4.

Heading 1

Heading 2

Heading 3

Heading 4

Multiple <br> tags

One of the most common tag errors that you might encounter is a Cascade error referring to excessive line breaks. Website creators can attempt to use two line break tabs (<br /><br />) to simulate extra vertical space between information. This can be done by instead, wrapping consecutive information in <p></p> tags, which is more compliant with accessibility standards. 

Empty <p> tags

This error will occur most often in two cases. The first is if you have an image, inside <p> tags, that has no alt-text. In this case, there is nothing inside the <p> tag that can be read by a screen-reader and this error will appear. This can be resolved by adding alt-text to the image or, if it is a decorative image, by removing the <p> tags in the Source Code editor. The second case of this occurring is when <p> tags are void of any text, which can also be resolved by entering the Source Code editor and deleting the empty <p> tags.

It is important that you format a list on your website using the Bullet list or Numbered list buttons in the editor. This is important to ensure your website is as accessible as possible. By formatting lists in the editor, you help ensure that a user with limited accessibility can navigate through your website as efficiently as possible.

Bullet list:

• Example 1
• Example 2

Numbered list:

1. Example 1
2. Example 2

In summary, simply typing out text with typed dashes next to them does not suffice for peak accessibility, and neither does copy/paste-ing a list from another website, document, or email.

Part of maintaining accessibility when creating pages is making sure links are unique. Having links that point to different locations, but are named identically, restricts context needed to know the destination of the link, for users who require accessible pages.

To avoid this issue, try specifying the title of the link. Instead of multiple 'Department Homes', label the departments, instead of 'Form', specify what type of form, and of course, avoid 'here' link names.  

Links are simple to add to a website but can easily be used incorrectly. When creating a link to another TAMUK website, it is important to choose Internal when choosing the link type. Doing so ensures that whenever that TAMUK link's URL is changed, the link will point to the updated URL automatically. If you classify a TAMUK website as External the link will become broken in the event that the URL is updated or changed. 

Links that point to a non-TAMUK website need to be classified as External. Although, there is no option to enter a URL for an Internal link, so your only option to enter its URL is by selecting External.

The Link has no text inside it:

If a website creator doesn't properly remove a link from the text for example: by backspacing the text instead of highlighting it and clicking 'Remove Link', the link will remain in the html code without text that will look something like:

<a href="https://www.tamuk.edu/email/"></a>

This brings up an accessibility error in Cascade as shown below:

Having no text to display a link on the screen is an important issue to avoid. It can be fixed by opening the 'Source code' tool in the editor, identifying the link without text that will be an <a href=""> link tab next to a closing </a> tab, and deleting it from the code. If you need the link to display on the website, simply type the link's name between the tags as so:

<a href="https://www.tamuk.edu/email/">Email</a>

The Link text is uninformative:

This link will appear when a link has text that is too short or uninformative, the most common being 'here' or 'click here' text. As described by Cascade, the text in this link is too generic to be helpful for users. Users will be unable to discern the purpose or destination of the link without reading the text that surrounds it. Change the text in this link to something that is unique and informative so that the user can understand what content or actions can be found at the link's destination.

Underlining text: Underlining non-link text is not allowed because it could be confused for a link, and when underlining blocks of text, it makes the text harder to read. This will also bring up an error in Cascade as shown below.

The solution to this issue is to re-type the text without an underline or to highlight the text and use the Clear formatting option located under the Format tab on the editor's toolbar.

Copy/Paste from an outside source: When copy/pasting text from a Word document, pdf, or another website, there can be formatting in its source code that would bring up accessibility issues for our pages if not addressed. It is the quickest short-term solution to adding content to a page but creates long-term problems for the website's accessibility integrity.