Add accessibility menu guide

[mindrones]

Similarly to the `/info route, we need to:

• move the /guide.svelte to guides/indicators.svelte
• move the /guide route to guides/index.svelte and redirect it to guides/indicators.svelte
• add guides/a11ymenu.svelte
• add tabs to select what guide to read

We need to reference guides/a11ymenu.svelte in the accessibility statement.

[mindrones]

Draft text below.

What the a11y menu does

You can use the menu to change 2 groups of features.

Text features

You can change:

• the font (in particular we provide a font specific to help people with Dyslexia),
• the font size,
• the line height (distance between lines oif text in a paragraph),
• the letter spacing (distance between letters in a word),
• the word spacing (distance between words),

Color features

You can:

• invert all the colors in the app,
• select a color vision deficiency: this will remap all the colors in the app to compensate for a diminished ability to see certain colors,
• edit the hue of all the colors in the app,
• edit the saturation of all the colors in the app (by editing their level of grey),
• edit the brightness of all the colors in the app,
• edit the contrast of all the colors in the app,

How to use the menu

How to toggle the a11y menu on/off

To show or hide the a11y menu, you need to click the accessibility icon in the top-right corner of the app.

Where to find the menu

On desktops, the menu should appear at the center of the screen sligthly toward the bottom.

On small screens, like a mobile phone, the menu should appear below the navigation header, near the thumb.

How to navigate the a11y menu

The menu is composed of 3 sections:

• the main area, in the center, shows the controls to manipulate a certain feature;
• on the right, you have 2 buttons to navigate to the next feature
• on the left, you have 2 buttons to reset all the features of a particular group (text or color)

Editing features

List of values

When you have a list of options, you might get presented with a series of radio buttons. For small screens, the list of radio buttons will be just 2 buttons:

• for numeric values, these will be a plus and a minus button
• otherwise, these will be 2 left/right arrows that navigate to the previous/next option, respectively.

For example, you can choose multiple font sizes.

Pair of values

When you have only 2 opposite options you get presented with a switch.

For example, you can invert all colors of the app, or not.

Range of values

When the feature you are editing is defined by a numerical range, you can select any value in between the range extent using a slider.

For example, you can change the saturation gradually, from no change to grey.