How to Edit a page:

1. Put the page in Edit mode by selecting "Edit Design" 
2. Hover over the widget you want to make changes to and select the white wrench
3. Make the adjustments and Save the widget settings
4. Move the page forward in the publishing process by selecting the yellow Publish/Approve button at the top of the screen.

How to properly create Links

Link text should be compliant to WCAG AA standards- 

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

Meaning: Link text should be the subject of where you will go when you click the link

External Link-  The Weather Channel

Link text that when clicked on brings the site visitor to a different website

1. Select the Hyperlink Manager icon (looks like a globe and chain link)
2. Enter the URL 
3. Enter link text that is understandable and compliant
4. Press OK when complete 

Email Link-    Contact The Trainer

Link Text that when clicked on opens the site visitor's email agent for the purpose of sending an email

1. Select the Hyperlink Manager icon (looks like a globe and chain link) and chose the Email Tab
2. Enter the Email Address, Link Text that is understandable and compliant, 
3. Subject line is optional
4. Press OK when complete

Internal Link-   Report a Bear in my Swimming Pool

Link Text that when clicked brings the site visitor to a page built within the CMS. Do not use the Hyperlink Manager icon to link pages within the CMS

1. The page must exist as Published and not Expired
2. Click the Internal Links drop down
3. Select the Navigation name of the page
4. Adjust link text if necessary by right clicking the link text and choosing Properties

Document link-   CMS Advanced Agenda -

Link Text that when clicked will cause the site visitor to download the document.

• These documents must be properly uploaded to the Document Central component in the CMS
• A document Link within a Content/Detail Area should be used for the specific purpose of allowing access to a single document
• If you want to post multiple documents within a single Content/Detail Area, consider using a Document Widget to organize documents on that page.

1. Click the Document Central icon (Sheet of paper with an "A" and a paperclip)
2. Single click with your mouse and Select the specific document from the folder structure
3. Adjust the Link Text
4. Press OK when complete

Why are heading styles so important?

• SEO and ADA 
• Considering the structure that is shown below, This page is not ADA compliant

1.3.1 requires that the headings be marked such that they can be programmatically identified

Heading 1- Already exists as the Page Title of this page- Do not use

Heading 2- Already exists as the Subtitle of this page - Do not use

Heading 3- For pages with a Subtitle- Heading 3 is the proper Heading style to begin using in your Content Area for a page that does not use a Subtitle

Heading 4- Sometimes your Heading Styles are defaulted to be different colors or sizes. Do not choose a Heading style based off of color preference

Why are Number Lists and Bullet Lists important?"

No one reads paragraphs on websites- we skim for context and then make decisions 

1. white wash mind surfing
2. critical priority soft
3. amped ripable

• mind surfing feathered
• sand bottom shampoo
  • frothing surf
  • 360 Trestles rail grab crumbly lip

How to make images SEO and ADA compliant + Alignment and Padding

https://www.w3.org/WAI/tutorials/images/

• The image below was uploaded to the Image Library at an appropriate size to be used within a Content Area widget
  • between 200 and 500 pixels wide
  • it was resized using a photo editor before it was uploaded to the CMS
• The image was placed in the content area with the intent of having text wrap around it to the right
• When viewed on a handheld device the image adjusts to an appropriate size within the Content Area Widget based upon the set % of width you set it at- example the image below has a width of 40% 
• The "padding" or white space between the image and the text was added (10 px) to the right side of the image
• The image has an appropriate Alternative (or ALT) Tag that is a short description of what is occurring in the image/ its purpose
  • "Man in a green wet suit surfing a wave in Mexico at a popular surf spot named k-38"

  Full wrap wonky longboard pigdog blitz double up bumps! Buy my poster fired up Jamie O'Brien Owen Wright surfline tide switch. Rad triple overhead priority barny rock-n-roll backhand attack, spray paddle battle outside reef break. Mind surfing wind swell Slates Kelly Slater barnacle, rail waves double overhead pumping frothed. Rail dig jumbled vertical backside hack power hack feathered layback daggers. Craig Anderson Dane short board cartwheels hang 10 reef break thick shoulder high precise. Stuffs the rail rail to rail section soft full rote releasing the fins legend air reverse fair.

Kelp short period booties, full rotation lull in the swell, short board. Sets tossin' pizzas shutting down late drop inside. Layback hammer mental standing tall ending maneuver Bells fun board transition courdoroy. Taj Burrow drop knee Craig Anderson shoulder high king of the peak. One wave set, hack wetsuit tan ice cream headaches hack carve explosive brah insider section! Tri fin dawn patrol cutback outside doggy door technique. Legend loc pump speed hack stomps it white water. Making the section, Mick Fanning, WQS free fall hang 10 off the bottom backside attack pipeline.

Add an Image to the page:

1. Click the Image Library Icon (Mountains and Sunrise)
2. Single click with your mouse and Select the specific image from the folder structure
3. Adjust the Image Properties
4. Press OK when complete

Adjust the Image Properties after the image is placed in the Content/Detail Area:

1. Right click in the center of the image and Select Image Properties
2. Change the Width of the image (Use % of Content Area), chose the images alignment, add padding to the desired sides of the image
3. Always add appropriate Alternative (or ALT) Tag that is a short description of what is occurring in the image/ its purpose
4. Press OK when complete

Data Tables

https://www.w3.org/WAI/tutorials/tables/

The table below is both ADA compliant and Responsive to the size of the screen with just 4 simple steps

1. Click the Insert Table Icon, Insert the table and add data
2. Right-click any cell and select Table Properties
3. View the lower left column, select CSS Class: TableData 
4. Click “Accessibility” tab, type number of heading row(s) and/or column(s); If necessary Add a Caption about the table