Oregon Master Naturalist is an excellent example of a statewide program using the website layout. Kudos to Jason O’Brien!

Let’s take a look:

These are some of the things we love

The landing page has:

  • A lush and inviting photo
  • Engaging information about the program.
  • Titles and text are user-friendly and help potential participants identify if they would enjoy and benefit from the program.
  • An enthusiastic testimonial video
  • Stories sharing the heart of Oregon Master Naturalist
  • Straight-forward sidebar navigation

Other pages

Become a Master Naturalist

Volunteer

  • Great impact statistics for Master Naturalist volunteers. These were added using the new “impact stats bar,” available for programs and counties.
  • Easy to find exciting volunteer project ideas

What is the cost?

  • Easy to understand the cost and financial options.

What you can do now

Review your program pages. Is there anything you can do to improve the text or images based on the example above? See instructions for updating program content.

Please contact us with any questions.


Web updates

These are some new features:

  • You can tag an event with a project. Then add a “project events list” to your page to display them.
  • You can add a “project faculty/staff list.” Contact us to add users to display on a project.
  • You can override the title of a piece of content selected for a “highlighted content item” page section.
  • You can now specify what text shows when county event lists have no events to show.

The about us section on the website has new information, including a new career opportunities page.

 

A “typical” computer/tablet/smartphone setup makes a lot of assumptions about the abilities of the person using it. For example, it may assume they are able to see a screen, hear sound from a speaker, type on a keyboard, and manipulate a mouse. These assumptions are not always correct. When this is the case, people use “assistive technology” to access websites. Some examples include:

  • “Screen reader” software that reads web page text out loud for people who can’t see it on a screen.
  • Braille devices that present web page text for people who can neither see a screen nor hear spoken text.
  • Special keyboard navigation for people who have trouble controlling a mouse.
  • Voice command or eye tracking software for people who can’t use a mouse or a keyboard.

Assistive technology doesn’t only have to do with what we might consider a “disability”. It also includes, for example, automatic translators and “night modes” on cell phones.

We want our content to be available to all Oregonians. Plus, it is legally required to be accessible to all people regardless of ability. So, our website needs to work with all assistive technology.

Our team makes sure that the framework of the Extension website is accessible. This includes the navigation, search functionality, and other shared features. However, content authors need to help ensure that the content on the site is accessible as well.

For content authors, there are three main rules for accessible content:

  1. Make all content available as “true text” (i.e. highlightable with your mouse).
  2. Use text formatting correctly to provide structure and meaning to content.
  3. Don’t make assumptions about the technology visitors are using to access the content.

True Text Content

“True text” is text that you can highlight with a mouse. Screen readers cannot read any content that isn’t true text. That content is unavailable to people using them. Therefore, all content must be available as true text in some form.

Most of the content that you enter in the Extension website will be true text. There are only three situations where you need to worry about this:

  1. Images that contain text
  2. PDFs that contain scanned documents
  3. Videos and other multimedia

Images Containing Text

When an image contains text, it needs to be available as “true text” somewhere else on the page. The “Alternative Text” field exists for this purpose specifically if the text is not too long. Here is an article about writing alt text with some examples.

If the image conveys information without text, include a summary of that information. This can be in the page’s body text or the image’s caption or alternative text.

PDFs Containing Scanned Documents

Sometimes, when you scan a document, it comes to your computer as an image. This has all the same problems as other images. To test if a PDF contains true text, try to highlight the text inside it. If you can’t, you will need to recreate or fix the document. University of Washington has created a good article about fixing inaccessible PDFs.

Videos and Other Multimedia

In general, all videos should have captions at least and, ideally, a transcript. The transcript should include text shown in the video if it is not part of the transcribed speech.

If you use YouTube’s automatic captioning, check that it doesn’t generate anything problematic.

Text Formatting

Many people think of the text toolbar as a way to make text look a certain way. But working with that idea may make content confusing to visitors who do not see web pages the same way you do. Really, the purpose is to mark certain text as having a certain meaning or purpose. Here are the controls that can mark content this way:

  • Bold (“B” icon): Marks text that is important. A screen reader might read it in a different tone/volume or single it out.
  • Superscript (“x2” icon): Marks text that is superscript, such as in mathematical equations or chemical names. This is not for footnote references (there is another control for that) or making text smaller. In the latter case, screen readers might not read the text correctly if they assume it is part of an equation.
  • Subscript (“x2” icon): Marks text that is subscript, such as in mathematical equations or chemical names. This is not for making text smaller. Screen readers might not read the text correctly if they assume it is part of an equation.
  • Footnote (“a1” icon): Creates a reference to a footnote at the bottom of the page.
  • Blockquote (“ icon): Marks a chunk of text that is quoted from another source. Do not use this just to indent text.
  • Link (chain link with “+” icon): Marks text as being a link to another page. The text that visitors click on to follow the link is called the “link text”.
  • Bulleted list: Marks text as making up a bulleted list. Do not use dashes, asterisks, etc. to create bulleted lists. This control encodes the text so that assistive technology can tell it is a list.
  • Numbered list: Marks text as making up a numbered. List. Do not type out numbers to create a numbered list. This control encodes the text so that assistive technology can tell it is a list.
  • Heading dropdown: The headings are the most important text in a piece of content. People who are able to see text on the screen are able to “scan” content by scrolling. People using screen readers do this by listening to the headings before diving into the full text. This is common behavior, so it is important to use headings correctly. Here are some tips:
    • Always start with “heading 2”. For further levels of headings, go in order. I.e. do not go from heading 2 straight to heading 4.
    • Use headings to separate sections instead of horizontal lines and/or bold text.
    • Do not use this dropdown as a way to emphasize text. This prevents the scanning functionality of screen readers from working as intended.

