Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Accessibility Updates

  • Accessibility Resources
  • Administrative Services Notifications

Learn best practices for accessibility

April 11, 2019 by admin

Join us for the 2019 Web Accessibility Summit, a conference about all things website accessibility for professionals in higher education and beyond, hosted this year by Missouri State University.

Details

When: May 29, 8 a.m. to 5 p.m.
Where: Missouri State University, Glass Hall
Cost: $40

Workshops and track sessions will focus on how to make your web presence more accessible with technical and non-technical solutions. Networking opportunities will encourage sharing of information and resources with colleagues from around the state.

Missouri State faculty and staff should register through My Learning Connection. You may use your noncredit fee waiver to cover conference registration costs.

Non-MSU faculty and staff can register now.

Seating is limited so don’t delay.

Organizers

Several Missouri higher education institutions are organizing this event:

University of Missouri logo. St. Louis Community College Missouri State University logo. Missouri State University - West Plains logo. Truman State University logo. Missouri University of Science and Technology logo. A.T. Still University logo. University of Missouri-Kansas City logo.

Filed Under: Uncategorized Tagged With: a11ysummit, Accessibility, conference, News, Technical, Training, Web Press, Web Strategy and Development

Fall 2018 Web Accessibility Clinic and Web Press training schedule announced

August 2, 2018 by admin

The fall 2018 Web Accessibility Clinic and Web Press training schedule have been released.

Web Accessibility Clinic

Learn how to identify and fix accessibility issues with your website. We will review the five most common issues affecting accessibility–and search engine results–on your website. Held on GAAD in May and early in the fall and spring semesters, the fall 2018 clinic will be held at the following time:

  • Friday, August 31, 2018, 1 – 2 p.m., Siceluff 411

Web Press training sessions

Sessions will be held at the following times:

  • Thursday, August 16, 2018, 1 – 3 p.m., Cheek 100
  • Tuesday, August 28, 2018, 1:30 – 3:30 p.m., Library 106
  • Tuesday, September 4, 2018, 1:30 – 3:30 p.m., Cheek 100

Advance registration is required.

Self-guided training

Self-guided training modules are available at any time. In-person assistance is available during weekly open lab sessions held every Friday 2:00 – 4:00. Telephone and email support is available weekdays at 417-836-5271 and webpress@missouristate.edu.

Filed Under: Uncategorized Tagged With: Accessibility, News, Training, Web Press, Web Strategy and Development

Introducing the Web Press Accessibility Checker

March 1, 2018 by admin

Accessibility matters

As an institution that receives federal funding, we must comply with federal regulations. But more importantly, developing accessible content is the right thing to do.

The Accessibility Checker is a plugin embedded within the Web Press text editor that inspects the accessibility level of content and will offer solutions to issues found.

How do I use the Accessibility Checker?

You can invoke the plugin by choosing the Accessibility Checker icon located in the Web Press text editor menu as shown below:

text editor toolbar with highlighted accessibility checker icon

Upon selecting the Accessibility Checker, it will inspect your content for accessibility issues. If an accessibility error is found within your text, the checker will likely identify a “quick fix” to resolve the problem. This is also an opportunity to learn because the error window offers an explanation for why the error is an error.

If you feel it’s a false positive, you can indicate this item should be ignored by the checker. If there are no accessibility issues, a window will appear notifying you that your page does not contain any accessibility issues.

Questions and assistance

If you encounter oddities or have additional questions about accessibility, please contact the web help desk at 836-5271 or email us at webpress@missouristate.edu.

Additional accessibility resources

  • Do your part for web accessibility
  • Alternative text
  • Don’t use color alone to convey content
  • Creating tables
  • Headings
  • Descriptive links
  • Color contrast

Filed Under: Uncategorized Tagged With: Accessibility, Acessibility, Web Press, Web Strategy and Development

Recap: Making Your Statement in a Digital World, Spring 2018

February 26, 2018 by admin

Kevin Agee and Kai Raymer recently presented Making Your Statement in a Digital World. It was a comprehensive training session for Missouri State website, blog and social media managers.

Access the presentations

We presented the Feb. 23 training session in four parts.

  • Brand storytelling (adapted from Ologie)
  • Readability
  • Social media
  • Accessibility

Key takeaways

Brand storytelling

  • Having a brand is a great start. But you need more than that. You need stories to execute it.
  • The problem is most higher ed stories aren’t stories at all, such as …
    • “Your professors will really get to know you.”
    • “You’ll get hands-on experience.”
    • “This is where you’ll discover your calling.”
  • A great Missouri State story does three things:
    • Makes an emotional and rational connection.
    • Builds meaningful relationships.
    • Is authentic.
  • Lead with the most interesting message. Not the most important.
  • Your voice is unique. Say it that way.

