OCM - Digital Communications

How to... Embed an Image with Expressive Image Alt Text

Kelly Hansen — Mon, 13 Dec 2021 21:51:40 +0000

How to... Embed an Image with Expressive Image Alt Text Kelly Hansen Mon, 12/13/2021 - 16:51

Mason prides itself on its dedication to inclusivity. As such, every member of the SiteMasonry ecosystem is expected to support digital inclusion by adding alt text to the images they use on their sites.

What is Alt Text and Why is Alt Text Important?

Also known as an alt attribute, alt description, or alt tag, alt text is a written description of an image placed on the web. It is intended to help non-visual users (i.e. those who use screen readers) when they come across an image that they could not otherwise interpret. Describing images accurately in alt text ensures those who need it get an equivalent, accessible experience.

Meeting Standards for Accessibility

As a publically-funded institution, ��AV is required to meet WCAG 2.0 web accessibility standards. Adding alt text to images helps meet the WCAG 2.0 image description requirement, as well as supports Mason's dedication to inclusivity.

Mason’s Assistive Technology Initiative (ATI) office monitors Mason’s sites for Section 508 and WCAG 2.0 compliance - including the use of image alt text. ATI’s website lists information, resources, and tools to help web content editors keep their content accessible to everyone, regardless of their sight, hearing, or mobility status.

Add Alt Text, Boost Page SEO

Did you know that search engines deprioritize pages without alt text on images? If your images don't have alt text, your page will rank lower than a page with alt text on its images. Adding alt text is therefore an easy way to ensure your page stays high in the rankings.

Writing Good Alt Text

Good descriptive alt text should accurately and concisely describe the content and function of an image, without relying on visual cues. Alt text is primarily used to provide context and accessibility for individuals who are visually impaired or using assistive technologies like screen readers.

Here are some tips for writing good descriptive alt text:

Be specific: Use descriptive words to convey as much information as possible about the image.
Be concise: Keep your alt text short and to the point. Avoid overly long descriptions that may be overwhelming or distracting.
Focus on the content: Identify the main elements of the image that are relevant to its function and convey that information in the alt text.
Consider the context: Think about where the image is being used and how it fits into the overall content. The alt text should provide context and complement the surrounding text.
Avoid unnecessary details: Stick to the most important information and avoid including irrelevant details that may clutter the alt text.
Use appropriate language: Use language that is appropriate for the audience and the context. Avoid technical jargon or overly complex language that may be difficult to understand.

If the image contains text that is key information not provided elsewhere on the site, you should include all that text in the alt text. This ensures that individuals who are visually impaired or using assistive technologies like screen readers can access all the information in the image. If the text is formatted in a specific way, include that information in the alt text. For example, you might say "Bold text reads..." or "Italicized text reads..."

Ask yourself if the image adds any important information or function to the content. If not, it's likely that the image is decorative. If the image is decorative only and does not convey any important information or function, you should use null or empty alt text. This means leaving the alt attribute empty or using alt="". This tells screen readers to skip over the image and focus on the surrounding text instead.

Adding Alt Text in SiteMasonry

There are two occasions where you might be asked to add alt text to an image. One is when uploading an image that is going to be used in a Featured Image position or similar. The other is when adding an embedded image into a text box.

Adding an image via the Feature Image block asks you to add alt text for your image when you upload it. Embedded images do not, as they show up. You need to click "edit media" to see the setting to add alt text to an image.

If you are using an image that was already uploaded the alt text may or may not be set already, depending on how it was uploaded. You can always check by searching the image file name in the Media area, then editing the image's settings.

Additional Resources

Please read these excellent articles on how to correctly write alt text:

Topics

Image Management Tutorial

Accessibility Tutorial

Best Practices Tutorial

Content Hub

SiteMasonry Tutorial

SiteMasonry

How to...Edit an Existing News Item in Content Hub

Kelly Hansen — Tue, 23 Nov 2021 18:03:36 +0000

How to...Edit an Existing News Item in Content Hub Kelly Hansen Tue, 11/23/2021 - 13:03

Before you begin, keep in mind:

