Accessibility

The design system aims to comply with WCAG 2.0 AAA compliance, as set out in RMIT's digital accessibility framework.

Semantics

Headings should be deployed with a clear hierarchy. Try to avoid using a particular heading because the size looks visually appealing. Rather, take advantage of helper classes which can override the default heading style:

A smaller heading 2

<h2 class="h4">A smaller heading 2</h2>

Look to use landmarks such as <main>, <nav>, <footer> and <section>. Where multiple landmarks of the same type are used, label them using aria-label:

Colours

As the site aims to meet a WCAG 2.0 Triple A standard, colour contrast is paramount. The system aims to have a contrast ratio of over 7, consult this table for more information. This can limit options to provide contrast between colours, for example between text and links. Choices are made in typography to help mitigate these issues.

More information on colours

Typography

All headings are set in Museo 700, RMIT Blue (#000054) as per brand guidelines. This thicker weight provides good contrast with body text, making the difference between headings and body content very clear.

More information on typography

Links

Links occurring within paragraph text are displayed in RMIT Blue with an underline. The extra visibility the underline provides is important due the lack of contrast between RMIT Blue and the main text colour, Dark Grey. On hover, the colour changes to Blue Hover and the underline is removed.

Due to contrast ratio constraints, links should only be presented on white or Underlay Grey backgrounds.

More information on links

Page structure

While visually, navigation is often presented to the right of the content, Semantically, navigation is listed before content to clearly describe the hierarchy of the page to a blind user. As this user traverses through the pages of the site, this can get tedious. To mitigate this, a visually hidden skip to content link should be provided. Here is an example of how this might function:

<header>
      <a href="#main-content" 
	class="visually-hidden-focusable">Skip to main content</a>
      ...
</header>
<div id="page-content">
      <main class="container">
        <div class="row">
               <!-- START right nav -->
            <div class="col-xl-4 order-last">
                ...
            </div>
            <!-- END right nav -->
            <!-- START content -->
            <div class="col-xl-8 order-first" id="main-content">
                ...
            </div>
            <!-- END content -->   
        </div>
    </main>
	<!-- START footer -->
	<div class="footer-container">
		...
	</div>
	<!-- END footer -->
</div>