Change colour of helper classes

Widgets
1

Hello,
Is it possible to adapt the colours of the helper classes, e. g. h_blueLightBG for reasons of accessability optimization (to achieve higher contrast with the font)?

We tried to manipulate the colour by overwriting the css class with our colour value. The result was that not the field but the label and the field surrounding area was coloured. The colour of the field itself did not change.
However, the field colour could be manipulated within the developer menu of the browser via changing css settings.

Is it furthermore possible to add alt texts to fields to indicate the h_blueLightBG to blind people?

2

Hello,

I would like to help here, but I don’t understand the problem here.

I would be glad if you come back to me, and we could talk about it, and you could show me the wanted use case.

Thanks,
Anna WeiĂźenborn (Leipzig)

3

Thanks, Juliane, for giving more context via chat.
So my answer to this topic is the following:

Unfortunately, there is no easy or modelable solution. For a lighter color value as background color, you’ll probably have to customize it.
The background color alone also has other accessibility issues:

  • For blind users, the information should also be given as text
  • For poorly sighted users, these fields must be distinguishable from the regular fields - with a contrast difference of 3:1 for the background color light blue compared to the regular background color white - and then the contrast from the light blue background must be met with 4.5:1 to the font color, so it becomes quite difficult. The solution for this is a structure feature as a distinction, possibly in addition to the background color.
    - Possibility at the label, e.g. “Label **” and a legend explaining **.
    - Possibility at the input, e.g. icon or tooltip, even if there are several tooltips at the field - but here you should use other icons than the default (i) to distinguish it from the default tooltips.
    - You can discuss further possibilities in the project

You probably can’t avoid a customization at the moment.

I tested the option with alt text on the field and this doesn’t work. alt-Attributes are ignored by screenreader on an input.
Furthermore, I can give you the hint of “info message” for input fields, which can be set in A12. It should be modelable already, but I am not sure.

For customization handling, a developer is needed - maybe this question is really better to be answered by A12 support like @markus-agile-fog.

Thanks,
Anna

4

Hello,
regarding adapting colors, there is a theming option in the A12. Please check the documentation Widgets Showcase if this is what you would like to achieve.

About alt text, there is possibility to customise your component via widgetMap (GetA12 Login).

5

Hi @juliane-free-cursor,

in my eyes the cleanest solution is to use a custom theme wrapper on level of widget map or form model map (like @ondrej-virtual-peak mentioned).

Overwriting the existing colors of the color named helper classes is not possible (probably by design).
More difficult alternative (from your purpose) is to create a complete custom css class that is adding the color to the underlying element (but then you have to keep in mind the internal widgets structure which can then lead to issues on updates)

If you are fine with the provided answers please mark one of them as solution, thx :slight_smile:

6

redacted redacted redacted

7

I would like to add: We were not able to achieve alt text in this way. Instead, we extended placeholder texts where we already used them with a remark, and added placeholder texts in the same colour as the background (thus invisible) to the fields which did not already have a placeholder text. In this way, a screen reader can pick up the information.