Common challenges that screen magnification users encounter
In the past, many menus had submenus that appeared only when the cursor was hovering on top of that menu item. This was problematic as we need a larger margin of error when interacting with content. We cannot always do this with the same level of accuracy as those who do not use assistive technology.
Whenever we have to expand a menu through hovering, it is very difficult for us to keep these expanded long enough to review the content itself. We use our mouse (or finger) to pan the screen in all sorts of directions. Users who need a higher level of magnification, will only be able to view a small part of the screen at any one time. This results in them having to pan the screen more to read the entirety of any content. What this means is that the user’s cursor often goes outside of the menu item, causing it to disappear while they are reading. You can imagine how frustrating this can be.
Today, many websites have moved away from these menus and instead, use clickable menus. This alleviates the problem. But, there is still a lot of content that is dependent on hover, such as tooltips, and menu icon labels.
Whitespace is the absence of content in an area of a webpage. It is common for designers to lean towards having a lot of whitespace, and minimal content. While this can be aesthetically pleasing, low vision users often struggle with it. This style can cause screen magnification users to lose their focus and bearings on the page.
Imagine you are on a webpage and all you see is a white background. You confirm that you have entered the right URL, and that you are on the website you are expecting. You become confused by where the content is, and if you’re even in the right place. You pan left, right, up and down, only to realize that there is content; but alas, you’re still disoriented.
For users who rely on a higher magnification level, this experience is all too familiar when they are on a page with excessive whitespace. Be mindful of how you space content out, avoiding whitespace whenever possible.
When submitting a form, sometimes confirmation popups appear at the top of the page or form. For some, this can be helpful. For screen magnification users, not so much. Users would be focused on the bottom of the form where they submitted it, only to have the pop-up appear at the top of the page. This can cause users to miss the message altogether, and confusion around whether the form submission was successful.
A good solution for this: centre the pop-up, and have a black page overlay. This is a universal signal to users, letting them know that there is something there. This design is intuitive and is effective in letting users know that there is a message to review.
Consistency in layouts is key – we expect menus to be at the top of a page, footers at the bottom, and text content between. This is something that users assume when they land on a webpage that they have never seen before, and it matters. Some websites tend to change this intuitive design. Examples include: having not one main menu, but two. Or, having a footer that doesn’t look like a footer, but rather another main piece of content on the webpage.
I remember I was applying for a job for a major insurance company and couldn’t find the “careers” link. I panned the page for at least 5 minutes, expecting it to be at the footer (or the main menu). After a frustrating experience, I finally found it. I spoke with the developers at the company about this, during my interview. They were shocked to hear about my experience, because it was something they had never considered. To them, they were trying to achieve a more “modern and unique” design.
This is a great example of how