Making Disaster Information Accessible

Are widgets making your site inaccessible?

Accessibility is an important part of any website design. For a website designed to inform a community about wildfire recovery, accessibility becomes not only important but potentially life-saving. Many disaster relief programs are time-sensitive and it is crucial that everyone in the community has access to this information.

While designing the Dixie Fire Collaborative website, I tried to keep accessibility in mind at all times. I used high-contrast colors and easy to read fonts. Each page needed to have an H1 header and alt-tags on all images. I was aware that my knowledge of designing for accessibility needed some help. That is when I turned to online accessibility resources for guidance.

One of the websites I visited was accessibe.com. I did an accessibility check on the Dixie Fire Collaborative website. I was ashamed at the results. It turns out, I didn't know how to design for accessibility after all! At least, not at an acceptable level. There was still a lot I had to learn.

First up, Clickables!

Button Attribute Tags

The first issue my website had were empty fields in clickable elements. This was a problem that stemmed from my use of an embedded widget. To save time on the development of the site, I had embedded several widgets in the page, like this community calendar. 👇

To fix this accessibility issue, I would need to alter the widget code on my website. The embedded code was missing the role="button" attribute. This is important for any div that behaves as a button. The "buttons" in the calendar widget are the clickable events seen above in green, purple and maroon, and the clickable arrows and "TODAY" button.

The only code I had access to for the widget looked like this:

I added the role="button" attribute to the div class so it now looked like this:

After adding this snippet of code, the widget still worked, but it didn't solve the accessbility issue. I would need to contact the widget company and talk with them about adding the role="button" attribute into the code for each clickable link on the calendar.

While waiting to hear back from the widget company, I would tackle the other issues with the clickable links on my site.

Button Descriptions

Buttons should include text explaining their functionality. Overall the website tested well for this accessability requirement. The only missing button descriptions were on the calendar widget. I had a sinking feeling that a lot of my accessibility issues would come from my use of widgets. 😟

Links

The next step was to make sure links included text that indicated what they were leading to. Once again, the widget was the weak link in my accessible design.

Aria-Label

Now it was time to check that I had the proper aria-labels on my links. Aria-links help a page reader explain what a link is going to do and where it is going to go when it is clicked.

Having developed my website using Webflow, most of the aria-labels had been pre-loaded already. Even so, I was missing all of the aria-labels on the links I had created in the footer.

The challenge was to learn how to add the aria-labels in Webflow. I consulted the all mighty Google and found a helpful guide to accessibility in Webflow from finsweet.com. They even shared a screenshot of where on my Webflow design page I could add the aria-label. 👍

As I settled in for an evening of sipping tea and writing aria-labels, I pondered on the importance of accessible website design. Not only is it the law to make your website accessible, it is also the only solution for truly designing with your users in mind. A human-centered design must design for ALL humans regardless of abilities.

As our society becomes more and more dependent on using the internet to disseminate information, we as designers must ensure that everyone has equal access to this information. Especially when designing for disaster relief and recovery, we must take the time and make our sites accessible. So pour yourself some tea and dig into the accessibility of your site.

See you next time as I tackle more accessibility edits of the Dixie Fire Collaborative website. 👋