Joomla站点移动端无障碍问题：能否通过CSS添加alt/aria-label？

一、移动端图标缺少可识别文本（Discernible Text）的解决 #

结论：无法通过CSS添加alt文本 #

alt是HTML元素的语义化属性，专为屏幕阅读器识别内容设计，CSS仅负责视觉样式渲染，无法提供屏幕阅读器可识别的语义信息，必须在HTML层面处理。

具体解决方法 #

根据图标的实现方式，对应处理：

1. 字体图标（如<i>标签实现）
   给图标所在的交互元素（按钮/链接）添加aria-label属性，或搭配屏幕阅读器专属的隐藏文本：

   <!-- 方式1：用aria-label直接声明语义 -->
   <button class="search-icon" aria-label="打开搜索框">
     <i class="icon-search"></i>
   </button>
   
   <!-- 方式2：隐藏文本（Joomla模板通常自带.sr-only类） -->
   <a href="#" class="hamburger-menu">
     <i class="icon-menu"></i>
     <span class="sr-only">打开主菜单</span>
   </a>
   

2. 背景图实现的图标
   确保图标容器是可交互的<button>或<a>标签，添加aria-label，或在容器内插入隐藏文本，避免使用无语义的<div>作为交互元素。

找到图标控制位置 #

这些图标通常在以下位置：

• 模板布局文件：templates/[你的模板名称]/html/mod_menu/tmpl/（汉堡菜单，对应菜单模块的模板）、templates/[你的模板名称]/header.php（头部导航/搜索图标）
• 模块模板：搜索模块对应mod_search的模板文件，路径类似templates/[你的模板名称]/html/mod_search/default.php
• 第三方模板设置：如Helix、Yootheme等模板，可能在后台模板设置的“导航”或“头部”选项中，可直接配置图标文本或aria属性。

二、移动端显示两个汉堡菜单的原因及解决 #

常见原因 #

1. 重复启用菜单模块：后台模块管理中存在多个菜单模块，且都设置了在移动端显示（比如主菜单和侧边菜单模块，均开启了移动端汉堡样式）
2. 模板自带导航+额外菜单模块：模板默认的主导航和手动添加的菜单模块，在移动端都触发了汉堡菜单渲染逻辑
3. 模块位置重复分配：同一个菜单模块被分配到多个页面位置，这些位置在移动端都未被隐藏

解决步骤 #

1. 进入Joomla后台 → 模块管理，筛选所有“菜单”类型的模块
2. 检查每个模块的显示选项（如设备类型、页面分配），关闭重复的移动端显示设置
3. 查看模板后台设置：若使用第三方模板，检查“导航”设置项，确认是否启用了多个导航源
4. 用浏览器开发者工具（F12）查看两个汉堡菜单的HTML元素，找到对应的模块ID或类名，回到后台定位并调整该模块的显示条件

内容的提问来源于stack exchange，提问作者Samantha Ashton