Our Commitment to Improve - An Accessibility Review of WCET’s Website

In this post, Rosa Calabrese (WCET’s Manager, Digital Design) and Russ Poulin (WCET’s Executive Director) share our organization’s journey over this past year in improving our website. We have made much progress and there is still more to be done. We hope that this story will inspire some of you to take the first steps to follow us on your own web accessibility journey. We also discussed this journey in a recent WCET Webcast. Your students, staff, and community members deserve no less.

– Rosa and Russ

---

WCET has long been dedicated to creating resources that are accessible to everyone by doing our best to maintain AA standards on our website and other online materials. We also have long advocated that our members should ensure that their web services and online courses similarly meet the accessibility needs of their students.

In 2019, I (Rosa) wrote a two-part blog about the accessibility of our then-current website based on standards and guidelines from the World Wide Web Consortium (W3C) website. Over the course of that review, I found some issues on our site, and learned how to rectify some of them as well. Though, as anyone who has ever worked with web accessibility probably knows, accessibility is an on-going process rather than a single task that can be completed and checked off, so we have continued to work on accessibility in many more ways since then.

In 2021, WCET launched a new website. This launch included a move from our previous hosting site to WordPress, a branding redesign, and a substantial restructuring of content. While we paid attention to accessibility best practices in building the site, we still wondered how well we had accomplished our goal. Therefore, we took a gulp and decided that it was time for an independent, third-party review.

Less than a year after the formal launch, we contracted with WebAIM (Web Accessibility In Mind) to do a formal review of the accessibility of our website. This work provided us with significantly more detailed results than my 2019 amateur review. Based on the WebAIM review, we have spent the last 10 months working to update our website to create a better online experience for users with disabilities…and all our users.

First Steps

Once Russ initiated the connection with WebAIM and we drew up a formal contract, we began the project by selecting web pages to be reviewed.

We picked 15 pages that we felt formed a good representation of different types of content and features on our website. Among those 15 pages, we chose a combination of pages that are unique but frequently visited as well as pages that use common content types and structures. Through those pages, most of the content types on our entire website were reviewed.

After the original phase of the project, we came to realize that it would also be prudent to ask WebAIM to review a couple PDFs for us, as PDF accessibility requirements differ from the accessibility requirements of webpages. We chose two PDFs from recent reports that we believe are representative of many of our other PDFs.

Initial Results

WebAIM’s accessibility review of our website contained a 20+ page document that detailed our website issues and suggested possible remedies, both to the specific pages that we provided and to “global features” like our menu or footer. WebAIM ranked the severity of different issues on a four-point scale from 1 (indicating “Critical”) through 4 (indicating a “Recommendation” only).

The subsequent reviews of our PDFs were explained in two new, shorter documents that were equally detailed in evaluation and recommendations.

Once we received this document, we compiled the findings in a spreadsheet and indicated which tasks would be fixed internally by WCET staff and which tasks would be fixed by the WCET web developers under WCET supervision. We coordinated with our web developers to further breakdown their set of tasks into changes that could be made to our website alone. Additionally, since our website used WICHE’s (our parent organization’s) web template, we created a set of tasks that had to be completed in partnership with the WICHE web team.

While WCET’s website was built using WICHE’s template, we made changes to the styles of the site and to certain content types to better fit our needs. Even so, many aspects of our two sites remained the same and used the same root structure. This took some easy negotiating with WICHE staff, but it ultimately resulted in improvements to both sites.

Since breaking up the tasks into these three groups (internal, external WCET, and external WCET & WICHE) we have been moving forward with tasks for each group simultaneously.

Meanwhile, our contact at WebAIM remains available to provide more assistance whenever anyone on our project has any questions. Furthermore, we are planning for WebAIM to re-review certain pages on our website once we have completed the corrections so that we can ensure that we have been successful.

Examples of Identified Issues

The types of issues that WebAIM identified on our website were quite varied. While not an exhaustive overview of all of our issues, we have listed below several accessibility issues that we had on our website that we are currently working to address.

Alternative Text. Unfortunately, the review identified the incorrect use of alternative text in several places. While we knew that alt text needs to be provided for things like images, and that decorative images that provided no real value to the page could be designated with a null tag (which a screenreader would not read aloud) we did not always write these correctly.

• First, the alt text of logos should always include all text that is in the logo.
• Additionally, while we had been applying double quotation marks, which indicates a null tag for all decorative images, in our site the resulting alt text was incorrect. Our site is hosted on WordPress, which automatically adds quotation marks around all alternative text, so by adding our own quotation marks, the result was that screenreaders would read out the alternative text of four quotation marks. Plus, null tags would not be marked as decorative unless the alt text field was actually left empty. It’s important to understand the technical requirements for this process for your specific site.

Color and Contrast

Although we did our best to make it so that all text had appropriate contrast with the background so that it would be easily readable, there were a few places on our site that we missed, such as when blue hyperlinks appeared on a background that is a color other than white. We’ve are now looking for solutions on a case-by-case basis to make sure this isn’t a problem, and fixing the issues by darkening hyperlink text in certain locations, or by removing a background color and replacing it with white.

Not Relying on Color Alone

We learned that elements such as hyperlinks need or arrows keys need to be differentiated from surrounding imagery by more than just color. For example, hyperlinks are often distinguished from regular text using underlines and colored text. We were missing underlines from several hyperlinks.

Menu Items

We learned that pages within the primary (or main) menu that have drop down menu items should contain links to all the sub-pages from that landing page. In other words, there must be links to the child pages on the parent page. We had trouble with this on our “For Members” page, for example, which didn’t include links to its sub-pages, We’ve altered the page content now so that it reflects the menu architecture.

Movable Features

Website features that move on their own – such as the carousel of banners at the top of our home page or the carousel of sponsor logos at the bottom of our home page – need to have the ability to be paused or stopped. We’re still in the middle of this fix! Come back again soon to see the final results.

Keyboard Navigation

All website features need to be available via keyboard navigation. Before we started this process, we had several content types that had hover-over functionality that was not reachable using keyboard navigation. Now we’ve addressed a lot of the issues but are still in progress on others.

The Journey Continues

We’re not done addressing the known issues yet. We certainly have ideas for the next steps once we have finished completing the tasks from WebAIM’s review.

We won’t be checking a box saying that we’ve finished making our website accessible and that we are done with it now. Instead, we will continue to make sure that our website stays accessible as we add more content, design new features, and otherwise expand our online presence.

Based on the WebAIM review, we will create a list of best practices for adding new content to our website, which will include rules for color contrast, headline structure, and rules for creating alternative text. We will also apply lessons learned from this project to the websites of WCET’s divisions, the State Authorization Network, and Every Learner Everywhere. And we will work to apply the accessibility standards that we learned through the course of this project to other online tools that we use, such as wcetMIX.

And can we inspire you? It is certainly a gut check moment for you to assure your institution is meeting student accessibility needs. We understand that your web presence might be part of a bigger website, but (as we did) you can make a start and identify issues that are wider spread.

We have made the commitment to improve. Come join us. If you do, share your story with us!