Posts

Adding alternative text to images in a WordPress post

by

There is an alternative text field attached to images you upload to WordPress. This alt text provides a description of the image to people with visual impairments. We should strive to add descriptive alt text to all the images we upload to posts in WordPress. Missing alt text registers as an accessibility error in the WAVE scanner from WebAIM.

To add alt text to an existing image in WordPress.

  • Go to the Media.
  • Click on the image that you want to add alt text to.
  • Add some descriptive alt text about the image in the alternative text field.
  • Click anywhere and WordPress saves the field.
Opens in new window: An example of adding alt text to an image of an alarm clock in WordPress
Click above to view an example of adding alt text to an image of an alarm clock in WordPres.

To test if your alt text is really attached to the image you can run the post by the WAVE scanner or inspect the image code for an alt attribute. In some cases if the post code has been customized the alt text entered in the Media area might not appear in customized image markup.

Additional videos and resources about adding alternative text to images in a WordPress blog post:

What are Groups in Canvas? 

by

Groups in Canvas are used as a collaborative tool where students can work together on group projects and assignments. So if an instructor anticipates having group assignments they can setup groups in a course. Learn more about Groups in the Canvas Instructor’s guide. Groups might be useful in the type of online course where a cohort of students follows a fixed schedule and learns together. Groups might be less useful for self-paced asynchronous courses where students start at any time and don’t interact very much with other students.

What is H5P?

by

H5P is a web-based service that allows instructional designers to create interactive learning activities to reinforce course content and make learning more engaging. H5P learning objects can be embed in Canvas, WordPress, Drupal, or .html files. At Ohio State H5P learning objects are often embedded in Canvas course pages. You can view some examples of types of learning objects on H5P.org.

Document accessibility resources for FCS educators and Extension staff

by

Here are some document accessibility resources for FCS educators and Extension staff.

Document accessbility checklists:

Courses about document accessbility:

Short videos about document accessibility:

Other resources:

Also see the Digital Accessibility Essentials Training from the LOD group to learn more about these accessibility topics.

 

 

Video editing & video filming resources

by

General video for education resources:

Checkout EHE’s Multimedia for Learning page on their website. There are some good articles in there about using multimedia in education.

Creating a Course Introduction Video –
Look Great in Video Conferences –
Getting Started with Adobe Spark –
– Includes How to Create An Infographic With Adobe Spark Post
Getting Started with Adobe Premiere Rush –
Recording Quality Voice Overs –

From the podcasts channel:
What is podcasting? (0:17):

What is ‘lecture capture’ and screencasting?

Lecture capture is the process of recording classroom lectures as videos and making them available for students to review after the class. The term ‘lecture capture’ is in reality quite broad and can be used to describe a variety of solutions, software, and hardware (from screen recording software to recording with web cams or other external cameras). In the flipped classroom paradigm, instructors record lectures for students to watch as homework and in-person class time is used for discussion and active learning activities. Lecture capture is not always intended as a replacement for in-class instruction, but it does enhance the learning experiences of students. Some lecture capture solutions include TechSmith Camtasia, TechSmith Relay, MediaSite, Panopto, and Echo360. See this Techsmith article to learn more abot lecture capture.

Here are some lecture capture resources and screencasting at Ohio State:

The MediaSite video hosting service from OTDI includes the Mosaic desktop recorder. It’s a screencast recorder that can record at higher resolutions than Zoom. Here is some information from OTDI’s teaching resources center about downloading the MediaSite Mosaic recorder.

Also see the EHE tips on Screencasting from the Education and Human Ecology Office of Distance Education and Learning Design

Recording with Zoom – video tutorials and more information coming soon
During the pandemic a lot of people became familiar with recording with the teleconferring app called Zoom. Here’s some information from OTDI’s teaching resources center about Zoom Recordings (cloud recordings or local device recordings). The only disadvantage of using Zoom to record screencast is that it doesn’t always record at a higher resolution so if you require a high definition video you might consider another lecture capture option.

Here is some information from OTDI’s teaching resources center about inporting Zoom recordings into Mediasite’s video hosting. Zoom video have a 120 day rentention limit, so for longer term storage it’s a good practice to upload Zoom videos to MediaSite.

Filming with camcorders and smartphones:

