접근성 및 국제화
접근성 기능을 구현하고 여러 언어와 지역을 지원하도록 준비해 누구나 앱을 사용할 수 있게 만듭니다.
접근성 및 국제화은(는) CoddyKit의 무료 Indie Hacker Mobile Apps 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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 (
$100vs.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.
자주 묻는 질문
“접근성 및 국제화” 강의는 무료인가요?
네 — “접근성 및 국제화” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Indie Hacker Mobile Apps 강의 전체를 잠금 해제할 수 있습니다. Indie Hacker Mobile Apps 강의에는 총 4개의 강의가 포함되어 있습니다.
“접근성 및 국제화”에서 뭘 배우나요?
접근성 기능을 구현하고 여러 언어와 지역을 지원하도록 준비해 누구나 앱을 사용할 수 있게 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Indie Hacker Mobile Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Indie Hacker Mobile Apps을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Indie Hacker Mobile Apps은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“접근성 및 국제화” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Indie Hacker Mobile Apps 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Indie Hacker Mobile Apps 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.