2016 Review Checklist

Here at Rutgers we are constantly working to implement accessibility guidelines and best practices in the technology we offer. On this page, web developers can find out what makes a website accessible, as well as a list of common issues in sites and best practices to resolve these issues.


Update Website Page Titles

Page titles are the beginning navigation markers of a website. They give users a top-level view of their current location both via the window of the browser, as well as the tabs. These titles are also used in search engines as the link title, or are the default names for bookmarks. In terms of accessibility, they are the items that are first read by screen readers to tell users what specific page they are on.

Three tabs on the top of the browser, identifing the content of each of the different tabs through the page title.

Many times websites use page titles more like a table of contents in a book: first, the name of the website is presented and is then followed by the chapter title. Sometimes symbols are also used to divide name from chapter, which can be aesthetically pleasing, but can be cumbersome for users of screen readers due to the information bloating the title.

In some cases, site owners choose to use one title across the entirety of the website, which gives no indication of the user’s current location. This can be extremely confusing for users with multiple tabs open from the same website, as they are then forced to click through each one to find the page they are looking for.

Writing Page Titles

When developing page titles, it is best to imagine them as quick, front-loaded descriptions of the current page location. Below are some title examples:

Non-Accessible Titles

Welcome to Smith General Store's Online Website

Smith General Store • About Us
Smith General Store • Learn More About Our Sales Team

Smith General Store | Contact Us
Smith General Store | Contact Us: Jane Smith

More Accessible Titles

Smith General Store Home Page

About Smith General Store
Sales Team of Smith General Store
Contact Smith General Store
Jane Davis of Smith General Store

How to Update Titles in HTML

Title tags are generally found towards the top of each coded page after the <html> tag, but before the <head> tag. Only text and symbols can be used within the <title> tag.

<html>
  • <head>
    • <title>Smith General Store Home Page</title>
  • </head>

Use and Organize Headers

Headers are the organizational titles within the content section of web pages that act as non-interactive navigational tools for users. These visual headers are especially important to summarize the content below them, and organize it in a way that makes it easier for readers to find the information that they are looking for.

Accessible headers are those that are marked up in both size and font-weight to ensure that readers of any visual range can tell the difference between headers and the content paragraphs. These headers should also be organized in order to give a meaningful hierarchy to the flow of content for the users. Header tags are also to be used above marked-up paragraph text or links, since screen readers and those who choose to turn off CSS will otherwise be unable to tell the difference between headers and content paragraphs.

Make Headings Meaningful

By default, header tags are bolder and larger than regular paragraph text. Within CSS, a designer can edit these headers to completely change their weight, color, font, and spacing.

When editing header designs, it is important to remember to keep them larger or more pronounced than the content text, and that higher-level header tags are also more pronounced than the lower-level headers. Remember as well to rely on more than just colors to show the difference between the headers and content text.

Keep to the Hierarchy

Header tags, marked as <h1> to <h6>, are placed within the content section of pages.

A rather common usage mistake in web design is headers being used sporadically in different orders, which can make it very confusing for readers to figure out the order and importance of content. For example: a designer or developer may start a page's heading with <h2> markers instead of <h1> at the top of their page due to the default browser size of <h1> and find it easier to start with a 'smaller' header for aesthetic purposes.

An example of header hierarchy:

<h1>Welcome to our Website</h1>
  • <h2>Main Information</h2>
  • <h2>New Tool</h2>
    • <h3>How Tool Functions</h3>
    • <h3>Where Tool Can Be Used</h3>
  • <h2>About this Website</h2>
    • <h3>Our Staff</h3>
      • <h4>Jane Doe</h4>
      • <h4>John Smith</h4>
    • <h3>Our Mission</h3>
    • <h3>Contact Us</h3>

Add Alternative Text to Images

Visual icons and images on the internet can be used to convey a story, a meaning, or maybe a function (such as a button or a link.) Though these visual functions can be useful for regular browsing, those users who may be working with a screen reader or those who have turned off images due to bandwidth restrictions will be unable to see the images themselves. In turn, the usability of the website and the understanding of content or functions can diminish.

