Page Comparison

When copying written content from another program, it will try to keep the original formatting. There are two ways to fix this:

• When pasting, use ctrl+shift+v (PC) or command+shift+v (Mac) to paste as plain text

• After pasting, highlight the content and select the T_x button in the toolbar to clear the formatting. 

When working with text blocks, the Format drop-down lets you select your heading style. Headings are an important component of accessibility. They are a format option applied to section titles that allows visitors using screen readers to "skim" a page to understand its structure and content by jumping from section title to section title. Headings should never be used for emphasis, use bold, italics, or block quotes for those options.    

Heading 1 is shown as an option, but do not use Heading 1. That will create severe accessibility issues. 

Remember your heading structure from Digital Accessibility Basics:

• Heading 2 is for main section titles.

  • Heading 3 is for sub-sections titles of a heading 2.

    • Heading 4 is for sub-sections titles of a heading 3.

      • Heading 5 is for sub-sections titles of a heading 4.

        • Heading 6 is for sub-sections titles of a heading 5.

You can build tables in the text blocks, just like in a Google or Word doc. However, tables should only be used for tabular content, never for visual layout. Tabular content is written content that has a clear header row or column. 

To make a table, click the Table button and complete the Table Properties popup. Things to include:

• Select a header row or column in the Headers dropdown. This is a component of accessibility as it helps a person using a screenreader navigate the table.

