40
A11Y? I18N? L10N? UTF8? WTF? Understanding the connections between: accessibility, internationalization, localization, and character sets Michael Toppa @mtoppa WordCamp Nashville May 3, 2014

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

  • Upload
    mtoppa

  • View
    129

  • Download
    2

Embed Size (px)

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.

Citation preview

Page 1: A11Y? I18N? L10N? UTF8? WTF? (long version)

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)

About me…

Page 3: A11Y? I18N? L10N? UTF8? WTF? (long version)
Page 4: A11Y? I18N? L10N? UTF8? WTF? (long version)
Page 5: A11Y? I18N? L10N? UTF8? WTF? (long version)

Accessibility (A11Y)

Page 6: A11Y? I18N? L10N? UTF8? WTF? (long version)

Accessibility (A11Y)

Page 7: A11Y? I18N? L10N? UTF8? WTF? (long version)

Why bother?

Page 8: A11Y? I18N? L10N? UTF8? WTF? (long version)

Reason #1

Accessibility ≠ Disability

Page 9: A11Y? I18N? L10N? UTF8? WTF? (long version)

Reason #2

More people need help than you think

Page 10: A11Y? I18N? L10N? UTF8? WTF? (long version)

Reason #3

The cost is low

Page 11: A11Y? I18N? L10N? UTF8? WTF? (long version)

Reason #4

It’s the right thing to do

Page 13: A11Y? I18N? L10N? UTF8? WTF? (long version)

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)

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)

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)

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)

Language appropriate fonts

Page 18: A11Y? I18N? L10N? UTF8? WTF? (long version)

Unicode?

Page 19: A11Y? I18N? L10N? UTF8? WTF? (long version)

Klingon for

Unicode

Page 20: A11Y? I18N? L10N? UTF8? WTF? (long version)

Solving the

Unicode Puzzle:

PHP Architect, May 2005

Page 21: A11Y? I18N? L10N? UTF8? WTF? (long version)

Before there was Unicode…Lower ASCII

Page 22: A11Y? I18N? L10N? UTF8? WTF? (long version)

Before there was Unicode…

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

Page 23: A11Y? I18N? L10N? UTF8? WTF? (long version)

Before there was Unicode…

Upper ASCII: ISO 8859-2

Page 24: A11Y? I18N? L10N? UTF8? WTF? (long version)

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)

So what is UTF-8?

Page 26: A11Y? I18N? L10N? UTF8? WTF? (long version)

Learning everyday Japanese with Mangajin

Page 27: A11Y? I18N? L10N? UTF8? WTF? (long version)

WordPress supports UTF-8

Page 28: A11Y? I18N? L10N? UTF8? WTF? (long version)

Localization (L10N) and Internationalization

(I18N)

Page 29: A11Y? I18N? L10N? UTF8? WTF? (long version)

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)

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)

WordPress provides internationalization features so you

can localize your themes and plugins

Page 32: A11Y? I18N? L10N? UTF8? WTF? (long version)

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)

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)

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)

Step 3: generate a POT file

Page 36: A11Y? I18N? L10N? UTF8? WTF? (long version)

Step 4: create translation files

Page 37: A11Y? I18N? L10N? UTF8? WTF? (long version)

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)

Step 5: include translation files

Page 39: A11Y? I18N? L10N? UTF8? WTF? (long version)

Questions?

Page 40: A11Y? I18N? L10N? UTF8? WTF? (long version)

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