Alternative text, also known as alt text or alt attribute, is an element that can be added to elements to help convey meaning to users who cannot see them.

How to Add Alt Text in HTML

<img src=“exampleimage.jpg” alt=“Alternative text goes here.” >

Note: Quotation marks (“example”) cannot go within an alt text due to how it is used in HTML syntax. If adding quotes is expressly needed in your alternative text on an image, you must use the HTML character entity &#34; which outputs to “ in HTML.

An example of this is:

<img src=“quote.jpg” alt=“This person stated, "This the contents of a quote."” >

Alt Text Usage

When adding images to a website or to the content of a page, ask yourself: If I were reading this out loud to a user to help them understand or interact with the page, would I need to read the images to them and, if so, how? If I do not describe this image, do they lose any information?

If the image is being used to convey something about the content, or being used in relation to the content, then alt text should be added to the image.

Instances for Using Alt Text

When image conveys information to the current web content.

Student works on computer at the Center for Digital Filmmaking

Example: Content speaks on places students use computers and attaches this photograph as a visual example.'

When image conveys complex information like a chart or a graph.

Line graph showing Value over Time. Click for expanded breakdown.

Example: Chart conveys complicated information in a line graph.

Note: In these cases, the information can be too broad to explain via a single alt text. Instead of bloating the alt element, detailed descriptions or data can be expanded on an external page.

When image has text in it, such as a logo
.

Rutgers University Logo

Example: Website begins with college logo.

Note: It is always better to convey words with stylized plain text over an image with text in it.

If image serves a function on the website. The Alt text describes what the image does.

Example: A search magnifying glass on a form which states it is a search button.

 

Unneeded Information in Alt Text

If the image is considered decorative, the alt text can be left blank (alt="").

Example: A decorative symbol used as a content divider.

Redundant words such as ‘button’, ‘link’, or ‘image of’.

Image of fans cheering at Rutgers football game.

Example: The screen reader informs the reader that the object is a photo, so stating it in the alt text repeats what will already be said by devices.

Information that is elaborated in the content itself does not need to be repeated in the alt text of an image. A more robust usage would be: “Diagram of work flow as described below.”

Example: A diagram pointing out a work flow, and a small example of such in the text, followed by the syntax.

Pie chart visualizing popularity of tv show genres.

From our studies, we were able to find that a 27% majority of those surveyed enjoyed Comedy. This was followed by Action shows at 18%, and a tie for Romance and Science Fiction at 14%. The smaller groups included Horror at 11%, with Foreign and Horror tied at 8%.

Provide Meaningful Hyperlinks

Links provided in-content help to navigate users throughout a website. They may be found in the navigation, or even within the content themselves.

There are some cases where links within content may be used to direct a user towards more information, such as an introductory clip to an article. Additionally, they may be used to hide or show excess content on a page to make them appear less impeding. It is common practice during these instances to add links such as “Read More” or “Click Here” to bait a user into clicking the link. The problem with this usage is that it defeats the purpose of the link itself: to help a user navigate the site by informing them where the link will take them.

This also can make navigation for those using screen readers much harder as well. Screen readers have the ability to draw up a dialogue box that lists all the links on the page. If they are all listed with multiple vague “Read More” links, the user will have no understanding of where the links go because they have no knowledge of the content that goes before it. This is the same problem faced by users who might be using the keyboard to navigate, as they end up at links that give no description, nor tell them where the intended destination is.

Adding direct links to a page in its original form, such as the full URL to a location, can also make understanding the links difficult for a user of a screen reader. The device will read the link out in full, which is not only time consuming, but can be very confusing to understand.

Give Links Purpose

When writing directional links for websites, it is best practice to inform users of the location of the link, instead of baiting them into diving deeper into the website. Below are some contrasting examples of some common inaccessible link usage versus the same content with purpose kept in mind.

