Web Strategy and Development Blog

Accessibility series: descriptive links

by

Welcome to our series of posts entitled: how to make your website accessible! So far we have discussed the ethical and legal reasoning behind accessibility, how to write alternative text, and how to check color contrast.

In today’s post we discuss writing descriptive links. When you visit a website, do you read every word? Generally readers scan sites for what sticks out to them. Which of these following links makes you want to keep reading?

Click here to learn about Boomer

or:

We’ve just uncovered Boomer’s birth story

Descriptive links entice the reader to learn more. However, if you write “learn more” or “click here” for each link, readers will grow bored and stop following the links. Screen readers translate information into synthesized speech. These screen readers, like people, “jump” from link to link to read information in a logical order.

Tips for accessibility

How to add links

If you are using WordPress, refer to the above Boomer example. Attach link by highlighting the phrase:

Screenshot of example of descriptive links

Click on the chain icon and type the address. The link will appear in blue.

If you are working with Web Press, this video from the Missouri State Web Help Desk shows how to link to webpages.

Accessibility series: color contrast

by

Welcome to our series of posts entitled: how to make your website accessible! So far we have discussed the ethical and legal reasoning for why accessibility is important, and how to write alternative text.

Today we focus on color contrast.

Have you tried reading black letters on a red background? What about red letters on a maroon background? You might want to add some color to your website, but how do you ensure your site is still readable?  The color contrast between the text and the background affects readability.

The contrast should be 4.5:1. This is the comparison between relative luminance of the first number compared with the second number. The good news it is easy to check. This color contrast site shows foreground and background color.

How to test

For foreground, click on the box for a color wheel and find the color of the font you are using. Click on the appropriate color to select it. It will show a small square in the color you picked.

Then, for background, repeat this step.  It will also show a small square in the color you picked. You will see a color contrast ratio that automatically adjusts based on your color wheel selections. Make sure the ratio is 4.5:1 or greater.

Let’s return to the initial example. To pick colors, you will want to use the branding recommendations to ensure a consistent appearance.

First, let’s check black text against the Brick City Red background:

color contrast checker of black letters on red background

Perfect! The ratio is greater than 4.5:1, so this combination passes accessibility standards.

A word of warning: Some color combinations look like they “should” be readable, but are they? For example, take the Brick City Red text on Missouri State Maroon background. Let’s check.

color contrast checker of red type letters maroon background

Nope! The color contrast ratio of 2.7:1 does not meet the accessibility standard of at least 4.5:1.

Free photo days for faculty and staff

by

Need a new headshot? You’re in luck! All faculty and staff members can get professional headshots from university photographers April 11-12 during Free Portrait Days. Photo sessions are available on a walk-in basis. Professional or business casual is preferred.

Don’t miss this chance to update your headshot for your department website and print projects. photographer takes headshot of student

Key details

  • What: Free Portrait Days
  • When: 9:00 a.m. – 4:00 p.m., April 11-12
  • Where: Plaster Student Union, Room 317
  • Who: Open to all University faculty and staff

 

Accessibility series: alt text

by

Welcome to our series of posts entitled: how to make your website accessible! In the first post we discussed the ethical and legal reasoning for why accessibility is important.

Today we focus on adding alternative text to images.

Tips for success

It’s a good idea to add images to posts because it drives readers to your site. But how do we make the image work for everyone?

Imagine the pre-smart phone days. You’ve found an image from your days in Brownie Scouts and want to show your best friend. But she lives six hours away. You could make a copy of the photograph and mail it to her, but you can’t wait! So, you call her up on your landline and tell her about the photo. Similarly, alt text is like describing an image so that the website visitor can understand its meaning.

How much should you say? Here are specific ideas to consider while writing alternative text. Don’t begin the text with the words “an image” or “a photo.” Don’t repeat the caption because it is redundant. Do briefly describe the image.

When blogging

If you post to a Missouri State blog, you use the blogging platform WordPress.  This is how you add alt text within your Missouri State blog.

Screenshot of WordPress page for alt text
Use the Alt Text field when uploading or editing an image in WordPress.

When updating your website

Missouri State webpages are maintained on Web Press. To add images to your site, upload it or select the image in the Asset Manager. You will have the option to add the caption. This is used as the alt text in Web Press.

Web Press screen showing alt text (caption)
Use the Edit Attributes link to add or change the alt text for an image.

How to know if you are successful?

To determine whether your site meets accessibility standards, enter the address into a web accessibility site like WAVE. Find the alt tag on images within the results. If it is green the alternative text is sufficient. If it is yellow it needs attention; it might be too long or too short. If it is red you need to add text.

