Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Mind Your lang
Presented by Adrian Roselli for
Accessibility Camp Toronto 2016
Slides from this talk will be available at
...
About Adrian Roselli
About Adrian Roselli
• I’ve written some stuff,
• Member of W3C,
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid ...
What Is lang?
What Is lang?
• Examples:
<html lang="en">
<html lang="en-ca">
<html lang="en-us">
<html lang="en-GB-x-hixie">
• Source:
B...
Who Uses lang?
Who Uses lang?
• WHATWG Bug: “why do these examples of <html>
lack the lang attribute?”
This is where my research started....
Who Uses lang?
• “why do these examples of <html> lack the
lang attribute?”
• WHATWG HTML bug (26942)
• Reported: 2014-09-...
Who Uses lang?
• Pulled January 2015 archive from
WebDevData.org (a W3C Community Group),
• Parsed 84,054 pages,
• Found t...
Why Would You Use lang?
Why Would You Use lang?
• HTML 5 Specification
• HTML Validation
• Internationalization (i18)
• WCAG 2.0 A, AA
• Numbers
•...
HTML 5 Specification
HTML 5 Specification
• The spec now provides a warning,
• Notes that must match detected language of
page,
• Identified wa...
HTML 5 Specification
http://w3c.github.io/html/dom.html#lang-warning
HTML Validation
HTML Validation
• The W3C HTML validator compares the
following attributes on the page with the
detected page language:
• ...
HTML Validation
https://www.w3.org/blog/International/2016/07/13/w3c-html5-validator-enhanced-with-language-detection-func...
Internationalization (i18n)
Internationalization (i18n)
• Spelling and grammar checkers:
• spellcheck attribute (at caniuse.com)
• CSS:
• ::first-lett...
Internationalization (i18n)
• Font selection for CJK (for political reasons).
https://medium.com/behancetech/localization-...
WCAG 2.0 A, AA
WCAG 2.0 A, AA
• Guideline 3.1 Readable: Make text content
readable and understandable.
• 3.1.1 Language of Page (Level A)...
Numbers
Numbers
• A browser can adjust decimal characters in
number fields,
• Some use comma, some use period,
• Yes, this is for ...
Numbers
http://codepen.io/aardrian/pen/rOGYNL
Numbers
http://codepen.io/aardrian/pen/rOGYNL
Dates
Dates
• Not so much.
http://s.codepen.io/aardrian/debug/ZpgNWJ
Hyphens
Hyphens
• For browsers that support hyphens, you will
enjoy the benefit just by using the attribute.
• This assumes you us...
Hyphens
http://codepen.io/aardrian/pen/zKVLvO
Hyphens
http://codepen.io/aardrian/pen/zKVLvO
Quotes
Quotes
• Let the browser choose the quote marks
based on the language.
• This assumes you use the following HTML:
• <q>…</...
Quotes
http://s.codepen.io/aardrian/debug/zKgbVv
Quotes
http://s.codepen.io/aardrian/debug/zKgbVv
Screen Readers
Screen Readers
• VoiceOver uses it to auto-switch voices.
• VoiceOver can speak using a different accent.
• JAWS uses it t...
Screen Readers
http://s.codepen.io/aardrian/debug/eBOrZY
NVDA:
Screen Readers
http://s.codepen.io/aardrian/debug/eBOrZY
JAWS:
Fun Facts
Fun Facts
• WHATWG HTML 5
<html class=split lang=en-US-x-hixie>
• W3C HTML 5.0
<html lang="en-US-x-Hixie">
• W3C HTML 5.1
...
Fun Facts
“Private-use subtags do not appear in the
subtag registry, and are chosen and maintained
by private agreement am...
Fun Facts
• There is a normative spec:
• Hixie English
• Version: 1.0-pre43
• Language Tag: en-GB-x-Hixie
• “This is a nor...
Questions?
Mind Your lang
Presented by Adrian Roselli for
Accessibility Camp Toronto 2016
Slides from this talk will be available at
...
Mind Your lang — Accessibility Camp Toronto 2016
Nächste SlideShare
Wird geladen in …5
×

