Screen reader reading order?

Hello.

We ran into a strange issue with screen reader reading order on our website, and was wondering if anyone had experienced this before and whether there was an easy (or even not as easy) fix for it.

The issue is that when testing our website with a screen reader, it is reading the footer before the main body on Mac/Chrome with VoiceOver. However, it reads the order correctly on Mac/Safari and PCs with NVDA and PCs with Chrome and iPad and Safari with Firefox. Basically every combination of system and browser and screen reader works fine, except for Mac/Chrome/VoiceOver.

Example page: https://www.apa.org/monitor/2021/04/ceo

What happens: It reads everything in order until after the breadcrumbs. Then, most cases will continue reading “From the CEO….” but VoiceOver on Chrome jumps to the footer, starting with “Advancing psychology to benefit society…” at the bottom.

Is there some kind of extra tag or coding that would fix the read order, or is VoiceOver on Chrome somewhat buggy and not used much because it doesn’t always behave properly? (much like when we used to put in special coding for Microsoft Internet Explorer, etc.)

Thanks for any insights you can provide! -amy

__________________________________________________________
Amy Pearson | Manager, UX Optimization and Compliance
Digital Strategy & Services, Communications
American Psychological Association
750 First Street NE, Washington DC 20002
apearson@apa.org<mailto:apearson@apa.org>

All APA staff are teleworking until further notice and are experiencing a high volume of inquiries related to COVID-19. For immediate information and resources, visit APA's COVID-19 page<https://www.apa.org/topics/covid-19> for psychologists, health-care workers, and the public.