Search Results for: readability and accessibility

Accessibility series: Headings

November 7, 2017 by Alyson Epperson

Welcome to our series of posts called, “How to make your website accessible.” So far we have discussed the ethical and legal reasoning behind accessibility, how to write alternative text, checking color contrast, and how to write descriptive links. The accessibility journey is moving onward with the discussion of headings.

Headings vs. paragraphs

A heading is a short phrase describing what a succeeding section is all about. Headings help users determine the overall outline of a document and navigate to specific information on a page. Headings are bold and bigger compared to normal paragraph text. Headings need <h> tags while paragraph text need <p> tags. The images below display the Source View and Rich Text view to better understand the code behind headings and paragraphs.

Heading ranks

Headings are nested according to level or rank. Heading 1 is the most important heading, whereas heading 6 is the least important. Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. In Web Press, Heading 1 is the title of the web page, while Heading 2 serves as a main section.

Heading HTML tags

Heading tags are used to create headings. They are defined with the <h1> to <h6> tags, telling browsers and search engines that this is the most important text on the page.

If you are using Web Press or WordPress, these tags are placed automatically when a heading is selected. If you notice a heading issue but can’t figure out the problem behind it, the HTML elements will likely uncover the issue. In Web Press, click View Source inside the text window to find HTML. In WordPress, click Text in the upper right window tab. You don’t have to be a coding expert to fix headings in HTML as long as you know the heading tags below:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Improving readability

Headings support visual readability. Internet readers tend to inspect webpages in blocks and sections. Splitting information into logical chunks based on headings allows the skimmers to quickly find what they need. Informative and concise headings are effective, giving readers a preview of the information. It is critical to ensure headings have a logical structure.

Increasing accessibility

Users with visual impairments may have headings read aloud by a screen reader. The screen reader will compile a list of headings, rather than reading aloud the entire page. This allows those with visual impairments to easily jump through a website’s sections and navigate to a particular set of information. Heading structure is one of the most important accessibility considerations.

Optimizing search ranking

Search engine optimization (SEO) is the process website owners use to help search engines find, index and rank their web pages — hopefully above others. Instances of <H> tags in text tells a browser—and of course, Google—that the text is important. When a user is searching for specific information, headings communicate to search engines what a website is all about. Because headings are important to users, they directly affect search rankings and optimization.

Ask the Web Help Desk

Why can’t I use bold text instead of a heading?

This is a frequently asked question at the Web Help Desk. Web Press users tend to love the bold look opposed to the smaller, gray Heading 2. In all circumstances, it is best practice to use a heading rather than bold. This will code your heading with the proper <H> for accessibility and search engine optimization.

On a side note: Headings are written in sentence case and don’t include punctuation. This means you only capitalize the first letter of the first word and proper nouns. (Ex: Web content management system)

Even if you think it looks better another way — trust the Help Desk.

How do I access headings in Web Press?

In Web Press, the heading size and color style is set as pre-set. Follow these steps to set a heading:

Select the Open Rich Text Block red dot.
Select the Edit Content red dot.
Highlight the text you wish to make a heading.
Select the heading drop-down list.
Select the appropriate heading in the drop-down menu.
Select OK.

How do I change the page title?

In Web Press, the Heading 1 is the title of a page. Follow these steps to the change the page title:

Go to the page you are editing in the SmartEdit.
Select the Open Web Page red dot at the top of the page.
Right-click anywhere on the page.
From the drop-down menu, select Edit Properties.
In the Edit Properties window, type your new page title in the Headline box.
Select OK.

How do I access headings in WordPress?

Follow these steps to set a heading in WordPress:

Select Format from the toolbar menu.
Move down the drop-down list and select Formats.
Select Headings
Select the heading you wish to use.

Further questions?

If you have any questions or need further assistance, please contact the Web Developer Help Desk at WebPress@MissouriState.edu or call 417-836-5271 between the hours of 1 p.m. and 5 p.m. on normal business days.

Accessibility series: color contrast

April 7, 2017 by Mary Chiles

Welcome to our series of posts entitled: how to make your website accessible! So far we have discussed the ethical and legal reaso ning 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:

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.

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

Do your part for web accessibility

March 2, 2017 by

In January 2017, the federal government released the Information and Communications Technology Final Standards and Guidelines. This rule requires that Missouri State complies with the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA.

Why do these standards matter?

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

It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the web, as a basic human right.

Accessibility supports social inclusion for people with disabilities as well as others, such as older people, people in rural areas, and people in developing countries.

– W3C

Also, following these guidelines can improve the search engine optimization of your website. Many of the accessibility techniques overlap with SEO best practices, so your website will be better understood by search engines and possibly ranked higher in search results.

What does this mean for me as a website developer?

