About This Website’s Design

The RGD Access Ability website was designed by Context Creative and built to serve as an example of best practices for online accessibility.

Here are some of the key design and development features used to optimize the accessibility of the site:

Visual clarity and contrast:

Text sizes were chosen in accordance with the Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium, with a special emphasis on designing beautiful page proportions and templates that are accommodate larger type formats.

The colours of site text and graphics were chosen for maximum contrast and visibility across a range of vision impairments using the Luminosity Contrast Ratio and Colour Difference and Brightness Difference algorithms as reference.

User centered control of content display:

Text and design proportions were coded in relative em units to allow visually-impaired users to adjust text sizes to their preference without having any degradation of the overall site design and presentation.

A text size toolbar was incorporated into the design to give users an easy method of resizing text to 3 preset size scales. Text scaling tools of this kind also inform users who are unaware of browser text re-sizing capabilities that content size can be scaled to meet their needs.

Screen reader friendly site design:

Graphics containing textual information were altogether avoided in the design of this site (with the exception of the RGD logo). All images belong to article content rather than design elements of the site.

No graphics were used to convey meaning when a text equivalent would suffice.

Colour was not used to convey meaning.

Sections of the homepage containing animation effects to slide content were built using jQuery to allow animation of html content that can be read by screen readers. This technique supplants traditional web animation technologies like Flash which are less readily accessed by screen readers.

Semantic code with logical order of markup

The Access Ability site relies on a full CSS layout to separate styling and layout from markup and content. This allows the content accessed by a screen reader to be ordered linearly in the markup, e.g., to be read in the intended sequence by screen readers, and repositioned using CSS for visual display.

Semantic code structure assists screen readers in understanding the structure and context of the content.

Tools and additional features:

Hidden “skip to content” links allow users of screen readers to bypass redundant navigation.

Large link targets make it easier for users with mobility impairment to click links. A large area around navigation and call to action links is clickable rather than only linking text.