In today's blog, I am starting on a new topic I have not written about much before: real estate. Whether you are buying your first home, browsing apartment listings before a move, or selling a property, real estate websites are almost certainly part of the process now.
One area that seems to have been left behind in all that development is digital accessibility, and because of some common issues, I cannot always use these sites the way I want to. In this post, I will walk through the accessibility challenges I encounter on the search results screen, with screen reader accessibility as my focus.
By this point in the search, I have entered my location criteria and am on the results screen, which displays a set of property listings. One feature that seems fairly standard is a large map graphic at the top of the page that shows the search area. These maps often display the precise locations of the properties the search found, and you can click on individual addresses to zoom in or jump to a particular listing. Action buttons around the edge of the map can also adjust the size of the search area.
When it comes to accessibility, these maps are a big problem for me. My screen reader will sometimes find some or all of the location pins and action buttons, but they are spoken out of context, so they mean nothing useful. In some cases, automatic hint announcements indicate that certain keystrokes trigger specific functions when the focus is on the map. I have never found those suggested shortcuts to work.
Using them either does nothing or causes random, unexplained changes to the interface. For the most part, these map graphics just get in the way of exploring the rest of the page. On desktop, the map itself often acts as a keyboard navigation trap. Because the map usually comes before the listings, that drastically reduces how much of the rest of the page I can reach.
On touch-based interfaces, the maps wreak havoc when I try to use direct touch navigation, because their unusually large touch targets get in the way of finding the individual property listings.
On most real estate websites, the property listings on the results page include a common set of details. These are usually the price, street address, number of bedrooms and bathrooms, square footage, date listed, the listing agent's name, and so on. When I navigate the results list on many of these sites, my screen reader reads each listing detail separately. Each item is spoken one at a time, and I have to manually advance focus to hear the next piece of information.
Here is an example for a house listing, where "Tab" marks a screen reader focus advance. "123 Hill Street" Tab "$595,000" Tab "Four" Tab "Bedrooms" Tab "Three" Tab "Bathrooms" Tab "1500" Tab "Square Feet." Having to hear each of these points one at a time makes navigation slow, clunky, and confusing. It is also often hard to tell which details belong to which listing, especially with direct touch navigation on mobile.
On the sites that get this right, my screen reader reads each listing as a single, contained element with all its details. That same example would come through as a single announcement. "123 Hill Street, $595,000, Four Bedrooms, Three Bathrooms, 1,500 Square Feet."
Many real estate websites include action buttons as icons for each listing, such as saving a property, sharing it, contacting an agent, or reporting inaccurate details. These icon buttons are often embedded inside the main listing image. Because of that, my screen reader cannot locate or focus on the button. Even when the button is a separate element, missing or incorrect code labels can still make it unreachable for me.
This flaw prevents me from acting on a property without opening the full details page.
In theory, the search results screen on a real estate website should be simple to navigate. Poor accessibility and usability keep that from being true. I hope walking through my experience here sheds some light on this corner of digital accessibility. You can read more of my posts on screen reader accessibility here, and I have more coming soon on other parts of real estate websites.
On the sites I have tried, my screen reader either skips the map or reads the pins and buttons out of context, so they tell me nothing. On desktop, the map often traps my keyboard focus, and on touch screens, its huge touch targets get in the way of the listings.
That happens when each detail is coded as its own element rather than as a single listing. I end up tabbing through price, address, bedrooms, and so on, one at a time, which is slow and makes it hard to tell which details go with which listing.
Often no, at least not on the sites I have used. The save, share, and contact icons are frequently buried in the listing image or left unlabeled, so I cannot reach them without opening the full details page.
On the sites that get it right, the whole listing comes through as one announcement, something like "123 Hill Street, $595,000, Four Bedrooms, Three Bathrooms, 1,500 Square Feet." That one change makes browsing far faster for me.
The barriers I describe here are the kind UsableNet helps teams find and fix. Learn how UsableNet's managed accessibility service can make your site work for screen reader users.