diff options
Diffstat (limited to 'files/ru')
| -rw-r--r-- | files/ru/learn/accessibility/css_and_javascript/index.html | 306 |
1 files changed, 159 insertions, 147 deletions
diff --git a/files/ru/learn/accessibility/css_and_javascript/index.html b/files/ru/learn/accessibility/css_and_javascript/index.html index f262b3d161..95d5c4ccb3 100644 --- a/files/ru/learn/accessibility/css_and_javascript/index.html +++ b/files/ru/learn/accessibility/css_and_javascript/index.html @@ -2,8 +2,17 @@ title: CSS и JavaScript доступность - лучшие практики slug: Learn/Accessibility/CSS_and_JavaScript tags: + - Доступность + - Статья - CSS + - CodingScripting + - Руководство - JavaScript + - Обучение + - Цвет + - Контраст + - Скрытие + - Ненавязчивость translation_of: Learn/Accessibility/CSS_and_JavaScript original_slug: Learn/Доступность/CSS_and_JavaScript --- @@ -11,53 +20,53 @@ original_slug: Learn/Доступность/CSS_and_JavaScript <div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> -<p class="summary">CSS и JavaScript, при правильном использовании, появляется возможность получить доступный web - опыт ... или же они могут значительно навредить доступности если не правильно используются. Это статья в общих очертаниях описывает рекомендации по использованию CSS и JavaScript , это является лучшей практикой, поэтому следует учитывать для обеспечения того, чтобы даже сложное содержание было максимально доступным</p> +<p class="summary">В CSS и JavaScript есть множество возможностей для создания доступных интерфейсов. Но это обоюдоострый клинок — при неосторожном обращении они могут доступности и значительно навредить. В этой статье мы рассмотрим лучшие практики в CSS и JavaScript, которые позволят даже сложному контенту оставаться доступным настолько, насколько это возможно.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">необходимые условия:</th> - <td>Базовая компьютерная грамотность, базовое понимание HTML, CSS, и JavaScript, и понимать (что такое доступность) <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">what accessibility is</a>.</td> + <th scope="row">Необходимые знания:</th> + <td>Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript, а также понимание, <a href="/ru/docs/Learn/Accessibility/What_is_accessibility">что такое доступность</a>.</td> </tr> <tr> - <th scope="row">Цели:</th> - <td>Приобрести хорошую осведомлённость при использовании CSS и JavaScript в ваших web документах для максимального увеличения доступности и (not detract from it)-(привет я не понял как переводится эти слова так что помогите если понимаете).</td> + <th scope="row">Цель:</th> + <td>Ознакомиться со способами использования CSS и JavaScript таким образом, чтобы не вредить доступности интерфейсов, а даже улучшать её.</td> </tr> </tbody> </table> -<h2 id="CSS_и_JavaScript_доступны">CSS и JavaScript доступны?</h2> +<h2 id="CSS_and_JavaScript_are_accessible">Влияют ли CSS и JavaScript на доступность?</h2> -<p>CSS и JavaScript не имеют такого же непосредственного значения для доступности как HTML, но они остаются способными для помощи или для повреждения доступности, в зависимости от того как их использовать. Другими словами, важно чтобы вы рассмотрели некоторые рекомендации для лучшей практики,чтобы убедится, что CSS JavaScript не разрушат доступность ваших документов.</p> +<p>По сравнению с HTML, влияние CSS и JavaScript на доступность веб-страниц не столь велико, однако они всё равно способны внести свой вклад — как положительный, так и отрицательный. Иными словами, важно ознакомиться с рекомендациями по использованию CSS и JavaScript без риска случайно сломать доступность ваших веб-страниц.</p> <h2 id="CSS">CSS</h2> -<p>Let's start off by looking at CSS.</p> +<p>Начнём наш обзор с CSS.</p> -<h3 id="Correct_semantics_and_user_expectation">Correct semantics and user expectation</h3> +<h3 id="Correct_semantics_and_user_expectation">Правильная семантика и ожидаемое пользователем поведение</h3> -<p>It is possible to use CSS to make any HTML element look like <em>anything</em>, but this doesn't mean that you should. As we frequently mentioned in our <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> article, you should use the appropriate semantic element for the job, whenever possible. If you don't, it can cause confusion and usability issues for everyone, but particularly users with disabilities. Using correct semantics has a lot to do with user expectations — elements look and behave in certain ways, according to their functionality, and these common conventions are expected by users.</p> +<p>При помощи CSS мы можем заставить любой HTML-элемент выглядеть <em>как угодно</em>, однако это не означает, что следует так делать. Как мы часто упоминали в статье <a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a>, для каждой задачи всегда стоит использовать соответствующий семантический элемент. Если не следовать данному правилу, то могут возникнуть проблемы и неудобства для всех, а в особенности для людей с ограниченными возможностями здоровья. Правильная семантика также тесно связана с ожидаемым пользователями поведением — элементы выглядят и ведут себя определенным образом, в соответствии с задачами, которые они решают. Внешний вид и поведение элементов интерфейса часто универсальны между разными сайтами и даже браузерами — пользователи привыкают к этому и им проще ориентироваться в интерфейсах.</p> -<p>As an example, a screen reader user can't navigate a page via heading elements if the developer hasn't appropriately used heading elements to markup the content. By the same token, a heading loses its visual purpose if you style it so it doesn't look like a heading.</p> +<p>Например, пользователь скринридера не сможет передвигаться по странице с помощью заголовков, если разработчик не разметит контент корректно с их помощью. Аналогично, если заголовок стилизован так, что вовсе не распознается как заголовок, то он теряет своё визуальное значение.</p> -<p>The rule of thumb is that you can update the styling of a page feature to fit in your design, but don't change it so much that it no longer looks or behaves as expected. The following sections summarize the main HTML features to consider.</p> +<p>Эмпирическое правило гласит: стилизовать элементы страницы, подгоняя их под требуемый дизайн, можно до той степени, пока они выглядят и ведут себя ожидаемо. В следующих разделах мы рассмотрим рекомендации по стилизации некоторых важных HTML-элементов.</p> -<h4 id="Standard_text_content_structure">"Standard" text content structure</h4> +<h4 id="Standard_text_content_structure">«Стандартная» структура текстового контента</h4> -<p>Headings, paragraphs, lists — the core text content of your page:</p> +<p>Заголовки, параграфы и списки — это основа текстового контента веб-страницы:</p> -<pre class="brush: html notranslate"><h1>Heading</h1> +<pre class="brush: html"><h1>Заголовок</h1> -<p>Paragraph</p> +<p>Параграф</p> <ul> - <li>My list</li> - <li>has two items.</li> + <li>В моём списке</li> + <li>два элемента.</li> </ul></pre> -<p>Some typical CSS might look like this:</p> +<p>Типичные стили для такого контента могут выглядеть следующим образом:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 5rem; } @@ -66,55 +75,55 @@ p, li { font-size: 1.6rem; }</pre> -<p>You should:</p> +<p>Следует обратить внимание, что:</p> <ul> - <li>Select sensible font sizes, line heights, letter spacing, etc. to make your text logical, legible, and comfortable to read.</li> - <li>Make sure your headings stand out from your body text, typically big and bold like the default styling. Your lists should look like lists.</li> - <li>Your text color should contrast well with your background color.</li> + <li>У шрифтов выбраны разумные размер, интерлиньяж, межбуквенное расстояние и прочее, чтобы сделать текстовый контент разборчивым и комфортным для чтения.</li> + <li>Заголовки заметно отличаются от основного текста, например имеют такой же крупный размер шрифта и полужирное начертание, как стандартная стилизация. Списки выглядят как списки.</li> + <li>Цвет текста должен быть достаточно контрастен относительно цвета фона.</li> </ul> -<p>See <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> and <a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> for more information.</p> +<p> Для более подробной информации смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a> и <a href="/ru/docs/Learn/CSS/Styling_text">Стилизация текста</a>.</p> -<h4 id="Emphasised_text">Emphasised text</h4> +<h4 id="Emphasised_text">Акцентированный текст</h4> -<p>Inline markup that confers specific emphasis to the text that it wraps:</p> +<p>Строчный элемент, который акцентирует особое внимание на содержащемся в нём тексте:</p> -<pre class="brush: html notranslate"><p>The water is <em>very hot</em>.</p> +<pre class="brush: html"><p>Вода <em>очень горячая</em>.</p> -<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p></pre> +<p>Собирающиеся на поверхности капельки воды называются <strong>конденсатом</strong>.</p></pre> -<p>You might want to add some simple coloring to your emphasised text:</p> +<p>Возможно, нам понадобится добавить цвета акцентированному тексту:</p> -<pre class="brush: css notranslate">strong, em { +<pre class="brush: css">strong, em { color: #a60000; }</pre> -<p>You will however rarely need to style emphasis elements in any significant way. The standard conventions of bold and italic text are very recognisable, and changing the style can cause confusion. For more on emphasis, see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Emphasis and importance</a>.</p> +<p>Однако не стоит сильно менять стандартную стилизацию акцентирующих элементов. Стандартный вид полужирного и курсивного текста хорошо узнаваем, поэтому изменение стилизации может вызывать путаницу. Для более подробной информации смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Акцент_и_важность">Акцент и важность</a>.</p> -<h4 id="Abbreviations">Abbreviations</h4> +<h4 id="Abbreviations">Аббревиатуры</h4> -<p>An element that allows an abbreviation, acronym, or initialization to be associated with its expansion:</p> +<p>Элемент, который позволяет разметить аббревиатуру или акроним и указать их расшифку:</p> -<pre class="brush: html notranslate"><p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> +<pre class="brush: html"><p>Веб-контент верстается с помощью <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> -<p>Again, you might want to style it in some simple way:</p> +<p>И вновь, возможно, нам понадобится немного стилизовать наши аббревиатуры:</p> -<pre class="brush: css notranslate">abbr { +<pre class="brush: css">abbr { color: #a60000; }</pre> -<p>The recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this. For more on abbreviations, see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Abbreviations</a>.</p> +<p>Стандартная стилизация для аббревиатур — это пунктирное подчёркивание, не стоит от этого сильно отклоняться. Для более подробной информации смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Аббревиатуры">Аббревиатуры</a>.</p> -<h4 id="Links">Links</h4> +<h4 id="Links">Ссылки</h4> -<p>Hyperlinks — the way you get to new places on the web:</p> +<p>Гиперссылки помогают нам переходить из одного места в сети в другое:</p> -<pre class="brush: html notranslate"><p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p></pre> +<pre class="brush: html"><p>Посетите <a href="https://www.mozilla.org">домашнюю страницу Mozilla</a>.</p></pre> -<p>Some very simple link styling is shown below:</p> +<p>Ниже приведена базовая стилизация для ссылок:</p> -<pre class="brush: css notranslate">a { +<pre class="brush: css">a { color: #ff0000; } @@ -128,231 +137,234 @@ a:active { background-color: #a60000; }</pre> -<p>The standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red). In addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g. via tabbing) or activated. The following image shows the highlight in both Firefox (a dotted outline) and Chrome (a blue outline):</p> +<p>Стандартные соглашения по стилизации ссылок — подчёркивание и отличный от стандартного цвет (по умолчанию, синий) в обычном состоянии, другой цвет в случае, если ссылка ранее была посещена (по-умолчанию, фиолетовый) и еще один цвет для состояния нажатости (по-умолчанию, красный). Кроме того при наведении указателя мыши на ссылку указатель начинает отображаться в виде руки, а также ссылка выделяется, когда находится в фокусе (при перемещении по странице с помощью клавиши tab) или активна. Изображение ниже показывает выделение в Firefox (пунктирная обводка) и Chrome (синяя обводка):</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> +<p><img alt="" src="focus-highlight-firefox.png" style="display: block; margin: 0px auto;"></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> +<p><img alt="" src="focus-highlight-chrome.png" style="display: block; margin: 0px auto;"></p> -<p>You can be creative with link styles, as long as you keep giving users feedback when they interact with the links. Something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls.</p> +<p>До тех пор, пока пользователь получает обратную связь при взаимодействии со ссылками, можно проявлять определённую креативность относительно их стилизации. Что-нибудь обязательно должно происходить при изменении состояния. Не следует также отключать стандартную иконку указателя мыши или обводку — она вносит очень важный вклад в доступность для тех, кто при навигации по сайту использует клавитуру.</p> -<h4 id="Form_elements">Form elements</h4> +<h4 id="Form_elements">Формы</h4> -<p>Elements to allow users to input data into websites:</p> +<p>Формы - это DOM-элементы, которые позволяют пользователям вводить данные на веб-страницах:</p> -<pre class="brush: html notranslate"><div> - <label for="name">Enter your name</label> +<pre class="brush: html"><div> + <label for="name">Введите имя</label> <input type="text" id="name" name="name"> </div></pre> -<p>You can see some good example CSS in our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> example (<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">see it live</a> also).</p> +<p>Мы подготовили пример хорошей стилизации формы, который вы можете найти здесь: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (а также <a href="https://mdn.github.io/learning-area/accessibility/css/form-css.html">посмотреть вживую</a>).</p> -<p>Most of the CSS you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy.</p> +<p>При стилизации форм обычно производится подгонка размеров элементов, выравнивание лейблов и полей ввода, а также придание им приятного внешнего вида.</p> -<p>You shouldn't however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above). You could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on.</p> +<p>Не следует сильно отклоняться от стандартной стилизации состояния фокуса на элементах формы. По умолчанию, оно выглядит так же, как у ссылок (смотрите изображения выше). Можно стилизовать фокус и наведение указателя мыши на элементы формы, например, для придания им универсального внешнего вида в разных браузерах или же для лучшего соответствия дизайну сайта. При этом не стоит совсем отключать отображение этих состояний, потому что с их помощью пользователи ориентируются в происходящем на странице.</p> -<h4 id="Tables">Tables</h4> +<h4 id="Tables">Таблицы</h4> -<p>Tables for presenting tabular data.</p> +<p>Таблицы используются для отображения табличных данных.</p> -<p>You can see a good, simple example of table HTML and CSS in our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> example (<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">see it live also</a>).</p> +<p>Вы можете найти хороший образец HTML и CSS для таблицы в нашем примере: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (а также <a href="https://mdn.github.io/learning-area/accessibility/css/table-css.html">посмотреть вживую</a>).</p> -<p>Table CSS generally serves to make the table fit better into your design and look less ugly. It is a good idea to make sure the table headers stand out (normally using bold), and use zebra striping to make different rows easier to parse.</p> +<p>Стилизуют таблицы обычно для придания им более симпатичного внешнего вида и лучшего вписывания в общий дизайн страницы. Не стоит отказываться от выделения заголовков (обычно с помощью полужирного начертания) и чередования двух цветов строк для лучшего восприятия информации.</p> -<h3 id="Color_and_color_contrast">Color and color contrast</h3> +<h3 id="Color_and_color_contrast">Цвета и контраст</h3> -<p>When choosing a color scheme for your website, make sure that the text (foreground) color contrasts well with the background color. Your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content.</p> +<p>При выборе цветовой палитры для сайта, следует следить за тем, чтобы цвет текста имел высокий уровень контрастности относительно цвета фона. Дизайн может выглядеть очень стильно, однако это не будет иметь никакого смысла, если люди с дефектами зрения (такими как дальтонизм) не смогут прочитать ваш контент.</p> -<p>There is an easy way to check whether your contrast is large enough to not cause problems. There are a number of contrast checking tools online that you can enter your foreground and background colors into, to check them. For example WebAIM's <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> is simple to use, and provides an explanation of what you need to conform to the WCAG criteria around color contrast.</p> +<p>К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов.</p> <div class="note"> -<p><strong>Note</strong>: A high contrast ratio will also allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment, such as sunlight.</p> +<p><strong>Примечание</strong>: Высокий уровень контрастности также позволяет пользователям мобильных устройств с глянцевыми экранами комфортнее читать текст при ярком освещении.</p> </div> -<p>Another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. Instead of marking required form fields in red, for example, mark them with an asterisk and in red.</p> +<p>Кроме того, не следует полагаться только на цвет при выделении важной информации, потому что некоторые пользователи не распознают цвета. Например, стоит не просто пометить обязательные поля формы красным, но также добавить рядом звёздочку.</p> -<h3 id="Hiding_things">Hiding things</h3> +<h3 id="Hiding_things">Скрытые элементы</h3> -<p>There are many instances where a visual design will require that not all content is shown at once. For example, in our <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>) we have three panels of information, but we are <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a> them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use Tab and Enter/Return to select them).</p> +<p>Существует множество ситуаций, когда не нужно показывать сразу весь контент. Например, в нашем прототипе <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">панели вкладок</a> (здесь можно посмотреть <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">исходный код</a>) имеется три секции с информацией, но мы <a href="/ru/docs/Learn/CSS/CSS_layout/Positioning">располагаем</a> их одна над другой и предоставляем набор вкладок, которые позволяют при кликах по ним переключаться между секциями (они также доступны при помощи клавиатуры — их можно выбирать клавишами Таб и Enter/Return).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> +<p><img alt="" src="tabbed-info-box.png" style="display: block; margin: 0px auto;"></p> -<p>Screen reader users don't care about any of this — they are happy with the content as long as the source order makes sense, and they can get to it all. Absolute positioning (as used in this example) is generally seen as one of the best mechanisms of hiding content for visual effect, because it doesn't stop screen readers from getting to it.</p> +<p>При этом, такой подход никак не мешает пользователям скринридеров — до тех пор, пока контент в вёрстке расположен в правильном порядке, у них не будет никаких проблем. Именно поэтому абсолютное позиционирование (как в примере выше) считается одним из лучших механизмов для визуального скрытия контента.</p> -<p>On the other hand, you shouldn't use {{cssxref("visibility")}}<code>:hidden</code> or {{cssxref("display")}}<code>:none</code>, because they do hide content from screen readers. Unless of course, there is a good reason why you want this content to be hidden from screen readers.</p> +<p>А вот {{cssxref("visibility")}}<code>:hidden</code> и {{cssxref("display")}}<code>:none</code>, напротив, использовать для скрытия контента не следует, потому что они скрывают его не только визуально, но и от скринридеров. Поэтому применять эти свойства стоит, только если совсем скрыть контент и является вашей задачей.</p> <div class="note"> -<p><strong>Note</strong>: <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> has a lot more useful detail surrounding this topic.</span></p> +<p><strong>Примечание</strong>: В статье <a href="http://webaim.org/techniques/css/invisiblecontent/">Невидимый контент только для пользователей скринридеров (EN)</a> содержится множество полезной информации по этой теме.</p> </div> -<h3 id="Accept_that_users_can_override_styles">Accept that users can override styles</h3> +<h3 id="Accept_that_users_can_override_styles">Помните, что пользователи могут переопределять стили</h3> -<h4 id="Accept_that_users_can_override_your_styles">Accept that users can override your styles</h4> +<h4 id="Accept_that_users_can_override_your_styles">Помните, что пользователи могут переопределять ваши стили</h4> -<p>It is possible for users to override your styles with their own custom styles, for example:</p> +<p>У пользователей есть возможность переопределять ваши стили своими, например:</p> <ul> - <li>See Sarah Maddox's <a class="external external-icon" href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">How to use a custom style sheet (CSS) with Firefox</a> for a useful guide covering how to do this manually in Firefox, and <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">How to use a custom style sheet (CSS) with Internet Explorer</a> by Adrian Gordon for the equivalent <abbr>IE</abbr> instructions.</li> - <li>It is probably easier to do it using an extension, for example the Stylish extension is available for <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, and <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> + <li>В руководстве Сары Мэддокс <a class="external external-icon" href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">Как использовать пользовательские таблицы стилей (CSS) в Firefox (EN)</a> можно найти подробные инструкции по пользовательским стилям в Firefox, а в статье <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Как использовать пользовательские таблицы стилей (CSS) в Internet Explorer (EN)</a> за авторством Адриана Гордона, соответственно, для <abbr title="Internet Explorer">IE</abbr>.</li> + <li>Также можно воспользоваться браузерными расширениями. Например, расширение Stylish доступно для <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> и <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> </ul> -<p>Users might do this for a variety of reasons. A visually impaired user might want to make the text bigger on all websites they visit, or a user with severe color deficiency might want to put all websites in high contrast colors that are easy for them to see. Whatever the need, you should be comfortable with this, and make your designs flexible enough so that such changes will work in your design. As an example, you might want to make sure your main content area can handle bigger text (maybe it will start to scroll to allow it all to be seen), and won't just hide it, or break completely.</p> +<p>Пользователи могут переопределять стили по множеству причин. Людям со слабым зрением может понадобиться сделать текст крупнее на всех сайтах, которыми они пользуются. А пользователю с монохромазией потребуется перекрасить все сайты в высококонтрастные цвета, которые ему проще различать. Какая бы ни была причина, следует оставлять дизайн сайта достаточно гибким, чтобы подобные изменения в нём работали. Например, важно убедиться, что область с главным контентом будет нормально обрабатывать более крупные размеры шрифта — она не должна просто обрезать текст или совсем ломаться.</p> <h2 id="JavaScript">JavaScript</h2> -<p>JavaScript can also break accessibility, depending on how it is used.</p> +<p>При неправильном использовании JavaScript тоже может вредить доступности.</p> -<p>Modern JavaScript is a powerful language, and we can do so much with it these days, from simple content and UI updates to fully-fledged 2D and 3D games. There is no rule that says all content has to be 100% accessible to all people — you just need to do what you can, and make your apps as accessible as possible.</p> +<p>Современный JavaScript — это очень мощный язык, с помощью которого можно делать кучу разных вещей: от простых обновлений пользовательского интерфейса до полноценных 2D- и 3D-игр. Понятно, что нельзя сделать абсолютно любой тип контента доступным на 100% для всех — нужно просто прилагать все усилия, чтобы делать веб-приложения доступными настолько, насколько это возможно.</p> -<p>Simple content and functionality is arguably easy to make accessible — for example text, images, tables, forms and push button that activate functions. As we looked at in our <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> article, the key considerations are:</p> +<p>Сравнительно несложно сделать доступным простой контент — например, текст, изображения, таблицы, формы и кнопки. Вспомним основные тезисы из статьи <a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a>:</p> <ul> - <li>Good semantics: Using the right element for the right job. For example, making sure you use headings and paragraphs, and {{htmlelement("button")}} and {{htmlelement("a")}} elements</li> - <li>Making sure content is available as text, either directly as text content, good text labels for form elements, or <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">text alternatives</a>, e.g. alt text for images.</li> + <li>Хорошая семантика: использование каждого элемента для своей задачи. Следует убедиться, что используются различные типы элементов: заголовки, параграфы, {{htmlelement("button")}}, {{htmlelement("a")}} и так далее.</li> + <li>Контент должен быть доступен либо как обычный текст, либо как <a href="/ru/docs/Learn/Accessibility/HTML#Альтернативный_текст">альтернативный текст</a>, например атрибут alt для изображений.</li> </ul> -<p>We also looked at an example of how to use JavaScript to build in functionality where it is missing — see <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>. This is not ideal — really you should just use the right element for the right job — but it shows that it is possible in situations where for some reason you can't control the markup that is used. Another way to improve accessibility for non-semantic JavaScript-powered widgets is to use WAI-ARIA to provide extra semantics for screen reader users. The next article will also cover this in detail.</p> +<p>Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе <a href="/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры">Добавление доступности с клавиатуры</a>. Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием <abbr title="Web Accessibility Initiative — Accessible Rich Internet Applications">WAI-ARIA</abbr> атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее.</p> -<p>Complex functionality like 3D games are not so easy to make accessible — a complex 3D game created using <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> will be rendered on a {{htmlelement("canvas")}} element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to make use of. It is arguable that such a game doesn't really have this group of people as a part of its main target audience, and it would be unreasonable to expect you to make it 100% accessible to blind people, however you could implement <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">keyboard controls</a> so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.</p> +<p>Сложные приложения, например 3D-игры, сделать доступными непросто — написанная с использованием <a href="/ru/docs/Web/API/WebGL_API">WebGL</a> игра рендерится в элементе {{htmlelement("canvas")}}, который в настоящее время не предоставляет никаких возможностей для использования людьми с дефектами зрения. Можно успокаивать себя тем, что данная группа пользователей не входит в целевую аудиторию, поэтому не стоит ожидать полной доступности для них. Тем не менее, вы можете реализовать <a href="/ru/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">управление с помощью клавиатуры</a> для игроков, которые не могут использовать мышь, а также сделать цветовую схему достаточно контрастной для игроков с дальтонизмом.</p> -<h3 id="The_problem_with_too_much_JavaScript">The problem with too much JavaScript</h3> +<h3 id="The_problem_with_too_much_JavaScript">Проблема с чрезмерным использованием JavaScript</h3> -<p>The problem often comes when people rely on JavaScript too much. Sometimes you'll see a website where everything has been done with JavaScript — the HTML has been generated by JavaScript, the CSS has been generated by JavaScript, etc. This has all kinds of accessibility and other issues associated with it, so it is not advised.</p> +<p>Данная проблема возникает, когда разработчики слишком сильно полагаются на JavaScript. Порой вы можете встретить сайт, на котором всё генерируется с помощью JavaScript — HTML, CSS и так далее. Такое решение точно так же требует поддержания всех видов доступности и решения связанных с ними проблем.</p> -<p>As well as using the right element for the right job, you should also make sure you are using the right technology for the right job! Think carefully about whether you need that shiny JavaScript-powered 3D information box, or whether plain old text would do. Think carefully about whether you need a complex non-standard form widget, or whether a text input would do. And don't generate all your HTML content using JavaScript if at all possible.</p> +<p>Для каждой задачи хорош свой инструмент — это правило справедливо как для выбора HTML-элементов, так и для используемой технологии в целом. Стоит хорошенько обдумать, нужно ли использовать тот сияющий, написанный на JavaScript информационный 3D-блок или же воспользоваться старым добрым и обыкновенным текстовым блоком? Нужен ли тот сложный нестандартный виджет в форме, или будет достаточно простого поля для ввода текста? Не следует генерировать весь HTML при помощи JavaScript, если это возможно.</p> -<h3 id="Keeping_it_unobtrusive">Keeping it unobtrusive</h3> +<h3 id="Keeping_it_unobtrusive">Ненавязчивый JavaScript</h3> -<p>You should keep <strong>unobtrusive JavaScript</strong> in mind when creating your content. The idea of unobtrusive JavaScript is that it should be used wherever possible to enhance functionality, not build it in entirely — basic functions should ideally work without JavaScript, although it is appreciated that this is not always an option. But again, a large part of it is using built-in browser functionality where possible.</p> +<p>При создании веб-страниц, стоит помнить об идее <strong>ненавязчивого JavaScript</strong>. Идея гласит, что JavaScript следует использовать только для дополнительного улучшения пользовательского опыта — базовые возможности должны работать без JavaScript. Здесь мы говорим в основном об использовании стандартных браузерных возможностей, когда это возможно.</p> -<p>Good example uses of unobtrusive JavaScript include:</p> +<p>Хорошие примеры использования подхода с ненавязчивым JavaScript:</p> <ul> - <li>Providing client-side form validation, which alerts users to problems with their form entries quickly, without having to wait for the server to check the data. If it isn't available, the form will still work, but validation might be slower.</li> - <li>Providing custom controls for HTML5 <code><video></code>s that are accessible to keyboard-only users, along with a direct link to the video that can be used to access it if JavaScript is not available (the default <code><video></code> browser controls aren't keyboard accessible in most browsers).</li> + <li>Валидация формы на клиенте, которая показывает пользователю сообщение о проблемах в заполнении формы без необходимости отправлять данные для проверки на сервер. Если скриптов не будет, то форма продолжит работать, просто валидация будет несколько медленнее.</li> + <li>Создание нестандартных элементов управления для HTML5 <code><video></code>, которыми возможно пользоваться с клавиатуры. И в то же самое время, указание прямой ссылки на видео, которой можно воспользоваться, если JavaScript отключён (стандартные элементы управления <code><video></code> недоступны с клавиатуры в большинстве браузеров).</li> </ul> -<p id="Client-side_form_validation">As an example, we've written a quick and dirty client-side form validation example — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (also <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">see the demo live</a>). Here you'll see a simple form; when you try to submit the form with one or both fields left empty, the submit fails, and an error message box appears to tell you what is wrong.</p> +<p id="Client-side_form_validation">Для примера, мы подготовили простенькую черновую версию клиентской валидации формы — <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (здесь можно <a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">посмотреть вживую</a>). Если попытаться нажать на кнопку отправки, не заполнив одно из полей, то форма на сервер отправлена не будет, зато появится сообщение с информацией об ошибках.</p> -<p>This kind of form validation is unobtrusive — you can still use the form absolutely fine without the JavaScript being available, and any sensible form implementation will have server-side validation active as well, because it is too easy for malicious users to bypass client-side validation (for example, by turning JavaScript off in the browser). The client-side validation is still really useful for reporting errors — users can know about mistakes they make instantly, rather than having to wait for a round trip to the server and a page reload. This is a definite usability advantage.</p> +<p>Такая валидации формы соответствует принципам ненавязчивости — форму можно будет абсолютно полноценно использовать вообще без JavaScript. Форма всё равно будет провалидирована. Так как злонамеренные пользователи могут очень просто обойти клиентскую валидацию (например, отключив JavaScript в браузере), для важных форм её всегда дублируют на сервере. При этом валидация на стороне клиента всё ещё остаётся очень полезной для показа ошибок — пользователи узнают о проблемах с заполнением формы мгновенно, вместо того, чтобы ждать цикла: отправка на сервер - валидация - перезагрузка страницы. Это очень хорошее улучшение пользовательского опыта.</p> <div class="note"> -<p><strong>Note</strong>: Server-side validation has not been implemented in this simple demo.</p> +<p><strong>Примечание</strong>: В этом простом примере серверная валидация не реализована.</p> </div> -<p>We've made this form validation pretty accessible too. We've used {{htmlelement("label")}} elements to make sure the form labels are unambiguously linked to their inputs, so screen readers can read them out alongside:</p> +<p>Также мы постарались сделать эту форму довольно доступной. Мы использовали элементы {{htmlelement("label")}} и связали их со своими полями ввода, таким образом скринридеры смогут корректно их озвучить:</p> -<pre class="brush: html notranslate"><label for="name">Enter your name:</label> +<pre class="brush: html"><label for="name">Введите ваше имя:</label> <input type="text" name="name" id="name"></pre> -<p>We only do the validation when the form is submitted — this is so that we don't update the UI too often and potentially confuse screen reader (and possibly other) users:</p> +<p>Чтобы избежать слишком частого обновления пользовательского интерфейса и возможных проблем для пользователей скринридеров, мы производим валидацию только при попытке отправки формы:</p> -<pre class="brush: js notranslate">form.onsubmit = validate; +<pre class="brush: js">form.onsubmit = validate; function validate(e) { errorList.innerHTML = ''; - for(var i = 0; i < formItems.length; i++) { - var testItem = formItems[i]; - if(testItem.input.value === '') { + for (let i = 0; i < formItems.length; i++) { + const testItem = formItems[i]; + if (testItem.input.value === '') { errorField.style.left = '360px'; createLink(testItem); } } - if(errorList.innerHTML !== '') { + if (errorList.innerHTML !== '') { e.preventDefault(); } }</pre> <div class="note"> -<p><strong>Note</strong>: In this example, we are hiding and showing the error message box using absolute positioning rather than another method such as visibility or display, because it doesn't interfere with the screen reader being able to read content from it.</p> +<p><strong>Примечание</strong>: В данном примере мы скрываем и показываем сообщение об ошибке с помощью абсолютного позиционирования, а не каким-то иным методом, потому что такой способ не мешает скринридерам озвучивать контент.</p> </div> -<p>Real form validation would be much more complex than this — you'd want to check that the entered name actually looks like a name, the entered age is actually a number and is realistic (e.g. not a minus number, or four digits). Here we've just implemented a simple check that a value has been filled in to each input field (<code>if(testItem.input.value === '')</code>).</p> +<p>В реальности валидация формы будет в разы сложнее. Возможно, вы захотите проверить, что введённое имя действительно выглядит как имя, а возраст — как число, да ещё и реалистичное (например, не отрицательное и состоящее не более чем из 3 цифр). Здесь мы реализовали лишь примитивную проверку на наличие хоть какого-то текста в полях ввода (<code>if (testItem.input.value === '')</code>).</p> -<p>When the validation has been performed, if the tests pass then the form is submitted. If there are errors (<code>if(errorList.innerHTML !== '')</code>) then we stop the form submitting (using <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>), and display any error messages that have been created (see below). This mechanism means that the errors will only be shown if there are errors, which is better for usability.</p> +<p>Когда валидация проходит успешно, форма отправляется на сервер. Если же были обнаружены ошибки (<code>if (errorList.innerHTML !== '')</code>), то мы прерываем отправку формы (при помощи <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>) и отображаем сообщения обо всех найденных ошибках (смотрите далее).</p> -<p>For each input that doesn't have a value filled in when the form is submitted, we create a list item with a link and insert it in the <code>errorList</code>.</p> +<p>Для каждого пустого на момент отправки формы поля ввода мы создаем элемент списка с ссылкой и добавляем в <code>errorList</code>.</p> -<pre class="brush: js notranslate">function createLink(testItem) { - var listItem = document.createElement('li'); - var anchor = document.createElement('a'); - anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; - anchor.href = '#' + testItem.input.name; - anchor.onclick = function() { - testItem.input.focus(); - }; - listItem.appendChild(anchor); - errorList.appendChild(listItem); +<pre class="brush: js">function createLink(testItem) { + const listItem = document.createElement('li'); + const anchor = document.createElement('a'); + + anchor.textContent = 'Поле ввода ' + testItem.input.name + ' пусто: введите ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); }</pre> -<p>Each link serves a dual purpose — it tells you what the error is, plus you can click on it/activate it to jump straight to the input element in question and correct your entry.</p> +<p>Каждая ссылка выполняет две задачи — она рассказыает, какая ошибка случилась, а также при клике на неё можно перейти прямо в связанное поле ввода и скорректировать введённое значение.</p> <div class="note"> -<p><strong>Note</strong>: The <code>focus()</code> part of this example is a bit tricky. Chrome and Edge (and newer versions of IE) will focus the element when the link is clicked, without needing the <code>onclick</code>/<code>focus()</code> block. Safari will only highlight the form element with the link on its own, so needs the <code>onclick</code>/<code>focus()</code> block to actually focus it. Firefox doesn't focus the inputs properly at all in this context, so Firefox users can't take advantage of this at present (although everything else works fine). The Firefox issue should be fixed soon — work is being done to give Firefox behaviour parity with other browsers (see {{bug(277178)}}).</p> +<p><strong>Примечание</strong>: Часть этого примера, связанная с <code>focus()</code>, довольно хитрая. Браузеры Chrome и Edge (а также новые версии IE) не нуждаются в коде <code>onclick</code>/<code>focus()</code> — они сами переведут фокус на элемент после клика по ссылке. Safari лишь выделит нужный элемент, так что этот блок кода нужен для корректной установки фокуса. В Firefox же трюк с выделением элемента при клике по ссылке не работает вообще. Данная ошибка должна быть вскоре исправлена — тогда Firefox придет к паритету с прочими браузерами (смотрите {{bug(277178)}}).</p> </div> -<p>In addition, the <code>errorField</code> is placed at the top of the source order (although it is positioned differently in the UI using CSS), meaning that users can find out exactly what's wrong with their form submissions and get to the input elements in question by going back up to the start of the page.</p> +<p>Дополнительно, то что <code>errorField</code> расположено в вёрстке в самом начале (тогда как визуально в интерфейсе расположено иначе при помощи CSS), позволяет пользователям увидеть, что именно не так с заполнением формы, и легко вернуться обратно к нужным полям ввода в начале страницы.</p> -<p>As a final note, we have used some WAI-ARIA attributes in our demo to help solve accessibility problems caused by areas of content constantly updating without a page reload (screen readers won't pick this up or alert users to it by default):</p> +<p>Кроме того, мы использовали несколько WAI-ARIA атрибутов в нашем примере, чтобы решить проблемы с доступностью, вызванные обновлением контента без перезагрузки страницы (по умолчанию, скринридеры не могут подхватить эти изменения и уведомить об этом пользователя):</p> -<pre class="notranslate"><div class="errors" role="alert" aria-relevant="all"> +<pre><div class="errors" role="alert" aria-relevant="all"> <ul> </ul> </div></pre> -<p>We will explain these attributes in our next article, which covers <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> in much more detail.</p> +<p>Мы разберем данные атрибуты в следующей статье, которая подробно описывает <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>.</p> <div class="note"> -<p><strong>Note</strong>: Some of you will probably be thinking about that fact that HTML5 forms have built-in validation mechanisms like the <code>required</code>, <code>min</code>/<code>minlength</code>, and <code>max</code>/<code>maxlength</code> attributes (see the {{htmlelement("input")}} element reference for more information). We didn't end up using these in the demo because cross-browser support for them is patchy (for example IE10 and above only, no Safari support).</p> +<p><strong>Примечание</strong>: Кто-то из читателей мог задуматься о том факте, что в HTML5 формах есть встроенные механизмы валидации, такие как атрибуты <code>required</code>, <code>min</code>/<code>minlength</code> и <code>max</code>/<code>maxlength</code> (смотрите подробнее на странице элемента {{htmlelement("input")}}). Мы не использовали их в примере, потому что поддержка браузерами у HTML5 валидации весьма варьируется (например, только IE10 и новее).</p> </div> <div class="note"> -<p><strong>Note</strong>: WebAIM's <a href="http://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a> provides some further useful information about accessible form validation.</p> +<p><strong>Примечание</strong>: Статья <a href="http://webaim.org/techniques/formvalidation/">Удобная и доступная валидация форм (EN)</a> от WebAIM содержит дополнительную полезную информацию по этой теме.</p> </div> -<h3 id="Other_JavaScript_accessibility_concerns">Other JavaScript accessibility concerns</h3> +<h3 id="Other_JavaScript_accessibility_concerns">Прочие проблемы доступности, связанные с JavaScript</h3> -<p>There are other things to be aware of when implementing JavaScript and thinking about accessibility. We will add more as we find them.</p> +<p>Здесь мы собрали прочие аспекты, о которых стоит задумываться при написании JavaScript, если вы беспокоитесь о доступности. Мы будем обновлять данный раздел.</p> -<h4 id="mouse-specific_events">mouse-specific events</h4> +<h4 id="mouse-specific_events">Специфичные события мыши</h4> -<p>As you will be aware, most user interactions are implemented in client-side JavaScript using event handlers, which allow us to run functions in response to certain events happening. Some events can have accessibility issues. The main example you'll come across is mouse-specific events like <a href="/en-US/docs/Web/Events/mouseover">mouseover</a>, <a href="/en-US/docs/Web/Events/mouseout">mouseout</a>, <a href="/en-US/docs/Web/Events/dblclick">dblclick</a>, etc. Functionality that runs in response to these events will not be accessible using other mechanisms, like keyboard controls.</p> +<p>Большая часть интерактивности в пользовательских интерфейсах реализуется в JavaScript при помощи обработчиков событий, которые позволяют запускать код, когда происходит определённое событие. У некоторых таких событий имеются проблемы с доступностью. Хороший пример — это специфичные события мыши, например <a href="/ru/docs/Web/API/Element/mouseover_event">mouseover</a>, <a href="/ru/docs/Web/API/Element/mouseout_event">mouseout</a>, <a href="/ru/docs/Web/API/Element/dblclick_event">dblclick</a> и так далее. Функции, которые активируются при срабатывании этих событий, не будут доступны при использовании других устройств ввода, например клавиатуры./p> -<p>To mitigate such problems, you should double up these events with similar events that can be activated by other means (so-called device-independent event handlers) — <a href="/en-US/docs/Web/Events/focus">focus</a> and <a href="/en-US/docs/Web/Events/blur">blur</a> would provide accessibility for keyboard users.</p> +<p>Чтобы избежать проблем подобного рода, следует дублировать функциональность при помощи независимых от устройств событий. Например, события <a href="/ru/docs/Web/API/Element/focus_event">focus</a> и <a href="/ru/docs/Web/API/Element/blur_event">blur</a> будут работать как для мыши, так и для клавиатуры.</p> -<p>Let's look at an example that highlights when this could be useful. Maybe we want to provide a thumbnail image that shows a larger version of the image when it is moused over or focused (like you'd see on an e-commerce product catalog.)</p> +<p>Рассмотрим пример, который проиллюстрирует, когда это может быть важно. Допустим, у нас есть миниатюрное изображение, при наведении на которое или при фокусе на котором должна показываться его увеличенная версия (примерно как карточки товаров в каталоге интернет-магазина).</p> -<p>We've made a very simple example, which you can find at <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">source code</a>). The code features two functions that show and hide the zoomed-in image; these are run by the following lines that set them as event handlers:</p> +<p>Мы подготовили простой пример, который можно посмотреть здесь <a href="https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (а здесь можно посмотреть <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">исходный код</a>). В коде представлены две функции, которые показывают и скрывают увеличенное изображение. Они устанавливаются в качестве обработчиков событий следующими строками кода:</p> -<pre class="brush: js notranslate">imgThumb.onmouseover = showImg; +<pre class="brush: js">imgThumb.onmouseover = showImg; imgThumb.onmouseout = hideImg; imgThumb.onfocus = showImg; imgThumb.onblur = hideImg;</pre> -<p>The first two lines run the functions when the mouse pointer hovers over and stops hovering over the thumbnail, respectively. This won't allow us to access the zoomed view by keyboard though — to allow that, we've included the last two lines, which run the functions when the image is focused and blurred (when focus stops). This can be done by tabbing over the image, because we've included <code>tabindex="0"</code> on it.</p> +<p>Первые две строки кода запускают функцию, когда указатель мыши наводится на изображение или уходит с него, соответственно. Такая реализация не позволит открыть увеличенное изображение при помощи клавиатуры. Чтобы решить эту проблему, мы добавили последние две строки, которые запускают функции в случаях, если фокус перешёл на изображение или же ушёл с него. Таким образом, увеличенное изображение будет открываться при переходе на миниатюру при помощи клавиши tab (это возможно, потому что мы добавили миниатюрам <code>tabindex="0"</code>).</p> + +<p>Событие <a href="/ru/docs/Web/API/Element/click_event">click</a> довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий <a href="/ru/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите <a href="/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры">Добавление доступности с клавиатуры</a>)./p> + +<h2 id="Test_your_skills!">Проверьте ваши навыки!</h2> -<p>The <a href="/en-US/docs/Web/Events/click">click</a> event is interesting — it sounds mouse-dependent, but most browsers will activate <a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> event handlers after Enter/Return is pressed on a link or form element that has focus, or when such an element is tapped on a touchscreen device. This doesn't work by default however when you allow a non-default-focusable event to have focus using tabindex — in such cases you need to detect specifically when that exact key is pressed (see <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>).</p> +<p>Вы дочитали до конца, но хорошо ли вы усвоили материал? Перед тем как двигаться дальше, вы можете пройти тесты, которые мы специально подготовили — смотрите <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility">Проверьте ваши навыки: CSS и JavaScript доступность (EN)</a>.</p> -<h2 id="Summary">Summary</h2> +<h2 id="Summary">Заключение</h2> -<p>We hope this article has given you a good amount of detail and understanding about the accessibility issues surrounding CSS and JavaScript use on web pages.</p> +<p>Надеемся, что данная статья даст вам хорошую базу в решении проблем с доступностью, которые могут возникнуть при использовании CSS и JavaScript на веб-страницах.</p> -<p>Next up, WAI-ARIA!</p> +<p>Далее WAI-ARIA!</p> <div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> -<div> -<h2 id="В_этом_модуле">В этом модуле</h2> +<h2 id="In_this_module">В этом модуле</h2> <ul> - <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li> - <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li> - <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li> - <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li> - <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li> - <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li> - <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li> -</ul> -</div> + <li><a href="/ru/docs/Learn/Accessibility/What_is_accessibility">Что такое доступность?</a></li> + <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li> + <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li> + <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li> + <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li> + <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li> + <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li> + </ul> |