Install the A11y Center

(00:05) Hi and welcome to Accessible Web RAMP. In this video, I’m going to show you how you can activate, install and customize your Ally Center.

 

(00:14) Your Ally Center is included with your RAMP account and is a great way to mitigate legal risk, provide users with important accessibility information, and publicly demonstrate your commitment to accessibility.

 

(00:27) This is what your Ally Center might look like when installed.

 

(00:30) We have it installed as a plain text link in RAMP, but there are several other customization options which I will demonstrate to you in a little bit.

 

(00:38) Your Ally Center contains an accessibility policy, a get help form, and optionally your accessibility log.

 

(00:46) Your Ally Center might look a little bit different depending on whether or not you’re a part of our Ally Partner program. If you’re not a part of the Ally Partner program, this blue bar won’t appear on the side here, so it’ll be formatted slightly differently.

 

(01:02) Setting up your Ally Center is simple. All you need to do is navigate to this Ally Center tab on the left hand side of RAMP, where you’ll find instructions for installing and configuring your Ally Center.

 

(01:16) First, you’ll be prompted to set up your accessibility Log and Accessibility Statement. Since we recommend installing the Ally Center as soon as you’ve set up RAMP, many users will choose to uncheck this box to keep their accessibility log private, at least until they have a few entries in their log to display publicly.

 

(01:36) You can go back under RAMP settings and adjust these settings at any time. So once you’ve entered a few log entries, you can go and make your accessibility log public. For now, we’ll keep this box unchecked so it will not show up in our Accessibility Center.

 

(01:55) Next, we’re going to set up our Accessibility Statement.

 

(01:58) We provide a default statement which you can choose to use, or you can uncheck this box and provide your own custom accessibility statement here. For this demo website, we’ll use the default statement and I’ll also add this third party disclaimer, which is good to add if you have any third party elements that are not under your control.

 

(02:19) Finally, we’ll save our log and statement settings and move on to the next step, which is setting up an accessibility advocate.

 

(02:28) Your accessibility advocate should be an organizational member who can respond promptly to help form submissions and help provide reasonable accommodations for any users who may encounter an accessibility barrier on your website.

 

(02:43) I’ll just enter this test persona here for my demo website’s Ally Center. And go ahead and save this advocate information. This will prompt us to move on to the next step, which is installing and customizing our Ally Center button on the website.

 

(02:59) If you’re working with a WordPress website, you can use our WordPress plugin to install the Ally Center. If you’re not working with a WordPress website, installation is still super easy. All you need to do is copy this code snippet here and paste it as close to the closing body tag of your site as possible. Where this closing body tag is located will vary depending on your site and its configuration.

 

(03:26) The website I’m using today happens to be built on WordPress so we can go ahead and use our WordPress plugin to install the Ally Center.

 

(03:34) I like to copy this API key just in case and then we head on over to the WordPress admin area. In the WordPress Admin suite, you’ll go to the Plugins section and then add New. In the plugins library, search for Accessible Web or Accessible Web Ally Center. There should be a plugin entitled Accessible Web Ally Center. We’ll click Install Now on it. And then activate.

 

(04:07) This will drop us in the Plugin section of the WordPress Admin suite and here we can just check the Ally Center settings to make sure that the correct API key is listed. This is the correct API key. If it wasn’t, or if this API key field was blank you could just paste the API key that was provided in RAMP. So we’ll save settings and head on back over to RAMP to verify installation.

 

(04:35) This may take up to 30 seconds, so give RAMP a minute.

 

(04:40) Installation has been verified.

 

(04:44) Once installation has been verified, we’ll proceed to the final step which is activating your Ally Center. We’ll click Activate and this should trigger the Ally Center to appear on the website.

 

(04:59) We’ll just refresh the page, and there we go. The Ally Center has been installed.

 

(05:15) Now that the Ally Center has been successfully installed, we can go ahead and customize it. You can also customize the Ally Center before activating it on this install and customize button step. You’ll see at the bottom there is an advanced installation options menu you can open up. This contains the code snippet that you can use to make your Ally Center appear as a plain text link like we have in RAMP here. You can also follow this link to RAMP settings where you can view all of the advanced installation options, including a fixed button instead of a floating button and this pill shape alternative fixed Ally Center button, which can be embedded in your footer or header or wherever you want it to appear. There’s also several color options for this button, including blue, blue outline, red, and red outline.

 

(06:16) So for this example, I think I will start by using the plain text button or the text-only installation option. What we’ll do is we copy this code snippet and you’ll paste it where you want it to appear on your website. This could be the footer or a header menu, whatever works best for you.

 

(06:36) So we’ll head back over to the WordPress suite in our case. Where you install this will depend on your website and its configuration. For me, we’re going to go into our Theme Editor. I want to install it in the footer, so I will find that part of my template and we will paste it over here. Then we will save and view this updated option.

 

