Skip to Main Content

NU SpringShare Playbook

Best practices and guidance for creating and maintaining LibApps and guides at NU. Created by cross-functional resource centers.

Accessibility Best Practices

All webpages use headings to clearly organize and label sections for users. Headings also help users with screenreaders to move around a page and jump to sections that are relevant to them.

If you want to add headings or sections to your website, use heading styles instead of simply enlarging or bolding text. Heading styles are already formatted to stand out from regular paragraph text and help screenreaders to skip directly to the information that the user needs.

Heading styles should always be used in numerical order:

  • Heading 1 (H1): the title of the webpage is automatically a Heading 1. There should be only one Heading 1 on the page.
  • Heading 2 (H2): any main headings on the page below the title. Any labels/names for boxes are automatically a Heading 2.
  • Heading 3 (H3): any sub-heading under a Heading 2, such as any sub-headings within a box.
  • Heading 4 (H4): any sub-heading under a Heading 3

Example of Heading Hierarchy

In the example below, the title of the webpage is “Institutional Review Board (IRB): IRBManager” and is a Heading 1. There are 3 boxes on the page, and each box label/name is a Heading 2: “Contact the IRB,” Calendar,” and “Introduction to IRBManager.” Within the “Introduction to IRBManager” box, are Level 3 Headings for “Student Researchers” and “Faculty Chairs/Mentors.”

Heading example showing H1 through H3

To add a heading:

  1. Select the text that should be a heading
  2. Click the dropdown menu for “Paragraph Format”
  3. Select the appropriate heading number

Selecting Heading 3 from dropdown

Best Practice

Add hyperlinks as click-tracked assets under the Asset Manager and add as individual links in a content box. 

Hyperlinks should be a specific text or phrase that clarifies where the link will take users and should be clear outside of context. No "click here" statements. 

Add Links To Content Box

  1. Click Add/Reorder link
  2. Select Link from the menu

Add Reorder menu options

  1. On the Create New Link form, add your description phrase for the Link Name.
  2. Type the URL in the Link URL field
  3. Select your Window Target, select New Window if linking external to the guide. 
  4. Enter a Description, More Info, or Description Display settings as needed. 
  5. Click the Ok button to save the link.

Create new hyperlink form

Embed Links Within Content

Adding hyperlinks within your webpage or content box is at times more logical than adding a separate list of links. Caution: Links within text are not added to the Asset Manager or tracked through the Link Checker. 

When linking to a document or webpage, don't just copy and paste the URL onto the page. URLs can be long and complicated for screenreaders to read and don't clarify where the link will take users.

Instead, place the link onto a specific phrase that clarifies where the link will take users. This word or phrase should also be clear outside of context, as screenreaders can read off all the links on a page without their surrounding content. An example would be a link to the NU Library or a link to the WebAim standards for web accessibility. In both cases, you know that the links will take to the NU library website and WebAim website, respectively. Furthermore, if the link will lead to a page outside of your LibGuide, such as a link to another NU department or another organization, the link should open the site in a new window. This prevents users from getting lost and not being able to return back to your LibGuide.

Add a Hyperlink Within Content (Inline Link)

To add a hyperlink:

  1. Select the text that should be a link
  2. Click the “link” icon (looks like a link from a chain)
    Select the link icon from the toolbar
  3. Under the “Link Info” tab, paste the URL where the link should go
    Link info tab enter URL
  4. If you will be linking to a page outside of your own website, click the “Target” tab and use the drop-down menu to select “New Window (_blank)” (this will open the link in a new tab)
    Open link in new window
  5. Click “OK”

 

 

People generally scan for information on web pages. Use different types of lists to group information according to its nature to provide orientation and easier consumption.

Unordered lists

  • Unordered lists are used when the order of the items is not relevant.
  • List items in unordered lists are marked with a bullet.

Ordered lists

  1. Ordered lists are used for sequential information.
  2. List items in ordered lists should follow a logical hierarchy. 

Best practices according to ADA guidelines when adding images is to provide a textual description of the image. If an image is present on your web page, it is important to ensure that images that convey important information have appropriate text alternatives or descriptions. Having a description of an image will ensure that they are accessible to everyone. Alternative text and captions are the most commonly used methods to describe images. However, depending on the complexity or overall functionally of an image, other image description approaches may be more suitable.

 

