How to get Confluence WCAG 2.0 AA Compliant

Zach Mitchell February 8, 2018

Hey all,

Just wanted to share the steps i have taken to make our Confluence Servers WCAG 2.0 AA Compliant. Please leave a comment if you have done anything differently or have more to add. We are running v6.4.3 currently with Themebuilder to do some of the finer interface edits with.

 

Here are the list of items i have adjusted on our confluence 6.4.3 instance to get it nearly compliant. My notes are included in each section as to why i have made these changes and what i have determined to be underlining issues, which should be addressed to meet WCAG AA compliance. This could also be used to meet the 508 Compliance w, which Atlassian is currently working on as their priority.

Color Scheme

Header Color affects three different types of elements.

  • Headings (h1, h2, h3, h4)
    • Is the primary color set
  • Sub Headings (h5, h6)
    • is a lighter version of the primary color set

 

Table Headers (th)

  • Primary color must meet contrast ratio on a gray background in the table header bar.

These three should be split into different options as your primary color may meet the 4.5:1 Contrast Ratio required by WCAG 2.0 AA but with the gray background on table headers and the lightened version automatically created for the sub headings will not.

Stylesheets

Global Stylesheet is the only stylesheet to affect all of the following.

  • Spaces
  • Login
  • Edit Pages

Admin Pages are not affected by the global stylesheet.

This makes adjusting an individual space's stylesheet problematic as they will not see the changes while editing the page. Only changes included in the global stylesheet will be seen while editing.

When using the Global Stylesheet if a space has its own stylesheet (custom.css) it will not load the Global Stylesheet.

Links

Color schemes link color will adjust it throughout the Spaces, Login Page, Edit Pages and Admin Pages. But it does not allow the ability to add an underline as an option. Individual space stylesheets which overcome this issue will only be applied to the Space level and not the Edit view as well (which need to be located in the Global Stylesheet).

Links inside of Information, Note, or Warning Macros will need to be styled independently and checked for 4.5:1 contrast ratio.

Document Ready Javascript

All of the following JavaScript/JQuery is supplemented via a JQuery document ready function.

