We love Gin – our new accessible interface for web publishers

It’s essential to build accessibility into your projects from the very beginning. For our Web Publishing Platform this doesn’t just mean that the website and its content needs to be accessible but the editorial interface of the content management system itself also needs to be accessible to as many people as possible. 

The importance of following accessibility standards

The importance of following standards helps to ensure websites and web application functionality can be used by disabled users. It helps them to be able to perceive and use all content. Where there is a need to use assistive technology, following standards means that content and functionality works in predictable ways for software such as screen readers, screen magnifiers and voice recognition. Following standards also tries to ensure this accessibility  continues to work in the future. It helps align browser technology, web development and assistive technology. The complexity of this shouldn’t be underestimated.

Using Gin – an accessible interface

Many people have now heard of the Web Content Accessibility Guidelines (WCAG) but not everyone might realise there is also a set of standardised guidelines for authoring tools – The Authoring Tools Accessibility Guidelines (ATAG). If you’ve ever tried to read any of these guidelines you’ll realise that it’s a pretty steep learning curve. That’s why it’s great to have a strong foundation right out of the box. Drupal has a new editorial interface design, Gin, for its Content Management System. This is the interface that editors will use to build their sites. It was created with WCAG and ATAG standards and an accessibility focus from the very beginning.

These are some of the Gin theme accessible design highlights:

  • The base font size used is 16px.
  • Design is responsive to work on smaller screens but this means it will also reflow when users zoom in.
  • Some editors might be unable to use a mouse and so the Gin theme interface works with the keyboard alone and also follows a logical tab order to match workflow.
  • Keyboard focus is important when using the keyboard alone. It indicates to users where they are on a web page or interface. To improve both the editorial experience and accessibility the keyboard focus style has been designed to aim for consistent focus indicators throughout all editorial components. They often change in web interfaces which can be confusing.
  • Each editorial function should serve a clear purpose. The approach is to make use of whitespace in order to not overwhelm or confuse editors.
  • There is a strict approach to colour use to ensure contrast but also to help primary functionality to stand out to make the interface easy to use.

None of this means that this system is going to be perfect. Accessibility doesn’t need to be tested only once. It’s an ongoing process. This isn’t about ticking a box. It’s about trying to have a positive impact on peoples lives.

Further reading on following a standardised approach

Some years ago we conducted some user testing with disabled students. At the end of one session I asked if there was anything the student particularly liked about the website. She replied that the headings were all really well written and as a screen reader user this really helped her navigate the site quickly. With one keyboard shortcut screen readers can create a list of all the headings on the page allowing the user to skim through them in the same way a sighted person could do.

The importance of well written headings is just one of the approaches highlighted in our Effective Digital Content course.

Effective Digital Content

Drupal’s commitment to accessibility

Read more about Drupal’s commitment to accessibility

Drupal developers accessibility pledge tag

It’s complicated but the Gin theme is build on the Claro theme. So it’s worth starting with the Claro theme if you need more information on these new themes for Drupal.

Claro theme for Drupal

Authoring Tools Accessibility Guidelines

ATAG at a glance

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

css.php

Report this page

To report inappropriate content on this page, please use the form below. Upon receiving your report, we will be in touch as per the Take Down Policy of the service.

Please note that personal data collected through this form is used and stored for the purposes of processing this report and communication with you.

If you are unable to report a concern about content via this form please contact the Service Owner.

Please enter an email address you wish to be contacted on. Please describe the unacceptable content in sufficient detail to allow us to locate it, and why you consider it to be unacceptable.
By submitting this report, you accept that it is accurate and that fraudulent or nuisance complaints may result in action by the University.

  Cancel