Apart from expected changes in the layout and visibility of elements on smaller viewports, the only significant difference I observed (in terms of accessibility) is that popover components on smaller viewports are implemented as modal dialogs. However, both types of components are addressed in my audit, so I will keep using the desktop version for my analysis.
UI differences between small and large viewports
Some buttons, such as the Settings button, initially only display an icon and add a visible label as the viewport size increases. While my audit includes examples of both icon-only and icon+label buttons, I want to emphasize the importance of using the .sr-only class to toggle between them, which ensures accessibility for all users.
<!-- Icon-only state
The icon is hidden from assistive tech but visible
The label is visually hidden, but available for assistve tech
-->
<button>
<svg aria-hidden="true"><!-- svg code --><svg>
<span class="sr-only">Settings</span>
</button>
<!-- Icon+label state
The icon is still hidden form assistive tech and still visible
The label is no longer visually hidden
-->
<button>
<svg aria-hidden="true"><!-- svg code --><svg>
<span>Settings</span>
</button>
I have identified and broken down the page into the following elements, which I will address separately from the overarching observations:
Elements of the search results page in scope
← Previous
Next →
3.1 Standalone elements & page structure