Drupaldelphia – Accessibility + Content Authoring

Rebecca Smith and I gave a presentation at the “Drupaldelphia” conference about our experience building Tyler School of Art’s new website. We talked through some of the things we learned about accessibility, content authors, and making user-centered decisions both in front-end and back-end development. Here’s an overview of our talk:

Accessibility
Websites should be accessible to all users, including folks with vision, hearing, and mobility impairments. Higher-ed institutions are required by law to comply with accessibility guidelines. This project provided us with an opportunity to carefully consider users of all abilities. After lots of prototyping, testing, revising, and testing again, we learned a few things about building user-centered, accessible websites:

  • Make sure to use strong color contrast, since lots of people have low vision or color-blindness. There are some tools to help: http://colororacle.orgwebaim.org.

33e7026cedff8be6341e4e9a54142aee89e6db98

Color blind testing

  • Not everybody can use a mouse. We made sure that users could navigate the site and trigger all the UI elements and links using the alt, tab, and enter keys.
  • Some people with vision impairments use a screen reader — software that lets them navigate the web by translating text into audio. Things like descriptive alt tags andsequential header order might not matter much when there are pictures to look at, but they’re critical to someone navigating via screen reader.
  • Most importantly, talk to and educate your content authors about accessibility! Make sure they’re aware of the tools they can use to keep the site accessible, such as alt tagsdescriptive headers, and color contrast. In the end, content authors the ones who have to carry the torch.

Content Authors
Building Tyler’s site was also a lesson in designing for the back-end. Content authors (the people who update the content) probably spend the most time interfacing with the website, and are often neglected in the development process. They’re users, too!

  • Involve them in the design and development process and listen to their needs. Ask them what content they will update, how often it will change, and who will be responsible for what. Design your content types and workflows with this info in mind.
  • Welcome your content authors with a personalized login experience:

a6b41aca4af713b963d91255b104090a32b71453

  • Make the abstract relationships between data entities more explicit and clear. Use theInline Entity Form Module, which gives content authors a way to create related sub-pieces of related content directly from the main piece.
  • Give them an intuitive way to order content: use Nodequeues or Draggable Views:

a2412c51a908605f4fd14d579e69879b290cde74

  • Give users confidence and save them from making mistakes by reducing options in their WYSIWYG editor. Modify the CKEditor Profile settings to go from this:

6a729996492b2cbd1ba589db4527f47123598dc3

To this:

9e7eb7e792342969f62dcaf1ade73846f8eafd60
Methodology
One of the things we’re proud of is constantly learning about and practicing great user-centered development. We question assumptions, listen, and test. User-centered decision-making means being mindful of who the users are, what they’re doing, what their priorities are.
Here are the slides from our talk:

It turns out that a lot of the tweaks we made for accessibility and the back-end experience are going to be standard features of the new Drupal 8 core, which is now in alpha testing.

Creating the Tyler School of Art website was a good opportunity for us to focus on accessibility and content authors. But the truth is, we should always keep these things in mind, and we’re grateful this project put them in the foreground. Thanks to Drupaldelphia for giving us the chance to share this knowledge.
We’d love to hear any other tips and takes on this issue. Hit us up on twitter with your comments or questions @bluecadet.