Skip to Main Content

Web Content: Accessibility and Usability

Principles

At the core of St. Thomas Libraries web development is:

  • Accessible (WAI)
  • Usable (UI)
  • User and User Experience Centered Design (UX)
  • Universal Design (UD) and Universal Design for Learning (UDL)
  • Inclusive

Decisions about design and content should be focused on evidence, study, and equitable access. User expectations evolve over time and therefore our methods must reflect current best practices. Reviews and reflections must be iterative.

Accessibility and Usability is a shared responsibility

Making content inclusive and equally available to all requires a diverse set of skills, viewpoints, and personal experiences. It cannot be left up to one individual or committee. It takes all of us to create a welcoming online experience.

Always keep in mind the learning goal by getting rid of barriers and keeping the challenge where it belongs.

- CAST: UDL at a glance

Learn more about usability studies and find articles and resources to improve your content and design in the Digital Services SharePoint site for Usability and Accessibility (Library Staff Only)

Training

Links

Buttons, navigation, and links. They all serve a similar purpose and their style and placement on the page can assist the user in understanding what will happen once clicked (and if it is clickable!).

It is up to the designer and developers to make sure buttons and navigation elements stand out. It is up to the content owners to make sure the links in the content part of the page stand out and are usable.

The following list of guidelines is from, and explained in greater detail in, the article "15 Usability Guidelines For Designing Web Site Links" by Justin Mifsud on Usability Geek.

  1. Be blue
  2. Be underlined*
  3. Not be in all uppercase or lowercase characters
  4. Not consist of generic instructions (e.g. "More", "click here")
  5. Not start with "e-" or "internet"
  6. Not look like buttons if they are not clickable
  7. Not contain made up words
  8. Not have the same name
  9. Open in the same window if they link to other HTML pages
  10. Not open in the same window if they link to non-web documents
  11. Become highlighted or change colour on mouseover
  12. Indicate whether they will take the users to a different web site**
  13. Not contain the company name
  14. Be long enough to be understood but short enough to avoid wrapping
  15. Start with keywords

* A more recent article, also on Usability Geek and referenced as updated from with Mifsud's article, supports a different idea: Hyperlink Usability: Guidelines For Usable Links by Cassandra Naji.

** There are plans in St. Thomas LibGuides to implement icons and screen reader text to note that links go outside of a website, open in a new window, or open in a non-web format.

Friendly URLs

If you are creating a page or guide, make sure to use friendly URLs. They help people and computers identify what content will be on a page when a link is clicked. It also helps in reviewing analytics.

Find out more about Friendly URLs

Images

An alt attribute should be used for all images even if the alt attribute is blank.

Need help deciding what to put in your alt attribute? Use the Web Accessibility Tutorial alt Decision Tree!

WebAIM also has a great Alternative Text walk-through that not only helps you decide how to describe images but also how to make your descriptions better for everyone.

Abbreviations

The LibGuides content editor does not provide an easy method to add notes on abbreviations. However, if you go into the source view of the content editor you should be able to add the <abbr> tag.

<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>
WCAG covers many accessibility concepts.

HTML "aria-labelledby" attribute

You can apply the aria-labelledby attribute in HTML source to give lists, images, and other elements context. Think of it as captions.

Sighted users are able to use visual proximity to understand the context of a list or image that is placed just below a paragraph or heading.

Available Games:

  • Chess
  • Monopoly
  • Connect Four
  • Battle Ship

But those with screen readers might "skim" the page searching for relevant information and come across the list out of context. Therefore, you can label your list by adding an id attribute to the preceding text and using aria-labelledby in the list element to give it context.

<p id="gamelist-heading">Available Games:</p>

<ul aria-labelledby="gamelist-heading">
    <li>Chess</li>
    <li>Monopoly</li>
    <li>Connect Four</li>
    <li>Battle Ship</li>
</ul>

Or, if you are using a heading (h3) tag and want to add a short description using a paragraph:

<h3 id="gamelist-heading">Available Games:</h3>

<p id="gamelist-desc">Games can be checked out for 
assignments in the Game Theory department's office 
in Gumdrop Hall</p>

<ul aria-labelledby="gamelist-heading" aria-describedby="gamelist-desc">
    <li>Chess</li>
    <li>Monopoly</li>
    <li>Connect Four</li>
    <li>Battle Ship</li>
</ul>

Content Length and Scrolling

Understanding cognitive load

During a session for student employee supervisors, when discussing a healthy learning and working environment during COVID-19, a professor said:

Think about everything they have to know and then cut the rest.

Read what Kathryn Whitenton from the Nielsen Norman Group says about cognitive load:

  • "Minimize Cognitive Load to Maximize Usability." Summary: The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks. By Kathryn Whitenton (2013)

Be Succinct! (Writing for the Web)

(From Jakob Nielsen on March 14, 1997)

Summary: People read 25% slower onscreen, and they skim rather than read. Web text should be short, scannable, and structured as linked, topical pages.

The 3 main guidelines for writing for the web are:

  • Be succinct: write no more than 50% of the text you would have used in a hardcopy publication
  • Write for scannability: don't require users to read long continuous blocks of text
  • Use hypertext to split up long information into multiple pages

Read article on Nielsen Norman Group website

Scrolling and "Above the Fold"

Is there still a "fold"? Yes and no.

In the above referenced article "Be Succinct! (Writing for the Web) it was mentioned that "users don't like to scroll." The "Be Succinct!" article was written in 1997, and while much of the content still rings true, fortunately it linked to a current (2018) article about "Scrolling and Attention."

Scrolling is a habit that has changed over time, especially with the advent of cell phones. The main takeaway is:

  • In 2010, 80% of the viewing time was spent above the fold
  • In 2018, that number was only 57%

So the time spent below the fold is increasing.

For better or worse, users are now encouraged to scroll more than in the past — but not much more. Information density was probably too high (leading to crowded and busy layouts) in the early days of the web, but page designs definitely tend to be too sparse now.

Content prioritization is still key. Put important, most used stuff at top. Users will scroll to find what they need as long as the page is organized and scanable.

Read the article "Scrolling and Attention" by Therese Fessenden (4/15/2018) Nielsen Norman Group.

Reflections

Sending messages: casual read/listen

What messages are you sending to those with different abilities or experiences than you?

The "House on the Moon" is a short story by William Alexander and was published in the September/October 2018 (issue 24) of Uncanny Magazine: Disabled People Destroy Science Fiction.

A school-aged girl living on the moon is on a class trip to an old castle that was brought up piece by piece from Earth by an eccentric businessman years ago. The businessman has long disappeared and the castle is now a historical monument, but the design and past do not make her feel welcome in such a place.

There is a podcast version of the story read aloud in the link on the magazine's website. The story was also featured and read by LeVar Burton (Roots, Reading Rainbow, Star Trek) on the podcast LeVar Burton Reads (September 30, 2019) available on Apple Podcasts.

Web Developer

Profile Photo
Chad Kluck
he/him
Contact:
O'Shaughnessy-Frey Library Room 207
651-962-5416