Например, те пользователи, которым нужно читать программное обеспечение для экрана. Как фронт, как мы могли это вынести? Я всегда хотел написать такую статью раньше, поделившись, как создать страницу с лучшей доступностью. Сегодняшний план включает в себя комбинацию стандартов 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>
Написание чего -то на бумаге не может быть сделано, как писать что -то на компьютере. Вы можете использовать клавишу Undo, чтобы нажать его, но что мы должны делать, когда хотим подчеркнуть, что что -то удалено? То есть использовать тег <LEL>. Например:
<LEL> При выражении акцента на HTML, пожалуйста, используйте & lt; b & gt; Tag </del> При выражении акцента на HTML, пожалуйста, используйте & lt; strong & gt; ярлык
Эффект такой:
При подборе подчеркивания на HTML, пожалуйста, используйте тег <b>При подборе подчеркивания на HTML, пожалуйста, используйте тег <strong>
Когда в прошлом году я брал новичков для фронтального блога Alipay, больше всего меня поразило, что мне понравилось использовать <dl>. В то время я думал, что эти студенты были довольно хорошими и хорошо понимали семантику. Мы все еще редко используем списки определений. Вместо этого используйте два генерала <ul> <ol>. <dl> также следует использовать с осторожностью, лучше всего использовать только определенные окончательные записи, такие как пример W3School, определение кофе и молока:
<dl> <dt> кофе </dt> <dd>- черный горячий напиток </dd> <dt> молоко </dt> <dd>- Белый холодный напиток </dd> </dl>
Список, это очень знакомо для каждого фронтального. Поскольку структура может быть применена очень гибко, ее часто используются в навигации, списке, вкладке, вкладке и т. Д. В этом нет необходимости много говорить об этом. Но есть одна вещь, которую нужно понять. Не верьте, что <ul>/<ol> является заменой <table>. В наших обычно используемых HTML -тегах каждый тег имеет свою собственную функцию, и никто не заменит никого.
<ol> <li> кофе </li> <li> чай </li> <li> Молоко </li> </ol>
Если это таблица, то не используйте абзацы вместо этого, не говоря уже о списках. Если это не абсолютно необходимо, и они не являются конвертируемыми. Кроме того, в таблице есть несколько моментов:
<Table Summary = Статус блога Софиша> <TheAd> <tr> <Th> Date </th> <T.> ip </th> <Th> pv </th> </tr> </thead> <tbody> <tr> <td> 2011.31 </td> <td> 3000 </td> <td> 8000 </td> </td> <tdy> 3000 </td> <td> 8000 </td> </td> <tdy> 3000 </td> <td> 8000 </td> </td> <td> 3000 </td> <td> 8000 </td> </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 is ... </p> <hr/> <h3> title 2 </h3> <p> Это запись ... </p>
На самом деле, два тега <Div>/<pan> имеют семантику, и оба определяют раздел в документе. Да, на самом деле это то же самое, что <section> в HTML5. Просто из -за поисковых систем поисковые системы думают, что это семантические этикетки, поэтому они становятся семантическими этикетками. Рекомендуемое использование состоит в том, чтобы попытаться использовать другие контейнеры в качестве кадры страницы, такие как макет, добавление дополнительных визуальных эффектов, а не заменителей для абзацев и т. Д.
<div id = container> <div id = content> </div> <div id = боковая панель> <ul> <li> <pan> Бог </span>, о мой zsh </span> </li> </ul> </div> </div>
Эти теги почти можно сказать, что являются наиболее важными тегами в иерархии тега страницы. Мы можем использовать структуру книги, чтобы проиллюстрировать эти теги, и когда мы строим страницу, мы также должны иметь такую мысль в нашем уме:
Да, конечно, есть также цитаты <Blockquote>, коды, представленные в технических книгах <pre Class = code>, списки баллов, которые требуют внимания <ul>, таблицы для легкого сравнения и т. Д.
<h1> логотип </h1> <h2> title </h2> <div class = intry> <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> font </em>.
Элементы формы являются относительно сложными тегами в HTML, и есть много очков, на которые обратите внимание на:
<form method=post action=http://sofish.de> <fieldset><legend>My Form</legend> <label for=firstname>* First name:</label> <input type=text id=firstname /> <label for=speech>Say something:</label> <textarea id=speech /> </textare> <input type=submit value=submit title=submit button /> </fieldset> </form>
Для картинок слепые люди не могут их видеть. Предоставьте ALT для представления альтернативного текста. Скажите им, какая это картина.
<img src = http: //sofish.de/favicon.ico alt = счастливые фавориты Favicon/>
Старайтесь избегать использования фреймворков <iframe>, но когда вам нужно их использовать, лучше предоставить атрибут заголовка для их описания.
<iframe src = http: //sofish.de title = счастливые фавориты/</iframe>
СМИ также является относительно сложным форматом, который более хлопотно для обработки. Обычно мы можем сделать это:
<audio src = mozart.mp4> mozart 39 Symphony </audio>
Страница должна содержать заголовок, и каждый тег должен быть узнаваемым. Например, это отражено в Alipay:
<title> Свяжитесь со мной-фавориты </title>
Все в порядке. Это все сейчас. WCAG - это не только использование этих простых тегов HTML, а семантические страницы веб -страниц - это не то, что можно записать в одной или двух статьях. Не торопись. Начните с самых распространенных вещей и развивайте хорошие привычки. Возвращаясь к предложению в начале статьи, у вас есть сердце, чтобы написать страницу так сложно использовать?