Using your smartphone as a camcorder to film video – The video resolution and quality that smartphones can film at these days is comparable to traditional camcorders. This video mentions some video filming accessories you can use with your smartphone like tripod mounts and light-boxes. A new photo/video light-box recently was built for this video. You can create your own by following this YouTube tutorial.

Removing the SD card from your smartphone to transfer .mp4 video files – This is part of a series of editing video tutorials intended to help educators learn more about different ways of filming videos for their projects.

Video tutorial about transferring .mp4 video files from a Cannon camcorder – Covers using a Cannon R600 camcorder to record to SD card and transfering video files via to a laptop for editing.

Filming 360 videos with an Insta360 OneX camera – video tutorial and more information coming soon
360 videos and still panoramas can be used in H5P Virtual Tours.
See this Creating an H5P Virtual Tour tutorial for more information about this form of VR (virtual reality). Hotspots linking to 360 videos or regular 2D videos can be added to H5P virtual tours.

High Production Video Creation workshop recording from Ohio State Extension LOD covering filming with camcorders and DSLR cameras.The camcorder form factor typically has a longer zoom capibily while DSLR cameras have more add-on lens options.

Using a GoPro style camera to film video – video tutorial and more information coming soon

Video filming accessories:

Phohoto/video light-box:

A photo/video light-box a great accessory to enhance your photography and videos. You can create your own by following this YouTube tutorial.
Materials list:

  • Cardboard box
  • Sheer interfacing fabric – for the light diffuser sides
  • White poster board – for the infinite curve background

overhead tripod CAD drawing

Standard tripods and overhead tripods – more information coming soon

Blogging Tips: Perfect Pictures and Easy Videos with your I-phone is an article that mentions how to build photo light-boxes and overhead tripods for holding phones and cameras.

Some materials you would need to build an overhead tripod out of PVC pipe include:

  • 10′ of 3/4″ PVC pipe
  • 3 Elbows
  • 2 T Connectors
  • 2 Caps (just for looks)
  • Package of screws size: 1/4″ 20 x 1/2″

Smartphone mounts for tripods – more information coming soon

You can obtain smartphone mounts for tripods from electronics stores like Microcenteror B&H Photo.

Microphones – more information coming soon

Green screens and backdrops – more information coming soon

Camera bags – more information coming soon

Editing Videos with Adobe Premiere Pro

Adobe Premiere Pro is available to OSU employees as art of the Adobe Creative Cloud license. Premiere Pro offers more advanced editing capabilities for creating highly engaging video content for more experienced video producers.

Useful things to know about Premiere video tutorial – a video covering some tips and tricks when editing videos with Adobe Premiere Pro.

Adobe Premiere Pro video production workshop recording from Ohio State Extension LOD. This hour long session covered the basics of using Adobe Premiere Pro.

Information about other Adobe video editing apps:

The spectrum of Adobe video editing apps:

  • Adobe Spark Video – basic, easy video editing – used for posting quick videos.
  • Adobe Premiere Rush – easier to use than Premiere Pro, more capable than Spark – more flexible then Spark video but less capable then Premiere Pro.
    Here’s an Intro to Adobe Premiere Rush workshop recording from Ohio State Extension LOD covering the basics of using Rush.
  • Adobe Premiere Pro – professional level video editing but more difficult to learn how to use – used by video editors across campus and in other organizations.
  • Adobe After Effects – Hollywood level motion graphics composting app – used by motion graphics animators who want to composite a large number of tracks together.

Stock audio, video, and photos for video creators

Music is great to include in videos but you would have to pay to use copywrited music.

The YouTube Audio Library is a good resource to find roalty-free music to use in your videos.

Pre-production: Planning for Video recording workshop from Ohio State Extension LOD exploring pre-production strategies. Pre-production may include gathering assets like stock images & b-roll and using storyboard templates to plan scenes.

Video and multimedia accessbility considerations

Uploading captions to your MediSite video – a screencast of uploading captions to your MediSite video.

Video Accessibility Considerations – a presentation about accessibility considerations to think about when creating video content.

Here is some information from OTDI’s teaching resources center about Captioning your presentation for MediaSite.

Here is recording of a digital accessibility training session from OSU Extension LOD about video and audio accessibility. LOD is the Learning and Organizational Development group in Ohio State Extension.

 

 

A blog post accessibility & optimization checklist

by

This checklist covers some major accessibility items to check when writing a high quality blog post.

Major areas to check:

Images

Do all of your images have alternative text descriptions?

