Relevant to: Employee Web Content Maintainers
This article contains information considered accurate at the time of publishing. Technology updates, changes in University security practices, policies and procedures may effect the information in this article - updates to articles are scheduled on a periodic basis and will address any required changes.
Introduction
Empire State University has a legal and moral obligation to ensure that our webpages are accessible to students and staff with disabilities. For this reason, when creating content for the website, you need to keep accessibility in mind. This article will cover the basics of accessibility that you, as a content maintainer, have control over.
It is important to make websites accessible for individuals who are blind, have low vision, are deaf or hard of hearing, or have a disability which impacts physical movement. Some individuals require the use of assistive technology, such as screen readers, to navigate websites; screen readers rely on certain cues and landmarks on the page, such as headers or alternative text. Some examples of things to keep in mind:
- A user who is blind or has low vision may rely on alternative text (alt tag) to access an image on a website.
- A user who is deaf or hard of hearing may rely on captions and transcripts to access an embedded video on a website.
- An individual using a screen reader may not be able to access information in a table if the table does not include properly marked headings.
- An individual who cannot use a mouse may not be able to fill out a form on a website unless it is fully keyboard navigable.
The following are explanations of how to make certain elements of your webpage properly accessible.
Headings
Because screen readers rely on proper headings on a page to effectively navigate it, you need to make sure your page has a sensible heading layout. Your headings should be hierarchical - H1 headings being the overall topic of the page, and then H2 headings being below that, then H3 and so on - never skipping a heading level. Be sure you are using actual headers - do not try to build your own header with bolded/resized text alone.
Here is a sample header layout for a page with multiple sub headings:
Links
Descriptive Link
When a screen reader moves to a link it will start to read out the text of that link. For this reason the text of a link should be descriptive of where the link is going - not just a long URL. For example, see the following two links which both go to the same page:
The second link is better than the first because it will be more accessible to someone using the page with a screen reader - instead of hearing the link spelled out to them, they would instead just hear a descriptive name which is much easier to understand.
Unique Links
Another thing to keep in mind with links is that every link on a page needs to have a unique name - links can only share a name if they both point to the same page. This helps to avoid confusion for users who are using screen readers by making it obvious where each link is meant to go. See the following examples:
Bad Example
In this example there are two major issues:
This would be very difficult to navigate with a screen reader. You will also want to keep an eye out for links that point to pages with similar topics on separate pages and be sure that they all have unique names. For example, if you have two links on a page for Admissions Requirements and Admissions Checklist, make sure that each is uniquely named and both aren't just links with the name of "Admissions."
Good Example
In this example, the issues of the previous example are avoided. These links are unique and descriptive.
Images
Many individuals who are blind or have low vision rely on screen readers to give them information about an image. This information about an image is located in what are called alt-tags or alt text. If this text is not present then the user may not know what information an image contains.
In T4, alt tags are created from the description field in the media library. Every image you upload to T4 must have this description field filled out with a detailed description of the contents of the image as well as a copy of all text the image contains.
For more information on alt-tag usage please see this article: Alt-texts: The Ultimate Guide to get an explanation of how to write proper and helpful alt-tags.
Tables
Tables can be very confusing for users relying on screen readers to make sense of if they are not set up correctly. For the most part, our CSS code behind the scenes handles much of the setup, but there are a few things you need to keep in mind when building or working on tables.
Table Headers
To make sense of a table a screen reader needs to know what information a cell contains. This means that the table must have at least one row or column of headers (or both). A table without proper headers is inaccessible and very confusing for a user with a disability. To make sure your table has headers, or add them if it doesn't, just right click in your table while editing it and choose "Table Properties" from the right click context menu.
Once you click on table properties a new window will open. In this window make sure either "Make first row a header" or "Make first column a header" is checked (both can be checked if there are labels on both axes).
Table Formatting / Class
Never attempt to format a table by hand. This almost always results in a table that is inaccessible and does not display properly on certain sized screens. Instead, you will want to use a predefined class to let the system handle the formatting for you.
From the image above, you can see that the table class is set to "table table-bordered". This is our standard table class that is used on most tables across our webpages. However, if you're making a new table, this is not set by default. To set this, click the "Class" drop down in the table properties window (as seen in the above image) and choose "(value)" from the list. The Class field will then allow you to type in to it - just type "table table-bordered."
Note: Leave the other settings on that screen alone, with the exceptions being columns, rows and headers. Class will handle the other settings for you automatically (such as height, width, padding and spacing).
Video
For a video to be accessible it must have captions and transcripts. Use this link to request captioning and transcripts for a video: Video Closed Caption Request.
Once you have a captioned video, please reach out to the web team via a Service Desk ticket to have your video embedded on your page in an accessible way.
- Admissions: Link
- Financial Aid: Link
- Service Desk: Link
- The links are not descriptive of where they go.
- All 3 links share the same name ("Link") even though they each point to separate pages.