a11y? i18n? l10n? utf8? wtf? (short version)
DESCRIPTION
Understanding the connections between accessibility, internationalization, localization, and character sets. Presented at WordCamp Lanaster 2014TRANSCRIPT
A11Y? I18N? L10N? UTF8? WTF?
Understanding the connections between:
accessibility,internationalization,
localization,and character sets
Michael Toppa
@mtoppa
WordCamp Lancaster
March 1, 2014
About me…
Solving the Unicode Puzzle:
PHP Architect, May 2005
Accessibility ≠ Disability
WCAG Accessibility (A11Y) 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="new.html" target="_blank">opens new window</a>
4. Robust and Compatible
<label for="first_name">First Name</label>
WCAG Accessibility (A11Y) 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
❖ Improves search engine results
❖ Helps support server content negotiation
❖ Supports spelling and grammar checkers
❖ Supports speech synthesizers and automated translators
❖ Allows user-agents to select language appropriate fonts
Language appropriate fonts
Unicode?
Klingon for Unicode
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?
WordPress supports UTF-8
Learning everyday Japanese with Mangajin
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”. Mine is “shashin”❖ $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: generate a POT file
Step 3: load your text domain
❖ For plugins:
load_plugin_textdomain(
'shashin',
false,
dirname(plugin_basename(__FILE__)) . '/languages/'
);
Step 3: 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 4: 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