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

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage
Highlighted

How to get Confluence WCAG 2.0 AA Compliant Edited

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

3 comments

Monique vdB Community Manager 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).

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.

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.  

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.

Comment

Log in or Sign up to comment
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

494 views 24 9
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you