Learning Labs

Introducing Learning Labs

Learning Labs are interactive, focused, and supported learning sessions where you can learn how to implement Langara’s teaching and learning technologies and tools. Capacity is limited to ensure all attendees have an opportunity to ask questions, try out tools, and receive support. Support in the room will reflect the technology, tool, and learning outcomes; however, you can expect to interact with EdTech Advisors, Specialists, and Technologists as well as TCDC Curriculum Consultants. The Labs are an opportunity to implement something new or improve what already exists with experts who can answer technical questions and provide advice.

Fall Learning Lab session topics include:

Brightspace HTML Templates

After participating in this lab, participants should be able to:

  • Use the Brightspace HTML editor.
  • Explain the benefits of using the Brightspace HTML templates.
  • Apply the templates to a new Brightspace HTML page.
  • Apply the latest version of the template to an existing Brightspace HTML page.
  • Mix and match HTML elements—such as image placement, accordions, callouts, tables, and tabs—from the various templates.

Adding closed captions to a video in Brightspace

After participating in this lab, participants should be able to:

  • Upload a video to MediaSpace.
  • Add closed captions to a video.
  • Use the MediaSpace captions editor.
  • Use the OneDrive captioning tool.
  • Embed a video in a Brightspace course file.

Creating an accessible Word document

After participating in this lab, participants should be able to:

  • Employ plain language.
  • Select styles that improve legibility of text.
  • Structure a document.
  • Create accessible hyperlinks and tables.
  • Add alternative text to visual content.
  • Use the built-in accessibility checker.

Improving the accessibility of existing PowerPoint slides

After participating in this lab, participants should be able to:

  • Avoid the most common PowerPoint accessibility mistakes.
  • Use the accessibility checker and make corrections.
  • Apply templates.
  • Apply structure.
  • Select accessible fonts and font styling.
  • Employ accessible use of colour.
  • Add alternative text to images.
  • Write meaningful hyperlink text.

Save time marking with Rubrics

After participating in this lab, participants should be able to: 

  • Define the purpose of the assignment or assessment 
  • Decide which type of rubric will be used with assignments
  • Create statements of expected performance at each level of the rubric 
  • Transfer analog rubrics into a digital version on Brightspace 
  • Associate their rubric with the assignment in Brightspace 

 

Brightspace Accessibility in Five, 1: Link Text

Brightspace plus accessibility logo

Brightspace is an exceptionally accessible platform. Using Brightspace for your course content, documents, and media is an excellent way to provide equitable, inclusive access to learning material.

Take advantage of Brightspace’s built-in tools and the Accessibility Checker to ensure what you share is accessible. Accessible content is inclusive, democratic, and maximizes learner independence.

In the first of this five-part series, we will learn about adding link text to your Brightspace content.

Link Text

Link text should provide a clear description of the destination, independent of the surrounding text.

Students that with a visual impairement may use screen reader software that allows them to navigate by links. Descriptive link text helps orient and guide them to resources. A list of “click here”, “click here”, “Read more”, etc. is not going to provide users with any meaningful information. Pasting raw URLs in Brightspace should also be avoided as, for example, heading “https://iweb.langara.ca/edtech/blog” is jarring and not a useful indicator of what that link would lead to.

Additionally, sighted users can easily spot or relocate a link when it has a clear text description. As well, all users benefit from quality link text to understand why they would want to click on the link.

Effective link text should be:

  • Descriptive
    • Describe the destination
  • Concise
    • Try to limit link text to a few words
  • Unique
    • If two links on a page go to the same destination, they should have the same link text, otherwise ensure all link text is unique
  • Visually distinct
    • Links should be visually distinct from surrounding text. In Brightspace, stick with default formatting (blue underlined text) for links.

To Link Text in Brightspace

  1. Highlight the text to be linked and select Add/Edit Link
  2. The highlighted text will appear in the Title field. Paste the URL in the Link field and select Create.

Find more information about link text in the Langara Accessibility Handbook and read more about adding hyperlinks in Brightspace.

Accessibility Checker

Brightspace includes a built-in accessibility checker. The checker appears on the second row of the editor toolbar.

  1. Select More Actions to reveal the second row of the toolbar
  2. Select Accessibility Checker

The accessibility checker will highlight many accessibility issues and offer solutions to correct them.


Watch for more posts in the Brightspace Accessibility in Five series coming soon, including:

  1. Link Text
  2. Colour
  3. Headings
  4. Tables
  5. Text Equivalents
  6. Bonus: Accessible Uploads

PebblePad at Langara

