Skip to Main Content

LibGuides How-To Guide

Read this before emailing Laurel with questions!

Web Accessibility at SJSU

Web accessibility is making sure that our website can be used by people with disabilities. Creating accessible content breaks down barriers and leads to more seamless access to information which leads to less need for accommodations. The principles for creating accessible content are outlined below. 

Hyperlinks

The clickable text of a link MUST be descriptive. If you can't tell where you will go when you click on a link by looking at the text alone, your link isn't accessible.

Links that have just the words “click here” or "see more" as the text create problems for our patrons who use screen readers to navigate our site. Typically, they use the tab key to jump from link to link as their version of skimming the page. When links are labeled vaguely or in a way that requires the user to see the context around it to make sense of the link, it makes that content inaccessible. Add link dropdown

Wrong:
Click here to read more about website accessibility.

Right:
Read more about website accessibility.

When adding links in LibGuides, whenever possible do not add them in the rich text/HTML but rather as link assets and provide a descriptive link name. 

Images & Media

Images must have an alt (alternative text) attribute describing the image. The alt attribute provides alternative information for an image if for some reason a user cannot view it (because of a slow connection, an error in the source code, or if the user uses a screen reader). Image alt text must not be the same as the image file name.

 

photo of a swan on water     screenshot of add image dialog box

 

Tables

Screenshot of add table window

Table elements on web pages are great tools for sharing data, but the worst tool for layout and positioning. They should never be used to align text and images for visual layout purposes.

Tables should be set up to help screen readers identify key elements. A table header identifies the column headings and a caption functions as the table title.

When working on tables in Rich Text/HTML editor:

  • Identify table headers
  • Give the table a caption (this will appear above the table)
  • Choose a class (e.g. "table table-bordered" or "table table-striped")
  • Do not use the Legacy Properties tab (they are deprecated, i.e., no longer acceptable HTML)
King Lear's Daughters
Name Age Birthday
Cordelia 5 January 4
Goneril 8 April 15
Regan 11 December 3

 

Structure

headingsWeb content should be properly structured using heading elements. Headings (H1, H2, H3, H4, H5, and H6) create a navigable table of contents for people using assistive technology. 

Most web templates also format headings in such a way that using them also creates a visual hierarchy that helps all users quickly scan and find the content they are looking for. Using headings solely for their visual treatment without taking into account the structural purpose they serve is very bad for accessibility (and findability!) and should be avoided.

PDFs

Links to PDFs need to include "PDF" inside the link so that people using screen readers know that they are about to open a PDF.

Screenshot of a PDF link

All Word, PowerPoint, and Excel files should be saved as PDFs and then tested for accessibility before being uploaded.

Adding and Editing Text

Don't copy text from Word or other applications directly into the rich text field. It adds all kinds of bad code. Copy it first into TextEdit (Mac) or Notepad (PC) to remove superfluous formatting.

Don't use centered or justified text. Left-aligned text is considered best practice for text readability. 

Don't make things that aren't lists into bulleted lists. The "bullet list" tool isn't for adding emphasis; it's for creating a list of items.

Don't overuse bold and italic. 

Don't use punctuation and formatting for "design." What might look good on one size of screen can look very different on another; it’s best to let the content flow on its own. Examples: 

  • Multiple spaces                to create blank space on the page
  • Multiple underscores to create "lines": _____

Acronyms and Abbreviations

Acronyms and abbreviations can be problematic for screen readers because they try to read them as words. Here's how to make them more clear:

<acronym title="National Aeronautics and Space Administration">NASA</acronym> <abbr title="Student Computing Services">SCS</abbr>

The distinction between these is that the acronym is usually pronounced as its own word, whereas the abbreviation is pronounced by saying each letter.

Foreign Languages

Phrases in a different language need to be identified with a LANG attribute which can be added to a tag surrounding the bit of text.

<span lang="fr">Les Cygnes noirs </span>
Frequently Used Languages & Their Codes
Language Code
Italian it
Spanish es
German de
French fr