How is our Online Content Perceived?

New York Times website homepage

Try this Experiment

Visit the New York Times website homepage and ask yourself what helps you understand the page the easiest and the fastest:

  • Are you reading every word?
  • Just the headlines?
  • Looking at the photos?
  • Scanning the links?
  • Using the navigation?

According to eye-tracking studies, we skim the content by scanning page elements such as headlines and key text such as phone numbers. We only zoom into the text of the page to read details that interest us.

An aspect taken for granted in this process is that we can accomplish all this because we can see the site.

Our senses — such as sight and hearing — could be seen as input devices to our brain. We rely heavily on our senses for everything we do online. However, if we cannot rely on one or more of those senses, everything changes.

Assistive technology helps shift senses

This is where assistive technology helps — it can shift sensory input to a sense you can rely on. There is a wide range of assistive tech available to fulfill a wide range of needs, but here are two examples: 

  • Closed captions on video can allow a person to read spoken dialog and environmental sounds not heard.
  • A person using a screen reader can listen to written content they cannot see. Screen readers provide in-depth information about a page’s structure, content, and navigation—providing the reader much the same information sighted people scan visually.

Other types of input devices like Braille keyboardsadaptive switchesspeech to text software, and eye tracking technology allow people to interact with technology using different parts of their body.

Making the web visible to a assistive technology

Screen readers themselves cannot “see”. The technology can only communicate page content and structure based on how pages are encoded and organized. When not encoded properly, content can be completely hidden or unreachable or its intent can be lost.

For example, a screen reader relies on headings coded into the page to communicate an article’s headlines or section titles. The <h1> heading is used as a page title and <h2> headings for secondary headlines on the page.

With our headline labeled as a heading, our screen reader can indeed see it as a headline.

<h2>Headline</h2> 
<p>This is the first paragraph of content.</p>

On the other hand, what if we only make the words bold? The words will stand out visually, but a screen reader has no means of knowing if we intend for this text to be a headline or simply emphasized.

<p><strong>These words are bold, but is it a headline?</strong></p> 
<p>This is the first paragraph of the article.</p>

When used correctly, our website content management systems, such as LibGuides or Wordpress, can handle most of these simple coding needs. However, as we write our content, we can still introduce many errors that can make reading the pages with a screen reader difficult at best. Avoiding these errors is where this guide hopes to help!

Learn More...