When placing images on your website, be mindful that some users won’t be able to see your image or read content placed within an image. All images should have a textual alternative that can be read by screenreaders.

Alternative text (or alt text) should always be provided for images that are not decorative. Here are some tips for writing alternative text:

  • Do not begin with “image of” or “photo of”
  • Be concise and use a brief phrase if possible. If more than 2 full sentences are needed to describe the image, then describe the image within the text instead
  • Describe the parts of the image that are relevant in the context of the webpage
  • Include any text that appears in the image
  • If the image acts as a link, describe where the link will take them

Here are some examples:

Example Alternative Text 1

The first example is an image that does not contain text or act as a link. The alt text should just describe what you want people to notice in the image:

A person wearing a T.rex dinosaur head and typing at a computer.

A person wearing a T.rex dinosaur head and typing at a computer.

Example Alternative Text 2

The second example is an image that has text and also acts as a link to an events calendar. The alt text would note all of this information:

Sticky note. Text: Save the date. Links to NU event calendar.

Sticky note. Text: Save the date. Links to NU event calendar.

Example Alternative Text 3

In our third example, there are a lot of relevant details in the image that we want the user to notice. The description would be longer than 2 full sentences and is too long for an alt text box. Thus, the alt text should tell the user that a description is provided in the text, and an image description should be provided within the text of the webpage.

 

Image description in text.

Image description in text.

Image Description: Screenshot of 5 videos in Zoom. Top left: Charlene Sutton (with the Zoom name Qualmaster Charley) with a pirate ship background, pirate jacket, and pirate hat/eye patch. Top center: Heather Miller in a pink bandana, pirate hat, and eye patch. Top right: Jenelle Dembsey in a brown T.Rex head, with a Zoom background of the Jurassic Park gate. Bottom left: Nicole Kitchens with a pirate hat. Bottom right: Josh Leonard in a pink bandana.

 

How to Add Alt Text

To add alt text for an image:

  1. Select the image that needs alt text
  2. Select the image icon
  3. Type alternative text into the “Alternative Text” box
  4. Click “OK”

Accessible multimedia (visual and auditory content that is synchronized) must include captions—text versions of speech and other important audio content—allowing it to be accessible to people who can't hear all of the audio.

According to US government figures, one person in eight has some functional hearing limitation, and this number will increase as the average age of the population increases. Beyond people with disabilities, captioning helps people who only partially understand the language presented. Captions are also useful in noisy environments like airports, in quiet environments like libraries, and for multimodal learning.

All multimedia content with speech should have accessible captions that are:

  • Synchronized to appear at approximately the same time as the corresponding audio.
  • Equivalent to the spoken words and other audio information.
  • Accessible, or readily available, to those who need it.
  • Closed Captioning is most common, this allows for the accessibility feature to be turned off if unneeded

For multimedia, a transcript can also help users who can neither hear the audio nor see the video. Beyond the spoken words, a transcript should include descriptions of important audio information (like laughter) and visual information (such as someone entering the room). Transcripts help deaf/blind users interact with content using refreshable Braille devices.

Transcripts allow anyone that cannot access content from either web audio or video (or both) to read a text transcript instead. Beyond the spoken words, a transcript should include descriptions of important audio information (like laughter) and visual information (such as someone entering the room). Transcripts help deaf/blind users interact with content using refreshable Braille devices. For most web video, both captions and a text transcript should be provided. For content that is audio only, a transcript will usually suffice—captions are not necessary for audio-only media like a podcast.

Transcripts make multimedia content searchable by search engines and users. Screen reader users also may also prefer a transcript over real-time audio, since most proficient screen reader users set their assistive technology to read at a rate much faster than natural human speech.

All documents on the website should have the option to open in PDF along with a Word document. Word documents are more accessibility-friendly because screen-reading software is able to go through the document and read it aloud to the patron.  PDF does not comply with accessibility standards and is not compatible with screen reading software. 

Documents: Most of us do not think we have a role in accessibility — that is for web designers.  But that is simply not true.  We make documents every day that we put online for our students.   Creating accessible documents (MS Office, Google Apps, PDFs) is key to accessibility for all.  It not only makes our work more useful but it can save us time.

 

undefined

undefined

undefined

undefined

undefined