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

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


Upper ASCII: ISO 8859-1 (aka Latin 1)


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

http://www.toppa.com/2014/learning-everday-japanese-with-mangajin/

http://www.toppa.com/2014/learning-everday-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

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

Technology

Transcript of A11Y? I18N? L10N? UTF8? WTF? (short version)