• Change the table width to "100%". This makes the table responsive to devices of different screen sizes (you don't want a fixed width). 

Important notes:

• Tables can be added to any text block, but they should only be used in the the “Text: 1 Column” block. They don’t display correctly in other blocks.

• Links should never be added to a header row or column as the color contrast between the background and the linked text is not sufficient for accessibility purposes. 

Block quotes are an excellent way to add emphasis to important content on a page. To add a block quote, highlight the text you want in the block quote and select the quotation marks in the formatting menu. 

The block quote won't look very different on the Edit tab. However, when you save the page the text will be larger and a different color/style.

One trick to block quotes is to center align the block quote. Otherwise the formatting may look "off". 

Fillable link/CTA text and URL fields

Certain sections of the site, such as most blocks and structured content, have fields where you can enter a URL and text to create either a CTA (Call to Action) or Link. 

To make your link or CTA text accessible, you'll want to keep it simple, direct, and clear. Use language that tells the visitor where the link goes, like "register now" and "more about our program". Don't use terms like "click here" or "learn more" as they're generic and present accessibility issues for visitors that use adaptive technology. All links should make sense out of context (without surrounding text). 

For the URL field:

• Pages external to http://www.pdx.edu : include the full URL (including https://). 

• Pages internal to http://www.pdx.edu , but not on your site: Write in /../site-name/page-name - the /../ brings the URL to the root (http://www.pdx.edu ) so you can make a relative link to a site external to your own. 
  For example: /../student-life/campus-life

• Pages internal to your site: start typing the page title and a list of options will appear. Select the appropriate page title. 

• Linking to documents:
  

  • Documents hosted on http://www.pdx.edu : Replace everything before the site name with /../ in the URL (so the URL starts with "/../site-name/sites/" - for example: "/../student-life/sites/"). To get the URL, navigate to the document on the other site, then copy the URL from the address bar. 

  • Documents hosted elsewhere: Use the full URL.

• Anchor links: put a # before the anchor link name, for example #anchorlink. Review the Anchor links instructions for information on making anchor links. 

• Email: in the URL field, type "mailto:email@address". So if the email address is "help-webteam@pdx.edu", you would type in "mailto:help-webteam@pdx.edu" (without the quotes).

Links in text blocks

You can make links in text blocks just like you can in an email or document. Simply highlight the text you want linked, click the Link button (it looks like a piece fo chainmail) in the formatting menu for the text block, and select the correct destination from the dropdown list of options.

There are three different "Protocol" types you can choose from. :

• URL: Choose the "URL" protocol type and input the full URL.

  • If linking to a page external to http://pdx.edu : you'll need to select http:// or https:// - most sites should be https://. 

  • Linking to a page internal to http://pdx.edu : select "Other" as the protocol. In the text field, replace everything before the site name with /../. So if the page is pdx.edu/admissions/how-to-apply, you would write in "/../admissions/how-to-apply" (without the quotes). 
    This process applies both for links internal and external to your site, on http://pdx.edu . 

  • Linking to an anchor in a different text block on the page: Choose "Other" as the protocol, and write in the anchor name with a # before it. Example: #anchorname

• Link to anchor in the text: Choose the "Link to anchor in the text" protocol type. Then follow these instructions:
  You must make the anchor before you can link to the anchor. Follow the instructions under Anchor links to make an anchor. Once the anchor is made you just need to select the anchor name from the dropdown list under "Anchor Name". 

  • Note:This only works for anchors in the same text block where you're making the link. If your anchor is in a different text block, you need to choose URL as the link type, then choose choose "Other" as the protocol. In the text box, write in the anchor name with a # before it. Example: #anchorname 

• Email: Choose the "Email" protocol type and enter the full and correct email address.

Note: when selecting the text to link, avoid terms like "click here" and "read more" as they are generic, don't make sense out of context, and can present accessibility issues. Choose specific phrasing that tells the visitor where the link is going, like "apply now" and "learn more about accessibility". 

Anchor links

An anchor link is a link that directs a person to a specific part of a page (the anchor). Anchors are generally inserted further down a page, with a link of anchor links near the top of the page (much like a table fo contents). That way visitors can quickly jump to their desired destination on the page. 

You can only make anchors (the destination of the anchor link) in text blocks, but you can make the links in any block that has a URL field. 

You must make the anchor before you can link to it.

To make an anchor:

1. Place your cursor where you want the anchor to be. Important: do not highlight any text - highlighted text will look like a link. Just place the cursor near some text.

2. Click the Anchor button (it looks like a flag) in the formatting menu of the text block.

3. Insert the anchor name in the popup that appears. It must be all one word (no spaces), and capitalization is important. For example: anchorname

4. Click Ok.

You can now use that anchor to link to from within the page. Follow the instructions for adding anchor links in Links in text blocks or Fillable link/CTA text and URL fields.

If linking to the anchor from an external source (such as linking to it from another page or including the link in an email or a Facebook post), use this URL structure:

https://www.pdx.edu/site-name/page-name#anchor-name

Links to documents

Making a link to a document is essentially the same as making a link to anything else. The only difference is that you need the document's URL.

If the document is hosted elsewhere (such as on Google Drive), then you can link to the Share URL for the document.

If the document was uploaded to your site, then follow these steps to get the URL:

1. Navigate to “Content ￫ Media”

2. Search for the file name. You can also further filter by selecting "File" as the Media Type.

3. Click on the file name in the icon to open the editing page for the file

4. On the edit page, right-click the file name and select "Copy Link Address", "Copy Link URL" or whatever other language your browser uses.

5. At the point the URL is copied and you can use it to create a link on one of your pages. However, it's best practices to make the link "relative.

6. To make the document URL relative, replace “https://ondeck.pdx.edu/” or "https://www.pdx.edu/ " with /../ in the URL (so the URL starts with "/../site-name/sites/" - for example: "/../student-life/sites/"). 

All content on the public-facing http://pdx.edu website must be accessible to people with disabilities. Accessibility is not only an important part of building a welcoming and inclusive university culture; it’s also PSU policy. This means that all http://pdx.edu multimedia content must include the following:

• accurate, synchronized captions;

• an accompanying transcript; and

• audio or text descriptions for any visual elements not accurately accompanied by equivalent audio.

These features ensure that people with vision or hearing disabilities can access your multimedia content. It also allows for greater accessibility and usability for those who are second language learners, those with cognitive learning disabilities, or those who are simply trying to watch a video in a loud or distracting environment.

The Digital Accessibility Basic Training Series offer a good example of accessible multimedia content. Note that the narrator provides an audio description of visual information at the end of each video. This is an important practice to emulate when generating new multimedia content.

Captioning Options

Caption Your Own Multimedia Content

Content developers may generate captions and transcripts themselves using video hosting sites like Youtube and Media Space. Both of these services offer machine-generated captions and accompanying editing tools. Please note that machine captions are not fully accessible for people with disabilities and must be edited for accuracy. Follow these steps to caption your own Multimedia content in YouTube or Media Space:

• Generate automated captioning in YouTube

   and edit captions in YouTube for accuracy.

• Generate machine captioning in Media Space

   and edit captions in Media Space for accuracy.

Request Professional Captioning and Transcription

Affordable professional captioning and transcription services are currently available through OIT at a cost of $1 per video minute. Follow these steps to request paid, professional captioning and transcription:

1. Upload your multimedia content to Media Space

   .

2. Submit a Caption Request for pdx.edu Multimedia.

3. Allow 5-7 business days for your request to process.

Using Media Space Captions and Transcripts

Currently, you cannot embed Media Space videos on pdx.edu, only YouTube videos. You can, however, download the captions from Media Space and upload them to YouTube. You would then embed the captioned YouTube video and upload the associated Media Space transcript to pdx.edu.

To Download Captions:

1. Log in to PSU Media Space to access your video.

2. Select the Actions button.

3. In the resulting Actions menu, select Edit.

4. In the resulting Edit view, select the Captions tab.

5. In the Captions tab, select Download to access the SRT file.

6. Upload your original video to YouTube

   .

7. Add the SRT file to your YouTube video

   .

   • In the provided link, select “Upload a file.”

To Download Transcripts:

1. Log in to PSU Media Space to access your video.

2. In the “Attachments tab,” download the .txt file.

3. After embedding your captioned YouTube video, upload your transcript to pdx.edu and include a link immediately below the video.

Refer to pdx.edu/accessibility for an example.

Note: It's important to use this process to upload your videos. You do not want to upload them directly from your computer as our site does not have the bandwidth to host videos on the site itself. Additionally, if you're planning on using the video in a text block, please skip to the Embedding Videos in Text Blocks instructions below. 

Go to “Content ￫ Add Media ￫ Video Embed” to access the video embed form:

Remote video URL: This is the URL for the video you want to use. Supported resources are YouTube* and Gfycat.

Revision Information: Add details if desired, but it’s not needed.

Click “Save” when done.

Getting the Remote Video URL for YouTube

1. Navigate to the video you want to embed

2. Click the Share link under the video

3. Copy the URL in the popup

4. This is the URL you’ll use in the Video Embed form 

Getting the Remote Video URL for Gfycat

Gfycat is best used when uploading your own videos to turn into gifs. These can then be used in large and small hero headers and other blocks to give video snapshots that auto-play.

1. Navigate to the gif you want to use.

2. In the right-sidebar click the “Copy” button (it looks like a piece of chain). 

3. Use this URL in the Video Embed upload form.

Text blocks

There are two ways to embed a video in a text block. One is through an iframe, and the other is through the video entity embed.

If embedding through the Video Entity Embed, make sure you're editing the text block you want to add the video to. Then click the "Video Entity Embed" button in the editing toolbar (it looks like a black rectangle with a right-pointing arrow in it, similar to a "play" button). In the popup, just paste the Share URL of the video you want to embed. 

If embedding using an iframe, follow the instructions for iframes in the Block Pages documentation. 

Other blocks

There are two other blocks allow you to use a video embed instead of an image. Those blocks are:

• Header: Large Hero

• Feature: Content with Media

To use a video embed in any of those blocks, click on "Add Media" as if you are adding an image. In the pop-up, there is an option for "Video Embed" in the left sidebar (under "Image"). Click that link.

You can then select a video embed that's already been added and click "Insert selected", or directly add a new one by entering the embed URL and clicking "Add".