Change Details

### Background With the addition of several new features and many accessibility updates (i.e. landmarks, menus) to modern Vector, we want to collect feedback from screenreader users. ### Questions to answer: 1. We employ the [[ https://inclusive-components.design/menus-menu-buttons/#tablesofcontent | checkbox hack ]] in our dropdown menu implementation to support no-js users. Is our implementation acceptable to screenreader users? Specifically please evaluate the [[ https://phabricator.wikimedia.org/F35213800 | user menu dropdown and the language dropdown in modern Vector ]]. a. Additionally, how does that compare to this alternative option, which uses `aria-hidden` on the `label` element to reduce verbosity for screenreaders? 2. How do the new landmark regions impact user's ability to navigate and understand the page compared in modern vs legacy Vector? 3. How does the accessibility of the table of contents compared in modern vs legacy Vector? 4. When implementing the sticky header in modern Vector, we chose to entirely hide it from screenreader users given it contains purely duplicated content. What do you think of this approach? **Example article:** Modern Vector - https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?tableofcontents=1&useskin=vector-2022 Legacy Vector - https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?useskin=vector **Main page:** Modern Vector - https://en.wikipedia.org/w/index.php?useskin=vector-2022 Legacy Vector - https://en.wikipedia.org/w/index.php?useskin=vector

### Background With the addition of several new features and many accessibility updates (i.e. landmarks, menus) to modern Vector, we want to collect feedback from screenreader users. ### Questions to answer: # How do the landmark regions impact users' ability to navigate and understand the page in modern vs legacy Vector? # We employ the [[ https://inclusive-components.design/menus-menu-buttons/#tablesofcontent | checkbox hack ]] in our dropdown menu implementation to support no-js users. Is our implementation acceptable to screenreader users? Specifically please evaluate the [[ https://phabricator.wikimedia.org/F35213800 | user menu dropdown and the language dropdown in modern Vector ]]. ## Additionally, how does that compare to this alternative option, which uses `aria-hidden` on the `label` element to reduce verbosity for screenreaders? # How does the accessibility of the table of contents compare in modern vs legacy Vector? # The sticky header in modern Vector is entirely hidden from screenreader users given it contains purely duplicated content. What do you think of this approach? **Example article:** Modern Vector - https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?tableofcontents=1&useskin=vector-2022 Legacy Vector - https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?useskin=vector **Main page:** Modern Vector - https://en.wikipedia.org/w/index.php?useskin=vector-2022 Legacy Vector - https://en.wikipedia.org/w/index.php?useskin=vector

### Background With the addition of several new features and many accessibility updates (i.e. landmarks, menus) to modern Vector, we want to collect feedback from screenreader users. ### Questions to answer: 1. We employ the [[ https://inclusive-components.design/menus-menu-buttons/#tablesofcontent | checkbox hack ]] in our dropdown menu implementation to support no-js users. Is our implementation acceptable to screenreader users? Specifically please evaluate the [[ https://phabricator.wikimedia.org/F35213800 | user menu dropdown and the language dropdown in modern Vector ]]. a. Additionally, how does that compare to this alternative option, which uses `aria-hidden` on the `label` element to reduce verbosity for screenreaders # How do the landmark regions impact users' ability to navigate and understand the page in modern vs legacy Vector? 2. # We employ the [[ https://inclusive-components.design/menus-menu-buttons/#tablesofcontent | checkbox hack ]] in our dropdown menu implementation to support no-js users. Is our implementation acceptable to screenreader users? Specifically please evaluate the [[ https://phabricator.wikimedia.org/F35213800 | user menu dropdown and the language dropdown in modern Vector ]]. ## Additionally, how does that compare to this alternative option, How do the new landmark regions impact user's ability to navigate and understand the page compared in modern vs legacy Vectorwhich uses `aria-hidden` on the `label` element to reduce verbosity for screenreaders? 3. # How does the accessibility of the table of contents compared in modern vs legacy Vector? 4. When implementing the # The sticky header in modern Vector, is entirely hidden from screenreader users given it contains purely duplicated content. we chose to entirely hide it from screenreader users given it contains purely duplicated content. What do you think of this approach? **Example article:** Modern Vector - https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?tableofcontents=1&useskin=vector-2022 Legacy Vector - https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?useskin=vector **Main page:** Modern Vector - https://en.wikipedia.org/w/index.php?useskin=vector-2022 Legacy Vector - https://en.wikipedia.org/w/index.php?useskin=vector