Tables can be an effective way to organize related information. In addition to following some best practices for using tables, it’s important to make sure your tables are accessible.

Consider someone using a screen reader. They can’t make use of the visual connections between the cells of the table that a sighted user can make almost effortlessly. We must provide additional context for these and other users with disabilities.

Add a Caption

Captions act like headings for tables by summarizing their contents. While not required, a caption can help users locate a table and understand what information it contains, so they can decide if they want to read it.

The contents of captions are read aloud to visitors using screen readers. Additionally, screen reader users may choose to use tables mode, where tables on a page are identified by their captions.

Place <caption> elements under <table> elements.

Add Table Heading Tags

Tables are composed of table heading cells and table data cells. By using the heading element, you enable users to differentiate between heading and data cells.

Place heading tags in the first table row.

Example

Let’s look at the following table:

Meeting Times and Locations
Day Time Location
Monday 9 a.m. Conference room
Wednesday 10 a.m. Auditorium
Friday 11 a.m. Library

“Meeting Times and Locations” is the table caption. “Day,” “Time” and “Location” are table heading cells (<th>). The remaining cells are table data cells (<td>).

The code for this table would include a caption and indicate the type of cells in each row (<tr>):

<table>

<caption>Meeting Times and Locations</caption>

<tr>

<th>Day</th>

<th>Time</th>

<th>Location</th>

</tr>

<tr>

<td>Monday</td>

<td>9 a.m.</td>

<td>Conference room</td>

</table>

Learn More

The Website Accessibility Initiative of the World Wide Web Consortium provides a detailed tutorial on table accessibility.

Date posted: May 20, 2022 | Author: | Comments Off on Tables and Accessibility

Categories: Pro tip

The web team launched, converted or refreshed the following websites from January through March 2022:

Please email us at webcommunications@niu.edu if you notice a link that needs to be updated.

Date posted: May 20, 2022 | Author: | Comments Off on Site Launches: Winter 2022

Categories: Site Launch

Tables can be a useful tool for presenting related content. They’re composed of boxes called cells organized in rows and columns. Table heading cells tell you what kind of information is in the row or column they introduce. Table data cells provide the specific information.

When to Use a Table

Consider using a table when you when you have groups of words, phrases or other information that have consistent relationships. Let’s say you need to put the following information on a webpage:

The first meeting will be held in the conference room on Monday starting at 9 a.m., the next meeting will take place in the auditorium at 10 a.m. on Wednesday and at 11 a.m. on Friday, the final meeting will begin in the library.

You could use a bulleted list to split up the long sentence. But a table can present this information with fewer words in a way that’s even easier for your audience to scan.

Meeting Times and Locations
Day Time Location
Monday 9 a.m. Conference room
Wednesday 10 a.m. Auditorium
Friday 11 a.m. Library

When Not to Use a Table

Don’t use tables for layout purposes. This can create problems for people using assistive technology.

Tables work best when kept simple. If you find yourself needing to use more than two levels of headings to organize your table, you should explore another solution. Sometimes, the answer is to split the information into multiple tables. But another strategy may be more effective.

Your options for organizing complicated information on NIU websites include:

Accessible Tables

Like any other website feature, tables on NIU websites must be accessible to all users. There are some additional steps to take to ensure table accessibility. Read more about tables and accessibility.

Date posted: May 20, 2022 | Author: | Comments Off on Best Practices for Tables

Categories: Pro tip

NIU websites are built using templates. This means they share the same basic components. Let’s take a look at the scholarships overview page on the Financial Aid and Scholarship Office website to learn about the composition of an NIU webpage.

Headers

The header is the NIU shield that appears at the top of a page along with “Northern Illinois University,” the name of the site and the name of the department/division the site belongs to, if appropriate. It may also include the NIU tagline (Your Future. Our Focus).

In the header on the scholarships page, the shield and “Northern Illinois University” are joined by “Financial Aid and Scholarship Office” and the tagline.

Top Navigation

The top navigation is a list of site contents that appears at the top of a webpage, created using a custom block. A website can only have one top navigation menu, and it must appear on every page of the site. The top navigation must include the home icon and an About item. Other top navigation items depend on the needs of the site.

Since the scholarships page is part of the Financial Aid and Scholarship Office site, it uses the same top navigation as the site’s other pages. The top navigation includes the home icon and About, as well as other items that organize and present content, such as “Financial Aid and Costs” and “Loans.”

Main Image

The main image, also referred to as the banner image, is the large image that appears at the top of a webpage. Pages aren’t required to have a main image, but they’re generally a welcoming addition to a site’s homepage.