Non-Accessible:

The Red Panda is a bushy red and white animal that is commonly found in Southeast Asia. Their diet consists of bamboo leaves, berries, bird eggs, and other plants. Their appearance is closer to that of a raccoon than black and white Giant Pandas…

Read More

Red Panda Fact List: https://redpandanetwork.org/blog/wp-content/documents/rpn_flyer_facts.pdf

See pictures of the Red Pandas here.

Accessible:

The Red Panda is a bushy red and white animal that is commonly found in Southeast Asia. Their diet consists of bamboos, leaves, berries, bird eggs, and other plants. Their appearance is closer to that of a raccoon than the black and white Giant Pandas…

Read more about the Red Panda or see the Red Panda Network’s Red Panda Fact List (pdf).

Red Panda photo gallery.

Choose Legible Fonts and Sizes

Due to the visual and flexible nature of the internet, the presentation of the content can be just as important as the content itself. There are unlimited fonts available for use, and though they may be visually appealing, they can pose issues if they are difficult to read. Legible fonts are incredibly important for those with poor vision, aging vision, or for those with reading disabilities like dyslexia. They must also be paired with a good font size to ease reading, as well as be able to be viewed easily on multiple browsers, such as Chrome, Firefox, Safari, or Internet Explorer.

Use certain fonts designed for legibility on the screen (e.g., Georgia, Tahoma, Verdana, Helvetica, Arial, Calibri) and keep the number used to a minimum.

What are Generic Font Families?

Fonts are classified by their style into a particular type faces. CSS utilizes some of the most common typefaces, which encompass many fonts made for internet usage. Understanding these generic font families can make searching for a preferable font easier.

Serif

These fonts have finished or serifed endings. The ends of the lines are not straight and have strokes on the end of them. Serif fonts are most commonly used for printed content for how easily they read on paper.

Some common serif fonts include:
Times New RomanPalatinoLucida BrightGeorgiaGaramondBook Antiqua

Sans-Serif

These fonts are the siblings to Serif fonts, meaning ‘without serif.’ These fonts do not have the finished edges. Sans-serif fonts are most commonly used for web content for how easily they read on a screen.

Some common sans-serif fonts include:
ArialGenevaHelveticaTahomaTrebuchet MSVerdana

Monospace

These fonts have same fixed width, meaning the letters and characters occupy the same amount of horizontal space. They are commonly used in programs to represent computer coding.

Some common monospace fonts include:
ConsolasCourierLucida ConsoleMonaco

Cursive

These fonts tend to have letters that are joined, or other characteristics that are more than simple italicized features. Many times they look like handwritten work, rather than printed letters.

Some common cursive fonts include:
Brush Script MTFlorence

Fantasy

These fonts are decorative fonts that are playful or decorative in nature.

Some common fantasy fonts include:
CopperplateImpactPapyrus

Use a small amount of legible fonts

It is best practice to choose 2-3 fonts that are legible on screen and keep to a theme to not confuse the reader. There is an unspoken rule in web design which states that Sans-serif fonts are best for screen usage, but this may be due to older computers that had issues processing Serif fonts. Fonts like Verdana, Trebuchet MS, and Georgia were made specifically for electronic media.

A few things to identify when choosing fonts:

  • Letters should be easy to identify and each one should have a unique shape. A uppercase I and a lower case l are the best identifiers in a font.
  • Font letters that are inherently thin can also be difficult to identify for those with sight issues and dyslexia.
  • There should be some space between letters, which keeps them from looking squished and tight.
  • Symbols such as &, @, $ should be marked up in a way that it is still close to its original form. Stylized symbols that only retain some of the original markup can be confusing to readers.
  • The font itself should be able to scale to higher sizes without loss of resolution.

WebAIM has a more in-depth explanation with side by side comparison on their Accessible Fonts writeup.

Accessible sizes and styles

