Ensiklopedia VibeKoding: The Hidden Dimensions of Web: Internationalization and Accessibility.Ensiklopedia VibeKoding: The Hidden Dimensions of Web: Internationalization and Accessibility.
What is i18n and where does it come from? In the frontend and software engineering world, what we commonly call i18n actually refers to multilingual support (Internationalization). Because there happen to be 18 letters between the first letter i and the last letter n of this English word, the industry coined this specific abbreviation for convenience. Similarly, Accessibility has 11 letters between the first letter a and the last letter y, so it is collectively referred to as a11y. Behind the browser rendering colorful web pages, there are actually two "hidden threads" running in parallel that are often invisible to the naked eye: When you type a URL to visit a web page, how does the browser know whether to show you Chinese or German (i.e., the i18n multilingual process)? While the browser parses HTML into a DOM tree and prepares to draw, how does it also build another "braille tree" specifically for visually impaired users (i.e., the a11y accessibility process)? In this chapter, we will return to the micro-level process of "web page access and rendering" to decode how browsers and frontend engineering silently work in these two areas that embody technological humanistic care.What is i18n and where does it come from? In the frontend and software engineering world, what we commonly call i18n actually refers to multilingual support (Internationalization). Because there happen to be 18 letters between the first letter i and the last letter n of this English word, the industry coined this specific abbreviation for convenience. Similarly, Accessibility has 11 letters between the first letter a and the last letter y, so it is collectively referred to as a11y. Behind the browser rendering colorful web pages, there are actually two "hidden threads" running in parallel that are often invisible to the naked eye: When you type a URL to visit a web page, how does the browser know whether to show you Chinese or German (i.e., the i18n multilingual process)? While the browser parses HTML into a DOM tree and prepares to draw, how does it also build another "braille tree" specifically for visually impaired users (i.e., the a11y accessibility process)? In this chapter, we will return to the micro-level process of "web page access and rendering" to decode how browsers and frontend engineering silently work in these two areas that embody technological humanistic care.
------
When we type a URL and press Enter, the browser typically silently includes a header in the HTTP request sent to the server: Accept-Language.When we type a URL and press Enter, the browser typically silently includes a header in the HTTP request sent to the server: Accept-Language.
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8For example: Accept-Language: zh-CN,zh;q=0.9,en;q=0.8This is like placing an order at a restaurant β the browser privately tells the server: "My user prefers Simplified Chinese first; if that's not available, English will do." This is the initial negotiation during web access.This is like placing an order at a restaurant β the browser privately tells the server: "My user prefers Simplified Chinese first; if that's not available, English will do." This is the initial negotiation during web access.
In modern frontend frameworks, the page skeleton is usually generated dynamically by JavaScript on the client side. At this stage, the frontend application actively reads the browser's locale preferences (for example, through the navigator.language API), and then fetches the corresponding language "dictionary pack (JSON)" from the server on demand β displaying "Confirm" when encountering English, and the corresponding translation for other languages.In modern frontend frameworks, the page skeleton is usually generated dynamically by JavaScript on the client side. At this stage, the frontend application actively reads the browser's locale preferences (for example, through the navigator.language API), and then fetches the corresponding language "dictionary pack (JSON)" from the server on demand β displaying "Confirm" when encountering English, and the corresponding translation for other languages.
But beyond dictionary replacement, true internationalization faces abyss-level challenges during the browser Layout phase.But beyond dictionary replacement, true internationalization faces abyss-level challenges during the browser Layout phase.
Different languages expressing the same meaning may require vastly different lengths of text. For example, German often concatenates multiple word roots into extremely long words. If we use absolute fixed widths when writing CSS, switching to German can easily cause text to overflow its container. Therefore, browsers encourage using the Flexible Box Model (Flexbox) to adapt to different text volumes.Different languages expressing the same meaning may require vastly different lengths of text. For example, German often concatenates multiple word roots into extremely long words. If we use absolute fixed widths when writing CSS, switching to German can easily cause text to overflow its container. Therefore, browsers encourage using the Flexible Box Model (Flexbox) to adapt to different text volumes.
An even moreι’ θ¦ challenge lies in reading direction. Languages such as Arabic and Hebrew are read from right to left (Right-to-Left, abbreviated as RTL).An even moreι’ θ¦ challenge lies in reading direction. Languages such as Arabic and Hebrew are read from right to left (Right-to-Left, abbreviated as RTL).
When a page switches to such languages, it's not just the text direction that needs to change β the browser engine also needs to horizontally mirror the entire web page's content blocks! The browser provides the native dir="rtl" attribute for this purpose. When writing CSS, we should avoid using absolute directional terms β for example, using Flexbox's justify-content: flex-start instead of hard-coded margin-left, so that the browser can automatically mirror the layout when the locale changes.When a page switches to such languages, it's not just the text direction that needs to change β the browser engine also needs to horizontally mirror the entire web page's content blocks! The browser provides the native dir="rtl" attribute for this purpose. When writing CSS, we should avoid using absolute directional terms β for example, using Flexbox's justify-content: flex-start instead of hard-coded margin-left, so that the browser can automatically mirror the layout when the locale changes.
Beyond interface layout, the browser has a powerful built-in "localization formatting engine" at its core. For the same number 1200.5, Americans expect to see $1,200.50, while many European countries prefer using commas as decimal points: β¬ 1.200,50. Date formats vary even more wildly.Beyond interface layout, the browser has a powerful built-in "localization formatting engine" at its core. For the same number 1200.5, Americans expect to see $1,200.50, while many European countries prefer using commas as decimal points: β¬ 1.200,50. Date formats vary even more wildly.
Modern browsers expose the Intl core object (such as Intl.DateTimeFormat and Intl.NumberFormat). By using this API, we only need to specify the current locale code in our code, and the browser will directly call the underlying operating system's data specifications to accurately generate display strings that conform to local conventions.Modern browsers expose the Intl core object (such as Intl.DateTimeFormat and Intl.NumberFormat). By using this API, we only need to specify the current locale code in our code, and the browser will directly call the underlying operating system's data specifications to accurately generate display strings that conform to local conventions.
π Interact with the component below to observe how, without changing the source data, the browser completes layout reversal (RTL) and system-level data transformation through underlying APIs:π Interact with the component below to observe how, without changing the source data, the browser completes layout reversal (RTL) and system-level data transformation through underlying APIs:
------
Back to the browser's rendering engine. We all know that when the browser parses HTML, it generates a DOM tree, and then combines it with CSS calculations to produce a Render Tree for drawing the interface.Back to the browser's rendering engine. We all know that when the browser parses HTML, it generates a DOM tree, and then combines it with CSS calculations to produce a Render Tree for drawing the interface.
But what is less well known is that during web page access, the browser is actually also building a tree in parallel specifically for the operating system to "see" β the AOM tree (Accessibility Object Model).But what is less well known is that during web page access, the browser is actually also building a tree in parallel specifically for the operating system to "see" β the AOM tree (Accessibility Object Model).
To enable visually impaired users to use computers, operating systems have built-in Screen Reader assistive software (such as macOS's VoiceOver). This type of software "cannot see" the screen's color pixels β they rely entirely on the AOM tree exposed by the browser to read web pages aloud.To enable visually impaired users to use computers, operating systems have built-in Screen Reader assistive software (such as macOS's VoiceOver). This type of software "cannot see" the screen's color pixels β they rely entirely on the AOM tree exposed by the browser to read web pages aloud.
If a developer uses a plain So why do we repeatedly emphasize "always use semantic HTML tags"? Because when you use In modern web applications, there are many complex custom interactive components (such as popup panels, accordion menus with toggle animations) that native browser tags cannot fully cover. This is where the WAI-ARIA specification comes in.In modern web applications, there are many complex custom interactive components (such as popup panels, accordion menus with toggle animations) that native browser tags cannot fully cover. This is where the WAI-ARIA specification comes in. ARIA is essentially a set of special HTML attributes that do not change any visual presentation β their sole mission is to send instructions to the browser to forcibly modify AOM tree nodes:ARIA is essentially a set of special HTML attributes that do not change any visual presentation β their sole mission is to send instructions to the browser to forcibly modify AOM tree nodes: π Experience two completely different "worlds" as perceived through the AOM tree:π Experience two completely different "worlds" as perceived through the AOM tree: ------ Combining the network layer and browser rendering knowledge we learned in previous chapters, we can now understand this grand picture:Combining the network layer and browser rendering knowledge we learned in previous chapters, we can now understand this grand picture: True senior engineers, behind the dazzling interfaces their code produces, still carefully craft those invisible communication headers and semantic trees, enabling the Web's power to radiate to every ordinary person using completely different languages or operating devices. This is the Web's most confident humanistic foundation as the world's largest platform.True senior engineers, behind the dazzling interfaces their code produces, still carefully craft those invisible communication headers and semantic trees, enabling the Web's power to radiate to every ordinary person using completely different languages or operating devices. This is the Web's most confident humanistic foundation as the world's largest platform.Tab key.If a developer uses a plain Tab key.
, , or tags, the browser engine automatically fills in their built-in focus management and role information in the AOM tree. Semantics is essentially a high-quality blueprint drawn for assistive tools.So why do we repeatedly emphasize "always use semantic HTML tags"? Because when you use , , or tags, the browser engine automatically fills in their built-in focus management and role information in the AOM tree. Semantics is essentially a high-quality blueprint drawn for assistive tools.2.2 WAI-ARIA: Manually Pruning the AOM Tree2.2 WAI-ARIA: Manually Pruning the AOM Tree
aria-label: Adds a spoken description to an element that lacks visible text (such as a "close" button with only an icon).aria-label: Adds a spoken description to an element that lacks visible text (such as a "close" button with only an icon).aria-hidden="true": Tells the browser that this node is purely decorative and should not be placed in the AOM tree.aria-hidden="true": Tells the browser that this node is purely decorative and should not be placed in the AOM tree.role="alert": Tells the browser that this area is critically important β if its content changes, the current voice reader should be immediately interrupted for a broadcast.role="alert": Tells the browser that this area is critically important β if its content changes, the current voice reader should be immediately interrupted for a broadcast.3. The Web Serves Everyone3. The Web Serves Everyone
Web Access Dimension Shared Responsibility of Browsers and Engineers The Divide to Bridge Internationalization (i18n) Negotiation through request headers, formatting based on Intl API, flexible support for RTL layout mirror reversal. Bridging the language and cultural divide, enabling applications to seamlessly match different countries' language standards and typographic conventions. Accessibility (a11y) Beyond building the render tree, also building a high-clarity AOM tree based on semantic HTML and ARIA specifications. Bridging the physical and device divide, smoothly handing control to assistive tools like screen readers.