querkmachine
commented
2 years ago Note: It is already possible to do this by manually specifying the visually-hidden text in the Nunjucks html paramenter and setting visuallyHiddenText to false.
For example:
{{ govukErrorMessage({
visuallyHiddenText: false,
html: '<span class="govuk-visually-hidden">错误：</span>输入事件名称'
}) }}
What
Error messages currently contain a fixed content order, which is hardcoded into the component's Nunjucks template. This is composed of a block of visually-hidden text (
visuallyHiddenText, defaults to 'Error') followed by a colon (:), a hardcoded space, then the configured error message (htmlortext).This prefixes the message with 'error' for screen readers, so that the context of the message announced up-front and is easier to understand.
For example, the component may currently output this text:
Why
Having a hardcoded content order can make it more difficult to appropriately localise the string.
In particular, the currently hardcoded colon and space characters are incompatible with certain languages. Some logographic written languages—such as Chinese and Japanese—use a fixed-width colon character that fits better alongside logograms, and don't include a space after it.
Translators may also find that the 'Error' label being visible is more useful to their target users—as red does not indicate incorrectness or danger in all cultures (it symbolises happiness and prosperity in Chinese culture, for example).
Although it is currently possible for services to pass HTML into the error message and remove the initial 'Error:' section by setting
visuallyHiddenTexttofalse, we may want to investigate methods of either makingvisuallyHiddenTextwork with other languages, incorporating the colon and space into the editable area, or removing the use of a dedicated parameter and hardcoded text in favour of only using thehtmlparameter.Who needs to work on this
Developers
Who needs to review this
Developers
Done when