About This Website’s Design
The RGD “Graphic Design for a More Accessible World” 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 2.0, at level AAA) produced by the World Wide Web Consortium, with a special emphasis on designing beautiful page proportions and templates that 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 Snook Colour Contrast Checker 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.
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. The site also makes heavy use of contextual screen-reader text helpers.
Colour was not used to convey meaning.
Semantic code with logical order of markup
The 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. This site also makes use of HTML5 tags and ARIA Roles to assist in identifying certain structural elements of the page.
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.