Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

How to be ADA Compliant: Basics

This guide includes suggestions to improve accessibility of LibGuides for screen readers and colorblind patrons .

Introduction

This Guide includes 6 tips on creating ADA Compliant Guides.  They are simple to do and allow people dependent on screen readers to have a much better experience using the Guide.

Provide page outlines for screen readers.

Image shows where the "Normal"  tag is for Paragraph format in a Box which makes the outline of the page more obvious.

H-tags (header tags):  Screen Readers can be set to read just the H-tags.  This provides a really nice outline of the page. Sighted people see an outline at a glance -because they see the page layout.  Imagine looking at a page with no puncuation, paragraphs, highlights or other visual clues, just a jumble of words.  The backend of the pages in LibGuides already assign an H1 header to the page title and box titles are H2 headers. In the Rich Text editor, DO click the normal button to convert your in-box headers to an H-tag at the H3 level which is appropriate for the outline. Do not overwrite the default H3 header with H1 or H2. An H1 or H2 tag will destroy the outline hierarchy.

Image demonstrates what the "normal" paragraph setting looks like in the hierarchy.

 

A-tags (linked text):  Screen readers can be set to read just the linked text on the page to provide an outline of references and next steps.  These can link to internal text or external text. Make the linked text meaningful: "click here" or "more about this" without any context, are not helpful links. These phrases have no useful information to guide the user.   Use phrases such as "click here for more information about interlibrary loan services".  For example, use text such as <a href="http://www.library.upenn.edu/lippincott/">Lippincott Library Homepage</a>.  This is much more helpful than <a href="http://www.library.upenn.edu/lippincott/">library</a>.  

Use Alt Text

Add brief alt text to describe images.  

Go to the Image Library to select the image.  Click on the picture icon to open a dialog box to add alt text.

image shows how to click on the picture icon in an image in order to add alt text.

A dialog box will open.  Add the alt text in the dialog box.

Dialog box to add alt text to explain image.

Resource Development and Reference Librarian

Profile Photo
Cynthia Cronin-Kardon
Contact:
Lippincott Library
3420 Walnut Street
Philadephia PA 19104
215-898-5927
Website