建立聚焦樣式

• :focus 偽類，表示獲得焦點的元素（如表單輸入）。當使用者點選或觸控元素或通過鍵盤的 “tab” 鍵選擇它時會被觸發。
• outline CSS 屬性，設定一個或多個單獨的輪廓屬性的簡寫屬性 ， 例如 outline-style, outline-width 和 outline-color。 多數情況下，簡寫屬性更加可取和便捷。
• :hover 偽類，可以建立複雜的層疊機制。觸控式螢幕非常普遍，所以網頁開發人員不要讓任何內容只能通過懸停才能展示出來，不然這些內容對於觸控式螢幕使用者來說是很難或者說不可能看到。
• ::before 偽元素，常通過 content 屬性來為一個元素新增修飾性的內容。

/* Selects any <input> when focused */
input:focus {
  color: red;
}

/* 寬度 | 樣式 | 顏色 */
outline: 1px solid white;
/* two identical declarations */
:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }

/* CSS3 語法 */
element::before { 樣式 }  
/* （單冒號）CSS2 過時語法 (僅用來支援 IE8) */
element:before  { 樣式 }  
/* 在每一個p元素前插入內容 */
p::before { content: "Hello world!"; } 

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

多裝置自適應設計

• 響應式網站設計基礎
• 關於觸控目標的 Material Design 無障礙性建議(英)

顏色和對比度

• http://webaim.org/standards/wcag/checklist#sc1.4.3 (英)
• http://webaim.org/standards/wcag/checklist#sc1.4.6 (英)
• http://webaim.org/standards/wcag/checklist#sc1.4.1