Unlocking a world of accessibility: how internationalization is the key

Slide 1

Slide 1 text

Unlocking a world of accessibility: how internationalization is the key? By Anil Kumar, @anilbms75

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

@anilbms75

Slide 4

Slide 4 text

@anilbms75

Slide 5

Slide 5 text

Experience

Slide 6

Slide 6 text

@anilbms75

Slide 7

Slide 7 text

@anilbms75

Slide 8

Slide 8 text

@anilbms75

Slide 9

Slide 9 text

@anilbms75

Slide 10

Slide 10 text

@anilbms75

Slide 11

Slide 11 text

@anilbms75 Image:unsplash / source:Moz blog Over 50% of Google Queries in Non-English Languages

Slide 12

Slide 12 text

@anilbms75 source:CSA research 72% Prefer Websites in Their Native Language

Slide 13

Slide 13 text

@anilbms75 source:Stripe - The state of European checkouts in 2020 74% of European Checkouts Lack Local Language Translation

Slide 14

Slide 14 text

@anilbms75 source:visualcapitalist

Slide 15

Slide 15 text

@anilbms75 ಅಂತಗರ್ಗತ ವಿನಾ್ಯಾಸ 24 ಸ ಮ್ಮೇಳನಕೆ್ಕೆ ಸುಸಾ್ವಾಗತ ಪ್ರವೇಶಿಸುವಿಕೆಯ ಪ್ರಪಂಚವನು್ನ ಅನಾ್ಲಾಕ್ ಮಾಡಲಾಗು ತ್ತಿದೆ : ಅಂತರರಾ ಷ್ಟ್ರೕಕರಣವು ಹೇಗೆ ಪ್ರಮುಖವಾಗಿದೆ ಕನ್ನಡ (Kannada) Welcome to the Inclusive Design 24 event Unlocking a world of accessibility: how internationalization is the key

Slide 16

Slide 16 text

@anilbms75 How can we enable our apps to provide great experience globally?

Slide 17

Slide 17 text

language localization is the process of adapting a product's translation to a speciﬁc country or region. -Wikipedia @anilbms75

Slide 18

Slide 18 text

@anilbms75

Slide 19

Slide 19 text

@anilbms75

Slide 20

Slide 20 text

@anilbms75 Airbnb en-US vs de

Slide 21

Slide 21 text

@anilbms75

Slide 22

Slide 22 text

slack.com vs slack.com/intl/de-de/

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

@anilbms75 How can we enable our apps to provide great experience globally?

Slide 25

Slide 25 text

@anilbms75 Internationalization = i18n

Slide 26

Slide 26 text

@anilbms75 Internationalization (i18n) analogy Not Internationalized (Hardcoded) code Internationalized code

Slide 27

Slide 27 text

@anilbms75 Source: pinterest

Slide 28

Slide 28 text

@anilbms75

Slide 29

Slide 29 text

@anilbms75

Slide 30

Slide 30 text

@anilbms75

Slide 31

Slide 31 text

Language Detection

Slide 32

Slide 32 text

Hardware Level

Slide 33

Slide 33 text

Keyboard Based on Language

Slide 34

Slide 34 text

Operating System Level

Slide 35

Slide 35 text

Language Select on iPhone

Slide 36

Slide 36 text

Native Application Level

Slide 37

Slide 37 text

Chrome Browser Language Selection

Slide 38

Slide 38 text

Web Application Level

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

What Is the User's Preferred Language?

Slide 41

Slide 41 text

Cookie Request header Fallback language

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Accept-Language

Slide 44

Slide 44 text

@anilbms75 How can we enable our apps to provide great experience globally?

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

@anilbms75 i18next source:i18next docs

Slide 49

Slide 49 text

@anilbms75

Slide 50

Slide 50 text

@anilbms75

Slide 51

Slide 51 text

@anilbms75 Angular I18N Tutorials

Slide 52

Slide 52 text

@anilbms75

Slide 53

Slide 53 text

@anilbms75 I18n and l10n: List of developer tutorials

Slide 54

Slide 54 text

Thanks Twitter: @anilbms75 Email: anilbms75@gmail.com Linkedin: linkedin.com/in/anilkrishnashetty