Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Nashville 2014: A11Y? I18N? L10N? UTF8? WTF? (long version)


Published on

Web accessibility (A11Y) is about making the web usable for people with disabilities, and it also benefits others with changing abilities, such as older people. Internationalization (I18N) and localization (L10N) are about translating web sites into other languages. UTF8 is a Unicode character set, which is now the dominant one used on the web, and it’s designed to include characters from just about every written language. Each of these topics are typically discussed in isolation from each other, but in this talk – after a gentle introduction to each of them – we’ll explore their interconnections. We’ll also take a look at what WordPress provides for supporting them in your work creating sites, themes, or plugins.

Published in: Internet, Technology, Business
  • Be the first to comment

  • Be the first to like this

WordCamp Nashville 2014: A11Y? I18N? L10N? UTF8? WTF? (long version)

  1. 1. A11Y? I18N? L10N? UTF8? WTF? Understanding the connections between: accessibility, internationalization, localization, and character sets Michael Toppa @mtoppa WordCamp Nashville May 3, 2014
  2. 2. About me…
  3. 3. Accessibility (A11Y)
  4. 4. Accessibility (A11Y)
  5. 5. Why bother?
  6. 6. Reason #1 Accessibility ≠ Disability
  7. 7. Reason #2 More people need help than you think
  8. 8. Reason #3 The cost is low
  9. 9. Reason #4 It’s the right thing to do
  10. 10. Things I learned by pretending to be blind for a week
  11. 11. WCAG Accessibility Guidelines 1. Perceivable <img src="smiley.gif" alt="Smiley face"> 2. Operable <input accesskey="S" type="submit" value="Submit"> 3. Understandable and Predictable <a href="news.html" target=“_blank”>latest news (opens new window)</a> 4. Robust and Compatible <label for="first_name">First Name</label>
  12. 12. WCAG Accessibility Guidelines 1. Perceivable 2. Operable 3. Understandable and Predictable ❖ Guideline 3.1.1 Language of Page: ❖ The default human language of each Web page can be programmatically determined. 4. Robust and Compatible
  13. 13. The lang attribute ❖ Declare the language of a WordPress theme in header.php: <html <?php language_attributes(); ?>> For a US English site, this renders as: <html lang="en-US"> ❖ In HTML 5, declare the language of part of a document <div lang="fr">
  14. 14. Uses of the lang attribute ❖ Supports speech synthesizers and automated translators ❖ Supports spelling and grammar checkers ❖ Improves search engine results ❖ Helps support server content negotiation ❖ Allows user-agents to select language appropriate fonts
  15. 15. Language appropriate fonts
  16. 16. Unicode?
  17. 17. Klingon for Unicode
  18. 18. Solving the Unicode Puzzle: PHP Architect, May 2005
  19. 19. Before there was Unicode… Lower ASCII
  20. 20. Before there was Unicode… Upper ASCII: ISO 8859-1 (aka Latin 1)
  21. 21. Before there was Unicode… Upper ASCII: ISO 8859-2
  22. 22. The Unicode slogan “Unicode provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language.”
  23. 23. So what is UTF-8?
  24. 24. Learning everyday Japanese with Mangajin
  25. 25. WordPress supports UTF-8
  26. 26. Localization (L10N) and Internationalization (I18N)
  27. 27. Localization “Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale).” This often involves more than just translation
  28. 28. Internationalization “Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.”
  29. 29. WordPress provides internationalization features so you can localize your themes and plugins
  30. 30. Step 1: use WordPress’ I18N functions ❖ Wrap all your text in WordPress’ I18N functions, using a custom “text domain”. This is for my “shashin” plugin: ❖ $greeting = __( 'Howdy', 'shashin' ); ❖ <li><?php _e( 'Howdy', 'shashin' ); ?></li> ❖ $string = _x( 'Buffalo', 'an animal', 'shashin' ); ❖ $string = _x( 'Buffalo', 'a city in New York', 'shashin' ); ❖ And others…
  31. 31. Step 2: load your text domain ❖ For plugins: load_plugin_textdomain( 'shashin', false, dirname(plugin_basename(__FILE__)) . '/languages/' );
  32. 32. Step 2: load your text domain ❖ For themes: function custom_theme_setup() { load_theme_textdomain( 'my_theme', get_template_directory() . '/languages') ); } add_action('after_setup_theme', 'custom_theme_setup');
  33. 33. Step 3: generate a POT file
  34. 34. Step 4: create translation files
  35. 35. Step 4: create translation files ❖ Other translation options: ❖ The Codestyling Localization plugin ❖ For themes, the ThemeZee translation site
  36. 36. Step 5: include translation files
  37. 37. Questions?
  38. 38. Further reading ❖ W3C ❖ How to meet WCAG 2.0: quick reference ❖ Why use the language attribute? ❖ Localization vs. Internationalization ❖ WordPress ❖ How To Localize WordPress Themes and Plugins ❖ I18n for WordPress Developers ❖ Internationalization: You’re probably doing it wrong ❖ Solving the Unicode Puzzle