If you’re using Web Press, then many of the accessibility checkpoints will be handled by the overall templates. However, you need to ensure that the content you add to your website is also accessible. Below are some key areas that you should review:

Write meaningful text alternatives

Each image on your website much have a meaningful text equivalent:

Describe the image (like you would to someone over the phone).
Describe the destination if the image is a link.
Use a space if the image is decorative.

In Web Press, you supply the alt text when you upload an image to the Asset Manager.

Remember that context is everything, so sometimes the same image will have different alternative text. Read the WebAIM Alternative Text article for guidance.

This principle also applies to audio and video: you must caption your video and provide transcripts for audio.

Structure content with ordered headings and lists

Use true headings (not bold or other styling) within your conent to break up blocks of text. This provides a way for everyone to more easily scan your content and find what they need.

Additionally, use lists to break up the text on your website. Not only do they help structure the distinct items, but they also can help highlight important content.

Use the format drop-down box in the Rich Text editor to denote headings.

Write link text that makes sense out of context and describes the destination

When you add links to your website content, the name of the link is critical. Try to describe the destination of the link; a user should know where the link goes without having to read the surrounding content for context. Also, avoid using generic labels like “learn more” or “click here” as they lack specificity.

Mark the headers of data tables

First, only use tables for data (like you would use in a spreadsheet). Do not use tables to lay out content; Web Press offers columns for design options.

Second, when you have a data table, ensure there are marked header rows that describe each column/row of content.

Set the Cell Type to Header on your data table headers.

Use color wisely

Make sure the color contrast of your text and the background are high to maximize readability. The accessibility guidelines require a contrast ratio of at least 4.5:1 for more content. The only way to judge this is through a color contrast checker, where the two color values are compared.

Also don’t use color as the only way to convey information. Make sure the information is provided in another way, usually via text. The WebAim Color-blindness article provides some context and possible solutions.

What tools are available to assess website accessibilty?

There are many free tools that can help you improve the accessibility of your website:

Recap: Making Your Statement in a Digital World

February 25, 2019 by Kai Raymer

Web strategy and development staff members Kai Raymer and Erika Brame delivered a half-day training session Feb. 8 on digital marketing.

Whether you attended or couldn’t make it this time, here’s a recap and a chance to download slides and view video from Making Your Statement in a Digital World.

Key takeaways

Readability

Readability: The ease with witch a person can understand written content.

Two keys for readability: Concise text and scannable layout.
- Use simple words and short sentences. Use headings so people and software can scan your content.
Write inverted pyramid style, not chronologically. Put the most important information near the top of your story, content and/or website.
Tools like Hemingway App and Yoast SEO can gauge and test the readability of your content.
Aim for a 6th-to-8th grade reading level for your content. Most people read at that level.
Prioritize what goes on your website. Don’t clutter. The more content and links you have, the less important everything becomes.
Know that readable content can help you:
- Reach more people
- Increase what they understand
- Get them to act
- Save money
No one wants to put extra effort into reading. Even smart people (deans, department heads, graduate students etc.).

Download readability slides (PDF)

You need Adobe Acrobat Reader to view and print these documents.

Social media

Share human – don’t be afraid to act like a human and interact with your audience one-on-one.
Set up a Facebook business account where people can find your contact information. Be prepared to respond to their questions.
Facebook ads can be helpful but use with a strategy for want you want to accomplish.
Third party platforms can help teams collaborate and offer insightful analytics.
Keep it simple. Not everything goes viral and that’s ok. Keep interacting with the audience.

Download social media slides (PDF)

You need Adobe Acrobat Reader to view and print these documents.

Accessibility

Accessibility helps people with disabilities or limited abilities better use the web.

Think of your website as a public space. Make accommodations for all users.
Not following accessibility standards could lead to lawsuits or legal trouble. Higher education websites are often targeted for accessibility issues.
- Following accessibility standards will make your website better. You’ll improve SEO and reach more people.
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 the Web Press accessibility checker. They’ll find accessibility issues on your website.
Follow our ongoing Accessibility blog series for the latest tips and strategies.

Download accessibility slides (PDF)

You need Adobe Acrobat Reader to view and print these documents.

Video

Think visual – when on location for an event share raw photos, but when promoting the event utilize photo services to help boost your presence.
Video is king across all platforms. Be sure to add captioning for accessibility and to increase views.
Measure your success based on the goals your team sets: more followers, increased engagement, more views, etc. Keep a log of your analytics so you can compare data from previous years.
Start thinking of ways you can add video to your workflow. Start slow and make goals for yourself for when and how often you want to post videos.
Don’t backlight your subject. Let the natural light work for you, not against you.

Download video slides (PDF)

You need Adobe Acrobat Reader to view and print these documents.

Watch on Zoom

For the first time, we live streamed the training through Zoom.

Watch the replay

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

February 26, 2018 by Web Strategy and Development

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.