Install the A11Y 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.