Mind Your lang — Accessibility Camp Toronto 2016

951 Aufrufe

Veröffentlicht am

A look at how the lang attribute can affect not just accessibility and assistive technology, but also styling and localization.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Mind Your lang — Accessibility Camp Toronto 2016

  1. 1. Mind Your lang Presented by Adrian Roselli for Accessibility Camp Toronto 2016 Slides from this talk will be available at rosel.li/a11yTO “Toronto Skyline” by Ronan Jouve, CC BY-NC 2.0
  2. 2. About Adrian Roselli
  3. 3. About Adrian Roselli
  4. 4. • I’ve written some stuff, • Member of W3C, • Building for the web since 1993, • Learn more at AdrianRoselli.com, • Avoid on Twitter @aardrian. Great bedtime reading! About Adrian Roselli
  5. 5. What Is lang?
  6. 6. What Is lang? • Examples: <html lang="en"> <html lang="en-ca"> <html lang="en-us"> <html lang="en-GB-x-hixie"> • Source: BCP47: Tags for Identifying Languages, https://tools.ietf.org/html/bcp47 We’ll come back to that last one.
  7. 7. Who Uses lang?
  8. 8. Who Uses lang? • WHATWG Bug: “why do these examples of <html> lack the lang attribute?” This is where my research started. “Why not? Realistically, few people include it. It just means the language is unknown.”
  9. 9. Who Uses lang? • “why do these examples of <html> lack the lang attribute?” • WHATWG HTML bug (26942) • Reported: 2014-09-30 • Resolved: 2016-04-18 • Git merge: • Editorial: Add lang to most examples #1061 Spoiled the surprise, I know, but we aren’t here for a bug.
  10. 10. Who Uses lang? • Pulled January 2015 archive from WebDevData.org (a W3C Community Group), • Parsed 84,054 pages, • Found that 39,433 pages use the lang attribute on the <html> element, • 47% use <html lang="…">. 12,762 use xml:lang, which is wrong.
  11. 11. Why Would You Use lang?
  12. 12. Why Would You Use lang? • HTML 5 Specification • HTML Validation • Internationalization (i18) • WCAG 2.0 A, AA • Numbers • Dates • Hyphens • Quotes • Screen Readers https://github.com/w3c/html/issues/218
  13. 13. HTML 5 Specification
  14. 14. HTML 5 Specification • The spec now provides a warning, • Notes that must match detected language of page, • Identified ways which it is used, • Added in April 2016 • add warning/advice about lang attribute use #218 https://github.com/w3c/html/issues/218
  15. 15. HTML 5 Specification http://w3c.github.io/html/dom.html#lang-warning
  16. 16. HTML Validation
  17. 17. HTML Validation • The W3C HTML validator compares the following attributes on the page with the detected page language: • dir • lang • If there is a mismatch, the validator will provide a warning, • If there is no dir or lang, the validator will provide a warning. It will know if you lie.
  18. 18. HTML Validation https://www.w3.org/blog/International/2016/07/13/w3c-html5-validator-enhanced-with-language-detection-functionality/
  19. 19. Internationalization (i18n)
  20. 20. Internationalization (i18n) • Spelling and grammar checkers: • spellcheck attribute (at caniuse.com) • CSS: • ::first-letter (at caniuse.com) • Hanging punctuation • Translation tools (particularly when looking at parts of a page). https://www.w3.org/International/questions/qa-lang-why
  21. 21. Internationalization (i18n) • Font selection for CJK (for political reasons). https://medium.com/behancetech/localization-gotchas-for-asian-languages-cjk-e52a57c0fde1#.vkrhr614s
  22. 22. WCAG 2.0 A, AA
  23. 23. WCAG 2.0 A, AA • Guideline 3.1 Readable: Make text content readable and understandable. • 3.1.1 Language of Page (Level A) • H57: Using language attributes on the html element • 3.1.2 Language of Parts (Level AA) • H58: Using language attributes to identify changes in the human language https://www.w3.org/TR/2008/REC-WCAG20-20081211/#meaning-doc-lang-id
  24. 24. Numbers
  25. 25. Numbers • A browser can adjust decimal characters in number fields, • Some use comma, some use period, • Yes, this is for Latin scripts. • Do not worry about browser support unless you are mixing within a page. • In that case, Firefox is the way to go. If left blank, the browser may go with local settings.
  26. 26. Numbers http://codepen.io/aardrian/pen/rOGYNL
  27. 27. Numbers http://codepen.io/aardrian/pen/rOGYNL
  28. 28. Dates
  29. 29. Dates • Not so much. http://s.codepen.io/aardrian/debug/ZpgNWJ
  30. 30. Hyphens
  31. 31. Hyphens • For browsers that support hyphens, you will enjoy the benefit just by using the attribute. • This assumes you use the following CSS: • hyphens: auto; • -ms-hyphens: auto; (ugh) • -webkit-hyphens: auto; (also ugh) • Browser support: • http://caniuse.com/#search=hyphens If left blank, the browser may go with local settings.
  32. 32. Hyphens http://codepen.io/aardrian/pen/zKVLvO
  33. 33. Hyphens http://codepen.io/aardrian/pen/zKVLvO
  34. 34. Quotes
  35. 35. Quotes • Let the browser choose the quote marks based on the language. • This assumes you use the following HTML: • <q>…</q> Obviously you can override this with CSS, but that would be silly.
  36. 36. Quotes http://s.codepen.io/aardrian/debug/zKgbVv
  37. 37. Quotes http://s.codepen.io/aardrian/debug/zKgbVv
  38. 38. Screen Readers
  39. 39. Screen Readers • VoiceOver uses it to auto-switch voices. • VoiceOver can speak using a different accent. • JAWS uses it to load the correct phonetic engine / phonologic dictionary. • NVDA uses it in the same way as VoiceOver and JAWS. • For HTML in ePub or Apple iBooks document, it affects how VoiceOver will read the book. • Leaving out the lang attribute may require the user to manually switch to the correct language for proper pronunciation. This gist is that things can sound funny if done wrong.
  40. 40. Screen Readers http://s.codepen.io/aardrian/debug/eBOrZY NVDA:
  41. 41. Screen Readers http://s.codepen.io/aardrian/debug/eBOrZY JAWS:
  42. 42. Fun Facts
  43. 43. Fun Facts • WHATWG HTML 5 <html class=split lang=en-US-x-hixie> • W3C HTML 5.0 <html lang="en-US-x-Hixie"> • W3C HTML 5.1 <html lang="en"> You can confirm this by the viewing the source of each.
  44. 44. Fun Facts “Private-use subtags do not appear in the subtag registry, and are chosen and maintained by private agreement amongst parties.” “Because these subtags are only meaningful within private agreements and cannot be used interoperably across the Web, they should be used with great care, and avoided whenever possible.” http://www.w3.org/International/articles/language-tags/Overview.en.php#extension
  45. 45. Fun Facts • There is a normative spec: • Hixie English • Version: 1.0-pre43 • Language Tag: en-GB-x-Hixie • “This is a normative reference to Hixie English. Hixie English is a variant of the language spoken by the majority of the residents of the United Kingdom (England) and the United States of America.” http://ian.hixie.ch/bible/english
  46. 46. Questions?
  47. 47. Mind Your lang Presented by Adrian Roselli for Accessibility Camp Toronto 2016 Slides from this talk will be available at rosel.li/a11yTO “Toronto Skyline” by Ronan Jouve, CC BY-NC 2.0

×