Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Добавляет новый раздел #77

Closed
wants to merge 2 commits into from
Closed

Добавляет новый раздел #77

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c790667
Добавляет ссылки в меню
maniyax Jul 6, 2021
85565a4
Добавляет новый раздел
maniyax Jul 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions src/inner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,15 @@
</a>

<nav class="items" id="mobile-menu" aria-label="Содержание">
<ul class="menu-v">
<li class="level-1">
<span><strong>Название, роль, значение</strong></span>
</li>
<li class="level-1"><a href="#first-rule" data-id="offset-60"><span>Первое правило</span></a></li>
<li class="level-1"><a href="#second-rule"><span>Второе правило</span></a></li>
<li class="level-1"><a href="#third-rule"><span>Третье правило</span></a></li>
</ul>

<ul class="menu-v">
<li class="level-1">
<span><strong>Изображения</strong></span>
Expand Down Expand Up @@ -187,6 +196,15 @@

<div class="sidebar-scroll">
<nav class="items" id="vertical-menu" aria-label="Содержание">
<ul class="menu-v">
<li class="level-1">
<span><strong>Название, роль, значение</strong></span>
</li>
<li class="level-1"><a href="#first-rule" data-id="offset-60"><span>Первое правило</span></a></li>
<li class="level-1"><a href="#second-rule"><span>Второе правило</span></a></li>
<li class="level-1"><a href="#third-rule"><span>Третье правило</span></a></li>
</ul>

<ul class="menu-v">
<li class="level-1">
<span><strong>Изображения</strong></span>
Expand Down Expand Up @@ -277,6 +295,76 @@

<div class="content-box width-65 col items">
<main class="main-text">



<div>
<!-- Название, роль, значение -->
<div class="parent-box" id="parent-image">

<div class="sticky-title js-sticky-title xs-none xl-none">
Название, роль, значение
</div>

<h2 class="none-margin-top xm-none">Название, роль, значение</h2>
<div id="first-rule">
<h3>Первое правило</h3>

<p>Пункт 4.1.2 WCAG 2.1, относящийся к уровню адаптации A (то есть к самому базовому), требует от каждого элемента иметь название, роль и, опционально, значение.
Если вы используете нативные теги HTML, с выполнением этого критерия у вас не будет никаких проблем, но если вы создаете кастомные элементы через <code>&lt;div&gt;</code>, то вам необходимо отслеживать наличие каждого пункта из следующего списка.</p>


<dl>
<dt>Название</dt>
<dd>Текстовая метка на элементе. Может как выводиться визуально, находясь перед закрывающим тегом, так и являться меткой для скринридера - выводиться через атрибут <code>aria-label</code>.</dd>

<dt>Роль</dt>
<dd>Тип элемента, служащий, как правило, для сообщения вспомогательным технологиям о возможности взаимодействия с ним. По умолчанию у контейнера роль обычного текста, поэтому вам необходимо задавать вручную при помощи атрибута <code>role</code> со значениями. Самыми популярными окажутся <code>role="link"</code> или <code>role="button"</code.</dd>

<dt>Значение</dt>
<dd>Этот пункт является опциональным, то есть он невсегда требуется с точки зрения логики. Значение - это состояние вашего элемента в данный момент времени, передаваемое ассестивным технологиям. Например, если вы создаете кнопку для разворачивания подменю, кроме роли кнопки/ссылки вам необходимо передавать состояние свернутости/развернутости. Это нужно делать при помощи атрибута <code>aria-expanded="false/true"</code>. Более подробно написано в разделе с меню.</dd>
</dl>

<p>Первый раздел этого руководства призван обратить большее внимание на неочевидное, но базовое в адаптации любого сайта или мобильного приложения.
Здесь не рассматриваются все возможные примеры ролей и значений, для этого существует спецификация WAI-ARIA, применять которую нужно с осторожностью.</p>
</div>

<div id="second-rule">
<h3>Второе правило</h3>

<p>Название служит для названия, роль для роли, значение для значения. Передавать в название роль или значение нельзя, так как это дублирование роли.</p>

<div class="code-box">
<div class="left width-50 ">
<h5>Плохо</h5>
<div>
<pre class="pre-normal">&lt;a href="https://weblind.ru"&gt;Ссылка на главную Weblind&lt;/a&gt;</code></pre>
</div>
</div>

<div class="left width-50">
<h5>Хорошо</h5>
<pre class="pre-normal">&lt;a href="https://weblind.ru"&gt;Главная страница Weblind&lt;/a&gt;</code></pre>
</div>

<div class="clear"></div>
</div>

</div>

<div id="third-rule">
<h3>Третье правило</h3>

<p>Избегайте переопределения ролей, если этого не требует доступность. Ссылки должны быть ссылками, кнопки - кнопками.
Кроме того, не используйте специальный атрибут <code>aria-roledescrip[tion</code из спецификации WAI-ARIA. Он не предназначен для сайтов, так как в вебе есть готовый набор ролей, которых хватит абсолютно для всего.
Критичной ошибкой будет также использование в описании роли названия элемента, что вернет ко второму правилу.</p>

</div>

</div>
</div>


<div>
<!-- Изображения -->
<div class="parent-box" id="parent-image">
Expand Down