Selfish Accessibility

Mind Your langPresented 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

1

About Adrian Roselli

2

EGO

About Adrian Roselli

3

Ive 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

4

What Is lang?

5

What Is lang? Examples:

Source:BCP47: Tags for Identifying Languages, https://tools.ietf.org/html/bcp47

Well come back to that last one.

6

Who Uses lang?

7

Who Uses lang?WHATWG Bug: why do these examples of lack the lang attribute?

This is where my research started.Why not? Realistically, few people include it. It just means the language is unknown.

8

Who Uses lang?why do these examples of lack the lang attribute?WHATWG HTML bug (26942)Reported: 2014-09-30Resolved: 2016-04-18Git merge:Editorial: Add lang to most examples #1061Spoiled the surprise, I know, but we arent here for a bug.

9

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 element,47% use .12,762 use xml:lang, which is wrong.

10

Why Would You Use lang?

11

Why Would You Use lang?HTML 5 SpecificationHTML ValidationInternationalization (i18)WCAG 2.0 A, AANumbersDatesHyphensQuotesScreen Readers

https://github.com/w3c/html/issues/218

HTML 5 Specification

13

HTML 5 SpecificationThe spec now provides a warning,Notes that must match detected language of page,Identified ways which it is used,Added in April 2016add warning/advice about lang attribute use#218https://github.com/w3c/html/issues/218

HTML 5 Specificationhttp://w3c.github.io/html/dom.html#lang-warning

HTML Validation

16

HTML ValidationThe W3C HTML validator compares the following attributes on the page with the detected page language:dirlangIf 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.

HTML Validation

https://www.w3.org/blog/International/2016/07/13/w3c-html5-validator-enhanced-with-language-detection-functionality/

Internationalization (i18n)

19

Internationalization (i18n)Spelling and grammar checkers:spellcheck attribute (at caniuse.com)CSS:::first-letter (at caniuse.com)Hanging punctuationTranslation tools (particularly when looking at parts of a page).

https://www.w3.org/International/questions/qa-lang-why

Internationalization (i18n)Font selection for CJK (for political reasons).

https://medium.com/behancetech/localization-gotchas-for-asian-languages-cjk-e52a57c0fde1#.vkrhr614s

WCAG 2.0 A, AA

22

WCAG 2.0 A, AAGuideline 3.1 Readable: Make text content readable and understandable.3.1.1 Language of Page (Level A)H57: Using language attributes on the html element3.1.2 Language of Parts (Level AA)H58: Using language attributes to identify changes in the human languagehttps://www.w3.org/TR/2008/REC-WCAG20-20081211/#meaning-doc-lang-id

Numbers

24

NumbersA 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.

Numbers

http://codepen.io/aardrian/pen/rOGYNL

Numbers

http://codepen.io/aardrian/pen/rOGYNL

Dates

28

29

DatesNot so much.http://s.codepen.io/aardrian/debug/ZpgNWJ

Hyphens

31

HyphensFor 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=hyphensIf left blank, the browser may go with local settings.

Hyphens

http://codepen.io/aardrian/pen/zKVLvO

Hyphens

http://codepen.io/aardrian/pen/zKVLvO

Quotes

35

QuotesLet the browser choose the quote marks based on the language.This assumes you use the following HTML:Obviously you can override this with CSS, but that would be silly.

Quoteshttp://s.codepen.io/aardrian/debug/zKgbVv

Quoteshttp://s.codepen.io/aardrian/debug/zKgbVv

Screen Readers

39

Screen ReadersVoiceOver 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.

Screen Readershttp://s.codepen.io/aardrian/debug/eBOrZYNVDA:

41

Screen Readershttp://s.codepen.io/aardrian/debug/eBOrZYJAWS:

42

Fun Facts

43

Fun FactsWHATWG HTML 5

W3C HTML 5.0

W3C HTML 5.1

You can confirm this by the viewing the source of each.

Fun FactsPrivate-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

Fun FactsThere is a normative spec:Hixie EnglishVersion: 1.0-pre43Language Tag: en-GB-x-HixieThis 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

Questions?

47

Mind Your langPresented 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

48