Readability

  • For better readability, use concise text and a scannable layout. Keep your message short and give readers an easy way to find the information they want.
  • Newspapers aim for a 7th-grade reading level. So should you. Approximately 70 percent of people read at an intermediate (6th-8th grade) level.
  • Make sure your content looks good on mobile. Current and future students are researching your department/program on their phones.
  • Improve your content’s readability with tools like Hemingway App and Yoast SEO.
  • Better readability gives your message more impact. You’ll improve audience reach/growth, audience action and efficiency (save $$$).

Social media

  • Use Instagram as a window into your department or organization. Strong, high-quality visuals are a must. Tell your story through pictures and videos and allow users to derive meaning.
  • Twitter is best used for conversation, not promotion. Don’t be afraid to let go, have fun, and be transparent with your audience. Customer service happens here.
  • Don’t believe what you’ve heard: Facebook still reigns supreme. Share news, human interest stories and your successes. Deal with negativity in a transparent fashion.
  • Worry not about your number of followers. Want to increase your base? Be good. Deliver interesting content people will want to consume.
  • Aim for the heart with all of your platforms. Be the account that makes people feel like they’ve picked something special to them.

Accessibility

  • Accessibility helps people with disabilities or limited abilities better use the web.
  • There are legal, ethical and beneficial reasons to maintain an accessible website. Accessibility makes your website better.
  • Three staples of accessibility: alt text, headings and descriptive links.
    • Alt text is the text equivalent of a photo. Imagine you were describing the image to someone via text message or phone call.
    • Headings are vital for screen readers and give all visitors an easy outline of your website.
    • Descriptive links explain what the link offers. You shouldn’t have to read surrounding content for context. Don’t write “click here” for your links.
  • Use tools like WAVE and Web Press’ accessibility checker. They’ll find accessibility issues on your website.
  • Follow our ongoing Accessibility blog series for the latest tips and strategies.

Filed Under: Uncategorized Tagged With: Accessibility, Office of Web and New Media, readability, Social Media, Social Media Boot Camp, Training, Web Strategy and Development

Accessibility series: Creating tables

February 16, 2018 by admin

Welcome to our series of posts called, “How to make your website accessible.” We have discussed the ethical and legal reasoning behind accessibility, how to write alternative text, checking color contrast, how to write descriptive links, how to create accessible headings, and limitations on using color to convey content. The accessibility journey continues with the discussion of accessible tables.

Accessible tables are important

The purpose of data tables is to present information in a grid or matrix. Columns and rows are intended to show the meaning of the information within the grid. Users without visual impairments can visually scan a table and make associations between data in the table and their row and/or column.

Users with visual impairments cannot make visual associations. Those using screen readers have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells. Tables without structural markup to differentiate proper header and data cells create accessibility barriers.

Correct HTML markup not only helps those using assistive devices consume content more accurately, but it also improves the functionality that adapts the table layout on mobile devices. This functionality is intended to increase data comprehension and help users avoid zooming and side-scrolling on mobile devices.

What information goes into a table?

Before moving forward, we must talk about the purpose of a table. Tables are used for tabular data, making the HTML markup important to understand. Tabular data requires an ordered arrangement of rows and columns that rely on headers to group information. Tables should not be used for layout or to position elements on your web page.

Back to the basics

Let’s take a stroll through memory lane and recall the layout of rows and columns. Columns run up and down, whereas rows run right to left. As we continue, the importance of rows and columns will be addressed when organizing information in an accessible manner.

As we move forward, we will learn how to add the <thead>,<tbody> and headers.

graphic explaining the layout for columns and rows

Table markup

The <thead> element is used to group header content, the <tbody> element is used to group the body content and the <tfoot> element is used to group footer content. Every table must have a <thead> and <tbody> element for the mobile table styles to be applied.

The purpose of these elements are to specify the parts of a table. Browsers can scroll the body of a table independently of a fixed header or footer. Each of these tags will hold groups of rows inside them. An example is shown below:

Tuition and fees
Item In-state Out-of-state
Estimated totals $12,357 $21,300
Tuition $8,844 $17,787
Student service fees $2,028 $2,028
COB graduate level course fee $1,485 $1,485

<table>
<caption>Tuition and fees</caption>
<thead>
<tr>
<th scope="col" style="width: 70%;">Item</th>
<th scope="col" style="width: 15%;">In-state</th>
<th scope="col" style="width: 15%;">Out-of-state</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Estimated totals</td>
<td>$12,357</td>
<td>$21,300</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tuition</td>
<td>$8,844</td>
<td>$17,787</td>
</tr>
<tr>
<td>Student service fees</td>
<td>$2,028</td>
<td>$2,028</td>
</tr>
<tr>
<td>COB graduate level course fee</td>
<td>$1,485</td>
<td>$1,485</td>
</tr>
</tbody>
</table>

Identifying row and column headers

Having designated row and/or column headers is essential to creating an accessible data table. Let’s think of a header as a title for rows and columns. In the markup, the <th> element is used for table header cells.

When a <th> element is used in Web Press, the text will shade the cell background and bold the text.

