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.
Drupal’s commitment to accessibility
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.