$(document).ready(function(){
    <adjustments go here>
}

 

Labels, Roles and Aria-Labels

Filter inputs and Synchrony Pre-loaded Edit Forms. Synchrony pre-load container edits must be put on a delay otherwise the container has not been created at the time of the adjustments.

Filters in a Dialog i have not yet tried to adjust but they do require a Label and Submit button (#create-dialog input#createDialogFilter)

$('#header nav').prop('aria-label', 'primary');
$('div.aui-sidebar-body nav').prop('aria-label', 'Secondary');
$('nav.aui-navgroup.aui-navgroup-vertical').prop('aria-label', 'Side Menu');
$('nav#help-menu-link-content, nav#admin-menu-link-content, nav#user-menu-link-content').attr('role', 'menu');
$('nav#help-menu-link-content, nav#admin-menu-link-content, nav#user-menu-link-content').attr('aria-label', 'menu');
$('#nav-sidebar nav').prop('aria-label', 'side menu');
$('#nav-sidebar nav').prop('role', 'navigation');
$('div.search-macro-query input').prop('title', 'Quick Search');
$('div.search-macro-query input').before('<label class="assistive">Quick Search</label>');
$('div#pagetreesearch input.text').prop('title', 'Page Tree Search');
$('div#pagetreesearch input.text').before('<label class="assistive">Page Tree Search</label>');
$('form.aui.content-filter input.text').prop('title','Filter Results');
$('form.aui.content-filter input.text').before('<label for="text" class="assistive">Filter Results</label>');
<!-- Add Label to Collabrative Input -->
var checkExist = setInterval(function() {
    if ($('#editor-preload-container').length) {
        clearInterval(checkExist);
        <!-- Editor Attributes -->
        $('#quit-editor-dialog').prop('role', 'dialog');
        $('#quit-editor-dialog').attr('aria-label', 'Quit Notice');
        $("#content-title").prop('title', 'Content Title');
        $("#content-title").before('<label for="content-title" class="assistive">Content Title</label>');
        $("#wysiwygTextarea").prop('title', 'WYSIWYG Text Editor');
        $("#wysiwygTextarea").before('<label for="wysiwygTextarea" class="assistive">WYSIWYG Text Editor</label>');
        <!-- Atlassian Source Editor Add-on -->
        $("#editor-html-source-container textarea").prop('title', 'HTML Source Text Editor');
        $("#editor-html-source-container textarea").before('<label class="assistive">HTML Source Text Editor</label>');
     }
}, 500); // check every 500ms

Submit Buttons

Dashboard Filters do not have submit buttons, thus we add them with the assistive class. Alts and Labels are added above for this.

$('form.aui.content-filter input.text').after('<input type="submit" class="assistive" id="filter-submit" name="filter-submit">');

Groups

 This must be adjusted on a timer as well.

$('#space-tools-menu .aui-dropdown2-section div').attr('aria-label', 'space tools').attr('name', 'Space Tools');

Alt texts or Anchors without text content

Alt texts are missing on images and achor links. Sometime it is only required that you add an alt attribute, sometimes it is required that you also add text inside an anchor tag for compliance to be sufficent. In this case I added the assistive class to it, to make it hidden.

 

This version of JQuery is a little picky about which elements allow the "prop" or "attr" selection. You will notice that not everything is used with "prop" the perferred method.

$('.aui-header .aui-header-logo img').prop('alt', 'Site Logo');
$('div.aui-avatar-inner img').prop('alt', 'User Profile Image');
$('.plugin_pagetree_childtoggle.icon').attr('alt', 'Page Tree Child Toggle');
$('#space-pages-link').append('<span class="assistive" alt="Space Pages">Space Pages</span>');
$('a#space-pages-link').attr('alt', 'Space Pages');
$('.aui-sidebar-toggle span').append('<span class="assistive" alt="Sidebar Toggle">Sidebar Toggle</span>');
$('a.aui-sidebar-toggle').attr('alt', 'Expand Side Navigation');
$('a.plugin_pagetree_childtoggle').attr('alt','Expand Child Tree');
$('#action-menu-link').attr('alt', 'Page Content Action Menu');
$('#content-metadata-page-restrictions-hidden, #content-metadata-page-restrictions').append('<span class="assistive" alt="Page Restrictions">Page Restrictions</span>');
$('#content-metadata-page-restrictions-hidden, #content-metadata-page-restrictions').attr('alt', 'Page Restrictions');
$('#content-metadata-attachments').append('<span class="assistive" alt="Page Attachments">Page Attachments</span>');
$('#content-metadata-attachments').attr('alt', 'Page Attachments');
$('div#content-metadata-attachments').attr('alt', 'Page Attachments');
$('div.aui-sidebar-footer a.aui-sidebar-toggle').attr('alt', 'Toggle Sidebar');
$('a#fancybox-left, a#fancybox-right').attr('alt', 'FancyBox Toggle');
$('a#fancybox-left, a#fancybox-right').append('<span class="assistive" alt="FancyBox Area">FancyBox Area</span>');

Skip Links, Table of Contents, and Tab Order

Issue: Tab browsing the Skip Links and Table of Contents Macros are very inconsistent and primarily do not focus correctly on the selected content.

This is a quick fix. It works some/most of the time when tab browsing. Users using screen readers will normally have it read objects after focusing and tab input may return back to linked clicked on an additional tab.

You can supliment tabindex="-1" instead of "0" here but we choose to show keyboard focus and allow tabbing to the next header.

$('#main-content, #breadcrumbs, #header-menu-bar, #navigation, #quick-search-query, #page-banner-end, #page-banner-start, #page-metadata-end, #page-metadata-start, #main-content h1, #main-content h2, #main-content h3, #main-content h4, #main-content h5, #main-content h6, .aui-page-panel h1, .aui-page-panel h2, .aui-page-panel h3, .aui-page-panel h4, .aui-page-panel h5, .aui-page-panel h6').prop('tabindex','0');
<!-- Fix Table of Contents Links -->
var checkExistToc = setInterval(function() {
    if ($('div.toc-macro a.toc-link').length) {
        clearInterval(checkExistToc);
        $('a.toc-link').each(function() {
            var tocTarget = $(this).attr("href")
            $(this).attr("onclick","$('" + tocTarget + "').focus()");
            $(tocTarget).attr("tabindex", "0");
        });
    }
}, 100); // check every 100ms

Skip Link Adjustments

Id's, Alts, and onlick functions are added to the skip links at the template level.

Dashboard and Pages with Sidebar's and Without sidebars are require different skip links as some do not use the included id tags.

We are using Themebuilder so this was modified there, JQuery could be used to perform this action as well.

We use CSS to make the skip links visible when tabbed to.

ul#assistive-skip-links {
    height: 200px;
    width: 220px;
    left: 50%;
    clip: unset;
}
#assistive-skip-links a {
    padding:10px;
    position: absolute;
    height: 22px;
    top:-45px;
    left:0px;
    color:white;
    border:1px solid black;
    background:transparent;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}
