Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Language attribute of <html> should not be set to English by default #5945

Closed
botic opened this issue Oct 12, 2020 · 6 comments · Fixed by #5992
Closed

Language attribute of <html> should not be set to English by default #5945

botic opened this issue Oct 12, 2020 · 6 comments · Fixed by #5992
Labels
bug

Comments

@botic
Copy link

botic commented Oct 12, 2020 •
edited
Loading

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/

5w3t5hqmbjs51_jpg__JPEG-Grafik__1080 × 1521_Pixel__-_Skaliert__62__
@botic
Copy link
Author

botic commented Oct 12, 2020

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.

@fangbinwei
Copy link
Collaborator

fangbinwei commented Oct 14, 2020 •
edited
Loading

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.

image

Then visiting the page with lang=en, Chrome will give a prompt

image

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.

@botic
Copy link
Author

botic commented Oct 14, 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.

@fangbinwei
Copy link
Collaborator

I believe that using the lang="" in <html> is better according to h5bp/html5-boilerplate#1542

fangbinwei added a commit to fangbinwei/vue-cli that referenced this issue Oct 22, 2020
@fangbinwei
fix: using lang attribute with empty string
145e405 
Fixes vuejs#5945
@fangbinwei fangbinwei mentioned this issue Oct 22, 2020
Merged
9 tasks
fangbinwei added a commit to fangbinwei/vue-cli that referenced this issue Oct 22, 2020
@fangbinwei
fix: using lang attribute with empty string in html template
7d04553 
Fixes vuejs#5945
@Haroenv
Copy link
Contributor

Haroenv commented Oct 23, 2020 •
edited
Loading

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";
}

@botic
Copy link
Author

botic commented Oct 23, 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.

haoqunjiang pushed a commit that referenced this issue Oct 26, 2020
@fangbinwei
fix: using lang attribute with empty string in html template (#5992)
2373df1 
Fixes #5945

`lang="en"` may be wrong to users, use empty string instead. See : h5bp/html5-boilerplate#1542
haoqunjiang pushed a commit that referenced this issue Jan 6, 2021
@fangbinwei @haoqunjiang
fix: using lang attribute with empty string in html template (#5992)
ed2cf22 
Fixes #5945

`lang="en"` may be wrong to users, use empty string instead. See : h5bp/html5-boilerplate#1542
@farhadnowzari farhadnowzari mentioned this issue May 19, 2021
Closed
@oliverfoster oliverfoster mentioned this issue Feb 12, 2024
Closed
@botic botic mentioned this issue Nov 4, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: using lang attribute with empty string in html template fangbinwei/vue-cli
4 participants
@botic @haoqunjiang @Haroenv @fangbinwei