Distributed items (news story, profile, academic program) can only be edited within the Content Hub site
Only the item’s author or site owner should edit an existing content hub item (news story, profile, academic program)
Please wait at least 20 minutes for changes to appear on the subscribing site, as Content Hub items are exported on a timed cycle
Content Hub items are created and edited on the ‘Edit Settings’ screen
To request a content item be permanently removed from a subscribing site, please submit a support ticket

Login into Content Hub, then:

Go to the content list by clicking on the ‘Content’ button in the admin navigation bar. At the Content screen:

Use the filter functions to search for the content item:
- To search for a news story, select ’News Story’ from the ‘Content Type’ selector
Open the news story by clicking its ‘Edit’ button in the ‘Operations’ column

Updates can be made to all available fields.

After completing edits:

Confirm the publication state is still set to ‘Published’
Click the blue ‘Save’ button to commit your edits
Enjoy the success message!

Click the blue ‘Save’ button to commit your edits

Enjoy the success message!

Topics

How to...Create a Profile in Content Hub

Kelly Hansen — Mon, 22 Nov 2021 20:16:26 +0000

How to...Create a Profile in Content Hub Kelly Hansen Mon, 11/22/2021 - 15:16

A snappy, robust profile is a great way to show off a Mason community member's accomplishments.

Best Practices Reminder:

Write, but don’t format your content, in Word or a note pad. If you are writing in Word, you will need to ‘clean’ your text before pasting in the text into the Profile screen to avoid formatting issues.

There are several ways to clean your text. Pasting text into a generic notepad application, then use the ‘remove formatting’ option workds fine. The Digital Communications staff likes Word to HTML to clean text. Here's how to remove formatting with Word to HTML:

Go to Word to HTML

Paste the Word text into the ‘Word Editor’ window

Hightlight the text

Click the ‘Clear Formatting’ button (big T with a small x)

Copy the text, paste into the SiteMasonry browser

After content is cleaned, create the profile:

Click the ‘Content’ button in the admin bar

From the Content List screen:
Click the blue ‘add content’ button
- From the Add Content Screen:
- Select ‘Profile’
On the ‘Create Profile’ screen, fill out the fields with as much detail as possible.
- Required, or very important fields are:
- Display Name: Will be the profile title
- Email: Must be a Mason email (this field does not display on the public profile)
- First Name Last Name Contact Information: Space for phone numbers, fax numbers, email and/or addresses. Remember to make phone number links click-to-call.
- Titles and Organizations: Highlight organizational memberships and held offices.
- Headshot: Show off that beautiful face! Keep the image cropped to shoulders and up, no larger than 256MG
- Personal Websites: URL: where the linked text sends the user
- Link Text: text the user clicks to follow to the personal website link
- Summary: Write a short, information-dense hype paragraph, as this text will appear as the search and social media snippet when the profile pops up in a search return or is shared on social media.
- Bio: The full bio goes here. All typical WYSIWYG styling options are available.
- Click the 'Save' button!

Please wait 15 to 20 minutes for the Profile to export to the subscribing (sites the profile is shared with) sites.

To edit an existiing profile:

Profile copies are distributed to shared-with sites. In order to keep profiles on all sites sychronized, profiles can only be edited in Content Hub, and only within the 'Edit Settings' screen.

Topics

Content Hub

SiteMasonry

Content Hub Profiles

How to... Login to Content Hub

Kelly Hansen — Mon, 22 Nov 2021 17:49:51 +0000

How to... Login to Content Hub Kelly Hansen Mon, 11/22/2021 - 12:49

SiteMasonry's distributed content library, Content Hub, allows editors to add and share stories, profiles, and program descriptions to SiteMasonry sites.

To login to Content Hub:

In a web browser window, go to: https://content.sitemasonry.gmu.edu/user/login
Click 'Login with your Mason Credentials'link to be taken to Mason's standard login screen.
Enter your MasonID and password, and approve the 2-Factor authentication check.
You should be returned to the website's homepage once done. Click 'Content' in the admin navigation bar (top left) to get to the Content List.

News Item Tutorials

How to... Embed an Image with Expressive Image Alt Text
May 9, 2023
How to... Login to Content Hub
May 8, 2023
How to… Understand Versioning and Publication States - Draft, Published, and Archive
May 2, 2023
How to... Add Files to Blackboard and Find the Web Permalink
April 25, 2023
How to...Create a News Item - Legacy
July 26, 2022

