Additional Accessibility Guides

PebblePad

PebblePad is Langara’s online portfolio and experiential learning platform. PebblePad can be used to create portfolios, blogs, basic webpages, online collections of files, formal and informal reflections, action plans, and more.

Regardless of type created, adding content is similar. This chapter will outline the steps to add accessible content to PebblePad.

In addition to the steps below, follow the general better practices for accessible content creation covered earlier in this book.

On this page:

Font

Ensure you use a readable font size and style. Prefer sans-serif or basic serif fonts in size 16 or larger.

The toolbar appears when in an editable field. Use the Font Name and Font Size menus to adjust font.

Review accessible font best practices.

To change the font colour, select the font and use the Text Color and Background Color menus in the editor toolbar.


Ensure font colour has a contrast ratio of at least 4.5:1 against the background colour. PebblePad does not include a contrast checker, but third party tools like WebAIM’s Contrast Checker can be used to determined colour contrast ratio.

The background colour of a text block can be changed using the Properties panel and selecting a colour from the menu in the Background colour section.

When using banners, select Text below the image in the Properties panel to avoid difficult to read text and potential contrast issues between the banner image and text.
Review accessible colour guidelines.

Structure

Title

Ensure each page has a descriptive, unique title. Enter the title in the Enter your post title here… placeholder:

Screenshot of title placeholder in PebblePad

Or in the title field when you are prompted to save for the first time:
Screenshot of title edit field when saving in PebblePad

Headings

To create headings, use the Styles menu on the editor toolbar.

Title is coded as a heading level 2 while SUB HEADER and Hint are coded as heading level 4. Skipping heading levels is not ideal, but use the heading tools available in PebblePad to give longer content structure. Use Title for the main topic, SUB HEADER for subsections, and Normal for body text.

Review accessible headings guide for more information.

Lists

Use numbered lists for steps in a process. Use bulleted lists for grouping of items. Use the Insert/Remove Numbered List and Insert/Remove Bulleted List buttons on the editor toolbar to create lists.

Review list best practices.

Columns

Text blocks can be single column or two column.

  1. Select the text block.
  2. Open the Properties panel.
  3. Scroll to Text columns.
  4. Choose Two column.

Tables

Tables can only be created in Templates and Workbooks.

To create a table:

  1. Select Add Content.
  2. Choose Tables.
  3. Select table with appropriate header cell structure (column labels, row labels, or both).

To modify table structure, select Get table cell options (the gear icon in the right of label cells). Use the menu to add or delete rows and columns and set required format type for column or row.

Text Equivalents

Descriptive Hyperlinks

Instead of pasting raw URLs or links that read “Click here” or “Read more” write descriptive hyperlink text that can be understood independent of surrounding content. To add hyperlinks:

  1. Write meaningful text that describe the destination of the link.
  2. Highlight the descriptive text.
  3. Select Link in the editor toolbar.
  4. Choose what type of element you wish to link to.
    1. In the case of a webpage, paste the URL in the dialogue box.
    2. Click Confirm Link.

Consult accessible links chapter for more information.

Figure Captions

When images contribute information, they must have alternative text. Adding a figure caption is an accessible method to provide text descriptions of visual information.

To add a figure caption:

  1. Select an Image block and open the Properties panel.
  2. Scroll to the Caption section and check Add a caption.
  3. A caption placeholder will appear in the image block. Click on Please enter your caption here…
  4. Type a descriptive caption
  5. If an image has a descriptive caption, the alt text field can be left blank.

Alternative Text

When a figure caption is not preferred, use the alt text field to provide a description of visual information. Add alternative text to images in PebblePad when you upload the image as an asset in the alt text field.

Or add alt text when adding an image block by selecting Add alt text.


If an image already has alt text, the button changes to Edit alt text.

Alt text can also be added via the Assets Store. Select an image file asset and scroll to the bottom of the page. Enter alt text in the provided field.

Review alternative text guidelines for more information.

Captioned Videos

Use the Embed block for videos. Uploaded video assets in PebblePad only support open captions. Prefer closed captioned videos hosted on Kaltura Mediaspace, YouTube, or other supported platform.

Consult closed captioning guide for best practices and tips.

Transcribed Audio

Use the Audio block to upload audio recordings. Upload and link to a transcribed text version of the audio below the Audio block.

definition

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Accessibility Handbook for Teaching and Learning Copyright © 2023 by Briana Fraser and Luke McKnight is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.