Accessibility Adaptation Practices for Vivo H5 Front‑End Projects
Vivo’s front‑end team outlines practical accessibility adaptations for H5 Android projects, emphasizing ARIA roles and states, proper tabindex ordering, language attributes, alt text or aria‑label for images, button roles, numeric speech conversion, focus management in dialogs and pickers, and a comprehensive checklist to ensure inclusive mobile experiences.
With increasing emphasis on information accessibility, developers face challenges in adapting web pages for users with disabilities. This article, authored by the Vivo Internet Front‑End team, summarizes practical experiences of implementing accessibility in H5 projects on Vivo Android devices.
Background – Accessibility (or “无障碍”) aims to provide equal opportunities for people with physical, auditory, visual, cognitive or learning impairments. Policies, inclusiveness and economic benefits motivate enterprises to build accessible digital products.
Common accessibility gestures and tools – The article introduces TalkBack gestures for Android 9.1+ and lists typical screen‑reader software. It also explains why developers must go beyond system‑provided large fonts, content narration, voice control, etc., especially for visually‑impaired users.
Key HTML attributes
ARIA (Accessible Rich Internet Applications) provides roles, states and properties that enhance dynamic content. The article details several frequently used attributes:
aria‑* (role, state, label)
tabindex (‑1, 0, positive numbers) to control keyboard focus order.
role (e.g., button, region) to inform screen readers of element purpose.
Example of setting the page language:
<html lang="en">
</html>
<html lang="zh-CN">
</html>Example of adding focus to a container and customizing the spoken text:
<div class="content" tabindex="1" aria-label="获得100元的话费充值券">
<div class="amount">
<div class="num">100</div>
<div class="unit">元</div>
</div>
<div class="desc">话费充值</div>
</div>Removing default focus outline globally:
*[tabindex] {
outline: none;
}Image accessibility – use alt="" for decorative images, or aria-label when the image must be announced. Changing role to row can suppress unwanted graphic‑type announcements.
Button accessibility – add tabindex="1" and role="button" so the screen reader announces “button, double‑tap to activate”. Example:
<div tabindex="1" role="button" class="btn">立即使用</div>Numeric broadcasting – a utility function converts numbers, asterisks and “X” into spoken Chinese characters, ensuring phone numbers are read correctly.
function $broadcastNumber(number) {
if (number === 0) return '零';
if (!number) return '';
const numberMap = ['零','幺','二','三','四','五','六','七','八','九'];
const specialMap = {'*':'星号','X':'叉号','x':'叉号'};
return number.toString().split('').map(item => numberMap[item] || specialMap[item] || item).join('');
}Component‑level adaptation – the article discusses focus and broadcast management for common UI components such as switches, checkboxes, radio buttons, dialogs, address pickers, and coupon modules. Strategies include using tabindex , aria‑hidden , and programmatic el.focus() . For dialogs, focus is moved to the title on open and restored to the previously active element on close. For list‑style pickers, an invisible element with aria-live="polite" announces the selected address after scrolling.
Overall, the article provides a checklist of accessibility practices for front‑end developers working on mobile H5 projects, emphasizing proper use of ARIA attributes, focus control, and custom broadcast content to create an inclusive user experience.
vivo Internet Technology
Sharing practical vivo Internet technology insights and salon events, plus the latest industry news and hot conferences.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.