Languages
Pages
Legal
A11Y? I18N? L10N? UTF8? WTF?
Understanding the connections between:
accessibility,internationalization,
localization,and character sets
Michael Toppa
@mtoppa
WordCamp Nashville
May 3, 2014
About me…
Accessibility (A11Y)
Accessibility (A11Y)
Why bother?
Reason #1
Accessibility ≠ Disability
Reason #2
More people need help than you think
Reason #3
The cost is low
Reason #4
It’s the right thing to do
Things I learned by pretending to be blind for a week
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>
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
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">
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
Language appropriate fonts
Unicode?
Klingon for
Unicode
Solving the
Unicode Puzzle:
PHP Architect, May 2005
Before there was Unicode…Lower ASCII
Before there was Unicode…
Upper ASCII: ISO 8859-1 (aka Latin 1)
Before there was Unicode…
Upper ASCII: ISO 8859-2
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.”
So what is UTF-8?
Learning everyday Japanese with Mangajin
WordPress supports UTF-8
Localization (L10N) and Internationalization
(I18N)
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
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.”
WordPress provides internationalization features so you
can localize your themes and plugins
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…
Step 2: load your text domain
❖ For plugins:
load_plugin_textdomain(
'shashin',
false,
dirname(plugin_basename(__FILE__)) . '/languages/'
);
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');
Step 3: generate a POT file
Step 4: create translation files
Step 4: create translation files
❖ Other translation options:
❖ The Codestyling Localization plugin
❖ For themes, the ThemeZee translation site
Step 5: include translation files
Questions?
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
Top Related