SVG icons are not same size on smaller screen and dark Mode toggle button Accessibility

[ShubhamOulkar]

Description:

1. SVG icons are not same size for smaller screen. Following image shows subsection from home page.
2. A dark theme toggle in the footer, we must take extra care to make it visible, clearly labeled, and accessible to all users. Position is an important accessibility feature in a location that is more easily discoverable and predictable for users.

How User will experience ? : wagtail.org home page is long, you have to scroll all the way down to find dark theme toggle button. Especially on mobile devices it is long scroll. This button is not showing any labels or alternate navigation to dark theme toggle. Not having same size icons on smaller screen create contrast in the page contain. User might scroll down without reading content on the screen.

Images:

Why this is accessibility issue ?

1. Visibility and Discoverability issue: Footers are typically located at the bottom of a page and may not be immediately visible or discoverable to all users. Users with mobility or vision impairments may have difficulty finding or accessing the button.

2. User Expectations issue: Users often expect theme toggles and important interface options to be located in more prominent and predictable positions, such as the header, settings menu, or navigation bar. Placing it in the footer may confuse users, leading to a poor user experience.

3. Context Switching issue on all devices: Users who rely on screen readers may find it disorienting if the dark theme toggle button is in an unexpected location. Proper context and labeling are crucial for users who navigate content through screen readers.

4. Contrast and Readability issue on mobile devices: Dark theme toggle buttons often involve a visual change in the user interface. Placing it in the footer may lead to contrast and readability issues, as the footer is usually less prominent and may not provide enough visual separation for the button.

Here are some common and effective locations to consider:

1. Header or Navigation Menu: Position the dark theme toggle button in the header or navigation menu of your website or app. This location is easily accessible and noticeable for users, making it a convenient choice.

2. Top Right or Top Left Corner: Position the dark theme toggle at the top right or top left corner of the screen. It's a common location for important settings and actions, making it easily accessible.

3. Floating or Sticky Button: Implement a floating or sticky button that follows the user as they scroll. This ensures the dark theme switch is always within reach, regardless of the user's position on the page.

4. icons: Our website use SVG icon which is good, but they are not responsive enough. Also i suggest to align center all the content(text under icons) for smaller screen. Since website uses grids, then it is very easy to do it.

review PR

[thibaudcolas]

@ShubhamOulkar there is a lot here. In the future please open one issue per issue.

[ShubhamOulkar]

Ok @thibaudcolas