How To Design Accessible Real Estate Websites

How To Design Accessible Real Estate Websites

photo of the author, graphic designer 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.

example of high contrast versus low contrast text

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.

example of alternate indicators for clickable text in real estate web design

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.

example of alt text field in for an image in WordPress

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.

Why We Use Adobe XD To Craft Better Websites for Our Clients

Why We Use Adobe XD To Craft Better Websites for Our Clients

photo of author, senior graphic designer at Threshold Written by Weylan Lee, Senior Graphic Designer at Threshold

User experience and user interface (UX/UI) design are both in high demand, especially for digital spaces like apartment websites and mobile apps. With this high demand comes many tools that cater towards UX/UI design. At Threshold, we use Adobe XD, which is a design tool that allows us to create and prototype interactive experiences like websites, digital products, and mobile apps. With this tool, our teams are able to design, animate, prototype, and collaborate more efficiently, experiencing our designs just like an end user (i.e. our clients’ residents and prospects) would. This has significant advantages both for us internally as well as for our clients and their end users.

How Adobe XD Improves the Real Estate Marketing Client Experience

First and foremost, Adobe XD allows us to present our compelling and amazing website designs more comprehensively and engagingly for our clients. With XD, instead of designing static pages and leaving it to the imagination how they will animate or link to one another, we are able to incorporate engaging user experiences and interactive functionality that enhance our client’s brand and optimize for conversions from the very beginning. Our clients are able to view and experience their website designs just like a viewer would on a live website. They can scroll down a web page, click on links and buttons, interact with CTAs,  as well as interact with things like galleries, floor plans, location maps, and much more. Plus, with the ability to leave comments and replies right on website designs, using Adobe XD allows our clients to make more informed decisions and provide accurate feedback, streamlining our collaboration with our clients.

Example of Adobe XD for real estate web design

How Adobe XD Improves Collaboration for Creative Real Estate Marketers

For our internal teams, using Adobe XD has allowed us to design more immersive and impactful website experiences and made our internal collaboration more efficient – which also benefits our clients! Our designers are able to experience and interact with their website designs in real-time as they are designing. This allows us to create more impactful, engaging user experiences and ensure that a website not only looks amazing and functions properly, but also provides a great experience. Adobe XD also allows for the creation of brand-specific design libraries, which our designers use to ensure that a client’s branding (fonts, colors, buttons, and more) is applied consistently throughout each page of an entire website. Even better, the collaboration tools within Adobe XD allows our designers and developers to share website assets and details more efficiently, reducing project timelines and ensuring a smoother transition between design and development.

Why You Should Work With a Real Estate Marketing Agency That Uses Adobe XD

To sum it up, by using Adobe XD, our teams are able to create impactful user experiences that our clients (and their current and future residents) will enjoy. The improved and efficient collaboration between our internal teams and our clients and project teams means that we are able to reduce project timelines and ensure we are creating the highest quality websites for our clients. Our project teams are able to spend more time on creating amazing and impactful website designs with great experiences. At the end of the day, that all leads to increased conversions and customer loyalty among our clients’ prospects and current residents.