Change Details

I've done a quick test. Keyboard navigation works reasonably, though we should probably have hotkeys to show/hide the sidebar. VoiceOver navigation is broken for the personal tools menu. The new ToC button is labelless, which isn't good. The landmarks have a few clear issues to me: 1. When the main menu is collapsed, the whole landmark for the main menu is gone, which makes it pretty hard to rediscover. Especially as it is also not in the header navigation mode. 2. The H1 is wrapped in a banner landmark.. I'm not entirely sure why (ah because its a <header> element) it seems a bit confusing to me (probably should get a label) 3. One of the landmarks is "Tools navigation", which isn't really helping explain WHICH tools. It also seems that the sidebar no longer features headings, which makes it a bit more difficult/slow to native the site navigation menu. The heading for twinkle and Languages (which have not yet been updated to this new missing heading layout) now are before the H1, which is 'bad'. When you have a narrow screen, you can no longer tab to the search field as it is hidden. The element to unhide is is an <a> element which in some browsers (macOS) is not focusable by default (only actual buttons are). This is not an issue if users configure their Safari preferences with "Press tab to highlight each item on a page", but this is not the default. Adding role=button tabindex=0 to that element (like for the ToC button) might help here ?

I've done a quick test. #### Keyboard navigation Works reasonably, though we should probably have hotkeys to show/hide the sidebar. When you have a narrow screen, you can no longer tab to the search field as it is hidden. The element to unhide is is an <a> element which in some browsers (macOS) is not focusable by default (only actual buttons are). This is not an issue if users configure their Safari preferences with "Press tab to highlight each item on a page", but this is not the default. Adding role=button tabindex=0 to that element (like for the ToC button) might help here ? #### VoiceOver * Navigation is broken for the personal tools menu. * The new ToC button is labelless, which isn't good. * The landmarks have a few clear issues to me: 1. When the main menu is collapsed, the whole landmark for the main menu is gone, which makes it pretty hard to rediscover. Especially as it is also not in the header navigation mode. 2. The H1 is wrapped in a banner landmark.. I'm not entirely sure why (ah because its a <header> element) it seems a bit confusing to me (probably should get a label) 3. One of the landmarks is "Tools navigation", which isn't really helping explain WHICH tools. It also seems that the sidebar no longer features headings, which makes it a bit more difficult/slow to navigate the site navigation menu. The headings for Twinkle and Languages (which have not yet been updated to this new missing heading layout) now are before the H1, which is 'bad'.

I've done a quick test. Keyboard navigation works reasonably, though we should probably have hotkeys to show/hide the sidebar. VoiceOver navigation is broken for the personal tools menu. The new ToC button is labelless, which isn't good.#### Keyboard navigation Works reasonably, though we should probably have hotkeys to show/hide the sidebar. When you have a narrow screen, you can no longer tab to the search field as it is hidden. The element to unhide is is an <a> element which in some browsers (macOS) is not focusable by default (only actual buttons are). This is not an issue if users configure their Safari preferences with "Press tab to highlight each item on a page", but this is not the default. Adding role=button tabindex=0 to that element (like for the ToC button) might help here ? #### VoiceOver * Navigation is broken for the personal tools menu. * The new ToC button is labelless, which isn't good. * The landmarks have a few clear issues to me: 1. When the main menu is collapsed, the whole landmark for the main menu is gone, which makes it pretty hard to rediscover. Especially as it is also not in the header navigation mode. 2. The H1 is wrapped in a banner landmark.. I'm not entirely sure why (ah because its a <header> element) it seems a bit confusing to me (probably should get a label) 3. One of the landmarks is "Tools navigation", which isn't really helping explain WHICH tools. It also seems that the sidebar no longer features headings, which makes it a bit more difficult/slow to nativnavigate the site navigation menu. The headings for tTwinkle and Languages (which have not yet been updated to this new missing heading layout) now are before the H1, which is 'bad'. When you have a narrow screen, you can no longer tab to the search field as it is hidden. The element to unhide is is an <a> element which in some browsers (macOS) is not focusable by default (only actual buttons are). This is not an issue if users configure their Safari preferences with "Press tab to highlight each item on a page", but this is not the default. Adding role=button tabindex=0 to that element (like for the ToC button) might help here ?