Accessibility

Accessibility

Requirements

KCC is commited to meeting the W3C Web Content Accessibility Guidelines (WCAG) 2.0, Level AA requirements.

Inline SVG Requirements

An Inline SVG is <svg>...</svg> code that appears directly in the sites' HTML with no <img> element to house it. This is the preferred method for displaying the KCC logo.

The problem with using an SVG as a graphic is that the alt text attribute cannot be used on an <svg> element. To accommodate individuals using assistive technologies like screen readers, accessibility must be handled another way.

When using an inline SVG, there are 2 important rules to follow:

1. Remove any document-type declarations.
2. Accessibility must be handled with a <title> element inside & aria attributes on the SVG.

Remove Document-Type Declarations

An SVG file that is referenced by an <img> element and the <svg> code used inline with HTML has one important difference--An SVG file has a document-type declaration and inline SVG code does not. It is not valid HTML to have another document-type declaration ( <?xml version="1.0" encoding="utf-8"?> ) inside an HTML document.

To use the following code from this example svg file, lines 1 and 2 must be deleted:

            <?xml version="1.0" encoding="utf-8"?>
            <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 487.49 163.16" style="enable-background:new 0 0 487.49 163.16;" xml:space="preserve">
            
            <-- SVG code omitted bellow -->
            ...
          

Inline SVG Accessibility

KCC is required to be section 508 compliant and conform to the W3C Web Content Accessibility Guidelines (WCAG) 2.0, Level AA. Therefore, images and graphics used in KCC websites must provide descriptive text for individuals requiring assistive technologies such as screen readers.

For an inline <svg>, a <title></title> element should be used. There are 3 requirements for using a title to provide an alternate description when using an inline SVG as a graphic:

1. The <svg> tag must have an aria-labelledby attribute.
2. A <title> tag with an id referenced by the SVG's aria-labelledby attribute.
3. The <title> tag must contain the descriptive text for the graphic and have a lang attribute ( lang="en" for a description in english).

            <div>
              <p>Some text</p>
              <svg version="1.1" id="Layer_2" aria-labelledby="color-logo-title" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 822 686" style="enable-background:new 0 0 822 686;" xml:space="preserve">
              <title id="color-logo-title" lang="en">KCC color logo</title>
            
              <-- SVG code omitted -->
            </div>
          

Bootstrap 4 Overrides

KCC uses Bootstrap 4 stylesheet and JavaScript libraries. The background color used in Bootstrap 4's Primary Button styling does not provide enough contrast in color from the button's white text to meet AA Level accessibility standards.

                  .btn-primary {
                    color: #fff;
                    background-color: #007bff;
                    border-color: #007bff;
                  }
                
                  .btn-primary:hover {
                    color: #fff;
                    background-color: #007bff;
                    border-color: #007bff;
                  {
              

                  .btn-primary {
                    /* Bootstrap 4 overrides */
                    background-color: #0051a7 !important;
                    border-color: #003773 !important;
                  }
                
                  .btn-primary:hover {
                    /* Bootstrap 4 overrides */
                    background-color: #022b55 !important;
                    border-color: #021e3d !important;
                  {