على سبيل المثال ، هؤلاء المستخدمون الذين يحتاجون إلى قراءة برنامج الشاشة. كواجهة أمامية ، كيف يمكننا تحملها؟ لطالما أردت أن أكتب مثل هذا المقال من قبل ، وأشارك كيفية إنشاء صفحة مع إمكانية وصول أفضل. تتضمن خطة اليوم مجموعة من معايير 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 = web developer> wd </abbr>
عندما تكون هناك فقرات كبيرة من عروض الأسعار ، استخدم <lockquote> ، في حين استخدم عروض الأسعار المضمنة <SITE> لجعل هيكلك أسهل في القراءة:
] تتضمن خطة اليوم مجموعة من معايير HTML TA AG و WCAG. أوصيك بكتابة HTML مثل هذا بحيث يمكن أن تكون حياة بعض الناس أسهل. </blockquote> <p> الجملة الأكثر إثارة للإعجاب من A هي أنه عندما تكون في المقدمة ، يجب أن يكون لديك الحب. لا تستخدم أجسادًا هائلة على جميع أنواع الأشخاص في أي وقت </cite>. </p>
لا يمكن القيام بكتابة شيء ما على الورق مثل كتابة شيء على الكمبيوتر. يمكنك استخدام مفتاح التراجع للضغط عليه ، ولكن ماذا يجب أن نفعل عندما نريد التأكيد على أنه تم حذف شيء ما؟ وهذا هو لاستخدام علامة <del>. على سبيل المثال:
<del> عند التعبير عن التركيز على HTML ، يرجى استخدام & lt ؛ b & gt ؛ Tag </eld> عند التعبير عن التركيز على HTML ، يرجى استخدام & lt ؛ strong & gt ؛ علامة
التأثير مثل هذا:
عند التأكيد على HTML ، يرجى استخدام علامة <b>عند التأكيد على HTML ، يرجى استخدام علامة <strong>
عندما كنت آخذ القادمين الجدد للقيام بمدونة Alipay Front-End في العام الماضي ، كان أكثر ما أثار إعجابي هو أنني أحب استخدام <dl>. في ذلك الوقت ، كنت أفكر في أن هؤلاء الطلاب كانوا جيدين للغاية وكان لديهم فهم جيد للدلالات. نادراً ما نستخدم قوائم التعريف. بدلاً من ذلك ، استخدم اثنين من الجنرال <ul> <ol>. يجب أيضًا استخدام <dl> بحذر ، من الأفضل استخدام إدخالات محددة فقط ، مثل مثال W3School ، تعريف القهوة والحليب:
<dl> <dt> Coffee </dt> <dd>- مشروب ساخن أسود </dd> <dt> الحليب </dt> <dd>- مشروب بارد أبيض </dd> </dl>
قائمة ، هذا مألوف جدا لكل واجهة الأمامية. نظرًا لأنه يمكن تطبيق الهيكل بشكل مرن للغاية ، فغالبًا ما يتم استخدامه في التنقل ، والقائمة ، وعلامة التبويب ، وما إلى ذلك. ليست هناك حاجة لقول الكثير عن هذا. ولكن هناك شيء واحد يجب فهمه. لا تصدق أن <ul>/<ol> هو بديل لـ <gable>. في علامات HTML شائعة الاستخدام ، كل علامة لها وظيفتها الخاصة ، ولا أحد بديل لأي شخص.
<ol> <li> القهوة </li> <li> الشاي </li> <li> الحليب </li> </ol>
إذا كان جدولًا ، فلا تستخدم الفقرات بدلاً من ذلك ، ناهيك عن القوائم. ما لم تكن ضرورية للغاية ، وهي قابلة للتحويل. بالإضافة إلى ذلك ، هناك بعض النقاط التي يجب ملاحظتها في الجدول:
<table summary = حالة مدونة Sofish> <thead> <tr> <th> التاريخ </th> <th> ip </h> <th> pv </h> </tr> </thod> <tbody> <td> <td> 2011.3.11 </td> <td> 3000 </td>
يشير <code> إلى نص رمز الكمبيوتر ، بينما يشير <pre> إلى النص المسبق. <pre> عبارة عن نطاق أوسع وهو عنصر ممتلئ يمكن استخدامه لتنسيق نص مختلف ، وخاصة التعليمات البرمجية. ليست هناك حاجة إلى إيلاء اهتمام خاص عند استخدامه ، وخاصة الاستخدام الصحيح بشكل أساسي ، مثل عدم استخدام <pre> بدلاً من عام <p>.
<code> text-align: Center </code> <pre> {(1 * 102) + (9 * 101) + (3 * 100)} </pre>في صفحات الويب الحديثة ، من النادر جدًا استخدام <br>. يتم تنفيذ المساحة الفارغة في صفحات الويب بشكل عام باستخدام حشوة CSS والهامش. هذا أكثر دقة وأسهل للتحكم. الاستخدام الموصى به الآن هو استخدام الفقرة العامة <p> لعمل فترات راحة في الأسطر بدلاً من التحكم في المساحة البيضاء للصفحة.
<p> أنا فقرة. <br /> السياسة هي دائما تحطم خط. </p>
<HR> له تأثير دلالي جيد جدا. لكن من الصعب السيطرة على آثاره البصرية. لقد كتبت مثل هذه المقالات من قبل حول القضايا في المتصفحات المختلفة. عموما ، نادرا ما يستخدم. إذا قمت بتقديم صفحة منفصلة خصيصًا لمستخدمي برامج قراءة الشاشة ، فقد تكون ذات فائدة كبيرة.
<h3> العنوان 1 </h3> <p> lorem ipsum هو ... </p> <hr/> <h3> العنوان 2 </h3> <p> هذا هو إدخال ... </p>
في الواقع ، فإن العلامات <Div>/<span> لها دلالات ، ويحدد كلاهما قسمًا في وثيقة. نعم ، إنه في الواقع مثل <section> في HTML5. إنه فقط بسبب محركات البحث ، تعتقد محركات البحث أنها علامات دلالية ، بحيث تصبح علامات دلالية. الاستخدام الموصى به هو محاولة استخدام حاويات أخرى كإطار صفحة ، مثل التخطيط ، وإضافة مؤثرات بصرية إضافية ، بدلاً من بدائل الفقرات ، وما إلى ذلك.
<div id = container> <div id = content> </viv> <div id = inbar> <ul> <li> <span> god </span> ، يا zsh </span> </li></ul> </viv> </viv>
يمكن القول أن هذه العلامات هي أهم العلامات في التسلسل الهرمي لعلامة صفحة. يمكننا استخدام بنية كتاب لتوضيح هذه العلامات ، وعندما نبني صفحة ، يجب أن يكون لدينا مثل هذا التفكير في أذهاننا:
نعم ، بالطبع هناك أيضًا عروض أسعار <Lockquote> ، الرموز المقدمة في الكتب التقنية <pre class> ، قوائم النقاط التي تحتاج إلى الاهتمام <ul> ، الجداول لسهولة المقارنة ، إلخ.
<H1> LOGO </h1> <h2> العنوان </h2> <div class = intern> <h3> ملخص: </h3> <p> lorem ipsum هو ... <em> التأكيد </em> </p> </fiv>
<em> التأكيد على الاختصار. و <strong> قوي التأكيد. لن يتمكن العديد من الطلاب الذين بدأوا للتو من استخدام ملصقات <em> و <strong> و <site> و <i> و <b> و <b> بدقة. <i> و <b> يتم التخلي عنها بشكل أساسي ، أي ما يعادلها الحالي و <strong>. بشكل عام ، يكون ترتيبهم لأهمية المحتوى كما يلي: Strong> em ≈ Cite.
<strong> ملاحظة: </strong> لا تستخدم العلامات القديمة ، مثل <cite> الخط ، المركز </cite> ، وما إلى ذلك ، وخاصة <em> الخط </em>.
تعتبر عناصر النموذج علامات معقدة نسبيًا في HTML ، وهناك العديد من النقاط التي يجب الانتباه إلى:
<form method = post action = http: //sofish.de> <fieldset> <legend> نموذجي </legend> <label for = firstName>* الاسم الأول: </label> <type type = text id = firstName/> <label> say some: </label> <textarea id =///textare
للصور ، لا يمكن للمكفوفين رؤيتهم. توفير ALT لتمثيل النص البديل. أخبرهم أي نوع من الصورة هذا.
<img src = http: //sofish.de/favicon.ico alt = happy favicon/>
حاول تجنب استخدام الأطر <frame> ، ولكن عندما تحتاج إلى استخدامها ، من الأفضل توفير سمة عنوان لوصفها.
<iframe src = http: //sofish.de title = Happy Favorites/</frame>
تعد الوسائط أيضًا تنسيقًا معقدًا نسبيًا ، وهو أكثر إزعاجًا للمعالجة. عادة يمكننا القيام بذلك:
<audio src = mozart.mp4> mozart 39 Symphony </udio>
يجب أن تحتوي الصفحة على العنوان ، ويجب التعرف على كل علامة. على سبيل المثال ، ينعكس هذا في Alipay:
<title> اتصل بـ Me-Happiness Favorites </title>
حسنًا. هذا كل شيء الآن. WCAG ليس فقط استخدام علامات HTML البسيطة هذه ، وصفحات الويب الدلالية ليست شيئًا يمكن كتابته في مقال أو مقالين. خذ وقتك. ابدأ بالأشياء الأكثر شيوعًا وتطوير عادات جيدة. العودة إلى الجملة في بداية المقالة ، هل لديك قلب لكتابة الصفحة التي يصعب استخدامها؟