Are you in the loop? Keep up with the latest by making sure you're subscribed to Community Announcements. Just click Watch and select Articles.

Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root


1 badge earned


Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!


Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.


Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!


How to get Confluence WCAG 2.0 AA Compliant


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.


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.


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.

    <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');
$(' input').prop('title', 'Quick Search');
$(' 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) {
        <!-- 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">');


 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) {
        $('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 {
    position: absolute;
    height: 22px;
    border:1px solid black;
    -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 should include a caption, this is only possible using the Atlassian Source Editor Add-on.

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


Edit: Fix Script Formatting


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

@Zach Mitchell this is so useful, thank you!

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.
Nov 25, 2019

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

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.
Nov 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.  


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.

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 07, 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.
Jun 07, 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).


Like # people like this


Log in or Sign up to comment
AUG Leaders

Atlassian Community Events