Vue-cli: Language attribute of <html> should not be set to English by default
Version
4.5.7
Reproduction link
https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/generator/template/public/index.html#L2
Environment info
Does not matter, but anyway…
System:
OS: macOS 10.15.7
CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
Binaries:
Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
Yarn: Not Found
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
Browsers:
Chrome: 85.0.4183.121
Edge: 86.0.622.38
Firefox: 81.0.1
Safari: 14.0
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-helper-vue-transform-on: 1.0.0-rc.2
@vue/babel-plugin-jsx: 1.0.0-rc.3
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 4.5.6
@vue/babel-preset-jsx: 1.1.2
@vue/babel-sugar-functional-vue: 1.1.2
@vue/babel-sugar-inject-h: 1.1.2
@vue/babel-sugar-v-model: 1.1.2
@vue/babel-sugar-v-on: 1.1.2
@vue/cli-overlay: 4.5.6
@vue/cli-plugin-babel: ^4.5.6 => 4.5.6
@vue/cli-plugin-router: 4.5.6
@vue/cli-plugin-typescript: ^4.5.6 => 4.5.6
@vue/cli-plugin-vuex: 4.5.6
@vue/cli-service: ^4.5.6 => 4.5.6
@vue/cli-shared-utils: 4.5.6
@vue/component-compiler-utils: 3.2.0
@vue/preload-webpack-plugin: 1.1.2
@vue/web-component-wrapper: 1.2.0
typescript: ~3.9.3 => 3.9.7
vue: ^2.6.12 => 2.6.12
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.3 (16.0.0-beta.8)
vue-router: ^3.4.5 => 3.4.5
vue-simple-suggest: ^1.10.2 => 1.10.2
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.12 => 2.6.12
vue-template-es2015-compiler: 1.9.1
vuex: ^3.5.1 => 3.5.1
npmGlobalPackages:
@vue/cli: 4.5.7
Steps to reproduce
Look at the template, language attribute is hard set to English.
Look at Vue-bases websites in German and a lot will have this misleading . I fixed it for our sites, but there will be tons of others.
What is expected?
The language attribute on the element of the template should be absent. This will let the user agent decide (e.g. autodetect) the language of the page.
What is actually happening?
Language ist set to "en" (English) by default. If a developer has no knowledge of the effect of the language attribute or overlooks it, this might trigger weird translations and screen reader output in the wrong language.
We had this bug multiple times because we simply overlooked the attribute. User then complained that country and district names were displayed weird. Example: Vienna's district "Liesing" has beed translated to "Lügen", because Google Auto-Translate jumped in and thought the Vue-based site is in English, so it translated a page in German as English back into German.
I think don't providing a default language is the best way, since than the user agent has to decide on its own. Most of the time this will be perfect. If developers really want to switch the language, they should know the lang-attribute an do this on their own.
It even got attention on Reddit …
https://old.reddit.com/r/Austria/comments/j9e2gx/wer_war_schon_mal_im_23_bezirk/
botic
All 6 comments
ORF.at ran an apology on their frontpage: https://orf.at/stories/3184880/ Since it's the most popular website after Wikipedia, Google, YouTube and Amazon in Austria, quite a lot people have been affected by this issue. A global template should never enforce regional / localized attributes like language.
botic
on 12 Oct 2020
Have encountered this problem, but Chrome only auto-translate if user setting like below,
User set Offer to translate pages in this lanuage for English.
Then visiting the page with lang=en, Chrome will give a prompt
If user check Always translate English, Chrome will always translate automatically, treating page language as English, and translate it to target language.
Removing lang=en or setting a correct value by myself is ok for me.
fangbinwei
on 14 Oct 2020
If user check
Always translate English, Chrome will always translate automatically, treating page language as English, and translate to target language.
I have no Android device, but from the screenshots of our users there has been no clear warning / prominent indicatior that they are visiting the site in a translated version. The users visit the site with the expectation of a German text, so why should the look if some translation kicks in?
Best practice indicates omitting the lang attribute
From the W3C Internationalization I18n Activity group:
You should always identify the human language of the text, when known, in HTML or a format based on XML, so that applications such as voice browsers, style sheets, and the like can process the text in an appropriate way.
Since vue-cli doesn't explicitly prompt the language of a web application, the lang attribute should be omitted. If users care about setting a language attribute, e.g. to follow WCAG (Web Content Accessibility Guidelines), the have enough implementation guidelines how to do this and why it is important to set it to the correct value.
botic
on 14 Oct 2020
I believe that using the lang="" in <html> is better according to https://github.com/h5bp/html5-boilerplate/issues/1542
fangbinwei
on 22 Oct 2020
This issue came up in this article: https://www.matuzo.at/blog/lang-attribute/, and I think @mmatuzovic' suggestion of having a css error if you forget to change it is nice:
html[lang=""]::before,
html[lang*=" "]::before {
content: "the lang attribute on <html> has been empty";
}
Haroenv
on 23 Oct 2020
Maybe I'm too conservative, but I don't think active warnings should be enforced in a default configuration via a generator. Something like Manuel suggests should be part of a CI workflow or your local testing.
botic
on 23 Oct 2020
Related issues
chasegiunta
·
3Comments
BusyHe
·
3Comments
eladcandroid
·
3Comments
jgribonvald
·
3Comments
brandon93s
·
3Comments
Most helpful comment
Maybe I'm too conservative, but I don't think active warnings should be enforced in a default configuration via a generator. Something like Manuel suggests should be part of a CI workflow or your local testing.