#assistive-skip-links a:focus {
    position:absolute !important;
    left:0px !important;
    top:0px !important;
    color: black !important;
    background:#FFFFFF !important;
    outline:0 !important;
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear !important;
}

Tables

Tables should include a caption, this is only possible using the Atlassian Source Editor Add-on.

<table>
   <caption>Schedule for the week of March 6</caption>
...</table>

 

Edit: Fix Script Formatting

4 comments

Monique vdB
Community Manager
Community Managers are Atlassian Team members who specifically run and moderate Atlassian communities. Feel free to say hello!
February 8, 2018

@Zach Mitchell this is so useful, thank you!

Zach Mitchell February 26, 2018

Update to all watchers not in the WCAG Compliance ticket I have updated my post there in which you can use JavaScript and CSS to meet WCAG AA (and 508).

Jaclyn Mazzarella
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
November 25, 2019

Hi there. By using Unstoppable for Confluence, you can make your Confluence instance WCAG compatible. Hope this helps!

Zach Mitchell November 25, 2019

Good suggestion, but most of these plugins that improve accessibility only hit one target audience. This one looks like visually impaired. It may not help the actual page properties, which has tons of accessibility errors when audited with a tool like WAVE or Siteimprove. 

Also Unstoppable is only 508 compliant. WCAG 2.0 AA is a higher bar.

Jaclyn Mazzarella
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
November 25, 2019

Hi Zach, we are actually in the process of getting WCAG 2.0 AA compliance through government VPATs. However, yes this app is strictly for the visually impaired.  

Zach Mitchell November 25, 2019

Jaclyn,

You appear to be on Unstoppable's team, Feel free to look over the WCAG Compliance ticket for what has been done on our end to meed WCAG 2.0 AA Compliant, or view the code changes in out github. Pass it on to the developers.

Mary Connor May 6, 2021

Where is Confluence Cloud with accessibility compliance?

Tyler T
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
May 7, 2021

Hi @Mary Connor

We now have a dedicated accessibility team at Atlassian, and we are ramping up our efforts to achieve the following:

  • Align to the Web Content Accessibility Guidelines (WCAG) 2.1 level AA.

  • Provide transparency into our progress.

  • Add accessibility principles within the foundations of our design and engineering standards.

We are aware of the current accessibility issues within our products including Confluence Cloud and we are working towards becoming AA compliant, however, as you may know it is still a work in progress.

We are currently in the process of updating the VPAT accessibility documentation on our public accessibility page, as well as creating accessibility updates specifically for Jira and Confluence Cloud.

- Tyler

Like # people like this
Rebecca Topps
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
June 7, 2021

Hi Mary,

Just to let you know that on 7 Jun 2021 the accessibility team updated the available VPAT documents for Confluence Cloud, Confluence Cloud mobile, Jira Service management, Jira Software Cloud, Jira Cloud mobile and Statuspage.

You can access these VPATs as PDF documents on the Atlassian Accessibility page under the “Product VPAT documents” heading - Accessibility | Atlassian

These VPAT documents describe how our products address WCAG 2.1 AA (which complies with Section 508 of the U.S. Rehabilitation Act).

Rebecca 

Like # people like this

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events