(07:20) Now the Ally Center is installed and customized, you can always go back and adjust settings or change customization at your own convenience. There’s a couple of ways to do this. The easiest is by going to RAMP settings, Ally Center tab. Here you’ll find a variety of customization options. If your website has the regular just default floating button, you can use these options here, the button position and margin options to adjust its position on the page. I’ve already used one of our advanced installation options adding this additional code snippet to make it appear as a text link. Let me show you what it looks like if I install a fixed alternative button instead so I’ll use the full color one.

 

(08:14) We’ll copy this code just like I did with the text-only installation option, and I’ll head back over to the WordPress suite where I will then paste this instead of that text-only option I had pasted before. So I’ll replace that and we will save.

 

(08:35) Now that’s been saved, we’ll head back over to the site and refresh the page. And this is what the alternative fixed button looks like. It’s a pretty attractive option. It really brings a little bit of attention to the accessibility statement and get help form. It works just like the default button or the text-only link option, though. They’re really just appearance based.

 

(08:59) Alright. Now we’ve covered how you install and customize the Ally Center. Important things to remember, you can adjust customization options at any time. You need both this code snippet or the WordPress plugin, depending on which one you used, in addition to the customization code snippets. So you do not replace this code snippet with the customization code snippet. That’s important to remember. Other common troubleshooting issues we run into, make sure your Ally Center remains activated. If you uncheck this box or deactivate your Ally Center, it will disappear from your website.

 

(09:48) Finally, if you need to adjust your accessibility log settings and make it public or make it private at any point in time, you can do so from RAMP settings, Ally Center tab, and just by checking or unchecking this box here. If I check it and then save settings and refresh the page, my log will appear in the Ally Center.

(0:00) Hi and welcome to Accessible Web RAMP. In this video, I’m going to show you how you can activate, install and customize your Ally Center.

 

(0:07) This is an example of what your Ally Center could look like. Although there are a few variations on this design, you’ll see that in RAMP we have it installed as a plain text link in our footer.

 

(0:17) There are a few other customization options you can use when you install it on your website that I will show you in just a little bit.

 

(0:24) So first, what is the Ally Center?

 

(0:26) So your Ally Center is included with your RAMP account and includes important accessibility information that your users need.

 

(0:34) This includes your accessibility policy, a get help form for issue reporting if users encounter accessibility issues on your site. Additionally, you can choose to display your log of accessibility improvements publicly, though this can also be kept private if you prefer and if you’re part of our Ally Partner Program, there’ll be a tab on the program and what that means for you and your website.

 

(0:57) Alright, so let’s jump into activating and installing our Ally Center.

 

(1:02) Within your RAMP account, you’ll want to go to RAMP settings in the lower left hand corner and navigate to the Ally Center tab.

 

(1:10) You’ll see here in this tab there are a few different customization options that need to be set up before you can install your Ally Center.

 

(1:19) Alright, so before you can install your Ally Center, you’ll need to activate and configure it.

 

(1:23) Make sure that the box next to activate Ally Center is checked. This means your Ally Center is activated and ready to be configured. We’ll scroll down, you’ll see you have the option to make your accessibility log public or keep it private. Right now the box is checked to keep it public but for this example site, I don’t have any log entries yet, so I’m going to keep it private for now. Uncheck that box.

 

(1:45) We pre populate your accessibility policy with a default policy but we do encourage you to customize this for your organization and your organization’s accessibility goals.

 

(1:55) And finally, you’ll see that we have the accessibility advocate form at the bottom of this page. It’s very important that you fill this out with a contact from your organization who users can reach out to if they encounter any accessibility issues on the site. It’s important you also provide multiple means of contact like email and phone number in case a user is unable to contact by email or unable to call so there’s multiple means of contact.

 

(2:19) Alright, so finally, we’re going to click save settings, and the Ally Center is ready to be installed.

 

(2:25) Alright, so you’re gonna go up to the right hand corner here and click on installation API key to open up the Ally Center installation instructions menu. You’ll see here that if your website is built with WordPress, we have a WordPress plugin that you can use to quickly and easily install your Ally Center.

 

(2:43) If your site is not built on WordPress, you’re going to want to copy this code snippet and paste it as close to the closing body tag as possible on your site.

 

(2:51) I’m going to demonstrate how to do this on a WordPress site and then I’ll show you how you can customize your Ally Center once it has been installed.

 

(2:59) Since I’m using a WordPress site, I’m going to copy this API key here and head on over to my WordPress account. Within WordPress, you’ll navigate to the plugins tab and find the option to add a new plugin, click Add New and then we’ll search for the Accessible Web plugin. It’s going to be titled Accessible Web Ally Center.

 

(3:24) So you’ll scroll down to find it and here it is. And we’ll just click Install Now to install the plugin.

 

(3:29) Once it has been installed to WordPress, you should see the option to activate it, click Activate. This will bring you to your plugins menu and from here, you can click on Settings under your allies your Accessible Web Ally Center plugin.

 

(3:45) Clicking on Settings, you’ll see that there is a little field here you can enter your API key so I’m going to paste the API key that I copied over from within RAMP and I’m going to click save settings.

 