What is PebblePad*?

PebblePad logo

PebblePad is Langara’s online portfolio and experiential learning platform. Digital portfolios, or ePortfolios, are powerful tools for learning, assessment, and career development because they enable users to document their skills, learning, and creativity, as well as reflect on what/how/why they learn. Using PebblePad, students can create portfolios, blogs, basic webpages, online collections of files, formal and informal reflections, action plans, and more. For authentic and scaffolded experiential learning, PebblePad is also a great fit.

How Might it Be Used Within a Course or Formal Learning Experience?

PebblePad is being used in many practicum and clinical courses at Langara. Students use interactive digital workbooks to document their experiences and demonstrate what they have learned. Links to these workbook assignments are then shared with faculty for feedback and assessment.

For programs where students have more open-ended and/or creative assignments, classic portfolios can be created on PebblePad where students document, showcase, and reflect on their creative work. This type of assignment empowers students to design and collate content ranging from text and hyperlinks, to images and video.

To find out more about the possibilities, we encourage you to go to the PebblePad Community Learner Showcase to explore some of the work being done at other institutions.

Why Use PebblePad?

PebblePad is student-owned. Once a student takes a course using PebblePad, they will be issued a PebblePad account that they will have for their entire time at Langara and beyond.  This makes it a great tool for them to make connections across their learning journey, and it can support the transition to further studies or employment.

Research indicates that using digital portfolios like PebblePad within courses and programs also seems to advance student retention and success (Eynon, Gambino, & Török, 2014). Proponents theorize that ePortfolios are beneficial because they support learning in the following ways:

  • learning can be made visible, including through reflection activities
  • connections can be made across and between academic (course, program), extracurricular (work experience, volunteering), and personal (family, community life) learning
  • personal, academic, and professional identity construction can be supported
  • social pedagogies can be employed, supporting group work, peer feedback, mentorship, etc.
  • competencies – within and outside of formal academic courses – can be documented and assessed

Want to Learn More?

If you are interested in learning more about PebblePad, contact EdTech to talk to an Advisor. Please also check the EdTech calendar for upcoming workshops.

Email edtech@langara.ca for more information.

 

*PebblePad is now the preferred ePortfolio technology of BCNET.

References

Blake Yancey, K. (Ed.). (2019). ePortfolio as Curriculum: Models and Practices for Developing Students’ ePortfolio Literacy. Sterling, VA: Stylus.

Eynon, B., & Gambino, L.M. (2017). High-Impact ePortfolio Practice: A Catalyst for Student, Faculty, and Institutional Learning. Sterling, VA: Stylus.

Eynon, B., Gambino, L. M., & Török, J. (2014). What difference can ePortfolio make? A field report from the Connect to Learning Project. International Journal of ePortfolio, 4(1), 95-114. https://www.theijep.com/pdf/IJEP127.pdf

Penny Light, T., Chen, H., & Ittelson, J. (2011). Documenting learning with ePortfolios: A guide for college instructors. San Francisco, CA: Jossey-Bass.

Watson, C. E., Kuh, G. D., Rhodes, T., Light, T. P., & Chen, H. L. (2016). Editorial: ePortfolios – The Eleventh High Impact Practice. International Journal of EPortfolio6(2), 65–69.

Yeo, N., & Rowley, J. (2020). ‘Putting on a Show’ Non-Placement WIL in the Performing Arts: Documenting Professional Rehearsal and Performance Using Eportfolio Reflections. Journal of University Teaching & Learning Practice, 17(4).

Increasing Accessibility of Course Content: Tips for using the Brightspace Accessibility Checker

Increasing accessibility of course content: Tips for using the Brightspace Accessibility Checker

Web Accessibility refers to the inclusive practice of making websites and online content usable by people of all abilities and disabilities. Use the Brightspace Accessibility Checker to identify common accessibility issues on your Brightspace course pages.

How to run the Accessibility Checker

The Check Accessibility button is located on the bottom right of the Brightspace HTML EditorThe Accessibility Checker is available within the HTML Editor. When you are in edit HTML mode, the checker is located on the bottom right corner of the Editor, next to the Spellcheck button.

Alternative Text

The most common accessibility issue is missing image alternative text (alt text). Alt text is background code added to a digital image that allows a screen reader or other assistive technology to describe the image’s content and meaning to those who cannot see the image or may be unable to process the image due to a cognitive disability. When alt text is missing, the Brightspace Accessibility Checker will flag the issue, noting Images must have an alternative text description.

The Accessibility Checker flags missing alternative text with the message Images must have an alternative text description

