Homeward Bound of Marin has been providing shelter, housing, job training, and services for people experiencing homelessness in Marin County since 1974.
Homeward Bound of Marin’s website was full of interesting and useful information, but the navigation had become a barrier to finding it and the site’s adherence to accessibility standards had fallen out of date. They came to Kiosk with a clear vision of what they wanted from their new site in the form of three main goals:
- Meet or exceed current accessibility standards.
- Clean up the navigation and menus.
- Freshen up the colors, making them brighter, bolder, and friendlier.
Approach
Every decision made about this site started with one simple question: Can this be done in a way that is accessible, perceivable, and understandable to the widest audience possible? Using WCAG 2.1 as our guide, we began the journey of designing and building this new website.
Our initial step involved mapping out the content hierarchy and selecting the appropriate HTML elements, essentially creating an index for each required page. Utilizing the correct HTML elements, particularly for document outlines and interactive controls such as links and buttons, is a best practice for assistive technologies like screen readers. This allows the content to flow naturally, making it easily comprehensible.
Next, we worked on color exploration, finding colors that serve the goal to be brighter, bolder and friendlier. Once chosen, we developed a color combination grid to set rules on what color backgrounds and text work with Homeward Bound of Marin’s fonts at various sizes to meet or exceed accessibility standards for color contrast. We also worked with Homeward Bound to produce a video shoot and new photography that features formerly homeless clients in their new homes. Each image had an alt tag attached to it, allowing a screen reader to describe the image.
To address Homeward Bound of Marin’s navigation issues, we collaborated with their team on a content strategy that met their needs and designed a set of modular panel templates that allow them to easily break up content on one page, cutting down on the total pages required for their site. An additional consideration was the large number of non-accessible PDFs, email addresses, and phone numbers on their legacy site. We designed panels and pages to replace most of the PDFs and added accessible forms for contacting Homeward Bound of Marin for questions, volunteering, and help.
As the project was wrapping up, we ran the site through automated scans to help identify any issues not already considered. To allow for the limitations of automated scans, we also tested keyboard navigation using a screen reader to make sure the content is described in a way that makes sense to people.