The main image on the scholarships page shows two students working next to each other on their laptops.

Breadcrumbs

Breadcrumbs appear beneath the top navigation to help users know where they’re at in the site. They’re generated automatically using the display names for pages and folders. The scholarships page displays breadcrumbs that show where you’re at in the site: on a page called Scholarships, which is part of the Financial Aid and Scholarship Office site.

Main Heading

The main heading can appear above or below the main image, depending on the site template. On the scholarships page, the main heading “Scholarships” appears under the main image. It is the <h1> on the page.

Main Content Area

The main content area, also referred to as body-content, appears below the main image and heading. It contains the page’s primary content. On the scholarships page, the main content area contains introductory text followed by three sections on different kinds of scholarships, each headed by an <h2>.

Left Navigation

The left content area contains the left navigation menu. Other blocks of content can appear below the left navigation.

On the scholarships overview page, the left navigation displays the pages in the scholarships section of the site. Links that go to pages outside of the Financial Aid and Scholarship Office site are indicated by an external link icon (a small box with an arrow pointing out of it’s upper right corner).

Right Column

The right column is a place for additional page content. It may supplement the main content or draw attention to something important, like a new program or deadline.

On the scholarships page, the right column includes a content block titled Huskie Spotlight. It contains a photo of a current student and a quote describing the many scholarship opportunities he had at NIU. This adds a welcoming touch to the page and helps prospective students see how NIU scholarships could benefit them, too.

Footer

The footer appears at the bottom of the webpage. Its contents are determined by the site template. The footer that displays on the scholarships page is part of the 4.0 template. It contains helpful links, the copyright statement, privacy notice and NIU’s mailing address.

 

 

Date posted: April 27, 2022 | Author: | Comments Off on NIU Webpage Components

Categories: Site profiles

Follow these steps to make any piece of content more effective for the web. If you have any questions about optimizing web content, contact us at webcommunications@niu.edu.

1. Add Headings

To someone looking for information online, few things are more discouraging than walls of text. When you chunk your content into logical sections, your audience will find it easier to navigate. Aim for paragraphs of three to five sentences and sections of no more than three paragraphs. Give the sections headings that accurately describe their content.

2. Shorten Long Sentences

Like walls of text, long sentences can be off-putting to users. It’s better to provide bite-size info. As a general rule, you should aim for no more than 20 words per sentence. Varying your sentence length within that range can help your reader stay engaged. You can also use bulleted lists to split up long sentences.

3. Use Second-person Pronouns

Using second-person pronouns (i.e., you, yours, etc.) makes for a smoother reading experience. It lends itself to simpler sentence structures and aligns with the NIU brand voice: personalized, inviting and charged.

Date posted: February 16, 2022 | Author: | Comments Off on Three Steps to Better Content

Categories: Pro tip

Many people with visual and other disabilities use screen readers to access online content. WebAIM, an organization dedicated to promoting web accessibility, regularly surveys screen reader users to explore how they experience the web. The results of WebAIM’s 2021 screen reader user survey reveal interesting usage trends and indicate ways to improve web accessibility.

PDF vs. Word

The survey shows that screen reader users find Microsoft Word documents to be the most accessible. Sixty percent of respondents said Word is their preferred document format, with only about 17% preferring PDF. This is important to consider as we discuss best practices for online documents. While in the past we recommended PDF as the preferred format for documents on the NIU website, we now provide guidelines that are more accepting of Word documents (see Web Standard 5.8 Files).

Helpful Headings

While accurate headings are helpful to everyone, the survey results show how vital they are to screen reader users. When asked how they would try to find information on a lengthy web page, 67.7% indicated they would navigate through the headings. Just 8.1% indicated they would read through the page to find the information. By using concise, accurate headings, we make navigating the NIU website a more comfortable experience for our users.

 

Date posted: February 16, 2022 | Author: | Comments Off on Trends in Web Accessibility

Categories: Pro tip

The web team launched, converted or refreshed the following websites from October through December 2021:

Please email us at webcommunications@niu.edu if you notice a link that needs to be updated.

Date posted: February 16, 2022 | Author: | Comments Off on Site Launches: Fall 2021

Categories: Site Launch

Many NIU students are among the first generation in their family to attend a four-year college. Since first-generation students may have received limited college preparation guidance, they may need extra support to succeed as a Huskie. NIU is dedicated to providing first-gen students with the services and information they need.

