Support Topics for PD/GO System Version 4
Editing your new PD/GO v4 website is EASY! In this tutorial with tech support team member Stephen Sharp, you will learn the basics of the system, including adding webpages, changing content, and content formatting. This is the full training video. For video clips on specific topics, please see below.
For a fully keyboard-accessible alternative to this video, view it in Chrome or on any Android or iOS device, view it in Firefox with the YouTube ALL HTML5 add-on installed, or disable Flash in Internet Explorer.
Hello, and welcome! Thank you for choosing PD/GO Digital Marketing for all your digital marketing needs, and in the tutorial today we'll be taking a look at making changes to your website!
Now we will break up this tutorial into different sections based on the subject of the section and we will also break up those sections into subsections so you can watch the tutorial video from start to finish, especially if you are just getting started with PD/GO version 4 or if you have a specific question or a specific topic you're wanting to learn about you can click to go right to one of those.
Now starting off I also want to mention that in PD/GO version 4 the preferred browser is Google Chrome, whereas in PD/GO version 3, the preferred browser was Firefox. We still do support other browsers - it's just the preferred browser. Now to login version 3 we would go to pdgo.com and then we would click on the PD/GO version 3 login button in the header.
However in version 4 we login by going to our website (in my case it's "e.pdgo.com" for the tutorial - however this would be your website) and then /admin to get to the admin console. Now we're at the login screen. You should have received your login credentials via email when your site went live. However, if that is not the case, no worries, just email us at firstname.lastname@example.org and we can get those credentials to you. I'm going to paste in my password, click Login, and now we're at the Admin Console. Now that we're logged in we can see our Admin Console. Over at the top, we have Logout, which will log us out of the PD/GO version 4 system. We have Staff Accounts, and we have your Account.
Staff Accounts is a way that we can divvy up content between other users so that we don't have to give an employee our personal login to the PD/GO version 4 system. We can create a new staff account for them and once we've done that we can limit what they're able to do.
In your account there are only two options in here: you can change the email address that you login with by putting one in here, and if you put in your current password you can also change your password to a new password and then click save. Alright, now in the "Hello, What would you like to work with today?" section. We have "Web Pages", "Blog Articles, "Checkout Orders", "Website Settings", and "Statistics".
“Web pages” is where we'll go to make changes to a web page or create or delete web pages. “Blog Articles” is where we can create or delete blog articles. “Checkout Orders” is where we can go to see who ordered what, and then from there, we can dispatch orders. In “Website Settings” there are a few very important settings to be found in here for us to change. Then “Statistics” gives us a brief look at what's going on with our website in traffic (visitors to your site).
Alright, we'll go from the top to the bottom, starting off with “Web Pages”. From here, we can see our top-level pages, such as Home, What We Do, Contact Us. If you look in the Preview screen to the right, you can also see Home, What We Do and Contact Us listed on the Navigation Bar.
To create a new top-level page, we click New Web Page. We'll give it a name, such as the name Test, and we've created a new top-level page. Now you'll notice it does not show off to the right on our preview screen because its status is offline. That's on purpose because when you create a web page or a Blog article for that matter, you don't necessarily want people to see the page as you are making it; you want them to see the finished product. So you can finish the Test page, and then once it is set you can take it to status live.
You will see once we do that, now we have it off to the right in our Preview screen. For this webpage, we have the option to Edit Web Page, which will be doing in a little bit; we have Add Sub Page, in this way you can have multiple subpages to this webpage. You can do that for any of your pages. Once we click this Back button you'll see that this Test page which I have offline also has a subpage, and this is how you can get back to that through this Subpage button. from here we can also add new subpages, as well as other options. You have beside Status (where you can make a page live or offline) an option for Security so that you can give a webpage a username and password combination to keep it hidden from the general public.
Using Security and Add Access group, this page becomes locked with a password so if someone wants to access this webpage they will need the username and password that you have set up to access it. Other options are Redirecting page: here you can have your page redirect to another website and you can paste in the Redirecting page link (the other website’s URL) here, then click save.
Now, we do recommend if you do that, that you also use click the option, Open in New Window. Use this whenever you are sending someone off-site. We have Hide from Menus, so if we take this live, see it's up here in the menu. We can also make it hidden from menus if I click Hide from Menu; now someone would need the link to access that page. You can get to this hidden page through a link on one of your subpages, but the page will not appear on your Navigation Bar. Then we have Redirect to first subpage. This is specifically for top-level pages that have subpages; when someone clicks on this page it will take them to the first subpage, which would be in this case the subpage we created called Test 1.
Other options you have include Duplicating a page and Deleting a page. So we're going to delete this Test page that we've created, and now it's gone and you can also Duplicate a page. I’m going to go ahead and make this “status offline”, so that doesn’t show up here. Now we are going to go ahead and edit this page. Click on the page you want to edit, then click Edit Webpage.
Alright, now that we are editing this page, we will see that we have the Content Editor on the left, and the Preview Screen on the right. Scroll down here. We can change the page name by clicking up at the very top. And now the page’s name is “Test”. Now when you first edit a webpage, in general, it will bring you to the Main Content Area, which is just a content bar. These are all just content bars, which are different sections of content. In general, the content bars go from top to bottom, so it would be Content bar 1, Content bar 2, Content bar 3, etc etc. So from the top to the bottom.
The exception to this would be the Main Content Bar, which we have being first, so that when you edit the page it will bring you to the Main Content. This is also known as Content Bar 3. It is the content area that opens by default when you open the Content Editor. In case you decide to add some content above the Main Content Bar, then Content Bar 1 and Content Bar 2 are available. Adding Content in these bars will have content appear before the Main Content Bar.
Now you see we have the Content Editor on the left, and the Content Preview on the right, however, if you don’t like having the Content Preview on the right, we can click this “Dual Pane Button” and that will remove the Preview and only gives us the Content Editor.
The thing about that is that you’ll notice that when we disable the “Dual Pane” this “Publish Changes” button goes away. That’s because it wants us to see the changes we’ve made before we can publish them. I’ll show you that again with the Dual Pane Button. Publish Changes is gone. So we click “Preview Changes” and now Publish Changes is up here, up to the left.
To add content is as easy as clicking in white space, and then typing. And now we have a whole text box. When we are dealing with text we are dealing with “text boxes”. So, for example, this is all one text box. That means that we can take this arrow, and drag it where we want to place it. I’m going to go ahead and delete this content. I selected these just by left-clicking and dragging, and I’m going to hit delete. Now, to break these up into separate text boxes, I can do that by clicking where I want to break them up, press enter twice, and now we have two separate text boxes, that can be individually managed.
Some of our text options we have we access by highlighting the text. Now we have BOLD, ITALICS, UNDERLINE, and LINK. We can bolden the text by clicking bold (putting asterisks to the left and the right, which is what the system interprets as being bold.) Now there is nothing special about these asterisks, so if we remove the asterisks we remove the bold. It’s the same way with the Italics and Underline. We can also remove the Italics, the Underline, and the Bold by highlighting it and clicking it again.
Now, to link we highlight the text, then we click “Link”. We can paste in a link here, we can choose “link opens in new window, we can choose one of our own webpages, or we can choose a file like a PDF. If you don’t have one you can just click “Upload New File”. Now our text is linked. You see that with the underline. So, here we have the linked text, and here we have the actual link. Now, again, there is nothing special about this, if we want to remove the link, we just remove this as well as the brackets. Now it will be back to regular text.
Other text options we have are “Text Format”, “Advanced Text Styles”, and “Text Alignment”. Text Format is how we make something a “main heading”. All the way to a “Minor Heading”. Now notice that the color next to the text indicates what size it is. For example, that is a Minor Heading which indicates it is green, all the way up to red, which is the “Main Heading”. And then your other text options - you have the Bulleted List and the Numbered List. To use these you just make it a Bulleted list, and then break them up. Each individual text box that is bulleted now has a bullet point.
Now, when you think “Advanced Text Styles” think about “drawing eyes”, because that’s what they are for, drawing people’s eyes. I’ll show you what I mean.
So we have Icons to put in front of our text, or we have Buttons, and we are going to click on “Button Large” for now. Now you’ll see that our linked text has become a button, and you’ll see that it is clickable just like the link was. Something to note about that, however. Even though Advanced Text styles, like Text Format, affects the entire text block. If we put another word in here that isn’t linked it won’t be a button since a button indicated the word is linked (clickable).
Something else you might be interested in Text Styles would be the Icon-Email. And again, it’s to draw people’s eyes to the fact that you have an email address there. You also have a phone number, icon-info, etc etc. And then we have our “Text-Alignment”. Left, Center, Right, and Justify.
Now we’ve had some options off to the left, that we haven’t been able to deal with, that’s for a reason. They are Image Options and we haven’t yet been dealing with an image. Which brings us to our Storage Menu, as well as Widgets and Layouts.
What we want right here is an image, so we click on “Images”, and we drag and drop an image. The blue line indicates where it is going to go. Now, again, to do that all I did was click “Insert” and grabbed one of these images, dragged it to the left, and the right, and the blue line indicates where it is going to go.
Note, the Insert Button brings you back to the last storage option you used, however, if that’s not what you want, you can click the Back button up here which brings you back to the Storage Menu.
Now, that we have an image we click on it and have our image options: Image Alignment, Image Size, and Advanced Image Styles.
Now, Image Size: if we click that, we see here all the different sizes that we have, going from small all the way to the original size. Now, we can’t blow up an image beyond the original size because that would look bad.
Now we have Advanced Image Styles. Like “Advanced Text Styles”, when you think of Advanced Image Styles, think “drawing someone’s eyes”.
For example, we have Caption, Light Border, Light-Border Caption, Heavy-Border, Heavy-Border caption. We just did Heavy Border Caption. It puts a black border around it, as well as a caption. We could have done light border caption as well.
Let’s see what that looks like.
Now, when you see this caption you might wonder where it is pulling this info from. If we double-click the image, we have two additional image options. The Image Description option which we can replace, as well as the Image Linking option. We can paste in a link just like before - we can choose one of our own webpages, an external webpage, or we can choose a file, like a PDF.
And as always we have “Link opens in new window” button. Now we have changed the caption by changing the description. Note the caption alignment follows the image alignment. So, if the image is aligned “Center”, so is the caption. Now if we click “Insert”, we have another option and that’s in “Layouts”.
Layouts are basically like tables that have one row, but a variable amount of columns. So, for example we might want these two images to be one image and two image, so side-by-side in two separate columns. We can do that with the Equal Columns Pair. Drag to the left and the right and the blue line indicates where it is going to go.
Now that we are here we can drag our content inside of these two equal columns. And there they are. I’m going to go ahead and align this to the Center. Note that the same thing can be done with text. If we come back here we will see that there are many different Column Layouts for you to choose from.
Next to the Layouts you will notice the Widgets. Now widgets are individual items that add specific functionality to a page. Now we don’t have time to go through all the different widgets as they are very specialized, I just want to point out a few.
The Social Links Widget adds icons with your social links. If you have populated them in your website settings, which we will take a look at in a bit. To add a Widget we just drag it to the left, and the right, and the blue line indicates where it is going to go. So we will do that with the Horizontal Rule. which just adds a line. Now when we put it in the Column Layout we see it is respecting the size of the column layout, if we move it outside of the layout, it goes across the screen.
The Horizontal Rule Invisible is similar except instead of adding a line, it adds a space.
Our blog, this is a “Core” widget, meaning there really should only be one of these, and this would be, if you have a blog, you create a new Blog page, name it “Blog”, then you drag this blog core to that page. Once you do that, you have made that your “blog page”. New articles you create will show up there.
Lastly, we have the Copyright notice. A way of adding a copyright notice that auto-updates the date.
Alright, we are going to go back into “Insert”. Now, I’ve already dealt with images, we are going to deal with it a little more in-depth here. We can upload a new image by clicking “Upload New Image” and then choose it from our desktop. We can drag the image from our desktop to this area, or we can actually drag the image from the desktop directly to the Content Editor.
When you do so, just look for the blue line.
With images, we can categorize them, we click on it, click categories, and maybe we will categorize it as Test. Now, there is a benefit to that, in that we can filter our images by what we categorized. The other benefit is something called a “Gallery”. So, a Gallery is simply a collection of images that we can display on our page. So, I’ve just made the “Test” gallery, and now it shows images from the “Test” category. I can have it set to show images from multiple categories if I want to, and I can also stylize it how I want.
The most used one is the slideshow. I’ll show you what that looks like. Just need one more image. Let’s categorize that as “Test”. Now, this Test gallery pulls from the Test category, which has two images. And it’s stylized as a slideshow. Now, this is quite a large image, but you still get the idea. We click here and it shuffles through them.
Now that we’ve dealt with images and galleries, we have Tables, which is a way of organizing our data content. Now too many people use Tables anymore, since what we used to use tables for, we now use Column Layouts. You can still use Tables, especially for something like spreadsheet data.
We will make a test table, and we add table data’ It should be in the CSV format, which any Excel-like program can export to. Now, once you’ve created your table you can drag and drop it just like any other Storage item.
Next, we have Contact Forms, which is a great way of requesting information from our clients. We can have multiple Contact Forms. Most websites will use just one for their general “Contact Us” form, however, you can still add as many as you want. So, maybe you have a Contact Form for “Membership Registrations”, your “General Contact Form”, etc.
To change who receives the information a user enters into your Contact Form, we just click on that Contact Form, click “Recipient”, and we can change who it goes to. We can have it also set to automatically email one of our web pages when someone signs up, or if someone fills out the form we can have it redirect them to a page.
We can edit our Form Fields by clicking Edit Form Fields. We have our Name, Subject, Message. You can request as much or as little information as you want. When we click on the field we have “Required”. We see the asterisk, meaning it’s been required. We can also change the “kind” of information we are requesting, so if we add a new field by clicking “Add Field”. We might add Email, the default is “Short Text” but we can change that to “Email”. And now we’ve added a new form field.
You can also export your submissions as well.
Now, if you have an E-store built in, we have Products, which we can add a product by clicking “Add Product”. We can set the price here; we can rename it. You do have product choices.
And you also have the option to only sell if it is in stock, so you will obviously have to give it a stock number. Once you’ve created that product, you can easily add it your page just by dragging and dropping.
Next, we have Calendars, so we click on that. Now that we’ve added a Calendar, we can edit the Calendar Events. We can add a new event by clicking Add Event, and once you’ve created it you can give it a date, you can give it a time, you can give it a location, or other information.
And now we can drag this Calendar to the Content Editor. And now we have a Calendar.
Another thing we have are Snippets. Snippets are content that you create once, and can be dragged anywhere. So, for example, we might want “Our Address”. Because we will only want to edit our address once if it changes, and have it change across the board, rather than having to find each instance of our address and having to change it.
Now this is a simple example, and you can add a lot of complexity to this area, however we are going to go back. This is just to show you the functionality. We click Insert, go back to our snippets, and drag it to the left, to the right, and drop it. And now we see our Snippet content here. Now we could have that same Snippet on multiple pages and only have to change it once to change it across the board.
Now we have “Embed Codes”. Embed Codes are a way of getting code onto our web page simply by giving it a name, and pasting the code in here. So if we went to maps.google.com, we’ll just grab a random address just to show this, maybe the PD/GO Office, we’ll do that. Share, Embed Map, We will grab this map. Paste that code in, and hit “enter”. Now we have this Storage item. This Google Map is just like any other storage item, just drag to the left and the right, and the blue line indicates where it is going to go. Now we have the Google Map. Now, besides Google Maps, another reason you might want to use an embed code is to add a video to your web page. So we’ll do that now. We will do a Youtube video, although any web sharing site should have an embed code that you can use. We will grab the video from here, just grab a random video, go to share, and click on “embed”. In general, our recommendation is to uncheck the “show suggested videos” because you don’t know what might end up being associated with those recommended videos.
We will copy this embed code, go back here, paste it in, and then to add this video you just drag and drop it. And that’s how to add web videos via the “embed” function. And then lastly we go to Insert, we have our files.
Again, you can upload a new file just like you can with an image by clicking “Upload New File” from your desktop, or dragging it to this area. Once you have it here you can drag it to the Content Editor, however doing it that way will be just the same as linking text to that file. It will be the file name, and then it will link to that file.
Now, let’s say you’ve made a bunch of changes to this page, and you want to revert them. You can do that by clicking “page”, and then if you had a “published” version you would click it here, and it would revert it. I will show you what that looks like. So we do “publish changes”, now we have a published version.
So if we make changes, we can revert back to that published version just by clicking on it. We will want to validate that this is correct - this is the correct version that we want, and then once we are sure that it is, just click anywhere, and then click “Publish Changes”.
Once you do that, that will be your newest version. Click Page, and now we are working from a draft that comes from that published version. Other things interesting in this page area would be the Meta Title, Meta Description, and Meta Keywords. In general these are dealt with when it comes to Search Engine Optimization; I just want you to know they are here.
Alright, we are back to the Main Screen. We just dealt with Webpages. Now with Blog Articles, we can click on Blog Articles. We can create a new Blog Article by clicking “new blog article” and give it a name. Now, editing blog articles is just like what we did with other webpages. We click on the article, and click Edit Article. You have some additional options like the author here, but in general it is just the same. We click it and edit the article just like we edit a webpage.
For Checkout Orders, we click on it. If we have any orders, we will see them here. We can click on them, then click “dispatch” if we’ve already dealt with it. If we have orders that we haven’t dealt with, we will see them over here, over the X, with the number of orders that we have not dealt with.
Next, we have Website Settings. Of particular interest to us, is the Home page, so we can select which page is our homepage. Home is currently our home page so we are set there.
Checkout orders, so we can set what our merchant email address is here, for something like a Paypal email.
Blog Articles, we can allow comments.
Sitewide content. Now sitewide content is like editing a webpage except this is for our sitewide content like our Footer. So if we want to edit our Footer, you would click on it here. You might also have your Header here and editable, so this is where you would do that. Both are sitewide content. You click on the one you want to edit, it goes from the top down. 1, 2. You click it and edit it just like you edit a regular webpage.
Lastly, Social and Contact - so we can add a social link in here. Once we do that it will populate into any social links widget we’ve used.
Alright, the last thing we are going to take a look at our Statistics.
Now, your website Statistics give you a brief look at what’s going on traffic-wise with your website. As you can see here, it makes comparisons between the current month and last month. It gives you hits and visitors. Now, "Visitors" is the more important statistic, as hits can be anything from someone downloading an image to google searching your website. Also, we have the top browsers that are used, the operating systems, and the source. Also of interest would be the webpage that your clients end up using. In general, your homepage will be the most visited page, but then after that it’s interesting to see what people click on. That’s it for statistics.
Alright, well, I want to thank you for watching this tutorial video, if you have any problems let us know by emailing us at email@example.com. Additional articles can be found at training.v4.pdgoserver.com. You can also contact us through the Contact Support Button here, and you also have the Tech Support phone number here (888.354,4946 extension 2). Thank you and have a great day!
Take care, bye!
Video Tutorials on Specific Topics
How to Add E-Commerce in PD/GO v4
Ever wondered how to sell products from your website? Here's a 6-minute video where Karen Pittman, Project Manager of PD/GO Digital Marketing, explains how easy it is to add E-Commerce to your PD/GO Version 4 website!
For a fully keyboard-accessible alternative to this video, view it in Chrome or on any Android or iOS device, view it in Firefox with the YouTube ALL HTML5 add-on installed, or disable Flash in Internet Explorer.
Hello everyone, my name is Karen Pittman. I am the Project Manager for a PD/GO Digital Marketing. In this video, I will show you how to set up an online store and add products to your store on your website using version 4 of the PD/GO System. The first thing you'll want to do is log into the Web Manager. There are a couple of steps you need to take in order to get your eStore set up. We'll go here to Web Pages. There are three pages that you need to set up initially in order to get your online store going. You have a Checkout Page, an Order Success Page, and an Order Failed Page. So we will go in to edit the Checkout Page. What we need to do here is, we need to add a Checkout Core Widget to this page. In order to do that. we will click on Insert, then go to the Widget section, select Checkout and drag it into the Editor on the page and you will see that your Shopping Cart will appear. Of course, it's empty now as we haven't added any products to our cart so let's go ahead and Publish changes.
We'll go back out to our list of pages. The Order Success Page is a page with a short message that will let your user know that they have successfully made a purchase on your site. I have that set up here. You can see it says, “Your Order has been successfully processed.” If there is a problem with the purchase being processed on your site, the Order Failed Page will send a message to the customer and there's just a short message to let them know that the process failed and I have that set up here.
The next thing we need to do is go to Website Settings. once we are in website settings we want to go to the Checkout Orders option. So here where it says Paypal email, you want to make sure that you enter the email address that is associated with a PayPal account that you would like the funds to be transferred to. So we click on this field and you will enter that email address here and click Save.
A couple of other settings in this section also need to be in place. We will go here to Order Success Page, this is where we would select the page we set up for this purpose. Do the same for Order Failed page, click here and select the page we set up for this purpose. There's several other options here that we can go into detail on in another video. For the purposes of this video, we just want these main fields filled in.
Let's go back out so now we can create a product. to add to our online store that we just setup. In order to do that we are back at the main page of the Web Manager. We will scroll down, under the Storage items section and select Product. we will click, 'Add Product' to add a new product. We will call it 'Test Product'. If we wanted to change the name, you could click this button for Rename Products and change it to what every you like. In this video, we will set up a quick simple product. So I have that selected. So in order to do that I just need to set what my price will be. Let's say $75 and enter in that amount. Click Save. The only other field I really need to fill in is the number in stock and the reason why we do this is if you do not put numbers in this field, it will actually display an error message on our product page saying that we are out of stock on our product and we don't want that, so I just put in several ones and that will prevent that from happening. So these are the basic items that need to be filled in to setup a simple product. Now that we have that done we can click out of here.
So now that we have our product created I'm going to go back to Web Pages. I've created a page here called 'My Products'. I'm going to double-click it to Edit this page. There are a few things that I have already set up on this page just for layout purposes and making things look nice, so I've added a page title here, a little column layout with an image of a portfolio that we are going to sell and then the title of the product. What we're going to do now is we're going to actually add the product that we just created onto this page. To do that we click Insert, we go to the Product storage area here and select our Test Product that we created. I'm going to just drag it right underneath the product name. You'll see the price that we set is there, $75 and then we have our Add to Cart button that appears as well. So I'm just going to Publish changes. This is how the product page displays in the web browser. We have image, the title, the price, and the Add to Cart button, so if I click the Add to Cart button it takes me to the Checkout Page that we created. The Checkout Page has the product name (Test Product is what we named it), the number of this item that I want. I can change this quantity, let's say I want 3 and I click update quantities and it changes my total here. Then when I click on Checkout with PayPal, this takes the user to the payment page for your business PayPal account. They can log in and pay with their own PayPal account if they have one or they can check out as a guest and fill in their credit card information and billing information and pay directly through PayPal that way. That is it for setting up an online store and adding products to your store in version 4 of the PD/GO System. We hope that you found this video to be helpful.
Keeping your ADA site compliant
For a fully keyboard-accessible alternative to this video, view it in Chrome or on any Android or iOS device, view it in Firefox with the YouTube ALL HTML5 add-on installed, or disable Flash in Internet Explorer.
Hello and welcome. Thank you for choosing PD/GO digital marketing for all your digital marketing needs. And in the video today we're going to be taking a look at maintaining our ADA compliance. Now when it comes to ADA compliance, if you're watching this video, we should have already set up your website in an ADA compliant way. However, whenever you make changes to your website, you also have to make sure that those changes that you've made are also ADA compliant. And so that's what we are taking a look at today. With that said, let's dive right in.
I'm going into web pages, we'll use the home page as an example. And here we are. All right, now we see our homepage on the right side and the content editor on the left. When we make a change inside of the content editor, we'll see that change reflected here in the preview. Now the important thing to know is what we're seeing here is the change reflected on the main site. So this is not what the accessible site will look like. So the way that we view that is we publish the changes and we open up the accessible site in another tab. The way to do that is we take our domain in this example, the domain is ADAexample.pdgo.com and we add an 'a' in front of the www, so it'd be a.www.ADAexample.pdgo.com for us or for you, it would be a.www.yourdomain.com and then we would pop that in another tab and see what that looks like and I have it pulled up here. So this is our accessible site. You can see that a lot of the frills are removed. That's because the purpose of an accessible site is not necessarily to look fancy, but to lay it out easily so that something like a screen reader or something else that a person with a disability would use can actually understand the content and the layout.
We can see we also have the accessible navigation. As well as our accessible header. And accessible footer. Now these accessible headers and footers are not the same as our regular header and footer. And I will show you how to change these later on. Now when I refresh this, we'll see that that change is reflected.
So when we make a change to the regular site, it does reflect on the ADA site, but to view what that looks like, again, we go to a.www.yourdomain.com. There isn't another way to view it inside of the PD/GO system. So that's how we have to check it out. Now that we're here, I'm actually gonna run our ADA tester to make sure that it's in compliance before we get started. So an ADA tester we use is called aXe. You can see I already have added to get it yourself. The links are in the description of the video. It's available for both Chrome and Firefox. Since I already have it added, we'll go back to access it. We'll go to the settings here we go to 'more tools' and then we go to developer tools. Click this button. We can see we have aXe here. Now before I run it, I'm actually going to refresh the page. And now I can analyze it now. Here you can see this is what we want. There's no violations that have been found. If there were, it would show up here up at the top as well as with a description of what's going wrong and how to fix it. But since we don't have any of that, it looks like we're set.
Okay. Now we're going to get started with adding content. So as it relates to ADA compliance, the first thing to talk about or headings. So the first thing about headings is each page should have a heading one. If I were to remove this, hit publish. Let me go back and refresh. Now we see that it's complaining that there is no level one heading. It clarifies it here. However, to remedy this, we're just going to add it back in. I'm going to refresh.
And there we go. Much happier. The next thing to know about headings is that they should go in their logical flow. So a heading one should then proceed a heading two and a heading two should proceed a heading three, et Cetera, et cetera. So we shouldn't do those out of order. Meaning we shouldn't have a heading three go before a heading two, we shouldn't have a heading four go before a heading three. And another thing to know is that we can't skip, so we can't skip from a heading one to a heading three or from a heading one to a heading four, et Cetera, et cetera.
I'm going to make this a heading three just to show that. These headings are going to let the screen reader know what the logical flow is of the page and that's why this is important. We see the issue and again, we could correct it by removing this, but I'm actually going to correct it by changing it to a heading two. Some people will try to use the headings for emphasis and so rather than doing that, we would want to use the bold when we select a word. I'm gonna come back and refresh. Much better. To recap as it relates to headings: You need a heading. Headings must go in their logical flow heading one, heading two, heading three, heading four and you can't skip, so you can't go from a heading one to a heading three you can't go from a heading two to a heading four they must follow logically.
Alright, now let's talk about linking. You should be already slightly familiar with the linking system. However, we will run through here. To link words, I'm just going to highlight them. This menu pops up. We're going to choose link. We could paste in a link here, choose a webpage or choose a file. We're going to choose a webpage. Now we'll choose one of our internal web pages, Contact us, and click done. Now we see that we have the words linked on the left in brackets, and the actual link on the right in parenthesis. We see down here that it's a link. Now with internal links, there's nothing special we need to do for accessibility. However, when we are using special links like maybe we are sending someone off site or we are linking to a pdf or an email address or a telephone link, we need to add in a little something extra. For example, we'll go here. Click link, we're going to link off site, maybe to google.com, when linking off site, we want to tick this box: 'link opens a new window'. That way we're not sending someone offsite without them having an easy way for them to get back. If they want to get back, they'll just close that window. And click done.
We can see that opens new Window is represented here with this plus right after the link. And we see that it's linked. I mentioned there's a little something extra we want to add when we are sending someone off site or using one of those special links. What we want to do is, after the link here, we want to add another set of opening brackets, add the words 'opens a new window', and then closing brackets. Now it doesn't show up here because it's only for accessibility reasons that we add that, but someone who has accessibility needs would be able to understand that this link opens a new window.
So we just need that extra bit of explanation. If we were sending someone off site and the off site looked like our website so as to possibly confuse a visitor, we would want to add this little bit: "Going offsite may not be ADA compliant".
That way they know that they might be going to a site that might not match their accessibility needs. This would be useful for say, an IDX, which is themed to look like your website. However, an IDX wouldn't necessarily be accessible to a visitor.
Now, I mentioned other kinds of links.
I mentioned special linking like with a pdf or an email address or telephone link.
When we link an email address, the link is "mailto: ". What you're used to would be http. And then a website or https. Http stands for hypertext transfer protocol. Https stands for hypertext transfer protocol secure. It's over SSL. However, we're using a different kind of link. At its core a link,This, this first part of the link is just trying to tell your computer what to do with it. So we're going to use what's called a mail-to link.
Which is going to tell your browser that this is a mail link and then your browser can communicate with your computer and hand it off. We're going to have it open new window. And we still add this additional information. Linking a telephone is similar. Instead of a http link or a mail-to link, this is going to be a tel link short for telephone.
Link still opens new window. And then when we're linking a pdf, we'll actually just use the linking system and choose a file. I don't have any uploaded here. However, the concept is the same. We would select it, click done, make sure it opens new window and then give it this additional information. Next we have images, now to add an image we go to insert images. We drag and drop an image. The thing to know about images is that they need a good description. To get to the description area as well as linking we double click on the image.
Now from here we give it a description, press 'enter', and we're done. Again, the point is someone with accessibility needs should be able to know what's going on in the photo even if they can't see it. Additionally, we can link the photo, we can link it to one of our own web pages if we want. If we do that, that's that, nothing else is needed. However, if we link off site, we want the link to open a new window like before with linking. We want to add that additional 'Opens new window' comment. However we add it here at the end of the description. So to recap, we want to give it a very good description and if we link off site or if we were to link to a pdf, we still want it to open new window for the link and to give it this comment: Opens new window.
So that's images. Another thing to talk about as it relates to images and ADA compliance is that it's considered best practice not to have text embedded within an image. This is because it's hard for a screen reader to read that embedded text, an exception to this rule would be your logo as you are not expected to redesign your entire logo for this, but for regular images it's best not to have the text embedded. So one way we could get around this in the version four system is we can add a caption. Now you can see I have this image selected and I gave it the image style of caption. However, it doesn't currently have anything over here. What I would do is double click on the image. I get this image description option. I can pop in a caption and then press enter.
Now we can see that the image is overlaid with text, but to a screen reader this is going to be text and that description is going to become its 'alt'. So that's what the screen reader would read. Now when it comes to flyers, again, it's best practice not to have the text embedded within an image. And in fact by having the text as standalone like right here, that's going to be better for your search engines anyway as they'd be able to find that text as opposed to having it within the image, which it won't be able to.
If you do need to maintain that newsletter or or flyer or whatever it is that has all that embedded texts within it, what you can do is if you can fit it within the description, that's great. And that'll work. So with any image that has embedded text, like maybe this was a focal box that said 'about us', which took you to the about us page, you can put in here 'about us'. And so even though the screen reader wouldn't be able to read what it said on the image, it'd be able to read that alternate caption. So that's considered acceptable. If it has a lot of text, you can do this: We're going to go to widget, we're gonna go to expand collapse section. I would drop it below and here I could put image description in the title, and then I could place the block of content typed out that's inside of this image. That way when the screen reader hits the image, next it's going to go to the image description and it'll be able to read out that description.
Another way you can go about it is sometimes you will hit content that you can't make accessible. This should be rare, but in these cases what you can do is you can use an alternate content bar. You may have noticed that we have a content bar one accessible right here. This correlates to the content bar one, so if I click here, we'll see the 'my awesome company' logo, but when we click over here where it would be right around this area, it's not, and that's because this content bar one is being overwritten. If there's any content inside of the content bar one accessible, this is going to override the content bar one and that's why there is a horizontal rule invisible placed here is because it's forcing it to override that content bar one and not show this logo.
The same is true with this main content accessible. If we were to put content inside of here, it's going to end up overriding the main content bar. Now this isn't the best way to go about it. It's not preferred and that's because when you make changes, to the main content bar, you're also going to have to change it in the main content bar accessible. Whereas if you don't use those accessible bars, when you make a change to the main content bar, it'll automatically update for the accessible bar. Now you can see that this word 'override' is overriding all the content that was inside of that main content bar. Yeah, if we delete it. So again, this is useful for something like when you can't make a particular content accessible. However, again, it would preferred to just be able to make the content itself accessible so that you don't have to make changes over here into the main content. Then go back over to the main content accessible and change it there, et Cetera, et cetera. It just makes it easier on yourself. But what you would do is if you did have that content that is unaccessible in the main content area, you would add the accessible version, maybe it's just a spelled out text, into the accessible bar. Now another thing to consider as it relates to ADA compliance, it'd be your calendaring system. Now many people use Google calendar for their calendaring system, which is great and it's very user friendly. However, the problem is when presenting it on the website through its embed code, it is not accessible. So rather than using that, what we're going to do is we're going to use the built in calendaring system. So here I'm going to go to insert. You can go to calendars now you can see that I already have calendars here. If we wanted to create a new one, we just click add calendar, then press center, and then from there we can edit the calendar events. Now I'm going to drag and drop this calendar here and then we can see what that looks like here. If we click on the event, it'll pop up with additional information.
And we scroll over and it pops up with its description. Again to add an event, we would just double click on it or click edit calendar. Then we get to this point, we can click add event. If this is the date that we want to add the event to or select another date, we can see the dates that have an event already with that dot.
Now for ADA compliance, we go here to view the accessible version first, I'm going to want to make sure that I've published this and we see here what it looks like, so we have it in a list form for those who have accessibility needs, and again, we're here on the a.www.ADAexample.pdgo.com site. However, again this would be a.www.your domain.com, whatever your domain is, and that's how we'd viewed the accessible version of what we're looking at, and we can see right here, great event, we look over here, we can see the event there.
So that's how to use the accessible calendar.
Now another thing to talk about as it relates to ADA compliance is galleries. Now a gallery is just a collection of images that are drawn in by a category. Now this isn't meant to be an in depth look at creating galleries, but I just want to show you some particular behavior with them.
Now that I have this gallery here, we see these two images, but unlike when we just drag and drop an image by itself, we don't actually have the image over here to double-click. That is how we would normally add a description. Now if we hover over these, we'll see that this and this, they both have descriptions, although this one is much more descriptive than this one. Why is that? Well, it's actually drawing this description from the image name. So to change that we need to change the image name. Going back to insert, we can see that this flower's gallery draws images by the flowers category. So we would go back into images and then we would filter by that category. So that's the flowers category. It's already filtered by that. And then we can see this one doesn't have a good description so I'm going to add a better one. And there it is.
Another thing to keep in mind is when you are creating a link on as a top level page here, if you're going to create one to be a redirecting page, we have an option for that here redirecting page so that you can send someone off site, but for accessible sites it's best just to have it be its own page and instead of using this we would edit the page, create the link, make sure it opens a new window and add that additional 'opens new window' description option so that people can see that. Next when you are trying to edit the accessible header or the accessible footer we do that just like the regular header and footer inside of website settings, site wide content. Then we would select the particular one.
From here we can edit and publish. Now just keep in mind that you won't see the changes that you make in the accessible mode header or the accessible mode footer here. So again, when you make a change here, the way you're going to see it is by hitting published changes and then going to the accessible site, a.www.yourdomain.com and we'd see it up here for the header or down here for the footer.
Now another thing to deal with as it comes to ADA compliance are videos. Now this is a bit of an advanced topic. It does get a little bit complex and so if you want us to handle making your videos ADA compliant, we would be happy to, as the process can take anywhere between one and three hours to make a video compliant with the transcript and everything. But I am also going to list the steps so that you can do it for yourself as well. Now probably the easiest way and the less time consuming would be just to add a link to a youtube video because youtube has the closed caption feature someone with accessibility needs could just toggle it and then there you have your transcript and it'll read through it. So that makes life a lot simpler. So then you would just grab this link, we'd link it as always, best practice link opens new window.
We're going to add this opens new window description to the link. And now that's done. If we're going to add it to the page itself embedded, we can do that, but this is where it gets a little bit complex. So we would do share.
embed and we're going to grab this embed code.
Next we go to insert embed codes and we're going to paste it in. Now we're not done. Typically what we do is we set this width to 100% so that it responds to the size given and then you can make this change this height to what you need. We also need to set a title. Every embed code needs a title.
We also want to set an alt. I'm going to make it the same. Now we're still not done. At the end of this link we will want to set these parameters were options. So we give it to the question mark and then we are going to add html5=1 as well as add rel that stands for relevance or related videos equals zero so it won't show related videos afterwards.
Now we add that however we're still not done. We like to add a link underneath the video that says 'open video on YouTube', something like that. And then we also want to add a transcript, and the way we do that is we use the widget, we use the expand collapse section. Add video transcript And then inside of here we would put the transcript. Now it does take awhile for us to create that transcript and so that's where the bulk of the time would be when creating this video. Also you want to add this bit of text at the beginning.
I'll add this bit of text to the description as well in the video. And then after that you would add the transcript. Make sure when you're adding the transcript that you denote the different speakers. Speaker one, speaker two, et Cetera, et cetera. And that's it. Now I'm actually going to create an issue on purpose.
This isn't a good description anyway. If we analyze it, we see it's going to complain about it. That alternate text is pulled from that description. Since we removed the description, there's no alternate text. This is a problem. If we wanted to see what it was in specific, we could click highlight and it would point out the object that's creating this problem. If we had multiple objects creating the same problem, we can flip through them using the arrows here. Now that we know what it is, I'm going to take this. pop it in. Hit refresh and click analyze. Now we'll want to do this when we create or edit a page and hit publish, we will want to analyze it with aXe. That way we are sure that we're continuing to keep it in compliance. Now if an error pops up that you don't understand, no worries either by googling or by sending an email to firstname.lastname@example.org we can take a look at it and help you resolve the issue.
To recap, when it comes to accessibility, it's important that images have descriptions, that they don't have texts embedded within them unless it's a logo, or if it's a short amount of text you can put that short amount of text inside of the description itself. It's important that you add that linking area description so that a client can know that it's going to open in new window. It's important that you use accessible content including an accessible calendar, accessible PDFs that don't have the text embedded but that are actually readable, accessible videos meaning that you have the transcript available for them to read as well. Also, it's important that you continue to check your website and web pages that you edit to make sure that they continue in compliance. aXe updates itself with the newest guidelines, so it's good to run it even if you haven't made a change in the recent past. And lastly, when you have content that can't be made accessible at all, you can use the accessible bar that's the alternative to that particular bar, like main content accessible or content bar one as a replacement for it. So this has been a look at keeping your website in compliance. Thank you for watching. If you have any questions, don't hesitate to reach out to email@example.com otherwise, thank you and have a great day. Take care. Bye Bye.