Reflow / Support for high zoom ratio

[hayavuk]

URL: /
Criterion: 1.4.10 Reflow (AA)

Usually responsive layout is considered when adding support for small(er) screens. There are also users that turn large screens into small screens for one or the other reasons. Two common reasons are poor eyesight and distance from the screen.

When the Indico page is zoomed in all the way to 400%, it looks like this:

I see that some of the controls no longer fit the viewport.

I intend to fix this issue by applying flexbox layout to all containers with flex-wrap property set to wrap. Additionally, I will need to play with the sizes of various elements in order to accommodate them all.

[hayavuk]

@ThiefMaster, @troun and I have discussed possible solutions for the session bar which will be a challenge for responsive layouts. We decided to try the solution used by the UK government website:

The www.gov.uk website uses a single large panel for the menu, which is activated by a button in the top corner.

The advantage of this setup is that it has a large area that we can use to accommodate all controls and introduce a clearer structure within that area as well as provide additional explanations for items as needed. It is easier to make responsive as it is just a full-width container and not a floating element (e.g., we can add scrollbars on mobile devices, etc.).

Since this menu is one of the biggest obstacles for responsiveness, I will first reimplement the menu before I move on to the other elements.

[hayavuk]

The code for the language selector has a lot of duplication and isn’t semantic nor accessible. Namely, anchor tags without a href attribute are not keyboard focusable, and semantically the language list is not a set of anchors but a set of radios or buttons.

I intend to make the following choices to this:

1. Convert the language selector into a set of buttons, each having a name="lang" and a value that matches the desired locale. Activating any of the buttons will submit the form, so it’s effectively a single-click operation.
2. Add a redir parameter to /change-language endpoint. When this parameter is specified, the endpoint will perform a 303 redirect to the specified URL.
3. When user submits the form, the language should be set using POST and then the user should be redirected to the URL specified in the redir parameter which is set to the current page using a hidden input.

This should remove the need for having any client-side JavaScript to handle language selection.

[hayavuk]

Here’s a rough sketch of the pull-down menu:

Here’s a short summary of how it is intended to work.

TZ indicator in the header

Although the actual time zone selector is moved into the pull-down menu, I’ve kept the TZ indicator as a separate item in the header. This is because this information should be available on category/event page to show the category/event time zone in case the user selects that option.

The TZ indicator is also a button that opens the menu. I did not make part of the menu button itself because they need different accessible labels.

Animation

There is no animation on this widget. This is intentional due to its large surface and potential to create motion sickness for some users. Since the effect is mostly cosmetic, I opted for avoiding the animation altogether rather than using prefer-reduced-motion media query to disable it.

Session toolbar (pull-down menu)

The session toolbar is laid out as a pull down menu.

I styled this to the extent of demonstrating the intent, so the styling is not perfect.

This section is responsive, so it should naturally collapse into a single-column layout on small screens.

Language selector

The language selector is implemented as a form that submits as a normal form. There is no JavaScript involved in this, and in combination with a new redir parameter that will be added to the /change-language endpoint, we should be able to perform the same behavior that we have now without using any client side JavaScript.

A checkmark is added to the selected option to make it more obvious.

Hidden text is included before the list that indicates the current selection to the screen readers and other accessibility tools.

Time zone selector

The TZ selector is the second section in the session toolbar. I’ve experimented with a modification to the UX. Rather than having three radio buttons one above the other, I’ve condensed the labels to the essential keywords and extracted the common label into the fieldset legend.

Checkmark is included in the button (label element) to indicate the current selection, in addition to changing the background of the selected item. (There is an obvious color contrast issue here due to the use of emojis, but you get the idea.)

Another modification that was made to the form is that it does not disable the select list, and instead automatically toggles the radio to “Other” when the select list is clicked. I still have not figured out a better way to indicate the relationship between the select list and the three buttons above it, but this should at least help the user develop some intuition about it.

User profile section

The user profile section is intended to contain a login link, an indicator about whether a page is public or not, and for the authenticated user, the account name, and the stuff that is currently in the drop-down menu.

We would omit the language selection from the user profile menu with this layout.

[dhollis]

Would adding in a search function for the TZ selector be something that you would consider? Not sure how this would fit from an accessibility view-point, but this could be a nice UX improvement for the end user.

[hayavuk]

It’s not related to accessibility, but it can be added trivially and accessibly for sure.

I think it would require a detailed spec before it can be done, though.