Web Strategy and Development Blog

Learn best practices for accessibility

by

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:

Recap: Web Accessibility Summit

by

Web and new media staff attended the inaugural Web Accessibility Summit last month. The conference focused on website accessibility for professionals in higher education.

Key takeaways

Universal design considers the needs of a diverse human population. We must consider these needs during every step of the project. From backbone (code) to the voice (content). It’s much easier and less expensive to design for accessibility from the beginning.

Poor heading structure and lack of video captioning trigger the most user complaints.

Alt text reminder: Context matters. Ask yourself why the image is on the page. You’ll write better alt text that way. 

An OCR (Office for Civil Rights) complaint is not a lawsuit; it’s an opportunity to resolve a complaint. Open communication between legal counsel and the OCR is key.

  • Users can request accessible document alternatives. We have five business days to provide one.
  • We should remove old/outdated, inaccessible documents from the web. We actually risk more complaints and legal issues by keeping them on your site.

Crafting strong content is as much a vital part of good accessibility as anything else.

The W3C WAI-ARIA Authoring Practices document offers examples for creating accessible widgets.

An accessible modal dialog must: 

  • Show independence from the rest of the page,
  • Trap keyboard focus within the modal only, and
  • Be closeable via a button and the escape key.

The mission of higher education and accessibility are hand-in-hand. We are making education and information usable for all people. Being passionate about one is being passionate about the other.  

Slides

The Web Accessibility Summit schedule links to the session slides.

Learn accessibility best practices

by

Join us for the first Web Accessibility Summit, a conference about all things website accessibility for professionals in higher education and beyond.

Details

When: May 30, 8 a.m.-5 p.m.
Where: University of Missouri, Columbia
Cost: $25

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.

Register today

Seating is limited. On-campus lodging is available.

Organizers

Several Missouri higher education institutions are organizing this event:

Accessibility series: Video captioning

by

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, limitations on using color to convey content and how to create tables.

The accessibility journey continues with the discussion of video captioning.

We love videos

Videos are engaging, effective and entertaining to watch. From Mind’s Eye, FAFSA on fleek and Onward, Upward: What’s new at Missouri State (below) — some of the greatest moments at Missouri State are best captured and shared through video.

I sat down with skilled videographer, Chris Nagle, to learn more about video captioning.

Video captioning is important for accessibility

As a federally-funded institution, we are required to conform to certain accessibility guidelines. Video captioning is included in these guidelines. Once you have a completed a video, adding captions should not be overlooked. Video captioning increases accessibility by reaching audiences regardless of environment, ability or language. With a few quick tips, you can make your video accessible to everyone.

Who benefits from video captioning?

There is a wide range of audiences who enjoy video captioning. Some of these include:

  • People who are deaf and hard-of-hearing.
  • People with cognitive and learning disabilities who need to see and hear the content to better understand it.
  • People who are not proficient in the video’s spoken language.
  • People using a mobile device on silent.
  • People accessing a video in a loud environment or have defective audio.

Even more, content in text form like caption files are better indexed by search engines. Video captioning is effective, and it provides equal opportunity for everyone.

What is video captioning?

Captions are a text form of audio information in video and animations. Captions should include dialogue and non-speech information such as sound, sound effects and identify who is speaking. Captions are essentially transcripts synchronized with the visual content. As you can see in the screenshot below, there is captioning for the dialogue spoken by the narrator.

student hugging professor at graduation

Quality matters

Keep these guidelines in mind as you create captions:

  • Accurate: Captions must match the spoken words (either verbatim or in essence) in dialogue and convey background noises and other sounds.
  • Synchronous: Captions must appear at approximately the same time audio would be available and displayed at a speed easily read by viewers.
  • Complete: Captions must run from the beginning to the end of the program to its fullest extent possible.
  • Properly placed: Captions should not block other important visual content, overlap one another or run off the edge of the video screen. They should also comply with color contrast guidelines.

What’s an easy way to make video captions?

Luckily, there are service providers that do most of the video captioning work.

Nagle suggested using Rev or 3Play Media for affordable video captioning needs. Nagle often uses Rev, which returns video captioning within 24 hours after uploading a video. He said it is important to be mindful of two things when uploading a video.

First, make sure you are uploading the final, completed video. Secondly, attach any details that are needed such as names and unique spellings.

Upon uploading a video, you can dictate the returned file format depending on the location of your video. For example, you would select SubRip (.srt) for a YouTube video or Facebook ready BubRip (.srt) for Facebook captioning. When the file returns, you can download the file and edit any elements necessary.

Adding captions to YouTube videos

To add captions to YouTube videos, you can use the YouTube Caption Editor or do it yourself.

Using the YouTube Editor

YouTube automatically generates captions for most videos, but they are rarely fully accurate. If there are only a few mistakes, captions can be perfected by making corrections directly in YouTube. YouTube offers instructions for editing captions.

Doing it yourself

If you would rather caption your own video for free, there are several online tools, including:

The process for creating these captions is similar to the process we learned earlier. You will need to upload the video to the web, provide the video’s URL to the captioning service, review and edit the captions and download the caption file in an appropriate format. Lastly, you will want to add the caption file to the YouTube video.

Ask the Web Help Desk

Where can I get more information about making accessible videos?

Nagle gave me an updated WCAG 2.0 for video accessibility document that he uses to answer compliance questions.

Where can I find more information for how to edit YouTube captions?

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

by

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.

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.