Outline
เรามักจะรู้สึกรำคาญเมื่อเวลาที่เราทำลิงค์แล้วพอ กดลิงค์ลงไป มันมักจะขึ้น จุดไข่ปลา รอบๆ ลิงค์นั้น ส่วนใหญ่มันจะไป กำจัดจุดไข่ปลากันด้วย * {outline: 0;} ซึ่ง แน่นอน ฝรั่งพาเอาออก
แต่ ถ้าจะพูดกันถึงเรื่อง Web Accessibility กันแล้ว outline หรือ จุดไข่ปลานี้ เรียกได้ว่า “ห้าม" เอาออกกันเลยทีเดียวProperty Outline ของ CSS นั้น อยู่ในหมวดหมู่ Basic User Interface Module หรือ หมวดหมู่พื้นฐานที่เอาไว้ติดต่อกับผู้ใช้ เราสามารถสังเกต ประโยชน์ของ outline ได้ ในตอนที่เรา กด [TAB] เมื่อเรากด [TAB] ไปเรื่อยๆ outline บนหน้าเว็บมันจะวิ่งไปเรื่อยๆ ซึ่ง ค่า Outline นั้น จะติดมากับ HTML Element ที่เป็นส่วนหนึ่งของ UI เช่น <a> หรือ input ทั้งหลายแหล่
พอเราใช้ CSS สั่งให้ Outline เป็นศูนย์แล้ว เมื่อเรากด [TAB] ในหน้าเว็บ เราจะไม่สามารถรู้ได้ว่า ขณะนั้น เราอยู่ส่วนไหนของหน้าเว็บ หรือ Element ไหนที่ Keyboard กำลัง :focus อยู่ ซึ่งบางที ถ้าเรานั่งเล่นเน็ต หรืออ่านบทความในเว็บไซท์ แต่ทันใดนั้น เมาส์เราเกิด เสีย กระทันหัน ไม่สามารถใช้เมาส์เพื่อเลือกส่วนต่างๆ ในหน้าเว็บได้ Keyboard เป็นตัวเลือกต่อมาที่เราจำเป็นต้องใช้
การกด [TAB] เพื่อเดินหน้า หาส่วนต่างๆ ในหน้าเว็บ หรือ กด Shift+TAB เพื่อเดินย้อนหลัง สามารถทำให้เรายังใช้งานหน้าเว็บต่อไปได้ดี แต่ถ้า Outline ถูกลบออกไปแล้ว การกด [TAB] จะเริ่มมั่วไปในบัดดล
ปัญหาต่อมา สำหรับ การไม่ปิด Outline ในกรณีที่เราจะทำ background Image Replacement สำหรับ Navigation
การใช้ text-indent: -9999px; จะทำให้เกิด จุดไข่ปลา แทงไปทางซ้ายประมาณ 9999px ซึ่งมันก็กะไรอยู่ ถ้าหากเราอยากจะทำ outline เก๋ๆ เพื่อผู้บริโภค เพราะฉะนั้น ให้เลิกใช้ วิธีการติดลบการ indent ของ text แล้วใช้วิธีนี้แทน
การดัน Text ด้วย Padding และ overflow: hidden ที่ Nest element
ปกติ เวลาเราทำ เมนู เมื่อเราต้องการ เอาพื้นหลังมาใช้แทน ตัวหนังสือ เรามักจะเขียนกันแบบนี้
<li><a href="#">Link</a></li>
แล้วก็ติด text-indent ให้กับ <a>
วิธีที่เราจะคง Outline ไว้ได้นั้น มันจำเป็นต้องเปลือง Element อีก นิดหน่อย เพื่อเพิ่มความสวยงาม โดยเพิ่ม <span> เข้าไปเป็น Child ของ <a>
<li><a href="#"><span>Link</span></a</li>
ขั้นต่อมา ให้กำหนด ความกว้าง และสูงให้กับ <a> พร้อมกับกำหนด Overflow เป็น hidden แล้ว กำหนด padding-top ให้กับ span ที่อยู่ใน <a> โดยให้มีค่าเท่ากับความสูงหรือ มากกว่า ความสูงของ <a>
อย่าลืม สั่งทั้ง <a> และ <span> ให้เป็น block ก่อน เพราะว่า inline มันไม่รับ property ของ block (ความกว้างและสูง เป็น properties ของ block element แต่ <a> กับ <span> เป็น inline element จึงต้องสั่ง display: block ก่อน)
ค่าความสูงของ <a> นั้น จะทำให้ตัวมันเองยังรักษาพื้นที่สำหรับ Click เอาไว้ได้ ทำให้ Outline นั้นยังอยู่ ตัวหนังสือ ที่อยู่ใน span จะถูกดันลงไปด้านล่าง เราจะมองไม่เห็นเพราะว่า <a> นั้น ติด overflow เป็น Hidden
รับทําเว็บไซต์ 
แลกลิงค์ 