Alternative text will describe the image to screen reader users and be seen by sighted users if the image can’t load.

See the Adding alternative text to images in a WordPress post for details of how to add alt text to an iamge in your Blog.

Have your images uploaded to your post been sized / optimized for the web?

Today’s digital cameras take high resolution photos with larger file sizes. But in a blog post you don’t need high res photos. You can work with your web developer or graphic designer to resize your images to an optimal size or use an application like Photoshop. Then the images will load faster for people on mobile connections and won’t eat up their data-plan bandwidth.

Headings

Are your headings structuraly nested correctly?
A post should have only one H1 heading at the top that is usually the same as the post title. The post title you enter in WordPress becomes the page’s H1. Be sure your H2 headings and H3 headings underneath them are nested properly. Never skip to a lower heading level without nesting it under a higher heading. In the past some designers have thought of heading levels as font sizes and skipped to a lower level because they like the font size of that level. Actually headings are semantic elements for creating a structural hierarchy in the page. This aids screen readers in navigating the page and has SEO (search engine optimization) benefits.

Colors and Typography

If you’ve added colors, do they have the right contrast?

For WCAG 2.1 level AA: have a 4.5:1 ratio for normal text and a 3:1 ratio for large text (bold and 18px or higher or normal and 24px or higher)

Use the WebAIM Contrast Checker tool or the Colour Contrast Analyzer tool.
The WCAG 2.1 guidelines related to color contrast is: 1.4.3

Are you using a standard font that’s easily readable?

You should use standard serif (Times Roman) or sanserif fonts (Arial or Helvetica) for maximum legibility. Novelty fonts with unusual letter-forms might be harder to read for people with low vision. Also you should avoid setting long lines of text in All-Caps because capital letter forms can be harder to read and process as words.

Are your links descriptive and not just ‘click here’?
This can help give context about where the link goes to. You could instead say, click here to learn more about (the subject…). Links should make sense out of context so if screen reader users land on them they will know where they go. Short phrases such as “click here,” “more,” “click for details,” are ambiguous when read out of context. Screen readers have key shortcuts that can jump between links in a page and using the tab key jumps between focusable objects like links & buttons. So a screen reader user may not have read nearby text that would give a short ‘click here’ more context. You should include the context withing the link text itself.

See the Introduction to Links and Hypertext guidance from WebAIM for more information about writing descriptive hyperlinks.

Tables

If you have tables, are they only used for tabular data?

Tables should only be used to show numerical data. They shouldn’t be used for layout like organizing out parts of the page into columns. In the late 1990s some designers used table-based layout which wasn’t an accessible practice.

Do you have a header row specified in your data table?
Each label on a column should be a true header cell TH instead of a regular cell. In WordPress you can tell that something is a header cell clicking in the cell while editing the post. Below the table if it says ‘TH’ in the tage tree it’s a header cell. For example the tag tree at the bottom of the editor might say: ‘TABLE > THEAD > TR > TH’. This is just above where it says “Word count”.

Are you using any complex tables with multiple header rows or both vertical and horizontal heading cells?

You should avoid using complex table because they can be challenging to make accessible and confusing to navigate for screen reader users. It may be better to convert a large complex table into two or more simple tables.

Testing

Can you tab keyboard your way through the web page?

A lot of assistive technology uses a form of tabbing to go through a page. If you
can’t tab through your page, you’ve got some issues.

Have you tested your page with an accessibility checker tool?
You can use a tool like the WAVE tool, Axe by Deque or Google Lighthouse from the inspect code developer’s tools in Chrome to check your page for accessibility issues.

Have you tested your webpage with a free screen reader like NVDA?

If you don’t have a screen reader installed you could contact your organization’s digital accessibility expert to ask if they could test it. Screen readers use keyboard tabbing & other key shortcuts to navigate through a webpage. For non-visual users, they know where they are in the page through audio announcements. Headings and other semantic elements become audio landmarks when navigating a page non-visually. Screen readers have key shortcuts that jump between headings and other landmarks so non-visual users can jump around in a non-linear fashion. The location where the Screen reader has navigated to is called the keyboard focus.

Some other good screen readers include:

You may already have a free screen reader installed in your OS.

References and Resources

Blog Post/Web Page Accessibility Checklist from Jacob Martella Web Development.

How to write an accessible blog from the University of Edinburgh.

Introduction to Links and Hypertext guidance from WebAIM.

