How We Updated our Website for Maximum Accessibility
The third Thursday of each May is Global Accessibility Awareness Day (GAAD) - a day dedicated to thinking about, learning about and experiencing digital accessibility.
“The idea of a Global Accessibility Awareness Day started with a single blog post written by a Los Angeles-based web developer, Joe Devon. See Joe’s Blog post that served as the inspiration for Global Accessibility Awareness Day.”
Recently, TNP underwent a website redesign to completely overhaul our website, not just for a new look and feel, but for improved accessibility. In honor of GAAD, TNP Executive Director Lauren Schrero shares more about the process and what she’s learned along the way.
What inspired the website overhaul?
The overhaul was inspired by several things. First, we have changed so much as an organization since our founding almost five years ago, and we wanted to update the website to reflect who we are today, what we believe, and our core values. We also have much more evidence now of why our program is needed, and we thought it was important to do a better job of showcasing what we’ve learned and what value we offer to prospective partners. Second, every, single day we’re out there encouraging educators and community leaders to take the steps necessary to build inclusive spaces, whether in person or online. Meanwhile, we’ve been well aware for some time that our website could work better for the diversity of people who might visit us. Gotta walk the walk, as they say--lead by example.
How did you go about identifying vendor partners for this project? What were you looking for?
Our website redesign project was a partnership of many experts--I personally had zero of the skills needed for this overhaul. First, I wanted to bring in a designer with an eye for simple, streamlined design with strong emotional appeal. That led me to Jeannine Adams and her team at Ready Pretty (RP), who actually specialize in women-owned lifestyle brands that communicate beautifully and in a moving way about lives we aspire to live. I thought her “make yours a better world” aesthetic was in keeping with our goal of streamlined storytelling about the schools and future we aim to create. Then, of course, we needed web accessibility experts. We were fortunate to be connected with the team at Georgia Tech’s Center for Inclusive Design and Innovation (CIDI), true leaders in accessible web design and true partners in the sense that they were willing not only to evaluate our site and support our work, but also to provide us with a basic education and working understanding of core accessibility concepts we can carry forward.
Share more about the process. How did you start to reimagine the site from an accessibility standpoint?
Step one was undergoing and learning from CIDI’s accessibility audit--a page by page review of our old website to identify problematic components of the site and areas for improvement. Their first report was well over 50 pages, identifying 26 core issues to be eliminated or addressed in the redesign.
From there, RP began to reconceptualize the site, with both accessibility and communications goals top of mind. We chose a high contrast palette, new fonts, an intuitive site logic, and thought through better ways to lay out information that would interact well with screen readers and keyboard navigation. We quickly realized, to no one’s surprise, that accessibility considerations lent themselves to better design decisions.
Black and white image with geometric shapes outlines showing a webpage layout with spots for blog, impact findings data, timely conversion asset, and high impact image.
What are some of the changes that were made to make the new site more accessible?
Most of it was pretty easy, actually. We improved color contrast throughout, favoring classic white backgrounds with black text and selecting two high contrast accent colors for headings and buttons. We made thoughtful use of headers to improve navigation logic, synched the reading and focus orders in our menus and on each page, added descriptive (but hopefully not overwhelming) alt+text to all non-decorative images, made sure html codes indicate when button-pushes will take users off-site, and made sure the text on the buttons themselves indicated clearly what clicking the button will do. We combed through the copy to embed links in words rather than leaving the links themselves in text (screen readers read each letter of the urls out loud), and we’ve made efforts to utilize plain language at a reasonable reading level.
There are several things we haven’t yet addressed, and we’re working with Squarespace and CIDI to try to improve them. For example, the search bar and shopping cart require expert coding to interact properly with screen readers and we’ve yet to work that out. And the blog category dropdown menu cannot be scrolled using keyboard navigation, which is a problem. There are other issues with the coding that require more attention, and we’ll continue to work to address them. In the meantime, we’ve added the AccessiBe tool to the site in case users find it helpful. We’re aware that the tool does not interact well with screen readers, but may be helpful in other ways. We’re doing our best to make the screen reader experience as user friendly as possible, and we hope to remove the AccessiBe tool as soon as we have more confidence in our site coding and the Squarespace navigation accessibility.
6 light blue and teal rectangles laying out the lifecycle suite of TNP programs and jump start units.
What is the most significant piece of information that you learned in this process?
For me personally, I learned how simple web accessibility can be. Adding alt+text, headers, descriptive button text--anyone can do these things and they take very little time. I’ve also found great tools that analyze color contrast and reading level to ensure our content can be engaged by the broadest possible audience. I am no longer intimidated by the concept of web accessibility. I would still like to learn a bit more about HTML coding, but even without it, I am much more confident in our internal ability to assess and implement accessible online content and spaces.
Screenshot of Squarespace editor showing Alt+text can be added to images to support individuals navigating a website with screen readers.
What are you most proud of on the new site?
I think I’m most proud of how clean the site feels. The process really streamlined our communications, what assets we’re sharing, how everything looks. It’s less overwhelming to enter our site now and easier to find what you’re looking for, no matter what tools you’re using to cruise the site.
What advice would you give to someone looking to start this process?
My advice in all things is to call in the experts. The team at CIDI was so knowledgeable and so clear in their feedback and guidance, it made the rest of the project feel manageable and gave us benchmarks for assessing ourselves against our goals.