a11y? i18n? l10n? utf8? wtf? (long version)
DESCRIPTION
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.TRANSCRIPT
![Page 1: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/1.jpg)
A11Y? I18N? L10N? UTF8? WTF?
Understanding the connections between:
accessibility,internationalization,
localization,and character sets
Michael Toppa
@mtoppa
WordCamp Nashville
May 3, 2014
![Page 2: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/2.jpg)
About me…
![Page 3: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/3.jpg)
![Page 4: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/4.jpg)
![Page 5: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/5.jpg)
Accessibility (A11Y)
![Page 6: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/6.jpg)
Accessibility (A11Y)
![Page 7: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/7.jpg)
Why bother?
![Page 8: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/8.jpg)
Reason #1
Accessibility ≠ Disability
![Page 9: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/9.jpg)
Reason #2
More people need help than you think
![Page 10: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/10.jpg)
Reason #3
The cost is low
![Page 11: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/11.jpg)
Reason #4
It’s the right thing to do
![Page 12: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/12.jpg)
Things I learned by pretending to be blind for a week
![Page 13: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/13.jpg)
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>
![Page 14: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/14.jpg)
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
![Page 15: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/15.jpg)
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">
![Page 16: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/16.jpg)
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
![Page 17: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/17.jpg)
Language appropriate fonts
![Page 18: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/18.jpg)
Unicode?
![Page 19: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/19.jpg)
Klingon for
Unicode
![Page 20: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/20.jpg)
Solving the
Unicode Puzzle:
PHP Architect, May 2005
![Page 21: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/21.jpg)
Before there was Unicode…Lower ASCII
![Page 22: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/22.jpg)
Before there was Unicode…
Upper ASCII: ISO 8859-1 (aka Latin 1)
![Page 23: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/23.jpg)
Before there was Unicode…
Upper ASCII: ISO 8859-2
![Page 24: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/24.jpg)
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.”
![Page 25: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/25.jpg)
So what is UTF-8?
![Page 26: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/26.jpg)
Learning everyday Japanese with Mangajin
![Page 27: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/27.jpg)
WordPress supports UTF-8
![Page 28: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/28.jpg)
Localization (L10N) and Internationalization
(I18N)
![Page 29: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/29.jpg)
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
![Page 30: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/30.jpg)
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.”
![Page 31: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/31.jpg)
WordPress provides internationalization features so you
can localize your themes and plugins
![Page 32: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/32.jpg)
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…
![Page 33: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/33.jpg)
Step 2: load your text domain
❖ For plugins:
load_plugin_textdomain(
'shashin',
false,
dirname(plugin_basename(__FILE__)) . '/languages/'
);
![Page 34: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/34.jpg)
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');
![Page 35: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/35.jpg)
Step 3: generate a POT file
![Page 36: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/36.jpg)
Step 4: create translation files
![Page 37: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/37.jpg)
Step 4: create translation files
❖ Other translation options:
❖ The Codestyling Localization plugin
❖ For themes, the ThemeZee translation site
![Page 38: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/38.jpg)
Step 5: include translation files
![Page 39: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/39.jpg)
Questions?
![Page 40: A11Y? I18N? L10N? UTF8? WTF? (long version)](https://reader033.vdocument.in/reader033/viewer/2022061300/54c71c9f4a79595e4e8b458c/html5/thumbnails/40.jpg)
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