Everyone is entitled to equal access to resources that UTA publishes online including those who:
We can never predict when someone might be using assistive technologies to access our website. However, we can create websites that anyone can access and interpret using such tools. No one should have to come to us and ask for a website to be made accessible for them. Requiring a person to first discover that something is not accessible, and then contact someone to make it accessible, is itself a barrier to access.
It's the law- Title II of the Americans with Disabilities Act requires state and local governments to make sure that their services, programs, and activities are accessible to people with disabilities. This includes any services, programs, or activities offered online or through mobile apps.
As a public university, UTA is a state entity. If we do not comply with ADA, we could be sued for not providing equal access under the law. For more information visit this ADA requirements website from the US Department of Justice Civil Right Division.
Accessible design makes things easier for everyone. Many of the principles of accessible design make websites easier to access and read period, regardless of whether someone has a hearing, vision, mobility, or other impairment.
Choosing a Font:
Sans-serif fonts are recommended as the most accessible types of fonts. Sans-serif fonts lack the decorative strokes found with serif fonts, increasing readability with more block-like lettering. When typing directly in the LibGuide rich text editor it may be better to stick with the default Libuides font, which is a sans-serif font.
However, serif fonts are still valid. When selecting a font it is important to consider the availability and how widely used a font is. For example, Times New Roman font is a widely used and available serif font.
Recommended Fonts:
Style:
<strong> and <em> tags respectively in HTML. Use these effects sparingly.
<b> or italics <i> tags as they are used more stylistically and less for emphasis.Copy and Paste:
Within LibGuides, headings are used to indicate sections and sub-sections. Headings provide a hierarchical structure to a page and range from Heading 1 (<h1> tag in HTML) being the most important, down to Heading 6. Heading 1 is never used other than to title the entire page, while Heading 2 is used for LibGuide box titles. Users should start with Heading 3. Headings are used in a hierarchical structure, meaning lower level headings should always be placed under higher level headings.
Example:
<h3>)
<h4>)Headings are also an important feature for screen readers as they make it easier for the readers to scan and jump from section to section of different content areas within your guide.
Using an accessibility checker like the WAVE tool can reveal what text is labeled as heading text. This is handy when a program or platform assigns heading text for you. As previously mentioned, the LibGuide platform automatically marks the title of a page as h1 (heading 1) and each box title as h2 (heading 2). This is why you will only be able to select heading 3 or below within your text boxes.
When embedding a video in your LibGuide there are two important factors to consider
For closed captions and/or video transcripts, it is important that LibGuide creators watch the videos they embed to make sure that captions/transcripts accurately reflect what is being said in the video. Also, when embedding a video it is important to include a title attribute in the embed code because this allows screens readers to read out the videos assigned title instead of the video file name.
Example:
Most images should have alternative text (alt text) to provide a text description of the information conveyed by an image. This is especially helpful for someone using a screen reader, a program that reads the content of websites out loud to a user. However, this text will also show if an image fails to load, and search engines use alt text to provide relevant search results.
Good alt text:
The most common alt text challenges in subject guides involve screenshots. You should never ONLY use screenshots to illustrate a process or task. This would exclude anyone who cannot see or visually interpret the screenshot.
The easiest way to deal with screenshots is to describe the process fully in text and use the screenshots only as a secondary way to convey information. Remember to describe where buttons, boxes, and other features are on the screen in your written instructions (to the left of the screen, below the search box, etc.). Then your alt text would be something like "screenshot showing the steps written below."
For a more detailed discussion of screenshots, please see the screenshots tab.
Infographics, flowcharts, and other graphics can also be challenging. Again, ask yourself "what information am I getting from this?" Then make sure that information is included in alt text, a caption, or in text form nearby. Consider whether you can provide the same information in a table, list, or some other format. For example, "If the situation is X, Y, and Z then you use tool A to conduct your research" might convey the same information as a decision flowchart.
If an image has text included, remember that a screen reader will not read the text within that image. Additionally, someone who has color blindness or low vision may not use a screen reader, but may rely on the contrast between the text color and the background color. Images with embedded text should have sufficient contrast so that the text can be easily read. The alt text should also describe the text within the image if it is not provided somewhere else nearby.
If a graphic is purely decorative you can leave the alt text blank, but decorative images should be rare in subject guides.
Though QR codes are rarely used in LibGuides it's important to be aware that screen readers may not read QR codes correctly, and these same guidelines apply wherever QR codes are used. Your alt text should indicate that the image is a QR code, and an additional link to the same target should always be provided above or below the QR code as an alternative form of access.
The most common alt text challenges in subject guides involve screenshots. You should never ONLY use screenshots to illustrate a process or task. This would exclude anyone who cannot see or visually interpret the screenshot.
The easiest way to deal with screenshots is to describe the process fully in text and use the screenshots only as a secondary way to convey information. Remember to describe where buttons, boxes, and other features are on the screen in your written instructions (to the left of the screen, below the search box, etc.). Then your alt text would be something like "screenshot showing the steps written below."
Tables should not be used simply to organize information in a visually pleasing way. Tables should primarily be used to display data or other information that makes sense to display in a table.
Tables require special HTML markup to make the columns and rows read properly for a screen reader. The LibGuide platform will do this for you if you use the table creator within the "Add Rich Text/HTML" screen. The icon looks like a small table and falls between the "image" and "insert horizontal line" option in the lower tool bar.
Once you click on the table icon a box called "table properties" will appear. Indicate the number of rows and columns that your table should be using the labeled boxes. Next, selected which row or column (or both) are your headers. It is required that you indicate headers so that the table will be read properly by screen reading tools. Next, create a caption for your table- this is like the title. Then fill out the summary- this is like alt text for images, it tells someone using a screen reader what general information the table is conveying so they can choose whether or not they want to read each cell individually using their screen reader. The final option is "class" and allows you to choose different display styles.
There are two types of disabilities to keep in mind when it comes to links and clickable features- vision impairments and mobility impairments. Though these accessibility adjustments may be helpful for other types of impairments as well.
Someone who is blind or has vision loss/low vision may use a screen reader to quickly scan through a page for links. If the link itself does not have enough context embedded in it, the reader may not understand where the link goes without laboriously going through the text to find out. Context is provided by the display text of the link.
Examples:
Someone who has a mobility impairment may be using an alternative mouse device, touch screen, or other tool to click on features. Imagine someone who has a tremor or other fine motor control impairment- would that person be able to click on a feature without accidentally clicking on something else they weren't interested in? Is the clickable feature or link large enough for that person to target it accurately?
Ideally, links should not follow one another side by side or line over line. There should be some space between clickable features or links and they should be large enough that someone is not in danger of accidentally clicking on something else by mistake. They should also be large enough so that the user does not have to struggle to target a feature accurately. This is one of the reasons we discourage the use of the carousel feature in LibGuides.
In general we advise against using carousels, although the carousel feature built into LibGuides should, in theory, be accessible.
Carousels should be set to not auto-advance or users must be able to pause the movement of the carousel. The underlying structure should also be such that a screen reader can navigate the controls properly. This should be automatic in LibGuides.
Carousel features often have clickable features that are too small and/or too close together for those with mobility impairments to use them easily. The movement may also be distracting or unpleasant for some people. A carousel that auto-advances may move too quickly for some people to process what they are seeing. This is why we advise against using them, even the ones built into the LibGuides platform.
At this time, there are some alerts that WAVE and other accessibility tools will flag on each of our guides that guide owners cannot fix. This is because sections like the header and footer are not customizable to us. We have met with marketing and are hopeful that these issues will be fixed soon but, for now, please note that the following errors and alerts will show up, but you are unable to address them.
Suspicious alternative text: Banner image
We are unable to edit the UTA Libraries logo that appears at the top of each guide, and therefore cannot replace the inadequate alt text.
Redundant link
The links in the headers and footers of each guide trigger the “redundant link” alert but, again, cannot be removed or edited by guide users. However, pay attention to the alerts to ensure they are not referring to a section that is not in the header or footer.
Very small text
Several elements of the footer, including tags, date edited, and the URL, will be flagged as having very small text, but we are currently unable to enlarge this text. Again, be sure that these alerts are referring to only these elements and not other sections of your guides.
UTA EIR Accessibility Training- Sign up for training in making accessible electronic documents, PDFs, and PowerPoints
UTA EIR Best Practices- Learn best practices for multiple types of electronic media from e-mail to podcasts and much more.
Springshare is the parent company of the LibApps suite. They have many resources to help you use LibGuides more effectively.
Springshare Blog- Search for articles with accessibility tips and updates.
Springshare Training Calendar- This page also has a link to recorded sessions.
WAVE (Web Accessibility Evaluation Tool)- Using the WAVE website to check a webpage's accessibility is quick and easy. You simply enter the URL of the page into web address box to get an accessibility report. There is also a WAVE browser extension for Chrome, Firefox, and Edge that allows for accessibility testing directly from your browser.
WAVE Help- This page describes what the different icons from the WAVE tool mean and other tips for WAVE effectively.
Site Improve- You can access Site Improve from your UTA My Apps page, however only administrators can actually use the tool to run a report that checks for accessibility issues. In practice we have found that using the WAVE tool above is more helpful than Site Improve.
WebAIM- Color contrast is an important measure of the accessibility of a page. Correct levels of color contrast make it easier for everyone, especially those with impaired vision, to read and understand web text. The optimal color contrast ratio for body text is 4.5:1 and 3:1 for images. Use this WebAIM color contrast tool to check if your text meet that optimal ratio
Contrast Checker from Acart- Another contrast checker that also allows you to check at what font size something becomes inaccessible and allows you to switch to grayscale.
Testing for Color Blindness Accessibility- Describes different types of color blindness and recommends tools for checking if your images are accessible to someone with colorblindness.
Coblis- Color Blindness Simulator- Tool that attempts to simulate what images look like to people with different types of colorblindness.
JAWS- One of the more common screen readers. The license is free, but it must be renewed every year. It is recommended that you install the screen reader and use it to check things like websites, PDF documents, and PowerPoint slides. It also gives you an idea of why certain elements might be a problem.
Other Screen Readers from the American Foundation for the Blind- Describes many other screen readers and tools that those with blindness or vision impairment might use and the different features that are offered with each tool.
Except where otherwise noted, this work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. For details and exceptions, see the Library Copyright Statement.
© 2016-23 The University of Texas at Arlington.
University of Texas Arlington Libraries
702 Planetarium Place · Arlington, TX 76019 · 817-272-3000