• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!


Accessibility Tips when you Can't See the Content

Page history last edited by Tammy 6 years, 10 months ago


Have you seen an image and not understood why the author showed it to you? Have you been to a Webpage and the content didn't make sense because the bulleted notes weren't nested right? Have you ever been confronted with a Web form that had no labels, so you weren't 100% sure what to enter? Do you comprehend material better when you read it? These tips are valuable to many people, as well as those with low and no vision.

Some things to Consider about Screen Reader Users

These users still browse a Web page, but differently than those with sight. They can ignore the information that appears on every page by using a skip to main content hyperlink. They can jump between headings or get a list of all headings. They can use a list of hyperlinks to go to the information that they want. Many criteria consider the browsing behavior, which is a good thing.

Describe the Function of Non-text

Usually, you will see rolling eyes whenever you remind others about the alt attribute because this has been common knowledge for a while. However, people are still not providing alternate text or they aren't describing the functions of the image well. There are multiple ways to provide alternate text. Usually, I choose the method according to different scenarios.

  1. Provide alternate text using the alt attribute.

    Scenario: The description is only useful to those with total sight loss. Remember those with low vision might not use a screen reader.

  2. Set the alt attribute to null and
    1. Write a HTML brief description near the image.

      Scenario: The description would benefit everyone.

    2. Provide a hyperlink to a HTML long description.

      Scenario: Usually, this description would be added to another part of the page or a different page particularly if this description is not needed by everyone.

Providing alternatives applies to videos as well. There should be a brief textual description before videos. Also, there must be an alternative for all content in a video. It doesn't have to be a carbon copy, but a transcript is an effective way to provide it as long as the material can be understood by reading the transcript alone. For example, a Web guide or an audio file that describes all of the key concepts in a video could be identified as an alternative.

Be specific when narrating videos

It is easy to say certain things on an audio track of videos, such as like this and over here. If you closed your eyes and listened to the video, would you still understand it? If not, you likely need audio descriptions.

Visual Cues

Don't make statements like "the text below the blue box." Also, don't use color alone to give the user information.

Color Contrast

Although this is considered medium criteria, color contrast is very important. It is important for those with low vision, those that are color blind, those that have reduced vision due to aging. If you want to use color, test it before posting. Colour Contrast Analyzer is an easy to use tool. Go to Colour Contrast Analyzer. It will tell you if it fails contrast or it passes at level AA or AAA.

The Magic of Responsive Design

magic wand

LibGuides uses responsive design, so if you resize the text or use the content on a mobile device, it will scale. However, we can add content that won't scale well. If you have non-breaking space ( ) in your code, it can cause the text to overflow. If the user can't see it anymore, it will fail the criteria. Also if possible, make all text containers like textboxes a relative size instead of a set number of pixels.

Images of Text

It is fine to include logos, but don't include any other images of text unless it is completely unavoidable. Some users might not be able to see it.

Let them Know where They are Going

The hyperlink text should contain the purpose of the hyperlink. If the hyperlink leads to a PDF or video, inform the user. Here is an example.

Proper HTML Coding Produces Better Screen Reader Performance

You should be able to use a code validator with a successful result. There could be errors due to the system you are using to produce the Web content. Be sure to turn in errors to the vendor, so the issues can be fixed. If you can do without the particular function, don't use it until it is fixed. A good code validation is W3C Markup Validation Service.

If something requires user input, you must provide names, role, and value. This means that textboxes and checkboxes need labels (name) and hyperlinks need the href attribute (value). The role is its function (e.g. the text area tag is editable text). For more information, go to H91:Using HTML form controls and links by W3C. This is true for HTML pages and PDF forms as well.

Comments (0)

You don't have permission to comment on this page.