One way NIU is reaching out to first-generation students is through Breaking Barriers, a support group for first-gen students. Initiatives like Student Financial Advising Services are another way NIU supports first-gen students. If you work on an NIU website, you can join the university’s efforts to promote first-generation student success.

Use Plain Language

Making complicated information easy to understand is helpful to all students, but can be especially so to first-gen students, who may not have background knowledge in an area. One of the simplest things you can do to facilitate first-gen student success is to avoid using acronyms in your content. To a small internal audience, an acronym might be a helpful shortcut. But to someone new to campus, acronyms can be perplexing and overwhelming.

Similarly, the use of specialized terms can cause confusion. The students in your audience might not understand who a provost is or what disbursement means. Review the content you create from the perspective of someone unfamiliar with the topic. Explain or simplify words and phrases that aren’t easily understood.

Normalize Seeking Support

NIU offers many support services to students, and we want students to use them. However, if we only present support services as for students who are having trouble, we could alienate the people we want to help. We should strive to normalize seeking support in our website content. By framing tutoring and other services as beneficial to all students, we reduce the stigma first-gen students may feel about using them.

Date posted: February 16, 2022 | Author: | Comments Off on Communicating with First-generation Students

Categories: Pro tip

Can you imagine building a house with no blueprint? It would be difficult to tell how the pieces fit together. You need a plan for building a website, too. The web team creates and updates templates for NIU websites. By guiding the placement of different kinds of content, they act as our blueprints.

Even with a blueprint, though, there are lots of decisions to make. For example, which rooms should be grouped together? How can we organize their contents to make them easy to use?

Designing a Plan

Web designers refer to this process as developing a site’s information architecture. It’s about how the content and structure work together to achieve a desired outcome, whether that’s informing campus about a new policy or encouraging students to apply to NIU.

In addition to current best practices in web design, there are conventions we follow on NIU websites that determine some of a site’s information architecture. For example, department websites generally have a Contact Us block on each page and an About menu in the top navigation. By standardizing these conventions across our website, we provide a consistent, comfortable experience for our users.

Content Categories

We must consider audience expectations and needs when organizing the rest of a site’s content, as well. Users rely on a site’s navigation for guidance. It’s important to organize content into logical categories and effectively label them in the top navigation.

On most NIU websites, this means approaching the information from a student’s perspective. For example, we can describe how they can benefit from our services, instead of listing the functions of an office.

It can be tempting to use a catchy phrase or buzzword in the top navigation. However, according to the user experts at the Nielsen Norman group, “Descriptive category names that people understand have a better chance of being discovered and clicked than do clever made-up words or internal jargon.”

By prioritizing users’ needs and expectations as you create and name information categories, you can:

  • Help them quickly find desired information.
  • Encourage them to stay on your site longer.
  • Build trust with your department and the university.

Build with Us

The web team continually revises and updates our templates as well as individual NIU websites. This involves optimizing structure and navigation based on the principles mentioned here. If you have any questions about your site’s information architecture or would like to explore possible changes, please contact us at webcommunications@niu.edu.

Date posted: November 4, 2021 | Author: | Comments Off on Information Architecture 101

Categories: Pro tip

If you work on an NIU website, you should know about the Web Update Request Form. You can use it to request a variety of changes to site content, from minor text edits to more involved updates. Here’s how to submit an effective update request.

If you have any questions, please contact us at webcommunications@niu.edu.

Gather Content

Make sure you have all the content you need before submitting the form. For example, if you want to add a new section to a page, make sure the new text is complete and final. You should also plan to upload any related documents, such as updated PDFs, when you submit the form. When your request contains everything we need, we can complete it more quickly.

Describe or Track Changes

If you have minor text edits, describe them in the brief description/instructions area of the form. For example, if there’s been a change to a deadline, you could write: “We changed the application deadline. Change the date in the third sentence of the second paragraph from Dec. 1, 2021, to Feb. 1, 2022.”

If you have multiple and/or more complicated edits, copy the text you want to change and paste it into a Word document as plain text. Then, enable Track Changes and make your edits. Upload the document when you submit your request, and we’ll be able to see exactly what you want us to change.

Get Ready to Collaborate

Is there a problem or issue with your site, but you’re not sure how to address it? Tell us about it in an update request. We stay up to date with industry best practices and have a wide range of solutions we can apply to your situation.

Sometimes, we may suggest a different way to handle an update than what you request on the form. Rest assured that we base our recommendations on the mutual goal of effectively sharing your content with the widest possible audience.

Date posted: November 3, 2021 | Author: | Comments Off on Submitting Update Requests

Categories: Pro tip