Topics

Content Hub

Content Hub News Items

Content Hub Profiles

How to...Create and Place a Webform

Kelly Hansen — Thu, 18 Nov 2021 02:19:48 +0000

How to...Create and Place a Webform Kelly Hansen Wed, 11/17/2021 - 21:19

View more SiteMasonry tutorials

Attention:

Webforms created using the Drupal Webform Module are not appropriate for collecting sensitive information such as:

birth dates

test scores

application materials

payment processing

file uploads of any sort

social security numbers

personally sensitive information

any item that may become part of an official record.

Contact the Admissions Tech Team for assistance if you are creating a form for the purposes of collecting information for an admissions-related process.

Contact ITS for access to the Qualtrics secure form building tool, if your form requires file uploads or the collection of personally identifying information (PII) or FERPA protected information related to an academic or administrative process such as a fellowship or scholarship application, or other administrative process.

It is every Mason Web Editor's duty and responsibility to be good stewards of our website users' information.

The Webform builder allows Site Owners to create and place forms on any SiteMasonry page.

Collecting Personal Identifiable Information (PII), documents or images? Contact ITS for access to the Qualtrics secure form building tool.

Create and Place: Webform Basics

Create a Webform

From the Admin toolbar navigate to > Structure > Webforms:

At the 'Webforms' page > Click ‘Add Webform’
Click ‘Add Element’ to add form elements

Of the many element options to choose from, email, phone, text field, and text area are the most commonly used field elements.

Webforms may be placed on any SiteMasonry page - Basic or Landing.

Want to learn more? Watch the recommended deep-dive webform video tutorials:

Conditional Elements

Multi-step Wizards

Pre-Defined List Options

Emailed Submission Confirmations

Submission Confirmation Page

Place a Webform

Navigate to and open the desired page:

Click the ‘Customize This Page’ tab
Locate, or create, the section to place the webform block in
- click ‘Add Block’, notice the fly-out sidebar admin menu
From the sidebar admin menu
- select ‘Webform' from the block list (will be close to the bottom of the list) to 'pop-up' the 'Configure Block' screen
From the ‘Configure Block’ pop-up
- Add a name for the block in the title field
- Use the type-ahead feature in the ‘Webform’ textfield to select form

In the unlikely event you need to modify the ‘Default webform submission data (YAML)’ or redirect the webform, please file a support ticket for assistance.

Click ‘Add Block’
Admire your new form!
Save the page

Additional Resources

Topics

SiteMasonry

Site Owners

Forms

Best Practices Tutorial

Troubleshooting...Duplicate Disclaimer Block on a Program Item

Kelly Hansen — Mon, 08 Nov 2021 22:21:06 +0000

Troubleshooting...Duplicate Disclaimer Block on a Program Item Kelly Hansen Mon, 11/08/2021 - 17:21

All program items should have a default disclaimer notice:

"This information is being provided here for your planning purposes only. For official catalog information, please refer instead to the official ��AV Catalog Website at http://catalog.gmu.edu."

This text is, by design, somewhat hidden in an auto-populated 'Body-Text' block. This block cannot be permanently removed by a Site Owner. If the Site Owner removes this block, the block will again appear on the program item after Content Hub re-exports the program item to the subscribing site.

Occasionally, there will be duplicated disclaimer text on a program item. The extra block displays within a block titled 'Extra Info' (or something similar). To get rid of the duplicate text, remove the 'Extra Info' block, then save the page.

Topics

SiteMasonry

Site Owners

How to...Edit Existing Content on an Existing Page

Kelly Hansen — Thu, 07 Oct 2021 21:02:26 +0000

How to...Edit Existing Content on an Existing Page Kelly Hansen Thu, 10/07/2021 - 17:02

The most basic editing task done by Site Owners, content editors, and content contributors is editing text on an existing page. Here is how to do that.

From the Admin bar:

Click the ‘Content’ tab to display the content list
Locate page to edit, click the page title to open the page
Click the ‘Customize Page’ tab on the page navigation bar put the page in edit mode
Mouse over the upper right corner of the block to be edited
Click on the revealed edit pencil icon
Click ‘Configure’
Make needed text and image changes
After changes are complete, scroll to the bottom of the edit box, click the blue ‘Update’ button
If edits to other blocks are complete, scroll up to the page navigation bar
Click the ‘Save Layout’ button