Unless declared in CSS, the default font size of normal paragraph text on a web browser 16 pixels (px). This is a different measurement than the points (pt) used in a writing application like Word. Though browsers have the built in ability for users to enlarge text, it is always best to keep the default size larger and never go below the default 16px.

An alternative form of measurement are ems, which is a preferred for its flexibility with mobile devices and recommended by the W3C for standard design. em sizes are calculated by the default browser with the following formula: desired pixel size / current font size = em. If no font size is declared in the body tag in CSS, the em is calculated by 16.

For example: If the desired font size of the first header is 50 px, the em size would be 3.125.

h1{ font-size: 3.125em; /*50px/16 = 3.125*/ }

For easy organizational purposes, headers should always be larger than paragraph fonts, and headers should also be larger for higher levels versus the lower levels. <h1>’s should be larger than <h2>’s, which are larger than <h3>’s, and so on. Be sure to also maintain proper header hierarchy on a page.

Markup styles like bolding, italics, and underline are also able to be used on text. Though they may be aesthetically appealing, they can be hard to read on certain fonts and confusing to a user base.

  • Bold fonts are good for identifying headers, identifying links, and marking up important parts of a block of text. However, too much bold usage can confuse a user.
  • Italics can be good for marking up important parts of a block of text. However, certain fonts with italics can be difficult to read, so it is best to use this sparingly if at all.
  • Underlines are synonymous with links on a page, so they should not be used for marking up important parts of a block of text.

Also be sure to choose a proper color and color contrast with fonts and backgrounds. See the color contrast section for more information.

Avoid use images in place of text

When an image is used over text, a screen reader does not properly read the content unless it has a proper alt markup. Text also has the advantage of not losing its quality when a user utilizes a magnifying program to zoom into text to make it larger. Logos and official markers are exempt from this rule, but should still have the proper markup for images.

How to properly add your font

One of the challenges of implementing fonts in CSS is that of working cross-browser. Firefox utilizes fonts differently than Chrome, and Internet Explorer reads different font files than Safari. Here are a few methods to properly ensure fonts work across all browsers.

Choose standard fonts

Like the font families, there are several fonts already built into web browsers. These can be applied to fonts without needing to upload to the server. W3schools lists these fonts with a visual example of each.

Adding fonts in CSS

To ensure that each browser is able to access the font, the browsers will require multiple copies of the font in different file types: .eot for Internet Explorer 9 and older; .ttf for Safari, Android and iOS; .svg for Legacy iOs; and .woff and .woff2 which will cover majority of browsers today.

The @font-face rule in CSS is used to call fonts stored locally in a directory in the website. The following syntax is used to find a font and provide the best browser support for fonts.

  • @font-face {
    • font-family: ‘Example Font';
    • src: url('example.eot'); /* IE9 Compat Modes */
    • src: url('example.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      • url('example.woff2') format('woff2'), /* Super Modern Browsers */
      • url('example.woff') format('woff'), /* Pretty Modern Browsers */
      • url('example.ttf') format('truetype'), /* Safari, Android, iOS */
      • url('example.svg#svgFontName') format('svg'); /* Legacy iOS */
  • }

Once the font-family is declared, it can be used in CSS and added to other tags and classes.

p { font-family: ‘Example Font’, serif;}

CSS-Tricks explains more in depth on the use of @font-face for browser support in their tutorial.

Using Google Fonts

Google Fonts is an open source font library with several different families that can be included. The fonts are not added to your website directory, and are instead linked off of Google. Google Fonts allows you to add several fonts to a collection and then choose the weight and style to be used and how much load type is needed to load the collection.

Once selected, Google creates a reference link to add in the <head> tag of your webpages. For example, here is what the code would look like if the chosen fonts were basic Open Sans and Roboto.

<link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto' rel='stylesheet' type='text/css'>

It then generates the needed font-family tags to add to the CSS for your text variables. The code below demonstrates how to add the Roboto font to the <h1> tag.

h1 { font-family: ‘Roboto’, sans-serif;}