How to add alt text

The easiest way to add alt text is to include it when inserting images into a Brightspace page. When you insert an image using the HTML editor, a pop-up appears, prompting you to add alt text. Brightspace add the alt text to the HTML code (e.g., <img src=”filename.jpg” alt=”Example of Microsoft Forms response results.” />).

Treat informative images as decorative by supplying an empty alt attribute or checking the box next to This image is decorative. Brightspace will add alt text of “” to indicate an empty alt attribute.

Brightspace prompts users to add alt text when inserting images

If the Accessibility Checker flags an image as missing alternative text, you can fix the issue by adding alt text inside the report panel or by adding it directly to the HTML code.

Tips for creating alt text

When deciding what to include as alternative text, imagine that you are describing the image aloud over the phone to someone who needs to understand the image.

According to WebAIM, alternative text should:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct.
  • Not be redundant or provide the same information as text within the context of the image.
  • Not use the phrases “image of…” or “graphic of…” to describe the image unless the fact that an image is a photograph or illustration, etc. is important content.

WebAIM offers a fantastic guide to creating appropriate alternative text for images.

Note: It is always a good idea to double-check the alt text included in your HTML code. An accessibility checker only indicates whether alt text is included, it cannot check the quality or usability of the alt text.

Contrast

Low colour contrast is another common accessibility issue. Insufficient contrast between the foreground and background reduces readers’ ability to perceive content on the page.

Insufficient colour contrast is flagged by the checher

The W3C Web Content Accessibility Guidelines 2.0 define specific contrast ratios that must be met in order to comply at particular levels. To meet the guidelines, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).

The maximum contrast is black vs. white but other options are available such as navy/white, cream/dark brown, yellow/black, and similar color schemes. A colour scheme is considered legible if it can be read in grayscale/black and white mode.

The Accessibility Checker flags:

  • Large text that does not have a contrast ratio of at least 3:1.
  • Visual presentation that does not have a contrast ratio of at least 4.5:1.

Adjusting contrast

Try using the WebAIM Color Contrast Checker to adjust the contrast by lightening or darkening elements.

Headings

A heading describes the content that follows it, giving uses a sense of the page’s organization and structure. Headings give sighted users a way to quickly find what they want on the page.

If the underlying code for a page’s headings is correct, screen reader users can also benefit from headings. Screen reader and other assistive technology users can also skip from heading to heading.

The checker flags improperly applied heading styles

How to create headings in Brightspace

Select the text then set it to the proper heading using the Format dropdown menu. Do not skip levels. If the heading levels are not in the correct order, the Accessibility Checker will flag the issue.

Tips for creating headings

    • Headings are ranked <h1> through <h6>.
    • Every page should have an H1 heading, representing the most important idea on the page, and sub-sections organized with <h2> level headings. Those sub-sections can themselves be divided with <h3> level headings, and so on.
  • Headings need to be used in the correct order.
  • Do not skip heading levels to be more specific (for example, do not skip from <h2> to <h5>).
  • Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy.

Note: The Brightspace Accessibility Checker will not flag a page without headings; it only flags incorrectly ordered headings. 

Lists

Lists are great from an accessibility standpoint because they provide structured order to content in a linear fashion. Lists are recommended as potential replacements for simple tables, as tables can be more challenging to navigate. Properly code the lists so that they convey the hierarchical content structure to screen reader users. Use unordered lists <ul> when there is no specific order intended for the list you are creating. Use ordered lists <ol> when there is a defined sequence or order for the list.

The checker flags text that appears to be a list but has not been properly styled.

The Brightspace Accessibility Checker will flag items that appear to be a list but do have  unordered or ordered list styles applied.

How to use lists

Select the items, then choose the Unordered List icon if the order does not matter, or select Ordered List from the dropdown menu if it is sequential.

Use bullets for unordered lists and numbers for ordered lists

Descriptive Hyperlink Text

The Accessibility Checker cannot assess whether links are meaningful or accessible; however, making hypertext links accessible is one of the most basic and most important aspects of web accessibility.

How to create a hyperlink

Select Insert Quicklink icon, then select URL in the popup window, enter the URL and a title that describes the link’s destination.

Suggestions for creating meaningful and accessible hyperlinks

  • Link text should be unique within a page, should be meaningful when read out of context, and should help users to know something about their destination if they click on it. Link text such as “Click here” and “More” fail to meet these criteria.
  • Avoid providing two links right next to each other that point to the same location (it can be confusing for screen reader users).

To request help with improving the accessibility of your course content, email edtech@langara.ca