How To Design Accessible Real Estate Websites
Written by Chelsea Friel, Graphic Designer
Designing with accessibility at the forefront has never been more important, but it can be daunting to determine whether or not your website is in compliance with regulations. In 2020 alone, over 3500 digital accessibility lawsuits were filed, including federal and state ADA lawsuits, and an estimated 56 million people in the U.S. are currently living with a disability. As we look to expand our services in the real estate and housing market, it’s paramount that we keep accessibility top of mind in our work. The goal is to improve our practices to make our designs as accessible as possible for the widest audience, and to make usability as high a priority as visual appeal.
What Does Web Accessibility Look Like?
To be frank, the word “compliance” doesn’t exactly bring to mind a font of creative flights of fancy. It usually summons images of black Arial text neatly organized on a white background, which is fine for doing your taxes but less than ideal for promoting your sparkling new multifamily property. In truth, adhering to Web Content Accessibility Guidelines (WCAG, from here on out) is pretty easy to incorporate alongside our existing design practices. WCAG ratings are ranked from A to AAA, in a sort of “good, better, best” system. If A is the rank for a solidly usable website, then AAA is the gold standard of accessibility.
Similarly to how we build successful brands that thrive in the wild, the process of establishing an accessible web presence requires some collaboration between designers, copywriters, and developers. By keeping a few helpful guidelines in mind, each team’s work contributes to a fully accessible real estate website that anyone can (and will want to) use, regardless of their level of ability.
A Helpful Guide for Accessible Design
Contrast
When establishing a color palette, high contrast is critical for usability. When considering moderate to severe visual impairment, the ideal contrast ratio is between 1 to 3 and 1 to 4.5, depending on the size and the boldness of the text. The larger and thicker the characters, the lower the ratio can be while maintaining legibility to the eye, or to a screen reader. Any important copy should be designed with the highest contrast possible to ensure greater visibility for users.
Chrome extensions such as Spectrum can help you determine how user-friendly your website is by showing you alternate versions of your website based on various visual abilities.
Alternate Indicators
On the topic of visual acuity, consider using alternate methods of establishing a hierarchy of content apart from color changes. If a piece of text changes color when a user hovers, the addition of a line under the text serves as an additional cue that the copy can be clicked or is interactive in some way. Other visual indicators can be icons, boxes, or typeface changes (such as semibold to bold or black) to indicate to the user that they’re on the right track.
Charts and graphs can also present a challenge. Apart from using distinct colors to designate a data set, one solution is to incorporate texture or patterns into the design to further differentiate the information presented to the user. Trello has a plugin that can convert graphs using color blindness–friendly patterns to help aid legibility for all users, while maintaining the overall look and feel of the design.
Alt Text & ARIA Labels
Used to describe an image when it is unavailable to the user, alt text and ARIA labels should provide as much detail as possible. Describe what’s happening in the image instead of opting for the file name or a bland categorization of the subject like “man” or “house.” For folks who use screen readers to navigate websites, this attention to image descriptions provides a much clearer idea of what is in the design and what the website is trying to convey. This can be a key factor in whether or not they pursue your property further, depending on how well you describe the photo of the premises or the neighborhood using these tags and labels.
Content and Type Hierarchy
When writing copy for a website, simpler is better. Important messages should be short and to the point, while conveying all of the essential information a user needs to know right off the bat. WCAG recommends limiting a line of text to 80 characters or fewer, and to avoid writing overly complicated or lengthy sentences. Designers and copywriters should work in tandem to draft copy that looks beautiful in the design, excites the user with its content, and can be read by as many people as possible, regardless of the tools they use to view the website.
UI and Navigation
Users of varying abilities frequently use keyboard navigation to explore websites, and care should be taken to establish a logical flow of information. Good design is obvious, and a user shouldn’t have to spend time deciphering how to move through a website to find what they need. Clean focus states, clear and easy-to-remedy error states, and concise links makes a site more accessible to all, and provides a better user experience across the board.
Designing for Everyone
Accessibility should always be as high a priority as creating a beautiful design. A visually stunning website that can only be accessed by half of our users is ultimately a design failure, and our goal should be to be as inclusive as possible in our work. As we continue to go above and beyond for our clients and our audience, normalizing accessibility practices deepens our understanding of who we serve, and provides a more inclusive space where all are welcome.
Written by Weylan Lee, Senior Graphic Designer at Threshold
