FullCalendar v6.1.8资源时间线视图屏幕阅读器无障碍优化咨询

一、修复资源时间线视图的屏幕阅读器识别问题 #

• 给日历主体元素补充正确的ARIA语义化属性：
  • 日历容器添加role="grid"，明确网格结构；
  • 每条资源行添加role="row"；
  • 每个交叉单元格添加role="gridcell"，同时用aria-label标注清楚资源名称和日期，比如aria-label="会议室A，2024年6月15日"；
• 初始化日历时开启无障碍配置，并通过钩子自定义单元格属性：

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
      initialView: 'resourceTimelineDay',
      accessible: true,
      resources: [
        { id: 'a', title: '会议室A' },
        { id: 'b', title: '会议室B' }
      ],
      events: [
        { resourceId: 'a', title: '会议1', start: '2024-06-15T09:00:00', end: '2024-06-15T10:00:00' }
      ],
      datesSet: function(info) {
        document.querySelectorAll('.fc-resource-timeline-table .fc-daygrid-day').forEach(cell => {
          const resourceTitle = cell.closest('.fc-resource-row').querySelector('.fc-resource-title').textContent;
          const dateText = cell.getAttribute('data-date');
          cell.setAttribute('role', 'gridcell');
          cell.setAttribute('aria-label', `${resourceTitle}，${new Date(dateText).toLocaleDateString()}`);
        });
      }
    });
    calendar.render();
  });
  

• 检查样式：确保日历主体元素没有display: none、visibility: hidden或aria-hidden="true"这类会被屏幕阅读器忽略的设置。

二、告知用户使用方向键导航的方式 #

• 给视图切换按钮绑定辅助提示：

  <button id="resource-view-btn" aria-describedby="resource-nav-hint">切换至资源时间线视图</button>
  <p id="resource-nav-hint" class="sr-only">切换后可使用方向键（上、下、左、右）在日历单元格间导航</p>
  

  配套仅屏幕阅读器可见的样式：

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  

• 利用实时区域播报切换提示：

  <div aria-live="polite" class="sr-only" id="live-region"></div>
  

  document.getElementById('resource-view-btn').addEventListener('click', function() {
    document.getElementById('live-region').textContent = '已切换至资源时间线视图，可使用方向键（上、下、左、右）在单元格间导航';
  });
  

• 给日历容器添加导航说明关联：

  <div id="calendar" aria-describedby="calendar-nav-hint"></div>
  <p id="calendar-nav-hint" class="sr-only">资源时间线视图中，使用方向键在单元格间导航</p>
  

内容的提问来源于stack exchange，提问作者Nivya Pallempati