(3:57) Oftentimes, this API key will automatically populate, but I just like to copy and paste it to ensure that it is matching the API key provided in ramp. If the API key within the plugin here does not auto populate to match the one that is in RAMP, then your ally center will not properly install. So if you run into any issues installing your Ally Center via the plugin, I do encourage you to go into the plugin settings and check that the API key provided in WordPress is the same as the API key provided in your Ally Center installation menu.

 

(4:30) Alright, I’m gonna click save settings and this should have installed my Ally Center.

 

(4:34) So head on over to the site and we’ll just want to refresh the page. Let’s see. Yep, there we go. This is my Ally Center.

 

(4:43) You can see it looks a little different on this website because I’ve chosen to keep my accessibility log private and because this website is not enrolled in our Ally Partnership Program, so they don’t have the Ally Partner badge or tab for the Ally Partner Program.

 

(5:02) Now that it’s been installed to your site, let me show you how you can customize the appearance and location of your Ally Center.

 

(5:11) If you used the plugin or code snippet listed at the top of the Ally Center installation instructions panel, then by default, your Ally Center will install in the form of a floating badge. This badge stays in a fixed spot on your site and floats over your website content. As you can see, now it is located in the left hand corner of the site and this is just one of three different appearance options, you have your Ally Center but if you choose to use this one, let me show you how you can adjust its location on the page.

 

(5:42) So we’ll head back over to the Ally Center tab within RAMP settings and you can see right here there is some control settings for the button position and margins.

 

(5:51) If I want it to be positioned on the right, instead of the left, I can just switch it to the right side and then I can adjust the margins either on the right or the bottom of the badge as well.

 

(6:02) So say I want to increase the bottom margin a little bit and make it 18. I’ll save settings and then heading back over to the site, you can see that that just automatically changed the location of your Ally Center so now it’s located on the right hand side of the site and there is an increased margin with the bottom of the page.

 

(6:22) So that is one location customization option but say you wanted your Ally Center to appear as a plain text link or as some like little pill badge in your footer. You can do that as well.

 

(6:34) So from the Ally Center page within RAMP settings again, this time, you’ll click on installation and API key to open up the installation instructions menu for your Ally Center.

 

(6:44) If you wanted to install your Ally Center in the form of a plain text link, like we have within RAMP, you’ll scroll down to show text only installation options. Clicking on this will open up the instructions for installing your Ally Center or customizing your Ally Center to appear as a plain text link in your footer. I’m going to copy this code snippet and then head on over to my WordPress account to put it in.

 

(7:10) So I would like to position my plain text link to the Ally Center in the footer. So I’m going to head on over to my appearance tab and the theme file editor. This is how my theme is set up within WordPress but it may vary depending on the theme you’re using.

 

(7:25) If you run into any issues locating the correct spot to paste your code snippet get in contact with our team because we’re more than happy to help you figure it out.

 

(7:35) Alright, so opening up the footer php file within my theme file editor. I’m going to paste this code snippet I copied from RAMP right above my body tag just so it’ll appear in the footer of my site. I’m going to click update file to Save Settings, and then head back over to the site just to make sure that it updated. We’ll refresh the page again and we’ll scroll on to the bottom because now my Ally Center link is fixed to the footer and you can see it just appears as a plain text link that matches my existing theme color. Clicking on this opens up the Ally Center as you’d expect.

 

(8:12) So that would be location that would be the customization option number 2.

 

(8:18) There is a third appearance option you can choose from as well.

 

(8:21) If we head back over to our RAMP settings, you can see that there is an alternative fixed Ally Center button and a fixed Ally Center button option.

 

(8:32) This is what the button looks like. It’s an elongated pill that reads accessibility within it.

 

(8:37) Using this drop down menu from the advanced installation options menu within RAMP, you can adjust which color your Ally Center button appears as. Say you wanted it blue or blue outline. You could also do red, or red outline. For the sake of this example, I’ll stick with the full color version and I’m going to copy this code snippet here.

 

(9:03) You can adjust additional attributes about your Ally Center button. But just make sure to follow best accessibility practices to maintain accessibility on your site.

 

(9:14) So head back over to WordPress one last time, you know, erase the prior code snippet I pasted because we’re not going to use the plain text link for this part.

 

(9:23) Then I’m going to paste the code snippet for the Ally Center button.

 

(9:28) Again,I’m pasting it in my footer php file, because I want it to be located in the bottom part of my footer. And then I’m going to update the file. Once the setting has saved, I’ll head back over the site one last time and I’ll refresh my page. Scrolling down to the footer, you can see that now my Ally Center has been installed in the form of a button. Clicking this button opens up the Ally center. You can adjust the color and position of this button by getting into the code a little bit. You’re welcome to do so just to make it fit your theme perfectly.

 

(10:03) Alright if you run into any issues installing your ally center or if you have any questions about the Ally Center please don’t hesitate to reach out to our team we’re more than happy to help or walk you through installation.