Service Portal - Forcing ADA Compliance on Knowledge

[David Cole1]

Problem:

In a ticket assigned to our dev team, it was brought our attention that certain formatting (in our case, specifically; colored text, highlighting, fonts, and underlines) were not ADA compliant, and it was requested that we remove these options in Knowledge Articles.

Given there were valid use cases for some of these formatting options, instead, our solution was to make use of the Accessibility option in a user's Preferences pane to force Knowledge articles to be ADA compliant, even when they were not.

Pre-requisites:

Ensure that users have a way to toggle their "Accessibility enabled" option from the Service Portal. Our instances uses the widget on the user_profile page:

If your instance is still using the OOB kb-article-content widget, create a clone, and ensure that all pages where KBs are displayed are using the cloned widget, as this is what you will making edits to.

Setup:

• Server script:
  
  • Anywhere in the Server Script (I put it at the bottom), place the following code:

    (function(){
    	function getUserPreferences(userID){
    		var user = GlideUser.getUserByID(userID);
    		return {
    			accessibility: {
    				key: 'glide.ui.accessibility',
    				value: user.getPreference('glide.ui.accessibility') == 'true'
    			}
    		};
    	}
    	
    	data.kbAccessbilityEnabled = getUserPreferences(gs.getUser().getID()).accessibility.value;
    	
    })();

  • The getUserPreferences() function is genericized in my case, as we re-use this code across a few widgets, however in this case, if desired, the code can be boiled down to:
    

    data.kbAccessibilityEnabled = (gs.getUser().getPreference('glide.ui.accessibility') == 'true');

    
    
    
• Client controller:
  • Determine what formatting you want to remove, and build a function that will:
    • Take a string as an input
    • Return the "scrubbed" string
    • In our case, our function:
      • Replaces underlined text with bold text
      • Removes color, highlights, and fonts from text
  • At the top of the Client Controller (inside of the function($rootscope...), place your "scrubbing function":
    

    function($rootScope, $scope, $window, $timeout, spUtil, $sce, spModal, $uibModal, $location, cabrillo) {
        
    	//dxcrcc - 9/22, function to scrub formatting from KB data if Accessibility is enabled
    	function accessibilityFormatting(string){
    		
    		//Replace underlines with bold
    		string = string.replace(/(?:text-decoration):[^;"]+;?/gi, "font-weight: bold;")
    		
    		//Remove color (text coloring), background-color (highlighting), and font-family (fonts)
    		return string.replace(/(?:(?<!-)color|background-color|font-family):[^;"]+;?/gi, '');
    		
    	}
    ...

  • Look for the following block, which handles KB Content Population. In our case, it was on line 21. :
    

        if (c.data.isValid) {
            if (c.data.kbContentData && c.data.kbContentData.isTemplate) {
                c.data.kbContentData.data.forEach(function(field) {
                    if (field.type == 'html')
                        field.content = $sce.trustAsHtml(field.content);
                });
            } else {
                c.data.kbContentData.data = $sce.trustAsHtml(c.data.kbContentData.data);
            }
        }

    
    
    • Both the 5th, and 8th line of that code block will need to be edited:
      

          if (c.data.isValid) {
              if (c.data.kbContentData && c.data.kbContentData.isTemplate) {
                  c.data.kbContentData.data.forEach(function(field) {
                      if (field.type == 'html'){
      					//Edited to remove select formatting when applicable
      					field.content = $sce.trustAsHtml(
      						c.data.kbAccessibilityEnabled ? accessibilityFormatting(field.content) : field.content
      					);
      				}
                  });
              } else {
      			//Edited to remove select formatting when applicable
                  c.data.kbContentData.data = $sce.trustAsHtml(
      				c.data.kbAccessibilityEnabled ? accessibilityFormatting(c.data.kbContentData.data) : c.data.kbContentData.data
      			);
              }
          }

• Results:
  
  A test knowledge article without Accessibility enabled:
  
  
  
  Compared to the same article with Accessibility enabled: