Indie Hacker Mobile Apps · 课时

无障碍与国际化

通过实现无障碍功能，并为多种语言和地区做好准备，让所有人都能使用您的应用。

无障碍与国际化 是 CoddyKit 上的免费 Indie Hacker Mobile Apps 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Indie Hacker Mobile Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Indie Hacker Mobile Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Welcome to Inclusive Design

Making your mobile app accessible and internationally friendly isn't just good practice; it's essential for reaching a wider audience and providing a great user experience for everyone.

In this lesson, we'll explore key principles and practical steps to achieve both.

Understanding Accessibility (A11y)

Accessibility (A11y) refers to designing and developing apps that can be used by people with a wide range of abilities and disabilities.

Visual Impairment: Users might rely on screen readers or need high contrast.
Motor Impairment: Users might need larger touch targets or keyboard navigation.
Hearing Impairment: Users might need captions for audio/video.

By making your app accessible, you ensure it's usable by everyone.

Screen Readers & Labels

Screen readers are assistive technologies that read out loud the content on a screen, helping visually impaired users navigate your app.

For screen readers to work effectively, interactive elements need proper accessibility labels. These labels provide a descriptive text for the element that might not be visually obvious.

Try running this conceptual example:

public class AccessibilityDemo {
  // A simplified Button component concept
  static class Button {
    String text;
    String accessibilityLabel;

    Button(String text, String accessibilityLabel) {
      this.text = text;
      this.accessibilityLabel = accessibilityLabel;
    }

    // Simulate what a screen reader might announce
    String getScreenReaderAnnouncement() {
      if (accessibilityLabel != null && !accessibilityLabel.isEmpty()) {
        return accessibilityLabel;
      }
      return text; // Fallback to visible text
    }
  }

  public static void main(String[] args) {
    Button submitButton = new Button("Submit", "Tap to submit the form");
    Button okButton = new Button("OK", null); // Missing a specific label

    System.out.println("Screen reader announces (Submit): " + submitButton.getScreenReaderAnnouncement());
    System.out.println("Screen reader announces (OK): " + okButton.getScreenReaderAnnouncement());
  }
}

Visuals: Contrast & Scale

Good visual design is also key for accessibility:

Color Contrast: Ensure sufficient contrast between text and background colors. This helps users with low vision or color blindness.
Dynamic Type/Font Scaling: Allow users to adjust font sizes. Respect system-wide font size settings so your app adapts to user preferences.

Tools are available to check color contrast ratios, ensuring your designs meet accessibility standards.

Touch Targets & Interaction

For users with motor impairments or those simply using a device one-handed, the size of interactive elements matters.

Minimum Touch Target Size: Aim for a minimum touch target size of 48x48 device-independent pixels (DIPs) on both iOS and Android.
Clear Feedback: Provide visual feedback when an element is tapped (e.g., a ripple effect or highlight).

This improves usability for everyone, not just those with specific needs.

Understanding Internationalization (I18n)

Internationalization (I18n) is the process of designing and developing an app in a way that makes it easy to adapt to various languages and regional differences without requiring engineering changes to the source code.

This means your app can be translated into multiple languages (localization) and handle different date formats, currencies, and text directions.

Localizing Your Text Strings

The core of internationalization for text is extracting all user-facing strings into separate resource files. Instead of hardcoding text, you use a 'key' that points to the correct translation for the user's selected language.

This approach makes it simple to add new languages or update existing translations without touching your app's code logic.

See how it works conceptually:

import java.util.HashMap;
import java.util.Map;

public class LocalizationDemo {
  // Simulate language resource bundles
  private static final Map<String, Map<String, String>> strings = new HashMap<>();

  static {
    // English strings
    Map<String, String> enStrings = new HashMap<>();
    enStrings.put("greeting", "Hello!");
    enStrings.put("welcome_message", "Welcome to our app.");
    strings.put("en", enStrings);

    // Spanish strings
    Map<String, String> esStrings = new HashMap<>();
    esStrings.put("greeting", "¡Hola!");
    esStrings.put("welcome_message", "Bienvenido a nuestra aplicación.");
    strings.put("es", esStrings);
  }

  // Method to get a localized string
  public static String getString(String locale, String key) {
    Map<String, String> localeStrings = strings.get(locale);
    if (localeStrings != null) {
      return localeStrings.getOrDefault(key, "MISSING_STRING_FOR_" + key);
    }
    return "UNKNOWN_LOCALE";
  }

  public static void main(String[] args) {
    String currentLocale = "en"; // Imagine this comes from device settings
    System.out.println("English Greeting: " + getString(currentLocale, "greeting"));
    System.out.println("English Welcome: " + getString(currentLocale, "welcome_message"));

    currentLocale = "es"; // Change locale
    System.out.println("Spanish Greeting: " + getString(currentLocale, "greeting"));
    System.out.println("Spanish Welcome: " + getString(currentLocale, "welcome_message"));
  }
}

Adapting Dates, Numbers & Currencies

Beyond text, different cultures format dates, times, numbers, and currencies uniquely:

Dates: MM/DD/YYYY (US) vs. DD/MM/YYYY (EU).
Numbers: Decimal separators (. vs. ,) and thousands separators vary.
Currencies: Symbol placement ($100 vs. 100€) and decimal precision differ.

Most mobile platforms provide APIs to automatically format these values based on the user's device locale.

Layouts for All Languages

Some languages, like Arabic and Hebrew, are written and read from right-to-left (RTL). Your app's UI needs to adapt to this.

Flexible Layouts: Use flexible layouts that can automatically mirror for RTL languages.
Icons & Images: Ensure icons and images that imply direction (e.g., an arrow pointing forward) are also mirrored.

Designing with flexibility from the start avoids costly rework later.

Accessibility & I18n Check

Which of the following are important considerations when developing for accessibility and internationalization?

Your App, For Everyone

You've learned how making your app accessible (A11y) and ready for internationalization (I18n) expands your reach and improves the user experience for everyone.

Use accessibility labels for screen readers.
Ensure good color contrast and dynamic text sizing.
Provide large enough touch targets.
Externalize all strings for localization.
Format dates, numbers, and currencies based on locale.
Design flexible layouts for RTL languages.

By integrating these principles from the start, you build a truly inclusive mobile product.

常见问题解答

「无障碍与国际化」课时是免费的吗？

是的 — 「无障碍与国际化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Indie Hacker Mobile Apps 课程的其余内容，请升级到 CoddyKit PRO。 Indie Hacker Mobile Apps 课程共包含 4 节课。

「无障碍与国际化」这节课中我会学到什么？

通过实现无障碍功能，并为多种语言和地区做好准备，让所有人都能使用您的应用。你通过在浏览器中直接运行的动手代码来练习 Indie Hacker Mobile Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Indie Hacker Mobile Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Indie Hacker Mobile Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「无障碍与国际化」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Indie Hacker Mobile Apps 课中编写并运行代码吗？

能。每节 Indie Hacker Mobile Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Indie Hacker Mobile Apps