Quick Bytes Live! Podcast

Kari Robideau and her pal, IT Goldy

#18:  Remember these 7 things in your teaching webinars 

(recorded June 5, 2017)
This podcast is a special edition with an extended discussion of the criteria for good webinars, not to mention our special guest! Don't miss it! Amy, Karen, Alison, and special guest Kari Robideau (live from Moorehead, MN) go over the seven components of the Delivering High Quality Webinars "rubric." We also talk about how you could evaluate your own webinar performance. Spoiler alert, one way is watching your own webinars! Eww!
 Links from this episode:
Be sure to subscribe and let us know your feedback!

Subscribe via iTunes
Subscribe via RSS


What is digital accessibility? 

According to whatis.com, digital accessibility is the ability for a website, mobile application, or electronic document to be easily navigated and understood by a wide range of users, including those users who have visual, auditory, motor or cognitive disabilities. People who have disabilities navigate websites using technology that helps them understand the content on the page. For example, a blind person uses a screen reader that will read the content to them; a person with no use of their hands may use a head pointer; and people who have difficulty typing may use text input software.

Example of a Screen Reader

** In this Quick Byte, I will only be discussing website accessibility.

Who does it affect? 

Disabilities affect a large part of the population – 15-20%. These can be temporary disabilities such as a broken arm or eye surgery; permanent disabilities such as deafness or blindness; or it could be an invisible disability such as ADHD or dyslexia. All of these types of disabilities will affect the way a person interacts with the web.

What can content editors do? 

When adding content to the web, be mindful of the people who use our websites. Here are some basic rules to follow:

Content

When writing content, be clear and concise. Scan-able content is very important for people who have trouble reading. Use headers, shorter paragraphs, lists, and plain language.

Headers

The header HTML (ex: H1, H2, H3, etc.) is not just used for looks. Screen readers will scan the page for all the headers and read them back to the user. Think of using headers as the outline of the page. They should always go in numerical order, do not skip headers and go from H2 to H4. Here's an example of what it should look like:

H1
     H2
          H3
               H4
     H2
          H3
     H2

Lastly, only include one H1 on each page. The H1 should be the topic of the entire page.

Images 

Images on websites can be used to add context to content or they can just be decoration on the page. Someone who is blind cannot see these images which is why alternative (alt) text is important. Alt text are words used to describe what the image is displaying. These words appear in the code, but not on the page. When a screen reader comes across an image, it will read this text to the user.

The only images that need alt text are the ones that add context to the associated content. If they’re used as a decorative addition, only include alt=”” in the code and the screen reader will pass right by it. If the blank alt="" is not included, the screen reader will read the image's file name back to the user.

diagram for when to use alt text on images

Photo Source: Adrian Roselli from his Selfish Accessibility presentation at MinneWebCon 2017. 

Links

Many times, links are denoted with a different color. This may not work for someone who has trouble seeing color differences. Adding an underline or a specific icon to the link helps all users understand that they can click on the words and be taken somewhere else. The underline should be included in the style sheet by the web designer or developer, so this isn’t something a content editor should have to worry about.

Example of what a colorblind person sees on our site with underlines (left) and without (right).
Screen shot of U of M Extension webpage with underlined links Screen shot of U of M Extension webpage without underlined links
When writing words that will become links, remember to be descriptive. Do not use ‘learn more’, ‘read more’, or ‘click here’. Screen readers can scan a page for all the links and read them back to the user. ‘Click more’ does not tell the user where they will go. Instead, you could use ‘learn about Extension’ and add the link to the whole phrase.


Summary

Creating websites that are accessible to all people takes work from everyone on the team. The more you consider how all users of a website are navigating around, the more people you will be able to serve.