The National Extension Technology Conference is a yearly gathering of IT professionals from across the United States. I was tasked with quickly developing a promotional site that would subsequently be used for registration and general communication about the conference. I decided to conduct an experiment with the design in which I attempt to create an accessible interface that mimicked some current design trends where accessibility is often ignored.
Note: Unfortunately, because this project for the University of Georgia, the GitHub repo must remain private, but you can view the source code by visiting the site itself.
One of the interesting aspects of creating this particular template was playing with acceptable color contrast ratios. Because I was tasked with the design of the site (as well as the development), I decided to test a running theory I had. So often I see websites winning awards or receiving widespread recognition for their design, when the foundation of that design is built upon color schemes that do not meet modern guidelines for proper accessibility. While the sites are often undeniably beautiful, they take a “shortcut” to get there based on a path of least resistance.
Many modern design trends feature color schemes where a light pastel is paired with text of a very similar shade. To a person with no visual impairments, this creates a beautiful effect. But that same text can be completely unreadable for a large percentage of users. The same can be said of font-size, or decisions to place text above areas in an image where it can become washed out or difficult to read. When I discuss this with designers and express the importance of inclusive design, I am often met with understandable frustration. What I mean is that, for most designers, their job is to create beautiful things. While the web is often the pathway by which we have access to beautiful things, it’s primary purpose (most oftenly) is a platform, or tool for a user to get information or to complete a task. User Experience is a discipline on top of that goal that can then seek to make our interfaces as beautiful and functional as possible. For the developer, this may mean making a page load as quickly and efficiently as possible. Or coming up with an algorithm that can infer certain details to save the user time. So, while I understand the frustration of designers and developers who simply want to make beautiful things as they see them, there are many who may be unable to use or experience those things in the same way. I believe that type of empathy in design takes time to learn, and it is never completely accomplished. That is one of the reasons that diversity in design and development teams is so important, to offer a more complete picture of all possible users.
Yet, I have a sinking suspicion that beautiful interfaces and rich color schemes and accessibility don’t have to be mutually exclusive. Often, the sites that tout accessibility or inclusive design would not win an award for groundbreaking aesthetic experimentation - perhaps rightly so - because that is neither their purpose nor their endeavor. But as someone who has a passion both for beautiful, aesthetically pleasing websites and accessibility, I wanted to see if I could come up with a color scheme that mimicked some of these design trends I am seeing, while still maintaining proper contrast ratios and font-sizes. This website for the NETC 2017 served as my guinea pig of sorts. While I do not think it is perfect, I do think that it is an indication that if usability, inclusive design, and accessibility are built into the fabric of your product from day one, then the best practices don’t become a hinderance, but rather an advantage (as best practices are designed to do). If we can make sites that look beautiful and work efficiently for the largest possible percentage of the population, I believe that is something to strive for. And we need to be able to fail gracefully and publically in order to learn and correct our own misconceptions.
The site is built using HTML/CSS/JS and the Jekyll templating engine.