An anonymous reader recently left a message on the English Wikipedia WikiProject Accessibility talk page following the deployment of Vector 2022 onto the English Wikipedia. I've copied it below, for reference.

I have used assistive tech (text-to-speech screen reading and screen nagnification) for over 25 years. Wikipedia articles appear to have been reformatted such that the Contents panel (that typically formerly appeared after the headline article summary) has disappeared. As a severely visually impaired user (registered Blind in the UK in 1995) I have used my residual vision to quickly find the article section of interest. All articles I have accessed in the past week (since late January 2023) omit the Contents panel and hence either require me to scroll through the article or instigate a search to possibly find where my interest lies. This is very inefficient when having to use x5 magnification on a 24" screen! In the words of UK's 'Points Of View'.... "Why, oh why....?" did you have to break something that did not need fixing?....IMHO, of course.

Please bring back the shortcut-embedded Contents panel!

Sincerely,

PVR. 31/01/2023 86.20.143.27 (talk) 10:29, 31 January 2023 (UTC)
— from Wikipedia talk:WikiProject Accessibility#Recent Article layout changes make navigation very slow for visually impaired using screen magnification!, CC BY-SA 3.0.

For reference, this is how the page looks for a 1366 by 768 pixel screen at 140% magnification (effective size of 979 by 550 pixels). The ToC sidebar is replaced by a pop-up button which doesn't present the option to move the ToC to the sidebar:

Looking at how the ToC button is implemented in zoomed-in screens (and screens of <1000-pixel width in general), it's definitely possible that the button can be missed entirely by someone with impaired vision who isn't using a screenreader. Besides the hamburger button (which can be confused with the hamburger button that opens the Tools section, the one next to the Wikipedia logo), there isn't a clearly-defined label on-screen. The icon for it doesn't make it particularly obvious either. Upon checking with Firefox DevTools, as of a8eaee8, there seems to be no text label at all for the button provided for this screen sizes. T318178 seems to be a related task, but upon checking the related change on Gerrit, this only deals with the sidebar ToC on larger screen widths. There didn't seem to be any notice telling users of this screen size where the ToC went (unlike how we have a notice for where interlanguage links went).

For reference, here's the HTML for the current ToC hamburger button; notice that the related label section has no text content:

<div id="vector-page-titlebar-toc" class="vector-menu vector-dropdown vector-menu-dropdown vector-page-titlebar-toc mw-ui-icon-flush-left">
    <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-menu-checkbox ">
    <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-menu-heading mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet mw-ui-icon-element mw-ui-icon-wikimedia-listBullet">
        <span class="vector-menu-heading-label"></span>
    </label>
    <div class="vector-menu-content">
        <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container">
            <div id="vector-toc" class="vector-toc vector-pinnable-element">
                <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-name="vector-toc" data-saved-pinned-state="true">
                    <h2 class="vector-pinnable-header-label">Contents</h2>
                    <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button>
                    <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button>
                </div>
                <!-- ul omitted for brevity -->
            </div>
        </div>
    </div>
</div>

I've so far confirmed this with Windows 11 Narrator (which only mentions "menu item"); I'm unsure if other screen readers also fail to read this button properly and I feel unqualified to provide that data as I don't use screen readers every day. There is a <label> element right before the div in this block, but it seems to reference an entirely different part of the page that is inaccessible when the screen width is below 1000 pixels and still isn't read out when navigating the page using <Tab>.

I'd wish that the immediate solution was just to enable the screenreader when reading, but the apparent lack of a label for the ToC button seems to prevent this. The only viable immediate solution for this user is creating an account and switching back to Legacy Vector. There's probably something that should be done to make the ToC fully accessible for viewport widths of this size, especially if browser screen magnification (likely by vision-impared readers) will cause viewports of this size to pop up in the first place.

TL;DR

• The ToC on smaller screen sizes seems to be inaccessible to vision-impaired users (based on feedback)
• The ToC hamburger button does not have a visual, readable, and non-metadata label (for vision-impaired users)
• The ToC hamburger button does not have an ARIA label (for screen readers)
• Smaller screen sizes should be considered when making accessibility choices, since these become the effective size of the viewport post-zoom