- \r\n \t
- Font<\/a><\/li>\r\n \t
- Structure<\/a><\/li>\r\n \t
- Text Equivalents<\/a><\/li>\r\n<\/ul>\r\n
<\/a>Font<\/h2>\r\nEnsure you use a readable font size and style. Prefer sans-serif or basic serif fonts in size 16 or larger.\r\n\r\nThe toolbar appears when in an editable field. Use the\u00a0Font Name <\/strong>and Font <\/strong>Size\u00a0<\/strong>menus to adjust font.\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/pp-font-1024x90.png\")
\r\n\r\nReview accessible font best practices.<\/a>\r\n\r\nTo change the font colour, select the font and use the T<\/strong>ext Color<\/strong> and\u00a0Background Color<\/strong> menus in the editor toolbar.\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/pp-fontcolour-1024x90.png\")
\r\nEnsure 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<\/a> can be used to determined colour contrast ratio.\r\n\r\nThe background colour of a text block can be changed using the Properties<\/strong> panel and selecting a colour from the menu in the Background colour section.\r\nWhen using banners, select\u00a0Text below the image<\/strong> in the Properties <\/b>panel to avoid difficult to read text and potential contrast issues between the banner image and text.<\/div>\r\nReview accessible colour guidelines.<\/a><\/div>\r\n<\/a>Structure<\/h2>\r\n
Title<\/h3>\r\nEnsure each page has a descriptive, unique title. Enter the title in the\u00a0Enter your post title here...<\/strong><\/em> placeholder:\r\n\r\n
![\"Screenshot](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PP-Title1.png\")
\r\n\r\nOr in the title field when you are prompted to save for the first time:\r\n![\"Screenshot](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PP-Title2.png\")
\r\nHeadings<\/h3>\r\nTo create headings, use the Styles<\/strong> menu on the editor toolbar.\r\n\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PP-Heading.png\")
\r\n\r\nTitle<\/strong> is coded as a heading level 2 while SUB HEADER<\/strong> and Hint<\/strong> 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\u00a0Title<\/strong> for the main topic,\u00a0SUB HEADER<\/strong> for subsections, and Normal<\/strong> for body text.\r\n\r\nReview accessible headings guide<\/a> for more information.\r\nLists<\/h3>\r\nUse numbered lists for steps in a process. Use bulleted lists for grouping of items. Use the\u00a0Insert\/Remove Numbered List<\/strong> and Insert\/Remove Bulleted List<\/strong> buttons on the editor toolbar to create lists.\r\n\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/pp-lists.png\")
\r\n\r\nReview list best practices.<\/a>\r\nColumns<\/h3>\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/pp-columns.png\")
Text blocks can be single column or two column.\r\n- \r\n \t
- Select the text block.<\/li>\r\n \t
- Open the Properties\u00a0<\/strong>panel.<\/li>\r\n \t
- Scroll to Text columns.<\/li>\r\n \t
- Choose\u00a0Two column.<\/strong><\/li>\r\n<\/ol>\r\n
<\/div>\r\nTables<\/h3>\r\nTables can only be created in Templates and Workbooks.\r\n\r\nTo create a table:\r\n
- \r\n \t
- Select\u00a0Add Content.<\/strong><\/li>\r\n \t
- Choose\u00a0Tables.<\/strong><\/li>\r\n \t
- Select table with appropriate header cell structure (column labels, row labels, or both).<\/li>\r\n<\/ol>\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/2023-08-09-11_26_15-Window.png\")
\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/2023-08-09-11_29_11-Window.png\")
To modify table structure, select\u00a0Get table cell options<\/strong> (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.\r\n<\/div>\r\n<\/a>Text Equivalents<\/h2>\r\n
Descriptive Hyperlinks<\/h3>\r\nInstead 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:\r\n
- \r\n \t
- Write meaningful text that describe the destination of the link.<\/li>\r\n \t
- Highlight the descriptive text.<\/li>\r\n \t
- Select\u00a0Link<\/strong> in the editor toolbar.\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PP-Link.png\")
<\/li>\r\n \t- Choose what type of element you wish to link to.\r\n
- \r\n \t
- In the case of a webpage, paste the URL in the dialogue box.<\/li>\r\n \t
- Click\u00a0Confirm Link.<\/strong><\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\nConsult accessible links chapter<\/a> for more information.\r\n
Figure Captions<\/h3>\r\nWhen images contribute information, they must have alternative text. Adding a figure caption is an accessible method to provide text descriptions of visual information.\r\n\r\nTo add a figure caption:\r\n
- \r\n \t
- Select an Image block and open the\u00a0Properties<\/strong> panel.<\/li>\r\n \t
- Scroll to the\u00a0Caption\u00a0<\/strong>section and check\u00a0Add a caption.<\/strong>\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PebblePad-Caption1-1.png\")
<\/li>\r\n \t- A caption placeholder will appear in the image block. Click on Please enter your caption here...
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PebblePad-Caption2-1.png\")
<\/strong><\/em><\/li>\r\n \t- Type a descriptive caption\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PebblePad-Caption3.png\")
<\/li>\r\n \t- If an image has a descriptive caption, the alt text field can be left blank.<\/li>\r\n<\/ol>\r\n
Alternative Text<\/h3>\r\nWhen 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.\r\n\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PP-Alt1.png\")
\r\n\r\nOr add alt text when adding an image block by selecting\u00a0Add alt text.<\/strong>\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/PP-Alt2.png\")
\r\nIf an image already has alt text, the button changes to\u00a0Edit alt text.<\/strong>\r\n\r\nAlt 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.\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/2023-10-19-15_10_28-Window.png\")
\r\n\r\nReview alternative text guidelines<\/a> for more information.\r\nCaptioned Videos<\/h3>\r\nUse the\u00a0Embed <\/strong>block for videos. Uploaded video assets in PebblePad only support open captions. Prefer [pb_glossary id=\"1164\"]closed captioned[\/pb_glossary] videos hosted on Kaltura Mediaspace, YouTube, or other supported platform<\/a>.\r\n\r\nConsult closed captioning guide<\/a> for best practices and tips.\r\n
Transcribed Audio<\/h3>\r\nUse the\u00a0Audio<\/strong> block to upload audio recordings. Upload and link to a transcribed text version of the audio below the Audio<\/strong> block.","rendered":"
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/08\/My-project-e1710992781937.png\")
PebblePad is Langara\u2019s online portfolio<\/a> 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.<\/p>\nRegardless of type created, adding content is similar. This chapter will outline the steps to add accessible content to PebblePad.<\/p>\n
In addition to the steps below, follow the general better practices for accessible content creation<\/a> covered earlier in this book.<\/p>\n
On this page:<\/strong><\/p>\n
- \n
- Font<\/a><\/li>\n
- Structure<\/a><\/li>\n
- Text Equivalents<\/a><\/li>\n<\/ul>\n
<\/a>Font<\/h2>\n
Ensure you use a readable font size and style. Prefer sans-serif or basic serif fonts in size 16 or larger.<\/p>\n
The toolbar appears when in an editable field. Use the\u00a0Font Name <\/strong>and Font <\/strong>Size\u00a0<\/strong>menus to adjust font.
\n<\/p>\nReview accessible font best practices.<\/a><\/p>\n
To change the font colour, select the font and use the T<\/strong>ext Color<\/strong> and\u00a0Background Color<\/strong> menus in the editor toolbar.<\/p>\n
\nEnsure 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<\/a> can be used to determined colour contrast ratio.<\/p>\nThe background colour of a text block can be changed using the Properties<\/strong> panel and selecting a colour from the menu in the Background colour section.<\/p>\n
When using banners, select\u00a0Text below the image<\/strong> in the Properties <\/b>panel to avoid difficult to read text and potential contrast issues between the banner image and text.<\/div>\nReview accessible colour guidelines.<\/a><\/div>\n<\/a>Structure<\/h2>\n
Title<\/h3>\n
Ensure each page has a descriptive, unique title. Enter the title in the\u00a0Enter your post title here…<\/strong><\/em> placeholder:<\/p>\n
<\/p>\nOr in the title field when you are prompted to save for the first time:
\n<\/p>\nHeadings<\/h3>\n
To create headings, use the Styles<\/strong> menu on the editor toolbar.<\/p>\n
<\/p>\nTitle<\/strong> is coded as a heading level 2 while SUB HEADER<\/strong> and Hint<\/strong> 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\u00a0Title<\/strong> for the main topic,\u00a0SUB HEADER<\/strong> for subsections, and Normal<\/strong> for body text.<\/p>\n
Review accessible headings guide<\/a> for more information.<\/p>\n
Lists<\/h3>\n
Use numbered lists for steps in a process. Use bulleted lists for grouping of items. Use the\u00a0Insert\/Remove Numbered List<\/strong> and Insert\/Remove Bulleted List<\/strong> buttons on the editor toolbar to create lists.<\/p>\n
<\/p>\nReview list best practices.<\/a><\/p>\n
Columns<\/h3>\n
Text blocks can be single column or two column.<\/p>\n- \n
- Select the text block.<\/li>\n
- Open the Properties\u00a0<\/strong>panel.<\/li>\n
- Scroll to Text columns.<\/li>\n
- Choose\u00a0Two column.<\/strong><\/li>\n<\/ol>\n
<\/div>\nTables<\/h3>\n
Tables can only be created in Templates and Workbooks.<\/p>\n
To create a table:<\/p>\n
- \n
- Select\u00a0Add Content.<\/strong><\/li>\n
- Choose\u00a0Tables.<\/strong><\/li>\n
- Select table with appropriate header cell structure (column labels, row labels, or both).<\/li>\n<\/ol>\n
<\/p>\nTo modify table structure, select\u00a0Get table cell options<\/strong> (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.<\/p>\n<\/div>\n<\/a>Text Equivalents<\/h2>\n
Descriptive Hyperlinks<\/h3>\n
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:<\/p>\n
- \n
- Write meaningful text that describe the destination of the link.<\/li>\n
- Highlight the descriptive text.<\/li>\n
- Select\u00a0Link<\/strong> in the editor toolbar.
\n<\/li>\n- Choose what type of element you wish to link to.\n
- \n
- In the case of a webpage, paste the URL in the dialogue box.<\/li>\n
- Click\u00a0Confirm Link.<\/strong><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
Consult accessible links chapter<\/a> for more information.<\/p>\n
Figure Captions<\/h3>\n
When images contribute information, they must have alternative text. Adding a figure caption is an accessible method to provide text descriptions of visual information.<\/p>\n
To add a figure caption:<\/p>\n
- \n
- Select an Image block and open the\u00a0Properties<\/strong> panel.<\/li>\n
- Scroll to the\u00a0Caption\u00a0<\/strong>section and check\u00a0Add a caption.<\/strong>
\n<\/li>\n- A caption placeholder will appear in the image block. Click on Please enter your caption here…
<\/strong><\/em><\/li>\n- Type a descriptive caption
\n<\/li>\n- If an image has a descriptive caption, the alt text field can be left blank.<\/li>\n<\/ol>\n
Alternative Text<\/h3>\n
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.<\/p>\n
<\/p>\nOr add alt text when adding an image block by selecting\u00a0Add alt text.<\/strong><\/p>\n
\nIf an image already has alt text, the button changes to\u00a0Edit alt text.<\/strong><\/p>\nAlt 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.<\/p>\n
<\/p>\nReview alternative text guidelines<\/a> for more information.<\/p>\n
Captioned Videos<\/h3>\n
Use the\u00a0Embed <\/strong>block for videos. Uploaded video assets in PebblePad only support open captions. Prefer closed captioned<\/a> videos hosted on Kaltura Mediaspace, YouTube, or other supported platform<\/a>.<\/p>\n
- Scroll to the\u00a0Caption\u00a0<\/strong>section and check\u00a0Add a caption.<\/strong>
- Select an Image block and open the\u00a0Properties<\/strong> panel.<\/li>\n
- Choose what type of element you wish to link to.\n
- Choose\u00a0Tables.<\/strong><\/li>\n
- Structure<\/a><\/li>\n
- Scroll to the\u00a0Caption\u00a0<\/strong>section and check\u00a0Add a caption.<\/strong>\r\n
- Select an Image block and open the\u00a0Properties<\/strong> panel.<\/li>\r\n \t
- Choose what type of element you wish to link to.\r\n
- Choose\u00a0Tables.<\/strong><\/li>\r\n \t
- Structure<\/a><\/li>\r\n \t