Adding aria-label, alt and title attributes

<< Click to Display Table of Contents >>

  System Setup and Customization > Control Panel > Using chat button codes > Standard codes >

Adding aria-label, alt and title attributes

General

 

ALT, TITLE and ARIA-LABEL attributes for the chat button icons

 

This will add alt, title and aria-label attributes to the online and offline chat icons.

 

Method 1 (you already have the code and you don't want to replace it)

1.In your chat button code, find the new Date().getTime() part.

2.Right after it, insert the following line (quotes are required!):

 

+"&online-tooltip=Tooltip%20Text&offline-tooltip=Tooltip%20Text"

 

Method 2 (code from scratch)

1.In your account, go to Chat Button Codes > Passing Information from Your Website Scripting to Operators.

2.In the Field Name input, enter online-tooltip, then next to it in the Field Content input, enter the value for your online chat button ALT/TITLE/ARIA-LABEL attribute (for example, chat online).

3.In the next Field Name input, enter offline-tooltip, then next to it in the Field Content input, enter the value for your offline chat button ALT/TITLE/ARIA-LABEL attribute (for example, chat offline).

4.Copy the generated code and paste to your website source code.

 

Explanation:

&online-tooltip - Parameter for the online chat button tooltip

&offline-tooltip - Parameter for the offline chat button tooltip

Tooltip%20Text - A custom text that will be used as alt, title and aria-label

%20 - Replacement for spaces

 

Example:

 

Replace YOUR-ACCOUNT-NAME in the code with your actual account name or account hash.

 

<!-- BEGIN ProvideSupport.com Graphics Chat Button Code --> 

<div id="cizVlM" style="z-index:100;position:absolute"></div> 

<div id="sczVlM" style="display:inline"></div> <div id="sdzVlM" style="display:none"></div>

 <script type="text/javascript"> var sezVlM=document.createElement("script");sezVlM.type="text/javascript"; 

var sezVlMs=(location.protocol.indexOf("https")==0?"https":"http")+"://image.providesupport.com/js/YOUR-ACCOUNT-NAME/safe-standard.js?ps_h=zVlM

&ps_t="+new Date().getTime()+"&online-tooltip=Live%20Chat%20online&offline-tooltip=Live%20Chat%20offline";

setTimeout("sezVlM.src=sezVlMs;document.getElementById('sdzVlM').appendChild(sezVlM)",1) </script>

 <noscript> <div style="display:inline"> <a href="http://www.providesupport.com?messenger=YOUR-ACCOUNT-NAME">Live Help Chat</a> </div> </noscript>

 <!-- END ProvideSupport.com Graphics Chat Button Code -->