必须使用语义化实现关注功能，确保键盘焦点可达、屏幕阅读器可读、状态同步准确；需用data-following控制状态，aria-pressed动态更新，disabled+aria-busy处理加载态，并以等结构化标签组织内容。

关注按钮必须用 ，不能用

键盘用户靠 Tab 键导航，屏幕阅读器靠语义识别可操作元素。

在 DOM 中没有交互语义，Tab 焦点会直接跳过，aria-pressed 也无效。真实场景中，这类写法会让约 15% 的残障用户完全无法关注。

正确结构要同时满足三件事：语义正确、状态可读、焦点可达。

• 必须包裹在
  这类状态容器里，别把状态硬塞进 class 名（如 class="btn-following"）
• data-following 值必须是字符串 "true" 或 "false"，JS 里用 === 'true' 判断，避免 dataset.following 返回 undefined 时误判为 falsy
• 状态切换时同步更新 aria-pressed：关注中设为 true，未关注设为 false；若按钮还带 aria-label，也要动态更新，比如从 "关注张三" 改成 "已关注张三，点击取消"

加载态和防重复点击必须靠 disabled + aria-busy

用户连点两次，后端可能只收到一个请求，但 UI 却显示“已关注”又变回“关注”，造成状态错乱。这不是视觉问题，是数据一致性风险。

关键不是加个旋转图标，而是让浏览器和辅助技术都感知到“此刻不可操作”。

• 点击瞬间立即将 button 设为 disabled，并添加 aria-busy="true" —— 屏幕阅读器会播报“正在处理”，且阻止再次触发
• fetch 成功后，才更新 data-following 和文案；失败则还原 disabled、移除 aria-busy，并可选地在 aria-live="polite" 区域插入错误提示
• 别用 CSS 类控制禁用态（如 .btn-disabled { opacity: 0.5; }），这骗不过键盘焦点和读屏器

头像+昵称+按钮必须用语义化组合，不能堆

一堆

套娃，对 SEO 是黑盒，对读屏器是噪音。搜索引擎抓不到“这是张三的主页”，读屏器念出来就是“图形、段落、按钮、段落”，用户根本不知道按钮作用对象是谁。

每个粉丝项应是一个逻辑单元，用标准语义标签锚定关系。



HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 头像必须用

  

  ，alt 不能为空字符串以外的内容（除非明确装饰性）
• 昵称、城市、职业等字段用

  城市

  杭州

  ，比

  城市：杭州

  更利于机器提取结构化数据
• 关注按钮放在同一
  或
• 内，确保 DOM 层级体现归属关系，比如

  ...

  ...

  关注

取关按钮的 onclick 字符串拼接很危险，要用事件委托 + dataset

直接在 HTML 里写 onclick="unfollow(456)"，看似省事，但存在三个硬伤：XSS 漏洞（如果 ID 来自不可信输入）、全局函数依赖（unfollow 必须挂 window 上）、无法批量绑定或解绑。

更稳的方式是利用事件委托，把用户 ID 存在 data-user-id 里。

• 按钮写成 取关，type="button" 防止表单意外提交
• 父容器（如
  ）监听 click 事件，用 event.target.dataset.userId 取 ID，不解析 class 或 textContent
• 这样所有取关按钮共用一个监听器，DOM 动态增删也不影响，且 JS 模块化后无需暴露全局函数

实际渲染关注列表时，最容易被忽略的是：按钮状态和服务端返回字段必须严格对齐。比如后端返回 {"following": true}，前端就得用这个字段初始化 data-following，而不是靠 JS 猜测“当前页是关注页所以默认 false”。否则刷新页面，按钮就失联了。