第十一天:跳過導覽列的鏈結

就算妳不想要把模版改成內容在前的樣子,至少也該妥協一下,提供跳過導覽區的鏈結。這並不是多完美的解決方案(先把主要的內容放在前面纔是王道),但至少是許多站台都願意採用的權變之策。

這個「跳過鏈結」就跟其他鏈結一樣,其實就祇是標準的 <a> 標籤;不過我們會用 CSS 把他隱藏起來,所以妳在 Internet Explorer 或 Netscape 上完全看不到,也不會影響到妳本來的版面設計。

誰因此獲益?

  1. Marcus 從中獲益了。因為當他瀏覽這個頁面時, Lynx 就會顯示出這個鏈結,讓他能夠跳過導覽列,而直接閱讀主要的內容。至於這件事的重要性,請參照第十天:先呈現妳的主要內容裡所舉的例子。
  2. Jackie 從中獲益了。因為當他瀏覽這個頁面時, JAWS 就會讀出這個鏈結,讓他能夠跳過導覽列,而直接閱讀主要的內容。

怎麼做

首先請用 Lynx Viewer 來看看妳的主頁面是不是會把導覽列放在主要內容之前。如果妳的主要內容更早出現的話,妳就不需要用到我們今天所要探討的訣竅了;放自己一天假,玩樂去吧!

現在讓我們定義這個跳過鏈結所要用的 CSS 樣式,讓它在視覺性瀏覽器上消失不見。如果妳用了外部樣式表的話,就把這個規則加到最後面(如果妳用了多重外部樣式表的話,請把這個規則加到適用 Netscape 4 的那一個裡)。如果妳本來祇在模版開頭的地方使用 <style> 區段來定義樣式的話,請在 <style> 標籤之後加入這個規則。

.skiplink {display:none}

接下來是把這個跳過鏈結直接插入到站台名稱和站台描述之後的地方。找不到嗎?也許妳該搜尋一下相對應的模版變數。

  • Movable Type: 尋找 <$MTBlogTitle$><$MTBlogDescription$>
  • Greymatter: 沒有特定的模版變數;妳應該直接搜尋網站的名稱和標籤列。
  • Radio: 尋找 <%siteName%><%description%>
  • Manila: 尋找 {homePageLink (siteName)}{tagLine}
  • Blogger: 尋找 <$BlogTitle$>

現在找到了嗎?切記要在站台名稱和描述的正下方插入這個跳過鏈結:

<a class="skiplink" href="#startcontent">跳過導覽列</a>

好,現在妳還需要設立跳過連結所要指到的定位錨標籤,理論上也就是指到妳的主要內容去。妳找不到主要內容嗎?別著急,模版變數再度拯救了今天的課程。

  • Movable Type: 尋找 <MTEntries>
  • Greymatter: 在妳的 Main Index Template 裡尋找 {{logbody}} ,然後在妳的 Entry Page Templates 裡尋找 {{entrymainbody}}
  • Radio: 尋找 <%bodytext%>
  • Manila: 尋找 {bodytext}
  • Blogger: 尋找 <Blogger>

接下來,要使用的定位錨標籤格式則會因妳使用的 HTML 不同而有所出入。檢查一下妳的 DOCTYPE ,然後從底下選一個合適的來用:

  1. 如果妳用的是任何一種 HTML 4 的話,請在妳的主要內容前面加入這個:

    <a name="startcontent"></a>

  2. 如果妳用的是任何一種 XHTML 1.0 的話,請在妳的主要內容前面加入這個:

    <a name="startcontent" id="startcontent"></a>

  3. 如果妳用的是任何一種 XHTML 1.1 的話,請在妳的主要內容前面加入這個:

    <a id="startcontent"></a>

妳應該在網站上的每一頁都提供這樣的跳過鏈結,所以在每個模版裡都依樣畫葫蘆,加入這些東西吧。