在开发电子商务网站或应用避免不了价格这个字段。事实上呢？很多电子商务网站的页面或应用的价格字段都没有提供一个较了的用户体验，或者说没有提供无障碍体验。而作为 Web 开发者，我们一些小小的改变就可以大大提升用户体验。接下来和大家一起聊聊，我们应该如何在自己的项目中为价格做出小小的改变来提高用户的体验。

当你走进一家实体店

虽然互联网给我们的生活带来了巨大的改变，也改变了我们的生活中衣食住行等方式，但总是难免会在线下走进实体店购物。想象一下，你有一天走进一家实体店，想买一件衣服。逛了一会，你找到了一件自己中意的衣服，想购买。你看了看价格标签，却发现有两个没有视觉差异的价格，比如 RMB399 和 RMB199。我想此时你肯定会感到困惑，这件衣服的价格到底是多少？

你决定找一名导购员咨询，想询问这件衣服的价格是多少？

此时估计你更会感到困惑，会继续询问：“对不起，也许我误解了。这件衣服的价格是多少”？要是导购员再次回答你：“RMB399，RMB199”。你可能会觉得自己的智商已经达到了零，或者会感觉到自己在语言的描述上有障碍，让对方没能理解自己需要表达的意思。或许你会尝试着再一次向导购描述你的疑惑，想再确认自己喜欢的物品价格。或许你再次得到相同的答案，或许会决定换过一个店购物。

你可能会说真实世界哪会有这样的客户体验！

虚拟世界的价格

可能正如你所说的，真实世界没有这样的客户体验（导购员没傻到那种程度）。那我们从线下回到线上（网格的虚拟世界）。

浏览线上一些主流的电子商务网站，商品售卖价格会有多种表达方式。最为常见的一种是一个是现价（当前售卖价）和一个是商品原价。在视觉上他们会有一定的差异：

• 当前售卖价会加粗
• 原价看上去被划掉

一般情况下，这两种价格都是紧挨在一起，加上一些视觉差异的风格，能给用户提供足够多的信息和背景，让用户知道这两个价格表达的是商品的 现价 和 折扣价。

对于没有障碍的用户而言，上面的一切都是正常的，也是能表述清楚的。但对于那些访问网页或应用有一定障碍的用户（比如依赖屏幕阅读器的用户）可能就没有想象的那么好了。换句话说，视觉上看上去一切都很好，但听觉上体验未必如此，甚至会令依赖屏幕阅读器的用户感到困惑和沮丧。有点类似上面实体店购物，导购员告诉你衣服价格是RMB399，RMB199一样。

我们用手机来体验一下真实的线上购物碰到价格的体验。

“京东生鲜”有一个较好的体验，会读出：

• ①：现价169.9元
• ②：原价299元

“手淘”的“浏览10秒送金币”的体验就比较差：

• ①：￥
• ②：57
• ③：.04
• ④：￥98.01

“拼多多万人团”的体验也是较差：

• ①：￥
• ②：49.8
• ③：￥
• ④：59.9

“考拉”的“精品超市”的体验如下：

• ①：￥
• ②：39
• ③：￥
• ④：29

“亚马逊”的体验如下：

• ①：￥84.29 ￥3206.43

我想大家有了一个切身的体验吧，除了“京东生鲜”有一个较好的体验，其他的应用在价格方面的体验都是差强人意，甚至令人沮丧。

这不是一个包容性的体验。

为什么会这样呢？

先来看视觉上的效果：

在价格视觉上，它们有着明显的特征：

• 现价的人民币符号￥ 比价格数字的字号要更小（有的价格的小数点位也和人民币符号有相同的字号）
• 原价的人民币符号 ￥ 比价格数字的字号要更小

为了还原视觉效果，在构建 Web 页面 DOM结构的时候，可能会这样：

<!-- 手淘 -->
<div class="price">
    <!-- 现价 -->
    <div class="price__discount">
        <span>￥</span>
        <strong>57</strong>
        <span>.04</span>
    </div>

    <!-- 原价 -->
    <div class="price__original">￥98.01</div>
</div>

我们来看看线上的实际 DOM结构：

众所周知，构成一个 Web 页面主要由 HTML、CSS 和 JavaScript 构建，浏览器在解析页面的时候，会构建 DOM 树 和 CSSOM树，然合再构建渲染树，最后在屏幕上渲染出来。而屏幕阅读器在朗读一个 Web页面时，和浏览器解析页面类似，屏幕阅读器也会有自己的方式解析页面，他在解析页面的时候会在 DOM 树的基础上构建 可访问树（AOM） ：