Your SlideShare is downloading. ×
A11Y? I18N? L10N? UTF8? WTF? (long version)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A11Y? I18N? L10N? UTF8? WTF? (long version)

470
views

Published on

Presented at WordCamp Nashville 2014. 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. …

Presented at WordCamp Nashville 2014. 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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
470
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. About me…
  • 3. Accessibility (A11Y)
  • 4. Accessibility (A11Y)
  • 5. Why bother?
  • 6. Reason #1 Accessibility ≠ Disability
  • 7. Reason #2 More people need help than you think
  • 8. Reason #3 The cost is low
  • 9. Reason #4 It’s the right thing to do
  • 10. Things I learned by pretending to be blind for a week
  • 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. 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. 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. 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. Language appropriate fonts
  • 16. Unicode?
  • 17. Klingon for Unicode
  • 18. Solving the Unicode Puzzle: PHP Architect, May 2005
  • 19. Before there was Unicode… Lower ASCII
  • 20. Before there was Unicode… Upper ASCII: ISO 8859-1 (aka Latin 1)
  • 21. Before there was Unicode… Upper ASCII: ISO 8859-2
  • 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. So what is UTF-8?
  • 24. Learning everyday Japanese with Mangajin
  • 25. WordPress supports UTF-8
  • 26. Localization (L10N) and Internationalization (I18N)
  • 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. 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. WordPress provides internationalization features so you can localize your themes and plugins
  • 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. Step 2: load your text domain ❖ For plugins: load_plugin_textdomain( 'shashin', false, dirname(plugin_basename(__FILE__)) . '/languages/' );
  • 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. Step 3: generate a POT file
  • 34. Step 4: create translation files
  • 35. Step 4: create translation files ❖ Other translation options: ❖ The Codestyling Localization plugin ❖ For themes, the ThemeZee translation site
  • 36. Step 5: include translation files
  • 37. Questions?
  • 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