Topics

Content Editors

Content Contributor

How to...Find a Profile in Content Hub

Kelly Hansen — Fri, 24 Sep 2021 15:10:34 +0000

How to...Find a Profile in Content Hub Kelly Hansen Fri, 09/24/2021 - 11:10

Please Note: After late October 2021, Faculty Profile will be replaced by 'Profile'.

To find a profile in Mason's content distribution site, Content Hub:

Login to Content Hub using your MasonID and password
From the admin taskbar click the 'content' tab to display the content list
Use the 'Title' and 'Content Type' fields to search the library
Type in the target's last name and select 'Profile' from the 'Content Type' list

In the video, I am searching for President Gregory Washington. Keep the search simple - notice only the last name was typed into the Title, and 'Faculty Profile' was selected from the 'Content Type' list.

Topics

SiteMasonry

How to...Edit the Address in the Footer Section

Kelly Hansen — Thu, 26 Aug 2021 22:36:30 +0000

How to...Edit the Address in the Footer Section Kelly Hansen Thu, 08/26/2021 - 18:36

Another perk/responsibility for the Site Owner is being able to edit the address in the footer section of the site template.

Changing the address in the footer section is quite easy. Here is the click path:

After logging in:

Click the 'Configuration' button on the white admin bar
Select 'System' from the secondary menu
Select 'Site Customizations' from the fly-out menu
Make changes to the address in the 'Footer Info' text area. Please do not make changes to the 'Site Name Abbreviation' or 'Copyright Name' fields.

Topics

Site Owners

How to...Embed an Image

Kelly Hansen — Tue, 16 Mar 2021 18:14:27 +0000

How to...Embed an Image Kelly Hansen Tue, 03/16/2021 - 14:14

Embedded images are secondary supporting images within the text of a news story. The June 2021 update to the embed feature changed the icon in the WYSIWYG toolbar and smoothed out the embed process.

Create your content item (page or content type - news, faculty profile, program)

Click the 'Customize Page' tab
Add a 'Basic Text' block to a section
Title the block
Add text content (I used cupcake Ipsum to generate filler text - http://www.cupcakeipsum.com/)
put your cursor in the top left corner of the block editing window, ahead of the text you pasted in
Click the embed icon (it looks like an image with musical notes on top of it)
Upload an image to embed - I chose a 6 KB cupcake image
Click Save and Insert

After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:

Click the small 'edit' button next to the image in the text block
Add alt text
Select the alignment (none, left, center, right)
If a caption is needed, click the caption box (you will add the caption after the image is placed)
Select the desired display size (extra large, large, medium, small)
Click 'save'

View a sample page with image embed sizes and descriptions.

Commit your work by clicking 'save layout' on the Customize Page screen

Remember to publish!

View a sample page with image embed sizes and descriptions.

Topics

Page Basics

Image Management Tutorial

OCM - Digital Communications

How to... Embed an Image with Expressive Image Alt Text

What is Alt Text and Why is Alt Text Important?

Meeting Standards for Accessibility

Add Alt Text, Boost Page SEO

Writing Good Alt Text

Adding Alt Text in SiteMasonry

Additional Resources

Related Tutorials

Topics

How to...Edit an Existing News Item in Content Hub

Login into Content Hub, then:

Topics

How to...Create a Profile in Content Hub

After content is cleaned, create the profile:

To edit an existiing profile:

Topics

How to... Login to Content Hub

To login to Content Hub:

News Item Tutorials

Topics

How to...Create and Place a Webform

View more SiteMasonry tutorials

Create and Place: Webform Basics

Create a Webform

Place a Webform

Additional Resources

Topics

Troubleshooting...Duplicate Disclaimer Block on a Program Item

Topics

How to...Edit Existing Content on an Existing Page

From the Admin bar:

Topics

How to...Find a Profile in Content Hub

To find a profile in Mason's content distribution site, Content Hub:

Topics

How to...Edit the Address in the Footer Section

Changing the address in the footer section is quite easy. Here is the click path:

Topics

How to...Embed an Image

Create your content item (page or content type - news, faculty profile, program)

After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:

Commit your work by clicking 'save layout' on the Customize Page screen

Topics