ตัวอย่างเช่นผู้ใช้ที่ต้องการอ่านซอฟต์แวร์หน้าจอ ในฐานะที่เป็นส่วนหน้าเราจะแบกรับมันได้อย่างไร? ฉันอยากเขียนบทความดังกล่าวมาก่อนแบ่งปันวิธีสร้างหน้าด้วยการเข้าถึงที่ดีขึ้น แผนของวันนี้รวมถึงการรวมกันของมาตรฐาน HTML TA AG และ WCAG ฉันขอแนะนำให้คุณเขียน HTML ของคุณเช่นนี้เพื่อให้ชีวิตของบางคนง่ายขึ้น
สิ่งที่ฉันต้องการแบ่งปันในวันนี้คือวิธีการใช้แท็ก HTML ของเราเพื่อสะท้อนมาตรฐาน WCAG และเป้าหมายเครือข่ายความหมาย:
ในความเป็นจริงสิ่งนี้ไม่มีส่วนเกี่ยวข้องกับ WCAG แต่สำหรับหน้าเว็บที่มีความเข้ากันได้ดีกว่าโดยเฉพาะอย่างยิ่งความเข้ากันได้ย้อนหลังฉันขอแนะนำให้คุณเขียนแบบนี้:
<! doctype html>
การเชื่อมต่ออินเทอร์เน็ตเกือบจะกล่าวได้ว่าใช้งานโดยใช้ <a> เป็นแท็กที่พบบ่อยที่สุดในหน้า เราควรปฏิบัติอย่างไร?
<a href = title = accessKey = m rel =Hidefocus> ลิงค์ </a>
นอกจากนี้ยังเป็นสิ่งสำคัญมากที่จะใช้แท็ก HTML อย่างถูกต้องซึ่งเอื้อต่อการทำความเข้าใจโครงสร้างหน้าของผู้ใช้ซอฟต์แวร์การอ่านหน้าจอ โดยเฉพาะอย่างยิ่งเมื่อใช้ป้ายกำกับเช่น H1, H2, H3 ฯลฯ การละเมิดสามารถนำไปสู่ความสับสนของโครงสร้างได้อย่างง่ายดาย แน่นอนว่าการใช้แท็กทั่วไปแล้วใช้ CSS เพื่อสร้างความคมชัดด้วยภาพก็เป็นสิ่งที่คนธรรมดาสามารถจดจำได้ แต่สิ่งที่เกี่ยวกับผู้ใช้ซอฟต์แวร์การอ่านหน้าจอ แน่นอนที่นี่เราเพียงแค่ต้องใส่ใจกับการใช้แท็กหน้าและสิ่งที่สำคัญที่สุดเกี่ยวกับ ABBR ควรเพิ่มแอตทริบิวต์ชื่อเรื่องเพื่ออธิบายตัวย่อ ตัวอย่างเช่น:
<abbr title = ผู้พัฒนาเว็บ> wd </abbr>
เมื่อมีคำพูดขนาดใหญ่ให้ใช้ <blockquote> ในขณะที่คำพูดแบบอินไลน์ให้ใช้ <cite> เพื่อให้โครงสร้างของคุณอ่านง่ายขึ้น:
<blockquote> ฉันต้องการเขียนบทความดังกล่าวมาก่อนเสมอแบ่งปันวิธีการสร้างหน้าด้วยการเข้าถึงที่ดีขึ้น แผนของวันนี้รวมถึงการรวมกันของมาตรฐาน HTML TA AG และ WCAG ฉันขอแนะนำให้คุณเขียน HTML ของคุณเช่นนี้เพื่อให้ชีวิตของบางคนง่ายขึ้น </blockquote> <p> ประโยคที่น่าประทับใจที่สุดของ A คือเมื่อคุณอยู่ข้างหน้าคุณต้องมีความรัก อย่าใช้ร่างกายคำรามกับคนทุกประเภทตลอดเวลา </cite> </p>
การเขียนบางอย่างบนกระดาษไม่สามารถทำได้เช่นการเขียนบางอย่างบนคอมพิวเตอร์ คุณสามารถใช้คีย์เลิกทำเพื่อกด แต่เราควรทำอย่างไรเมื่อเราต้องการเน้นว่ามีบางสิ่งถูกลบ? นั่นคือการใช้แท็ก <del> ตัวอย่างเช่น:
<del> เมื่อแสดงความสำคัญกับ HTML โปรดใช้ & lt; b & gt; แท็ก </el> เมื่อแสดงความสำคัญกับ HTML โปรดใช้ & lt; strong & gt; ติดแท็ก
เอฟเฟกต์เป็นเช่นนี้:
เมื่อเน้น HTML โปรดใช้แท็ก <b>เมื่อเน้น HTML โปรดใช้แท็ก <strong>
เมื่อฉันพาผู้มาใหม่ไปทำบล็อก Aliipay Front-End เมื่อปีที่แล้วสิ่งที่ทำให้ฉันประทับใจมากที่สุดคือฉันชอบใช้ <DL> ในเวลานั้นฉันคิดว่านักเรียนเหล่านี้ค่อนข้างดีและมีความเข้าใจที่ดีเกี่ยวกับความหมาย เรายังคงใช้รายการนิยามไม่ค่อย ให้ใช้สองทั่วไป <ul> <ol> <DL> ควรใช้ด้วยความระมัดระวังควรใช้รายการที่ชัดเจนบางอย่างเช่นตัวอย่างของ W3School คำจำกัดความของกาแฟและนม:
<Dl> <Dt> กาแฟ </dt> <DD>- เครื่องดื่มร้อนดำ </dd> <Dt> นม </dt> <DD>- เครื่องดื่มเย็นสีขาว </dd> </dl>
รายการนี่เป็นที่คุ้นเคยสำหรับทุก ๆ ด้านหน้า เนื่องจากโครงสร้างสามารถนำไปใช้ได้อย่างยืดหยุ่นมากจึงมักใช้ในการนำทางรายการแท็บ ฯลฯ ไม่จำเป็นต้องพูดอะไรมากเกี่ยวกับเรื่องนี้ แต่มีสิ่งหนึ่งที่ต้องเข้าใจ อย่าเชื่อว่า <ul>/<ol> เป็นตัวทดแทนสำหรับ <bable> ในแท็ก HTML ที่ใช้กันทั่วไปของเราแต่ละแท็กมีฟังก์ชั่นของตัวเองและไม่มีใครทดแทนใครก็ได้
<ol> <li> กาแฟ </li> <li> ชา </li> <li> นม </li> </ol>
หากเป็นตารางอย่าใช้ย่อหน้าแทนให้แสดงรายการเพียงอย่างเดียว เว้นแต่จะมีความจำเป็นอย่างยิ่งและสามารถแปลงสภาพได้ นอกจากนี้ยังมีบางจุดที่ควรทราบในตาราง:
<ตารางสรุป = สถานะบล็อกของ Sofish> <thead> <tr> <th> วันที่ </th> <th> ip </th> <th> pv </th> </tr> </thead> <tbody> <tr> <td> 2011.3.11 </td> <td> 3000 </td> <td>
<code> หมายถึงข้อความรหัสคอมพิวเตอร์ในขณะที่ <pre> หมายถึงข้อความ preformatted <pre> เป็นช่วงที่กว้างขึ้นและเป็นองค์ประกอบบล็อกที่อาจใช้ในการจัดรูปแบบข้อความต่าง ๆ โดยเฉพาะรหัส ไม่จำเป็นต้องให้ความสนใจเป็นพิเศษเมื่อใช้งานส่วนใหญ่การใช้งานที่ถูกต้องตามความหมายเช่นไม่ใช้ <pre> แทนที่จะเป็นทั่วไป <p>
<code> text-allign: center </code> <pre> {(1 * 102) + (9 * 101) + (3 * 100)} </pre>ในหน้าเว็บสมัยใหม่มันหายากมากที่จะใช้ <br> พื้นที่ว่างในหน้าเว็บโดยทั่วไปจะถูกนำมาใช้โดยใช้ CSS padding และมาร์จิ้น สิ่งนี้แม่นยำและควบคุมได้ง่ายขึ้น การใช้งานที่แนะนำในขณะนี้คือการใช้ย่อหน้าทั่วไป <p> เพื่อทำให้การแบ่งบรรทัดง่าย ๆ แทนที่จะควบคุมพื้นที่สีขาวของหน้า
<p> ฉันเป็นย่อหน้า <br /> การเมืองมักจะทำลายเส้นเสมอ </p>
<HR> มีเอฟเฟกต์ความหมายที่ดีมาก แต่เอฟเฟกต์ภาพของเขานั้นยากต่อการควบคุม ฉันเคยเขียนบทความดังกล่าวมาก่อนเกี่ยวกับปัญหาในเบราว์เซอร์ต่างๆ โดยทั่วไปมันไม่ค่อยมีการใช้ หากคุณมีหน้าแยกต่างหากสำหรับผู้ใช้ซอฟต์แวร์การอ่านหน้าจออาจใช้งานได้ดี
<h3> ชื่อเรื่อง 1 </h3> <p> Lorem ipsum คือ ... </p> <hr/> <h3> ชื่อ 2 </h3> <p> นี่คือรายการของ ... </p>
ในความเป็นจริงสองแท็ก <div>/<pan> มีความหมายและทั้งสองกำหนดส่วนในเอกสาร ใช่จริง ๆ แล้วมันเหมือนกับ <section> ใน HTML5 เป็นเพราะเครื่องมือค้นหาเครื่องมือค้นหาคิดว่าพวกเขาเป็นฉลากความหมายดังนั้นพวกเขาจึงกลายเป็นฉลากความหมาย การใช้งานที่แนะนำคือพยายามใช้คอนเทนเนอร์อื่นเป็นเฟรมหน้าเช่นเค้าโครงเพิ่มเอฟเฟกต์ภาพเพิ่มเติมแทนที่จะใช้แทนย่อหน้าสำหรับย่อหน้า ฯลฯ
<div id = container> <div id = content> </div> <div id = sidebar> <ul> <li> <pan> พระเจ้า </span>, โอ้ ZSH </span> </li> </ul> </div> </div>
แท็กเหล่านี้เกือบจะกล่าวได้ว่าเป็นแท็กที่สำคัญที่สุดในลำดับชั้นของแท็กหน้า เราสามารถใช้โครงสร้างของหนังสือเพื่อแสดงแท็กเหล่านี้และเมื่อเราสร้างหน้าเราควรมีความคิดในใจของเรา:
ใช่แน่นอนว่ายังมีใบเสนอราคา <blockquote> รหัสที่มีให้ในหนังสือเทคนิค <pre class = code>, รายการคะแนนที่ต้องการความสนใจ <ul>, ตารางเพื่อการเปรียบเทียบที่ง่าย ฯลฯ
<h1> โลโก้ </h1> <h2> ชื่อเรื่อง </h2> <div class = entry> <h3> สรุป: </h3> <p> lorem ipsum คือ ... <em> เน้น </em> </p> </div>
<em> เน้นตัวย่อ และ <strong> เน้นย้ำ นักเรียนหลายคนที่เพิ่งเริ่มต้นจะไม่สามารถใช้ฉลากของ <em>, <strong>, <cite>, <i>, <b> และ <b> ได้อย่างถูกต้อง <i> และ <b> ถูกทอดทิ้งโดยทั่วไปเทียบเท่ากับคนปัจจุบันและ <strong> โดยทั่วไปคำสั่งของพวกเขาเกี่ยวกับความสำคัญของเนื้อหามีดังนี้: strong> em ≈อ้างอิง
<strong> หมายเหตุ: </strong> อย่าใช้แท็กเก่าเช่น <cite> ตัวอักษร, ศูนย์กลาง </cite>, ฯลฯ โดยเฉพาะอย่างยิ่ง <em> ตัวอักษร </em>
รายการแบบฟอร์มเป็นแท็กที่ค่อนข้างซับซ้อนใน HTML และมีหลายจุดที่ให้ความสนใจกับ:
<รูปแบบวิธีการ = โพสต์การกระทำ = http: //sofish.de> <fieldset> <legend> รูปแบบของฉัน </legend> <label for = firstName>* ชื่อแรก: </label> <อินพุต type = text id = firstName/> <label for = คำพูด> พูดอะไรบางอย่าง: </label> <textarea id => </> </>
สำหรับรูปภาพคนตาบอดไม่เห็นพวกเขา ให้ alt เพื่อแสดงข้อความทางเลือก บอกพวกเขาว่านี่คือภาพแบบไหน
<img src = http: //sofish.de/favicon.ico alt = รายการโปรดมีความสุข favicon/>
พยายามหลีกเลี่ยงการใช้เฟรมเวิร์ก <iframe> แต่เมื่อคุณต้องการใช้มันจะเป็นการดีที่สุดที่จะให้แอตทริบิวต์ชื่อเพื่ออธิบาย
<iframe src = http: //sofish.de title = happy favorites/</iframe>
สื่อยังเป็นรูปแบบที่ค่อนข้างซับซ้อนซึ่งเป็นปัญหาในการประมวลผล โดยปกติเราสามารถทำได้:
<Audio Src = mozart.mp4> Mozart 39 Symphony </udio>
หน้าจะต้องมีชื่อเรื่องและแต่ละแท็กควรเป็นที่รู้จัก ตัวอย่างเช่นสิ่งนี้สะท้อนให้เห็นใน Alipay:
<title> ติดต่อฉัน-รายการโปรด happiness </title>
เอาล่ะ. นั่นคือทั้งหมดนี้ WCAG ไม่ได้เป็นเพียงการใช้แท็ก HTML ที่เรียบง่ายเหล่านี้และหน้าเว็บความหมายไม่ใช่สิ่งที่สามารถเขียนได้ในบทความหนึ่งหรือสองบทความ ใช้เวลาของคุณ เริ่มต้นด้วยสิ่งที่พบบ่อยที่สุดและพัฒนานิสัยที่ดี กลับไปที่ประโยคที่จุดเริ่มต้นของบทความคุณมีหัวใจที่จะเขียนหน้ายากหรือไม่?