Привет, с возвращением.
В этой лекции мы будем говорить о доступной навигации.
Я знаю, что этот курс в основном касается CSS, но мне всегда нравится заходить и
напоминать вам о разных вещах, о которых вам нужно
думать, когда вы стилизуете свои страницы.
Навигация действительно является наиболее важным аспектом доступности.
Если люди не могут перемещаться по вашей странице и получить контент, к которому они действительно должны
добраться, то вы просто потратили свое время и некоторые из ваших.
Итак, цитируемые пользователи имеют такие проверенные и истинные вещи, которые они ищут
на странице.
Они знают, что такое окно поиска.
Они знают, куда обычно идет баннер.
Где основная навигация.
И это не удивительно для них, что часто основной контент,
в том, что мы называем содержание хорошо, скрывается внизу на странице.
И мы знаем это, потому что мы можем увидеть его сразу же, как только мы открываем браузер.
Но для слепых или пользователей с низким зрением они действительно должны полагаться
на правильное кодирование страницы, чтобы добраться до того, что они хотят получить.
И не только правильное кодирование, но
есть много стилистических проблем, о которых вы должны подумать, когда вы это делаете.
А что, если ты не видишь?
Первое место, где вы получаете информацию из заголовка страницы.
Вы хотите убедиться, что ваш заголовок короткий, но
также позволяет пользователю знать, чем эта страница отличается от других страниц на вашем сайте.
Далее, правильное размещение заголовков и вид этой иерархии
позволяет пользователям экрана пропускать различные навигационные ссылки и
перейти непосредственно к тому, что они ищут.
Я думаю, что вы все были на сайтах, где кажется, что вам нужно пойти в одно место,
а затем вы следуете за другим, и вы следуете за другим.
И это может быть очень раздражающим и раздражающим.
Особенно, если это действительно важно, что мышь находится в нужном месте.
Поэтому мы хотим убедиться, что мы позволяем читателям с экрана и
другим пользователям пропустить прямо туда, куда они хотят пойти.
Мы также хотим подумать о ваших ссылках.
Потому что, когда у вас есть ссылки на различные сайты на вашей странице,
эти описания являются все, что люди собираются для них.
Так что ты не хочешь использовать «Нажмите меня», «Следуй за мной здесь».
Вы хотите дать хорошую информацию в этих описаниях ссылок.
Далее, нам нужно поговорить о правильной иерархии заголовков, хорошо?
Заголовки должны быть вложенными, чтобы действительно обеспечить структуру, поэтому
у вас не должно быть заголовков h3, прежде чем у вас будут заголовки h2.
У вас должен быть только один заголовок h1.
Вы не должны прыгать с h2 на h4.
Вместо этого, вы действительно хотите следовать определенному порядку
, чтобы люди могли понять, что есть смысл за вашей страницей.
Итак, вот пример прямо здесь.
У меня есть мой единственный заголовок h1, и затем на этой странице
я могу представить, что у меня есть три раздела.
Каждый из этих разделов имеет заголовок h2 внутри него.
И в моем первом разделе, это может быть, что у меня есть некоторые маленькие пулевые точки
или другие моменты, которые я делаю, где они достаточно важны, что я решил, эй,
я собираюсь использовать h3, чтобы обозначить, что это еще один подраздел в моем разделе. Там ,
где люди попадают в неприятности, и то, что вы видите все время, это то, что люди решают,
мне очень нравится внешний вид этого шрифта h2.
Мне нравится, насколько большой текст.
Мне нравится, как вид шрифта они используют, поэтому я просто собираюсь поместить
столько вещей, сколько могу, в шрифт h2, потому что мне нравится, как он выглядит.
И они не думают о семантике.
То же самое происходит со шрифтом h3.
Вы перейдете на чью-то страницу и выясните, что нет шрифтов h2 вообще.
Вместо этого, это все элементы h3, и
они сделали это только потому, что им нравится внешний вид этого конкретного тега.
Итак, вот где приходит стиль,
вот почему я говорю об этом в классе стиля.
Это то, что теперь вы знаете, что вместо этого, если вам действительно нравится внешний вид этого заголовка h3,
вместо того, чтобы использовать тег, вы должны стилизовать другие теги, чтобы реплицировать этот взгляд.
Узнайте, какое семейство шрифтов они используют.
Узнайте, какой размер шрифта.
Просто повторите.
Не используйте теги только потому, что вам нравится, как они выглядят.
Другая вещь, о которой вы можете подумать, чтобы помочь навигации,
это идея внестраничных заголовков.
Это полезно делать, когда вы хотите дать пользователю чтения с экрана какую-то
навигационную помощь, но вы не хотите размещать ее прямо на странице, и
ваши зрячие пользователи также должны иметь дело с этим все время.
Итак, позвольте мне привести вам пример этого.
Мы собираемся использовать таблицы стилей, чтобы в основном установить что-то вне страницы,
мы дали ему имя offpage, и мы сказали:
эй, я хочу поместить это в положение, абсолютное слева от -1000px.
Так что вы поймете, что это довольно далеко.
У меня тут страница отдела кадров Мичиганского университета.
И если вы посмотрите наверху, там ничего нет,
здесь, в верхнем углу.
Но то, что я собираюсь сделать, так это я пойду и нажму Таба.
И, что делает Tab, это делает следующий элемент в фокус.
Итак, иди вперед и Таб, там.
И вы можете видеть,
что теперь здесь есть новая вещь, которая говорит «Перейти к основному контенту».
Если я нажму на него, я пройду весь путь вниз, и я смог
пропустить много дополнительной информации, которую им не нужно было видеть.
Это был скорее маркетинг и разные вещи вроде этого.
Таким образом, эти различные ссылки навигации вне экрана чрезвычайно полезны, чтобы позволить людям
сразу перейти к тому, что они хотят получить.
Но, используя стиль,
мы сняли его со страницы, что вы используете его только в том случае, если вы действительно хотите.
Одна из вещей, которые я хотел упомянуть, заключается в том, что если вы собираетесь делать внестраничные заголовки,
не используйте {display: none} или {visibility: hidden}.
Это действительно просто беспорядок с кодом и делает его очень сложным для
чтения с экрана или других людей, которые смотрят на ваш код, чтобы увидеть, что происходит.
В начале лекции я отметил, что содержательный текст ссылки
очень важен для
доступности, потому что читатели с экрана могут найти и перечислить все ссылки.
Теперь, то, что вы можете не понять, так это способ отображения этих ссылок
может быть не так, как вы ожидаете.
Таким образом, они могут быть вне контекста.
Вы можете получить доступ к ним только с помощью табуляции или
они могут быть представлены в списке.
Итак, вы действительно хотите избежать использования таких вещей, как нажмите здесь, прочитайте это и многое другое.
Причина в том,
что, возможно, единственный контекст, который некоторые люди получают, чтобы перейти к ссылкам.
Кроме того, пожалуйста, не используйте URL-адрес в качестве описания ссылки.
Это довольно часто, чтобы перейти на сайт, и вы можете увидеть здесь, и
у них есть весь URL-адрес, www.umich.edu/etc.
Это может выглядеть очень описательным, но если вы должны слушать описание,
это может быть очень запутанным.
Вместо этого, если у вас нет очень короткого URL-адреса, идите вперед и
используйте какое-то текстовое описание.
Итак, просто для обзора, давайте подумаем о том, чему мы научились сегодня.
Когда вы закончите делать свою страницу, это не достаточно, чтобы она выглядела хорошо.
Вам нужно подумать о том, как легко перемещаться по вашей странице.
Подумайте о том, что произойдет, если цветов не будет, или
если кто-то сможет перейти к вашей странице только с помощью мыши.
Так что я очень быстро расскажу о том, о чем я здесь говорю.
Вот моя старая страница, а внизу - Мичиганский университет.
Я просто хочу показать тебе, что происходит, когда я забираю стиль.
Страница сейчас, вы даже текст больше не можете видеть.
Это небольшие вещи, которые вы никогда не заметите,
если вы не проверили свою страницу как с стилем, так и без него.
Поэтому, когда вы планируете свою страницу, убедитесь, что вы планируете для всех.
Сделать большое использование заголовков.
Используйте текст ссылки.
И убедитесь, что вы даете людям инструменты, необходимые для
успешного перехода на страницу.
Спасибо.