diff options
Diffstat (limited to 'files/uk/web/accessibility')
| -rw-r--r-- | files/uk/web/accessibility/index.html | 74 | ||||
| -rw-r--r-- | files/uk/web/accessibility/understanding_wcag/index.html | 59 | ||||
| -rw-r--r-- | files/uk/web/accessibility/understanding_wcag/keyboard/index.html | 94 |
3 files changed, 227 insertions, 0 deletions
diff --git a/files/uk/web/accessibility/index.html b/files/uk/web/accessibility/index.html new file mode 100644 index 0000000000..604d8762ac --- /dev/null +++ b/files/uk/web/accessibility/index.html @@ -0,0 +1,74 @@ +--- +title: Accessibility +slug: Web/Accessibility +tags: + - Accessibility + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility +--- +<p><span class="seoSummary"><strong>Accessibility</strong> (often abbreviated to <strong>A11y</strong>—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. </span></p> + +<p>For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.</p> + +<p>"<strong>The Web is fundamentally designed to work for all people</strong>, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."<a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Key tutorials</h2> + +<p>The MDN <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area</a> contains modern, up-to-date tutorials covering accessibility essentials:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt> + <dd> + <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p> + </dd> + <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt> + <dd>Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> + <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd> + <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> + <dd>A collection of articles intended for AT developers</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt> + <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt> + <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt> + <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd> + <dt></dt> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li> + <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li> + <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li> + <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li> + <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li> +</ul> diff --git a/files/uk/web/accessibility/understanding_wcag/index.html b/files/uk/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/uk/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,59 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - NeedsTranslation + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p> + +<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p> + +<h2 id="The_four_principles">The four principles</h2> + +<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p> + +<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li> +</ul> + +<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2> + +<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p> + +<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3> + +<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p> + +<p>WCAG 2.1 includes:</p> + +<ul> + <li>all of WCAG 2.0 (verbatim, word-for-word)</li> + <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas: + <ul> + <li>Mobile Accessibility </li> + <li>Low Vision</li> + <li>Cognitive</li> + </ul> + </li> + <li>Read more about WCAG 2.1: + <ul> + <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: What is Next for Accessibility Guidelines</a></li> + <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li> + </ul> + </li> +</ul> + +<h2 id="Legal_standing">Legal standing</h2> + +<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p> + +<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p> diff --git a/files/uk/web/accessibility/understanding_wcag/keyboard/index.html b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..1383c66354 --- /dev/null +++ b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,94 @@ +--- +title: Клавіатура (Keyboard) +slug: Web/Accessibility/Understanding_WCAG/Keyboard +tags: + - tabIndex + - клікабельні елементи + - фокус клавіатури + - інтерактивні елементи +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +<div></div> + +<div>Щоб бути у повній мірі доступною, веб-сторінка повинна бути керованою за допомогою однієї лише клавіатури для доступу до неї і управління нею. Це відноситься до користувачів скрінрідерів (екранні зчитувачі), але може також включати і користувачів, у яких виникають проблеми з управлінням вказівним пристроєм, наприклад, мишею або трекболом, або чия миша не працює в даний момент, або які просто вважають за краще використовувати клавіатуру для введення, коли це можливо.</div> + +<h2 id="Елементи_у_фокусі_повинні_мати_інтерактивну_семантику">Елементи у фокусі повинні мати інтерактивну семантику</h2> + +<p>Якщо елемент можна сфокусувати за допомогою клавіатури, то він повинен бути інтерактивним; тобто користувач повинен мати можливість щось робити з цим елементом, якусь зміну (наприклад, активізувати посилання або змінити параметр).</p> + +<div class="blockIndicator note"> +<p><strong>Примітка: </strong>один важливий виняток для цього правила, якщо елемент має<strong> </strong><code>role="document" </code>застосовану до нього, <strong>всередині </strong>інтерактивний контекст (наприклад, <code>role="application"</code>). У такому випадку фокусування вкладеного документа є єдиним способом повернення допоміжних технологій до неінтерактивного стану (часто званого "browse mode (режим перегляду)").</p> +</div> + +<p>Більшість інтерактивних елементів фокусуються за замовчуванням; ви можете зробити елемент фокусним, додавши йому значення атрибуту <code>tabindex=0</code>. Однак, ви повинні додавати <code>tabindex</code> тільки в тому випадку, якщо Ви зробили елемент інтерактивним, наприклад, визначили відповідні обробники подій клавіатури.</p> + +<h3 id="Дивіться_також">Дивіться також</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> + <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Уникайте_використання_tabindex_атрибута_який_більше_нуля">Уникайте використання <code>tabindex</code> атрибута який більше нуля</h2> + +<p><code>tabindex</code> атрибут вказує на те, що елемент фокусується за допомогою клавіатури. Значення нуля вказує на те, що елемент є частиною встановленого за замовчуванням порядку фокусування, який ґрунтується на порядку розташування елементів в HTML-документі. Позитивне значення ставить елемент попереду тих, які знаходяться в порядку за замовчуванням; елементи з позитивними значеннями фокусуються в порядку їх <code>tabindex</code> значення (1, а потім 2, потім 3 і т.д.).</p> + +<p>Це створює плутанину для користувачів лише клавіатури, коли порядок фокусування відрізняється від логічного ладу сторінки. Найкраща стратегія - структурувати HTML-документ так, щоб елементи фокусування перебували в логічному порядку, без потреби змінювати порядок їх <code>tabindex</code> значень.</p> + +<h3 id="Дивіться_також_2">Дивіться також</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Розуміння порядку фокусування</a></li> + <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Не використовуйте tabindex більше 0</a></li> +</ul> + +<h2 id="Клікабельні_елементи_повинні_бути_такими_що_фокусуються_і_мають_інтерактивну_семантику">Клікабельні елементи повинні бути такими що фокусуються і мають інтерактивну семантику</h2> + +<p>Якщо елемент можна натиснути вказівним пристроєм, наприклад, мишкою, то він також повинен бути таким що фокусується за допомогою клавіатури, і користувач повинен мати можливість щось робити, взаємодіючи з ним.</p> + +<p>Елемент є клікабельним, якщо має <code>onclick</code> встановлений обробник події. Ви можете зробити його таким що фокусує, додавши <code>tabindex=0</code> значення атрибута для нього. Ви маєте змогу зробити його працездатним за допомогою клавіатури, визначивши <code>onkeydown</code> обробник подій; у більшості випадків дії обробника подій повинні бути однаковими для обох типів подій.</p> + +<h3 id="Дивіться_також_3">Дивіться також</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> + <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Інтерактивні_елементи_повинні_мати_можливість_бути_активовані_за_допомогою_клавіатури">Інтерактивні елементи повинні мати можливість бути активовані за допомогою клавіатури</h2> + +<p>Якщо користувач може взаємодіяти з елементом за допомогою сенсорного або вказівного пристрою, то цей елемент також повинен підтримувати взаємодію за допомогою клавіатури. Тобто, якщо ви визначили оброблювачі подій для подій дотику або кліку, їх також слід визначити для подій клавіатури. Обробники подій клавіатури повинні забезпечувати таку ж взаємодію, що і обробники сенсорних і клікабельних елементів.</p> + +<h3 id="Дивіться_також_4">Дивіться також</h3> + +<ul> + <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Інтерактивні_елементи_повинні_бути_такими_що_фокусуються">Інтерактивні елементи повинні бути такими що фокусуються</h2> + +<p>Якщо користувач може взаємодіяти з елементом (наприклад, за допомогою сенсорного або вказівного пристрою), то він також повинен мати можливість фокусування за допомогою клавіатури. Ви можете зробити його такими що фокусується, додавши <code>tabindex=0</code> значення атрибута до нього. Це додасть елемент в список об'єктів, які можна сфокусувати, натиснувши кнопку <kbd>Tab</kbd>, в послідовності таких елементів, яка задана в HTML-документі.</p> + +<h3 id="Дивіться_також_5">Дивіться також</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li> +</ul> + +<h2 id="Елемент_що_фокусується_повинен_змінювати_стиль_при_фокусуванні">Елемент що фокусується повинен змінювати стиль при фокусуванні</h2> + +<p>Будь-який елемент, який може отримати фокус клавіатури, повинен мати помітний стиль, який вказує на те що елемент сфокусований. Ви можете зробити це за допомогою <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS псевдоклас.</p> + +<p>Стандартні елементи фокусування, такі як посилання і поля вводу, за замовчуванням задаються браузером в спеціальному стилі, тому, можливо, вам не доведеться ставити стиль фокусування для таких елементів, якщо тільки ви не хочете, щоб стиль фокусування був більш характерним.</p> + +<p>Якщо ви створюєте свої власні елементи фокусування, переконайтеся, що ви також визначаєте стиль фокусування для них.</p> + +<h3 id="Дивіться_також_6">Дивіться також</h3> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Застосування CSS для зміни формату представлення компонента UI, коли він отримує фокус.</a></li> +</ul> |