3 Ways to Keep Your Code ADA-Compliant in Kentico

By Shelby Tieche on August 22, 2017

3 Ways to Keep Your Code ADA-Compliant in Kentico
A while back we had a client who requested that their website be fully ADA-compliant and web accessible. My initial thought was ‘What is ADA Compliance and why is it important for a website?’ After researching the importance of web accessibility, I soon learned that it is something that developers and web clients across the world have become more aware of recently in the tech world.

Web accessibility is the design and coding practice of making your website accessible to all audiences, including those with disability. In doing so, the information on your website should be equally available to all users. Web accessibility considers both visual and auditory elements of a website. To make your website accessible, you need to be aware of the Web Content Accessibility Guidelines (WCAG) 2.0 Accessibility Rules & Guidelines. This blog will explain various Kentico portal practices that you can apply to your site to keep your content ADA-compliant. It is important to note, that although these tips are important, these solutions cover only a few key guidelines. There are plenty of other rules your site must follow listed in the WCAG 2.0 Accessibility Rules & Guidelines as well.

Tips & Tricks

1. Add Skip to Content Links


Adding a ‘Skip to Content’ link on every page of your site allows users, who use tabbing to navigate through content on the site, to skip any redundant links at the top of the webpage that are global across the site. To add this link, you first need to add an anchor tag with a skip-to-main-content-class to the top of every page. You can do this by adding the example HTML below to the top of the Master Template in a Static HTML Web Part before the global navigation Web Part in the header. Doing so will make this a global link across all pages on your site.


 
<a href=”#main-content” class=”skip-to-content” title=”Skip to main content section”>Skip to Content</a> 


Once this HTML is added, be sure to include the CSS
 
.skip-to-content {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: 0;
}

.skip-to-content:focus, .skip-to-content:active {
    position: static;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
}

Or if you prefer SASS
 
.skip-to-content {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    margin: 0;   
    &:focus, &:active {
        position: static;
        height: auto;
        width: auto;
        overflow: visible;
        clip: auto;  
    }
}

Having the link hidden with css allows the link to show only when the link has an active focus state applied to it through tabbing navigation. To have this work correctly, be sure to wrap all the content in the Master Template with a div element that has the ID of main-content, or any ID name that will match the anchor tags target. 

2. Custom Kentico Form Layouts


When you create a new form in Kentico with either the Form Builder or Field Editor, the default wrapper of the form is in an HTML table layout. WCAG rules state that you should not have any table-based layouts on your site. To have your site pass these table-based layout rules, you can create a new custom layout with divs, and target each element through a global class for the divs. 

To edit the custom layout of a form in Kentico:
  1. Edit the form
  2. Select the Layout tab
  3. Select “Use Custom Form Layout” (be sure HTML is selected in the dropdown).

You then can add your custom HTML in the WYSIWYG along with the Insert Field section to add the corresponding fields from your form to the new layout. Below is a HTML code sample of what I typically use when I create custom layouts:
 
<div class=”test-form”>

   <div class="form-input">
      $$label:TextBoxControl$$
      $$input:TextBoxControl$$
      <div class="error-message">$$validation:TextBoxControl$$</div>
   </div>

   <div class="form-input">
      $$label:TextBoxControl1$$
      $$input:TextBoxControl1$$
      <div class="error-message">$$validation:TextBoxContro1l$$</div>
   </div>

   <div class="form-input">
      $$label:TextBoxControl2$$
      $$input:TextBoxControl2$$
      <div class="error-message">$$validation:TextBoxControl2$$</div>
   </div>

   $$submitbutton$$

</div>

Having custom layouts for your forms are very important for accessibility and ADA compliance purposes. If a table-based layout is used on a site, a user who reads the content with a screen reader would not be able to access the content from the table or a form’s inputs and labels correctly. Using a custom layout with divs and global classes is an easy way for a screen reader to access the information from the form.

3. Follow Standard ADA Compliance and Accessibility Rules 


These rules are a guide not only for Kentico sites, but for any live site to follow. There are a plethora of rules at various levels, labeled A, AA or AAA  based on their complexity, that developers need to be aware of. These guidelines can be applied to your site from anything from CSS adjustments, to being aware of the content that your client will be adding to their site. 
  1. Content images shouldn’t contain information that should be rendered in text. If you have information in an image rather than text, a screen reader cannot read that information to the user. This is something that you should make your clients aware of when entering the content for their site.
  2. Add a show-for-sr class to any element you don’t want visible on your page that  contains important screenreader information. This class can be applied to any span or HTML element that contains text related to an associated icon or visible element on the page to give the user more information about it. Although not preferred because having watermarks on inputs aren’t level AA compliant, this class can be used to hide labels on forms as well. 
  3. Every element should have a visible focus state. This will allow a user to see what element is visibly selected on the page.


 
.show-for-sr {
   position: absolute;
   left: -10000px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

Wrap Up

These three tips are solutions common accessibility issues with websites today, but they are just a few of many ADA and web accessibility rules. There are various Web Accessibility Checkers that you can use for free to see how accessible your website is. WAVE Web Accessibility Evaluation Tool is a great resource to start checking the accessibility of your website, and to see what needs to be fixed so your code will follow these ADA WCAG guidelines.

With web accessibility becoming more of a prominent issue in web development today, it is important that you and your team are aware of these guidelines. Take the time to educate yourself as a developer to write code that will keep your website accessible to everyone. By following these tips and tricks on how to keep your site web accessible, not only will you improve your Kentico site to further follow these WCAG rules, but you will expand your code skillset to be aware of these guidelines for future projects as well. 
 

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Advice posts
Start a Project with Us

About the author

When Shelby was thirteen she didn’t realize that the hours she spent staying up late building themes and layouts for MySpace and Xanga pages would later inspire her future career choice. As a recent grad from Michigan State and an even more recent Texas transplant, she now applies her knowledge to the front-end development team at BizStream. Shelby is excited to be back in the Grand Rapids area where she frequents music venues and local breweries.

View other posts by Shelby

Subscribe to Email

Enter your email address to subscribe to the BizStream Newsletter and receive updates by email.