台南市教育局公告

:::

台南市教育局公告

套件名稱：台南市教育局公告 2

作者 : tad

模組網站 :

台南市教育局公告更新說明

無障礙版

「台南市教育局公告」簡介

台南市教育局公告，無特別使用技巧。

安裝方式

到區塊管理，新增一個自訂區塊。

將底下內容貼到自訂區塊中

<style type="text/css">/* --- 基礎樣式設定 (全 rem 化，符合無障礙字體縮放) --- */
  /* 確保外層不遮擋任何內容 */
  #edu_center_C, #edu_center_C table {
    height: auto !important;
    overflow: visible !important;
  }
  table.sub td {
    /* [修改] 縮小公告間距 (4px) */
    padding: 0.25rem 0 !important;
    /* [修改] 字體加大 (18px) */
    font-size: 1.125rem !important;
    line-height: 1.5;
    vertical-align: middle;
    border-bottom: 0.0625rem dashed #e0e0e0;
  }
  /* --- 無障礙公告提示區塊 (頂部說明) --- */
  .bulletin-notice {
    background-color: #f8f9fa;
    border-left: 0.3125rem solid #1a5cbe;
    /* 加深藍色確保對比度 */
    padding: 0.625rem;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #222;
    border-radius: 0.25rem;
  }
  /* 強制隱藏教育局原本的閃爍圖片 (避免癲癇風險與干擾) */
  #edu_center_C img {
    display: none !important;
  }
  /* =======================================================
  連結樣式 (預設無底線，符合您的需求)
  ======================================================= */
  #edu_center_C a {
    text-decoration: none !important;
    /* 移除底線 */
    color: #004085 !important;
    /* 深藍色，對比度 > 4.5:1 */
    font-weight: 500;
    display: inline-block;
    padding: 0.125rem 0;
  }
  /* 互動狀態：滑鼠移入或鍵盤聚焦 (AA 規範必須有明顯變化) */
  #edu_center_C a:hover, 
  #edu_center_C a:focus {
    text-decoration: underline !important;
    /* 互動時才顯示底線 */
    color: #ba000d !important;
    /* 變色 */
    background-color: #f0f4f8;
    /* 背景輕微變色 */
    outline: 0.125rem solid #0056b3;
    /* 鍵盤操作外框 */
    border-radius: 0.25rem;
  }
  /* =======================================================
  無障礙隱藏文字 (給螢幕閱讀器讀取，視覺上看不見)
  ======================================================= */
  .sr-only {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<div class="bulletin-notice" role="note">本區塊資料來源為「臺南市政府-教育局公告」，點選後皆以「另開新視窗」方式開啟。</div>

<div aria-label="教育局公告列表" aria-live="polite" id="edu_center_C" role="region" tabindex="0"> </div>
<script src="https://bulletin.tn.edu.tw/GetNews.aspx?stype=edu_center_C&fontsize=1" charset="utf-8" defer="defer">
</script><script>
  (function() {
    const targetNode = document.getElementById('edu_center_C');
    if (!targetNode) return;
    const applyA11y = () => {
      const links = targetNode.querySelectorAll('a');
      links.forEach(link => {
        // 1. 強制設定開新視窗屬性
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener noreferrer');
        // 2. 移除原本可能存在的 title，重新設定乾淨的標題說明
        // 抓取純文字內容 (排除已經加進去的隱藏標籤)
        const pureText = link.childNodes[0].textContent.trim();
        link.setAttribute('title',  ' (另開新視窗)');
        // 3. 核心：如果還沒有隱藏文字，則補上 (給螢幕閱讀器讀取)
        if (!link.querySelector('.sr-only')) {
          const hiddenTag = document.createElement('span');
          hiddenTag.className = 'sr-only';
          hiddenTag.innerText = '(另開新視窗)';
          link.appendChild(hiddenTag);
        }
      });
    };
    // 使用 MutationObserver 監測資料何時載入完成
    const observer = new MutationObserver(() => {
      applyA11y();
    });
    observer.observe(targetNode, { childList: true, subtree: true });
    // 針對部分瀏覽器緩慢載入的保險措施
    setTimeout(applyA11y, 1500);
  })();
</script>