Screenshot of students taking a photograph of themselves
After you enter your website address into WAVE, review the results for small red, yellow or green squares on each photo to check for acceptable alt text.

Social media kit: Fourth annual Missouri Public Affairs Hall of Fame

by

The state of Missouri will soon be honoring some of its finest citizens for their outstanding work for the betterment of others through the Missouri Public Affairs Hall of Fame.

The fourth class of honorees in the Hall of Fame — Maxine Clark, Langston Hughes, Judith Rowland, Hal Donaldson and Ann Covington — are set for induction on April 7, 2017. The induction ceremony and banquet is open to the public, but guests must purchase tickets to attend.

You can show your support for these outstanding individuals by spreading the word about the Missouri Public Affairs Hall of Fame and its honorees.

Key details:

What: Missouri Public Affairs Hall of Fame dinner and induction ceremony

When: April 7, 2017, 6-8 p.m.

Where: White River Conference Center in Springfield, Missouri

Who: The dinner and induction ceremony is open to the public, but guests must purchase tickets to attend. The honorees set for induction into the Hall of Fame are Maxine Clark, Langston Hughes, Judith Rowland, Hal Donaldson and Ann Covington.

Tickets: $40 per person. You can purchase tickets online.

Share your story

Help us spread the word about the Missouri Public Affairs Hall of Fame through social media.

We encourage you to join the online conversation about the Hall of Fame by posting about it on Facebook, Twitter or Instagram and tagging your posts with the official hashtag: #ShowMeCitizens

Make your post social media savvy

  • Tag the post with the official Missouri Public Affairs Hall of Fame hashtag: #ShowMeCitizens.
  • If applicable, tag the post with the Springfield, Missouri, hashtag: #SGF.
  • If you would like to provide a link for more information on the event, please link to: http://bit.ly/2jHOF2017.
  • On Facebook, tag when applicable Global Citizen or Convoy of Hope .
  • On Twitter, tag @ChiefExecBear (Maxine Clark), @ConvoyofHope, @HalDonaldson, @GlblCtzn, or @JudithJRowland when applicable.
  • Boost your post by including a photo.

Photos

The following photos are available for your use:

Landscape crop

Square crop

 

Sample social media posts

Sample tweets:

MO Public Affairs HOF honors @ChiefExecBear founder of @buildabear & advocate of women entrepreneurs http://bit.ly/ClarkHOF #ShowMeCitizens

MO Public Affairs HOF honors @HalDonaldson president of @ConvoyofHope world aid organization http://bit.ly/2HalHOF #ShowMeCitizens

MO Public Affairs HOF honors Langston Hughes, first African-American who made a living as a writer. http://bit.ly/2HughesHOF #ShowMeCitizens

MO Public Affairs HOF honors first female MO State Supreme Court Justice Ann Covington http://bit.ly/2CovigtonHOF #ShowMeCitizens

MO Public Affairs Hall of Fame honors @MarooNation alumna @JudithJRowland & her work with @GlblCtzn http://bit.ly/2RowlandHOF #ShowMeCitizens

Review our steps for turning a link into a tweet.

Sample Facebook posts:

Sharing about the Missouri Public Affairs Hall of Fame on Facebook allows for some additional customization. The sample posts below provide content recommendations based on our best practice tips for optimizing link sharing on Facebook.

Example 1

  • Post text: Join fellow Missourians in honoring five outstanding #ShowMeCitizens at the Missouri Public Affairs Hall of Fame April 7, as we induct Maxine Clark, Langston Hughes, Judith Rowland, Hal Donaldson and Ann Covington.

URL: http://bit.ly/2jHOF2017

Example 2

URL: http://bit.ly/2RowlandHOF

Example 3

  • Post text: Celebrate the induction of Ann Covington into the Missouri Public Affairs Hall of Fame on April 7. Covington is the the first female Supreme Court Justice in the state of Missouri.

URL: http://bit.ly/2CovigtonHOF

Example 4

  • Post text: Join the Missouri Public Affairs Hall of Fame in recognizing Hal Donaldson for his work with Convoy of Hope in providing emergency relief to people around the globe. #ShowMeCitizen

URL: http://bit.ly/2HalHOF

Example 5

  • Post text: #ShowMeCitizen Maxine Clark, founder of Build-A-Bear, uses her work to help advocate for female entrepreneurs. Help us recognize her work at the Missouri Public Affairs Hall of Fame on April 7.

URL: http://bit.ly/ClarkHOF

Example 6

  • Post text: Celebrate the life and work of Langston Hughes as he is inducted into the Missouri Public Affairs Hall of Fame on April 7. He was the first African-American to earn a living as a professional writer.

URL: http://bit.ly/2HughesHOF