There are a couple of formatting controls in the text toolbar  that only create visual elements on the page. These are invisible to screen readers, so don’t rely on them for meaning or organization:

  • Pull quote (next to block quote icon): Displays some text in a large, stylized font.
  • Horizontal line: Creates a gray horizontal line.

Accessible Writing

There are a few things to keep in mind to ensure your content makes sense to all visitors.

Meaningful Link Text

Another common way for screen reader users to “scan” a page is by pulling out and listening only to the links. Therefore, it is important that link text is meaningful by itself. It shouldn’t rely on the surrounding text. It should describe what the user will get if they click on the link. Here are some tips for writing meaningful link text:

  • Don’t use the raw URL of the link by itself. E.g. instead of “https://google.com”, use “Google”. This is particularly important for software that may let a person say the link text to “click” it.
  • Avoid the phrase “click here”. When that text is read on its own, it is completely meaningless. It is also exclusionary to people who are not using a mouse. In general, instead of saying “Click here to do X”, you should say “Do X”.

Acronyms and All-caps

Acronyms are the only words that should be in all caps. Text in all capital letters is more difficult to read for visitors with Dyslexia. Screen readers may also assume words in all caps are acronyms and mispronounce them.

Symbols and Special Characters

When you need a symbol that is not on your keyboard, copy and paste it from another source. Don’t “fake it” with letters you can type. For example, don’t use a superscript letter “O” to fake a degree symbol (°). Other examples are trademark symbols, multiplication signs, and letters from other languages. Here is a site where you can copy many special characters. Note that most of these characters have special meanings and are not for decoration.

Data Tables

Tables are very visual and so difficult to encode in a way that assistive technology can make sense of. Here are some general tips:

  • Don’t upload a table as an image.
  • Only use tables when necessary. If possible, use lists or other ways to display the information.
  • Use the simplest table possible. E.g. avoid cells that span more than one row/column.
  • Contact EESC if you need help setting up an accessible data table.

Inclusive Writing

When you are writing, avoid assuming that visitors are using the website the same way you do. Particularly:

  • Don’t reference the position or appearance of visual elements on the page. Not everyone can see these, and even if they can they won’t always look the same. Instead of “the orange button” or “the button to the right”, say something like “the button labeled ‘Buy Now’”.
  • Don’t refer to actions that depend on the device or software the visitor is using. These include “click”, “right click”, “scroll”, pressing keys, opening a particular program, etc.

Accessibility Resources

There are many, many resources on the web about accessibility, and OSU has some of its own. Here are some of our favorites:

  • IT Accessibility at OSU: Information and resources about accessible web pages, documents, and multimedia. Also includes OSU policies on accessibility.
  • WebAIM: An organization that aims to improve web accessibility throughout the Internet. They have great articles and tools.
  • Developing Accessible Web Content from Section508.gov:  Guidelines for creating web content that meet legal requirements for accessibility.
  • W3C Accessibility: This organization developed the requirements that determine compliance with accessibility laws. They have a very in-depth guide to meeting these requirements.

A complete, searchable guide to the Extension Website is now available online: beav.es/extension-webguide

This guide contains all information and instructions you need to work with the Extension website as well as tips and tricks for advanced users. For those of you who are already familiar with the site or just need a quick refresher, it includes several quick start reference documents.

We welcome questions and feedback and hope that this will serve as a valuable resource to Extension employees who work on the website.

Over the last week, we’ve made some updates the content types. We have replaced the “resources link” content type with three new content options:

  • Educational document: This is where PDF, Word, PowerPoint, or Excel documents that contain general interest educational material can be uploaded.
  • Online resource: This is for linking to educational material located on another site.
  • Program resource: This is for adding documents or links for a specific program (e.g. registration forms, program reports, policies and procedures, etc).

Any content that was previously a “resource link” has been moved to the new appropriate content type.

These changes are based on our ongoing conversations with content teams and our collective learning experience as more content is added and we identify common issues and challenges.

See links below for more details.

New sections in the Quick Start Guide:

We encourage content teams to review these updates before entering more content this week. Please contact us with any questions or join us during office hours.

Fun fact: The current OSU Extension website turned seven last week and was initially launched April 6, 2011.