Understanding the WCAG 2.1 guidelines related to color contrast from WAI (the web accessibility initiative).

Narrated PowerPoint presenation about blog post accessibility 13:21 – covering accessibility for images, headings, colors, typography hyperlinks, and tables.

WordPress accessibility course in LinkedIn Learning – covering creating accessible themes, plugin accessibility, authoring accessible content, and testing.

How to Make Your WordPress Website Accessible video 14:16 – covering how images, colors, and text should be accessbible and how plugins can help.

Digital accessibility videos for FCS educators and Extension staff:

by

Use your OSU login to sign in and watch the videos.

Other resources:

Also see the Digital Accessibility Essentials Training from LOD group to learn more about these accessibility topics.

What is Carmen Canvas?

by

Carmen Canvas is the name for the Canvas LMS (learning management system) instance used for academic courses at The Ohio State University. They generically call the learning management platform ‘Carmen’ for conistency accross the years. So that one LMS can be swapped out with another and still retain the name ‘Carmen’.

Camen first started in 2005 when the university switched from using the WebCT learning management system to using the Desire to Learn platform. Later, in 2016, the LMS was swapped out with the Canvas learning platform but the ‘Carmen’ brand was retained. Carmen Canvas is the regular version of the Canvas LMS, while Scarlet Canvas is the Canvas Catalog product version used for public-facing enrichment courses.

Draft course development steps checklist for Canvas courses

by

Educators can work with an instructional designer or a Canvas admin to develop online courses in Scarlet Canvas. Some online course development steps for Canvas courses are:
Course planning and development:

  • Fill out the course development planning worksheet to better define your course audience, content, and objectives. There are Qualtrics and MS Word versions of the course planning worksheet available.
  • Use the backwards design methodology thinking of learner outcomes first. Outline learning objectives for the course. Learning objectives are typically listed in the introductory pages of the first module.

Course building in Canvas:

  • Setup course modules and pages. Embed video content from MediaSite checking that closed captions are working. A good practice is to include a ‘meet your instructors’ page in the first module with educator bios.
  • Quizzing – Decide on a quizzing / learning checks strategy. Many courses include a short quiz at the end of every module that unlocks the next module on a passing score. Some courses have longer pre and post course assessments in the first and last modules. Questions can be stored in question banks and imported into various module quizzes. Studies have shown that taking quizzes helps participants better retain what they learned.
  • Decide if including learning objects from H5P would enhance learning in the course. Participants have different learning styles. Some types of learning objects might help them retain more knowledge.
  • Course evaluation – Setup course evaluation surveys in Qualtrics and add links in the Canvas course. Typically a link to a course evaluation is added in the last module, the course completion module.
  • Decide on how to issue course completion certificates to participants. If using automated certificates from Canvas catalog, turn them on in the course listing settings and paste in the certificate HTML template. Tweak the HTML template to fit the specific course.

Reviewing course pages for accessibility, branding compliance, and educational experience quality assurance.

  • Review course page accessibility using resources like the WAVE tool, the internal Canvas accessibility checker, and/or Lighthouse tool in Chrome.
  • Review course for branding compliance and educational experience quality assurance.
  • Add instructors to the course and give them the Teacher role in Canvas.
  • Share the course shell with a small cohort of educators and do a peer review.
  • Analyze feedback from the peer review and decide what changes to make. Keep technical changes in a changelog.txt text file in the course files.
  • Test changes made with a test student account. Check that course registration and payment are working as expected. Setup any special promo codes and test that they work.

Course launch, marketing, and post-launch monitoring:

  • Make final changes, open the course for enrollment, and promote the course in social media and other outlets.
  • Monitor how the course is working out for participants. Review feedback from participants and instructors for ideas to improve the course. Note small technical improvements and fixes in the changelog.txt text file.

What is Scarlet Canvas?

by

Scarlet Canvas is Ohio State’s public-facing LMS platform for non-credit, professional development, continuing education, and enrichment courses. This learning management platform is powered by the Canvas Catalog product from Instructure which can provide automated course completion certificate issuing and public course listings in a course catalog. Canvas courses in the system may be unlisted or publicly listed in the catalog. Ohio State Extension uses the Scarlet Canvas LMS for many of its enrichment  and public outreach courses. Instructors and learners can login into Scarlet Canvas at: https://scarlet.instructure.com/.

See these Canvas Links & Resources for more information about working with the Canvas LMS.