Associating data cells with appropriate headers

Using “scope” attributes is the easiest way to associate header (<th>) cells and data (<td>) cells. The scope attribute tells a browser and screen reader which data is associated with each header. For example, everything within a column is associated with the scope="col" header. Similarly, it will see that a scope="row" is a header for all cells in that particular row.

For column header cells, simply include scope="col" in the <th> tag. For row header cells, use scope="row" in the <th> tag.

Using columns headers

The table below uses scope="col" to associate column headers to data cells underneath it.

Homework Due Dates Quiz Dates Test Dates
9/2/02 9/4/02 9/6/02
9/23/02 9/25/02 9/27/02
10/14/02 10/16/02 10/18/02

 

 

 

 

 

<table width="330">
<tr>
<th scope="col">Homework Due Dates</th>
<th scope="col">Quiz Dates</th>
<th scope="col">Test Dates</th></tr>
<tr>
<td>9/2/02</td>
<td>9/4/02</td>
<td>9/6/02</td></tr>
<tr>
<td>9/23/02</td>
<td>9/25/02</td>
<td>9/27/02</td></tr>
<tr>
<td>10/14/02</td>
<td>10/16/02</td>
<td>10/18/02</td></tr></table>

Using row headers

Let’s suppose we wanted to display students’ scores. To accomplish this, we will need to add row headers on the left side of the table. The table below uses scope="row" to associate row headers to the correct data cells.

Homework 1 Quiz 1 Test 1
Bob 87% 86% 80%
Scott 92% 98% 94%
Tara 94% 82% 91%

<table width="440"><tr><td></td>
<th scope="col">Homework 1</th>
<th scope="col">Quiz 1</th>
<th scope="col">Test 1</th></tr> <tr><th scope="row">Bob</th>
<td>87%</td>
<td>86%</td>
<td>80%</td></tr> <tr><th scope="row">Scott</th>
<td>92%</td>
<td>98%</td>
<td>94%</td></tr> <tr><th scope="row">Tara</th>
<td>94%</td>
<td>82%</td>
<td>91%</td></tr></table>

Making table captions

Data tables typically have a brief descriptive text before the table, indicating the content of a table. The text should be associated with the table using the <caption> element. The <caption> element is used right after the opening <table> tag. The image below helps us understand the role of the <caption> element in a table.

<table>
<caption>Estimated program totals</caption>

The coding above can be visualized like this:

Estimated program totals
Item In-state Out-of-state
Estimated totals $12,357 $21,300
Tuition and fees $12,357 $21,300

Ask the Web Help Desk

How do I make an accessible table in Web Press?

  1. Open the Rich Text Block.
  2. Select Edit Content.
  3. Select the Table icon from the editor toolbar.
    table icon in FreeForm content window
  4. Type the number of rows you want in the Rows box and the number of columns you want inside the Columns box.
    rows and columns boxes inside the table properties window
  5. Select First Row, First Column or Both from the Header drop-down menu, depending on the location of your header(s).
    Note: This will set your <thead> and automatically set other cells as <tbody>.
    header drop-down menu in table properties window
  6. Write the caption of your table in the Caption box.
  7. Select OK.

How do I edit code in the rich text editor?

Inside the rich text editor, select the button toward the right called, “Source View.” This button will allow you to examine and edit the code inside the text table.

How will my table look on a mobile device?

As part of our ongoing campaign to increase the accessibility of Missouri State’s web pages, we have added functionality that adapts the table layout on mobile devices. While this functionality is primarily intended to increase data comprehension, it also helps users avoid zooming and side-scrolling on mobile devices. Our Full Stack Developer/Engineer, Philip Bowles, wrote a blog about rewriting table elements for mobile devices.

More information about semantic HTML elements

You may visit these links for more information about relevant HTML elements.

  • The table element
  • The caption element
  • The thead element
  • The tbody element
  • The tfoot element
  • The th element

Filed Under: Uncategorized Tagged With: Accessibility, Tables, Web Press, Web Strategy and Development

Next Page »

Categories

  • Access Technology Center
  • Diversity and inclusion
  • News
  • President's Council on Disability
  • Provost
  • Web Strategy and Development
  • web-strategy-and-development

Tags

a11ysummit Accessibility Ally alt text autism blackboard brand Campus Focus conference construction content COVID disability Diversity Initiatives document editing FCTL Featured gaad improvements marketing Microsoft Office Mind's Eye News Omni CMS Omni CMS training policy professional development Provost Communique readability Redesign Shattering the Silences Series Social Media Technical template Training Upcoming Events Web Press website accessibility websites Web Strategy and Development Web Support WordPress WordPress Blogs YouTube

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
Make your Missouri statementMake your Missouri statement
  • Last Modified: February 16, 2018
  • Accessibility
  • Disclaimer
  • Disclosures
  • Equal Opportunity Employer and Institution
  • © 2025 Board of Governors, Missouri State University
  • Contact Information
  • Healthcare MRFs