diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/accessibility | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/accessibility')
21 files changed, 2629 insertions, 0 deletions
diff --git a/files/ru/web/accessibility/aria/aria_live_regions/index.html b/files/ru/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..6f22cb75a6 --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,111 @@ +--- +title: ARIA Live Regions +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction </span></h2> + +<p>In the past, a web page change could only be spoken in entirety which often annoyed a user, or by speaking very little to nothing, making some or all information inaccessible. Until recently, screen readers have not been able to improve this because no standardized markup existed to alert the screen reader to a change. ARIA live regions fill this gap and provide suggestions to screen readers regarding whether and how to interrupt users with a change.</p> + +<h2 id="Simple_Live_Regions"><span class="mw-headline" id="Live_Region_State">Simple Live Regions</span></h2> + +<p>Dynamic content which updates without a page reload is generally either a region or a widget. Simple content changes which are not interactive should be marked as live regions. Below is a list of each related ARIA live region property with a description.</p> + +<ol> + <li><strong>aria-live</strong>: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off/polite/assertive. The default setting is 'off'. This attribute is by far the most important.</li> + <li> + <p class="comment"><strong>aria-controls</strong>: The aria-controls=[IDLIST] is used to associate a control with the regions that it controls. Regions are identified just like an ID in a div, and multiple regions can be associated with a control using a space, e.g. aria-controls="myRegionID1 myRegionsID2".</p> + + <div class="warning">Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.</div> + </li> +</ol> + +<p>Normally, only aria-live="polite" is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.</p> + +<p>For regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with aria-live="off".</p> + +<h3 id="Simple_Use_Case_combobox_updates_useful_on-screen_information">Simple Use Case: combobox updates useful on-screen information</h3> + +<p>A website specializing in providing information about birds provides a drop down box. When a bird is selected from the drop down, a region on the page is updated with details about the type of bird selected.</p> + +<p><code><select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select></code></p> + +<p><code><div role="region" id="bird-info" aria-live="polite"></code></p> + +<p>As the user selects a new bird, the info is spoken. Because "polite" is chosen, the screen reader will wait until the user pauses. Thus, moving down the list will not speak every bird the user visits, only the one finally chosen.</p> + +<h2 id="Preferring_Specialized_Live_Region_Roles">Preferring Specialized Live Region Roles</h2> + +<p>In the following well-known predefined cases it is better to use a specific provided "live region role":</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col">Role</th> + <th scope="col">Description</th> + <th scope="col">Compatibility Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td>log</td> + <td>Chat, error, game or other type of log</td> + <td>To maximize compatibility, add a redundant aria-live="polite" when using this role.</td> + </tr> + <tr> + <td>status</td> + <td>A status bar or area of the screen that provides an updated status of some kind. Screen reader users have a special command to read the current status.</td> + <td>To maximize compatibility, add a redundant aria-live="polite" when using this role.</td> + </tr> + <tr> + <td>alert</td> + <td>Error or warning message that flashes on the screen. Alerts are particularly important for client side validation notices to users. (TBD: link to ARIA form tutorial with aria info)</td> + <td>To maximize compatibility, some people recommend adding a redundant aria-live="assertive" when using this role. However, adding both aria-live and role=alert causes double speaking issues in VoiceOver on iOS.</td> + </tr> + <tr> + <td>progressbar</td> + <td>A hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).</td> + <td> </td> + </tr> + <tr> + <td>marquee</td> + <td>for text which scrolls, such as a stock ticker.</td> + <td> </td> + </tr> + <tr> + <td>timer</td> + <td>or any kind of timer or clock, such as a countdown timer or stopwatch readout.</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Advanced_Live_Regions">Advanced Live Regions</h2> + +<p>(TBD: what is supported where?)</p> + +<ol> + <li><strong>aria-atomic</strong>: The aria-atomic=BOOLEAN is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes - the possible settings are false/true where false is the default.</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a>: The aria-relevant=[LIST_OF_CHANGES] is used to set what types of changes are relevant to a live region - the possible settings are additions/removals/text/all where "additions text" is the default.</li> + <li><strong>aria-labelledby</strong>: The aria-labelledby=[IDLIST] is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region and again label identifiers are separated with a space.</li> + <li><strong>aria-describedby</strong>: The aria-describedby=[IDLIST] is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.</li> +</ol> + +<h3 id="Advanced_Use_Case_Roster"><span class="mw-headline" id="Use_Case:_Roster">Advanced Use Case: Roster</span></h3> + +<p>A chat site would like to display a list of users currently logged on. Display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload).</p> + +<pre><ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- use JavaScript to add remove users here--> +</ul> +</pre> + +<p>Breakdown of ARIA live properties:</p> + +<ul> + <li>aria-live="polite" indicates that the screen reader should wait until the user is idle before presenting updates to the user. This is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow.</li> + <li>aria-atomic is not set ("false" by default) so that only the added or removed users should be spoken and not the entire roster each time.</li> + <li>aria-relevant="additions removals" ensures that both users added or removed to the roster will be spoken.</li> +</ul> + +<p>TBD: Realistic use case for aria-atomic="true"</p> diff --git a/files/ru/web/accessibility/aria/aria_techniques/index.html b/files/ru/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..2e29856a5c --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,169 @@ +--- +title: Использование ARIA +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<p> </p> + +<h2 id="Роли"> Роли</h2> + +<p> </p> + +<h3 id="Роли_виджета"><a href="/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">Роли виджета</a></h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="Using the button role">Button</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="Using the checkbox role">Checkbox</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li> + <li>Gridcell</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">Link</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">Log</a></li> + <li>Marquee</li> + <li>Menuitem</li> + <li>Menuitemcheckbox</li> + <li>Menuitemradio</li> + <li>Option</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li> + <li>Scrollbar</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li> + <li>Tab</li> + <li>Tabpanel</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> + <li>Timer</li> + <li>Tooltip</li> + <li>Treeitem</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">switch</a></li> +</ul> +</div> + +<h3 id="Композиционные_роли">Композиционные роли</h3> + +<p>Приведенные ниже методы описывают каждую композиционную роль, а также их требуемые и необязательные дочерние роли.</p> + +<div class="index"> +<ul> + <li>Combobox</li> + <li>Grid (including row, gridcell, rowheader, columnheader roles)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (including option role)</li> + <li>Menu</li> + <li>Menubar</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li> + <li>Tablist (including tab and tabpanel roles)</li> + <li>Tree</li> + <li>Treegrid</li> +</ul> +</div> + +<h3 id="Document_structure_roles"><a href="https://www.w3.org/TR/wai-aria/roles#document_structure_roles">Document structure roles </a></h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li> + <li>Definition</li> + <li>Directory</li> + <li>Document</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li> + <li>Heading</li> + <li>Img</li> + <li>List</li> + <li>Listitem</li> + <li>Math</li> + <li>Note</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li> + <li>Region</li> + <li>Separator</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li> +</ul> +</div> + +<h3 id="Landmark_roles"><a href="https://www.w3.org/TR/wai-aria/roles#landmark_roles">Landmark roles </a></h3> + +<div class="index"> +<ul> + <li>Application</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li> + <li>Complementary</li> + <li>Contentinfo</li> + <li>Form</li> + <li>Main</li> + <li>Navigation</li> + <li>Search</li> +</ul> +</div> + +<h2 id="States_and_properties">States and properties</h2> + +<p> </p> + +<h3 id="Widget_attributes">Widget attributes</h3> + +<div class="index"> +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-current</li> + <li>aria-disabled</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> + <li>aria-level</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> +</ul> +</div> + +<h3 id="Live_region_attributes">Live region attributes</h3> + +<div class="index"> +<ul> + <li>aria-live</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> +</div> + +<h3 id="Drag_drop_attributes">Drag & drop attributes</h3> + +<div class="index"> +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> +</div> + +<h3 id="Relationship_attributes">Relationship attributes</h3> + +<div class="index"> +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> + <li>aria-controls</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> + <li>aria-flowto</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-setsize</li> +</ul> +</div> diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html new file mode 100644 index 0000000000..c23c3725b4 --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -0,0 +1,87 @@ +--- +title: Использование атрибута aria-describedby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +tags: + - доступность +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +--- +<h3 id="Описание">Описание</h3> + +<p><span class="seoSummary">Атрибут <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-describedby"><code>aria-describedby</code></a> используется для указания ID элементов, описывающих объект. Он используется для установления отношений между элементами управления или группами и текстом, описывающим их. Это очень похоже на <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>: лэйбл описывает сущность объекта, в то время как описание предоставляет дополнительную информацию, которая может понадобиться пользователю.</span></p> + +<p>Атрибут <code>aria-describedby</code> используется не только для элементов форм; он, также, используется для связывания статического текста с элементами управления, группами элементов, панелями, областями, которые имеют заголовок, определениями, и др. В разделе {{ anch("Examples") }} ниже приведено больше информации о том как использовать атрибут в этих случаях.</p> + +<p>Этот атрибут может использоваться с любым типичным элементом HTML-форм; он не ограничивается элементами, которым назначена ARIA <code>role</code> .</p> + +<h3 id="Значение">Значение</h3> + +<p>разделенный пробелами список ID элементов</p> + +<h3 id="Возможные_последствия_для_пользовательских_агентов_и_вспомогательных_технологийP">Возможные последствия для пользовательских агентов и вспомогательных технологийP</h3> + + + +<div class="note"><strong>Примечание:</strong> Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведенная выше информация является одним из таких мнений и поэтому не носит нормативного характера.</div> + +<h3 id="Примеры">Примеры</h3> + +<h4 id="Пример_1_Связвание_приложения_и_описания">Пример 1: Связвание приложения и описания</h4> + +<p>В примере ниже, вводный параграф описывает приложение календаря. <code>aria-describedby</code> используется для связывания параграфа с контейнером приложения.</p> + +<pre class="brush: html"><div role="application" aria-labelledby="calendar" aria-describedby="info"> + <h1 id="calendar">Calendar</h1> + <p id="info"> + This calendar shows the game schedule for the Boston Red Sox. + </p> + <div role="grid"> + ... + </div> +</div> +</pre> + +<h4 id="Пример_2_Кнопка_закрытия">Пример 2: Кнопка закрытия</h4> + +<p>В примере ниже, ссылка, которая функционирует как кнопка закрытия диалога, описана в другом месте документа. Атрибут aria-describedby используется для связывания описания с ссылкой.</p> + +<pre class="brush: html"><button aria-label="Close" aria-describedby="descriptionClose" + onclick="myDialog.close()">X</button> + +... + +<div id="descriptionClose">Closing this window will discard any information entered and +return you back to the main page</div> +</pre> + +<h3 id="Рабочие_примеры">Рабочие примеры:</h3> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/" title="http://www.oaa-accessibility.org/examplep/checkbox1/">Checkbox example</a> использования <code>aria-describedby</code></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Tooltip example</a> использования <code>aria-describedby</code></li> +</ul> + +<h3 id="Примечания">Примечания</h3> + +<ul> + <li>Атрибут <code>aria-describedby</code> не предназначен для ссылки, описывающей внешний ресурс - так как это ID, он должен ссылаться на элемент в том же документе DOM.</li> +</ul> + +<h3 id="Использование_ARIA_ролей">Использование ARIA ролей</h3> + +<p>все элементы базовой разметки</p> + +<h3 id="Связанные_ARIA_методы">Связанные ARIA методы</h3> + +<ul> + <li><a href="/en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> +</ul> + +<h3 id="Совместимость">Совместимость</h3> + +<p class="comment">TBD: добавить информацию о поддержке для общих UA и AT комбинаций продуктов</p> + +<h3 id="Дополнительные_ресурсы">Дополнительные ресурсы</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby" title="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA specification for aria-describedby</a></li> +</ul> diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..b76b9de8c8 --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,68 @@ +--- +title: Использование атрибута aria-label +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - HTML + - aria-label + - Клиент + - доступность +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +<p><span class="seoSummary">Атрибут <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-label"><code>aria-label</code></a> создаёт текстовую метку текущего элемента в случае отсутствия видимого текста описания элемента. Если есть видимый текст, обозначающий элемент, используйте вместо этого <a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>.</span></p> + +<p>Этот атрибут может быть использован для любого стандартного HTML элемента; не ограничивается элементами с ARIA <code>role</code>.</p> + +<h3 class="editable" id="Значение">Значение</h3> + +<p>строка</p> + +<h3 class="editable" id="Возможные_эффекты_на_клиентские_приложения_и_вспомогательные_технологии">Возможные эффекты на клиентские приложения и вспомогательные технологии</h3> + +<div class="editIcon"> +<h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> +</div> + +<div class="note"><strong>Примечание:</strong> Мнения могут отличаться от того, как вспомогательные технологии должны справляться с этой техникой. Информация, представленная выше, является одним из таких мнений и поэтому не является нормативной.</div> + +<h2 id="Примеры">Примеры</h2> + +<div id="section_5"> +<h4 id="Пример_1_Множественные_лейблы">Пример 1: Множественные лейблы</h4> + +<p>В примере ниже, кнопка стилизована под типичную кнопку "закрыть" с X посередине. Поскольку нет ничего обозначающего значение того, что кнопка закрывает диалог, то <code>aria-label</code> атрибут используется чтобы обеспечить метку для любой вспомогающей технологии.</p> +</div> + +<pre class="deki-transform"><span class="tag"><button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> +</pre> + +<h4 id="Рабочие_примеры">Рабочие примеры:</h4> + +<h3 id="Заметки">Заметки</h3> + +<ul> + <li>Чаще всего API доступности для лейбла привязывается к свойству <em>accessible name</em>.</li> + <li> + <p>Атрибуты, включая <strong>aria-label, </strong>игнорируются большинством автоматических сервисов перевода<strong>.</strong></p> + </li> +</ul> + +<h3 id="Использование_ARIA_ролями">Использование ARIA ролями</h3> + +<p>Все элементы базовой разметки</p> + +<h3 id="Связанные_ARIA_техники">Связанные ARIA техники</h3> + +<ul> + <li><a href="/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Использование атрибута aria-labelledby</a></li> +</ul> + +<h3 id="Совместимость">Совместимость</h3> + +<p class="comment">Будет определено позднее: Добавить информацию о поддержке для общих комбинаций продуктов UA и AT</p> + +<h3 id="Дополнительные_ресурсы">Дополнительные ресурсы</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="https://www.w3.org/TR/wai-aria/#aria-label">WAI-ARIA спецификация для aria-label</a></li> +</ul> diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..8736fc801a --- /dev/null +++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,140 @@ +--- +title: Использование атрибута aria-labelledby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +<h3 id="Описание">Описание</h3> + +<p><span class="seoSummary">Атрибут <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> содержит идентификаторы (атрибут id) меток для таких обьектов как элементы ввода (input), виджеты, группы. Атрибут создаёт связь между обьектами и их метками. Вспомогательные технологии, такие как средства чтения экрана, используют этот атрибут чтобы собирать все метки в каталог документа, из которого пользователь может перемещаться между ними. Без идентификатора (атрибута id) вспомогательные технологии не могут собрать данные обьекты в каталог.</span></p> + +<p><code>aria-labelledby</code> очень похож на <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a>: Метка (label) предоставляет основную информацию об обьекте, в то время как описание (description) даёт более полную/детальную информацию которая может понадобится пользователю.</p> + +<p><span class="tlid-translation translation"><span title="">В дополнение к элементам формы вы можете использовать атрибут <code>aria-labelledby</code>, чтобы связать статический текст с виджетами, группами элементов, панелями, областями, которые имеют заголовок, определения и другие типы объектов</span></span>. Ниже, в разделе {{ anch("Примеры") }} приведенны примеры и информация как использовать атрибут в данном виде.</p> + +<p>Чтобы повысить совместимость с <a href="https://ru.wikipedia.org/wiki/User_agent">клиетскими приложениями </a>которые не поддерживают ARIA атрибуты, вы можете использовать <code>aria-labelledby</code> вместе элементом {{ HTMLElement("label") }} (используя <code>for</code> атрибут)</p> + +<p>Этот атрибут может быть использован в любом типичном HTML элементе формы, он не ограничен элементами которые имеют атрибут ARIA <code>role</code></p> + +<h3 id="Значение">Значение</h3> + +<p>Список идентификаторов (id) разделенных пробелом</p> + +<h3 id="Возможные_эфекты_в_клиентских_приложениях_и_вспомогательных_технологиях">Возможные эфекты в клиентских приложениях и вспомогательных технологиях</h3> + +<p>Когда клиенсткое приложение вычисляют доступное имя элемента который имеет и атрибут <code>aria-labelledby</code>, и атрибут <code><a href="https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>, они отдадут приоритет <code>aria-labelledby</code></p> + +<h3 id="Примеры">Примеры</h3> + +<h4 id="Example_1_Multiple_Labels">Example 1: Multiple Labels</h4> + +<p>In the example below, each input field is labelled by both its own individual label and by the label for the group:</p> + +<pre class="brush: html"><div id="billing">Billing</div> + +<div> + <div id="name">Name</div> + <input type="text" aria-labelledby="billing name"/> +</div> +<div> + <div id="address">Address</div> + <input type="text" aria-labelledby="billing address"/> +</div> +</pre> + +<h4 id="Example_2_Associating_Headings_With_Regions">Example 2: Associating Headings With Regions</h4> + +<p>In the example below, header elements are associated with the content they head. Note that the region being referenced is the region that <em>contains</em> the header.</p> + +<pre class="brush: html"><div role="main" aria-labelledby="foo"> + <h1 id="foo">Wild fires spread across the San Diego Hills</h1> + Strong winds expand fires ignited by high temperatures ... +</div> +</pre> + +<h4 id="Example_3_Radio_Groups">Example 3: Radio Groups</h4> + +<p>In the example below, the container of a <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="Using the radio role">radiogroup</a> is associated with its label using the <code>aria-labelledby</code> attribute:</p> + +<pre class="brush: html"><div id="radio_label">My radio label</div> +<ul role="radiogroup" aria-labelledby="radio_label"> + <li role="radio">Item #1</li> + <li role="radio">Item #2</li> + <li role="radio">Item #3</li> +</ul> +</pre> + +<h4 id="Example_4_Dialog_Label">Example 4: Dialog Label</h4> + +<p>In the example below, the header element that labels the dialog is referred to by the <code>aria-labelledby</code> attribute:</p> + +<pre class="brush: html"><div role="dialog" aria-labelledby="dialogheader"> + <h2 id="dialogheader">Choose a File</h2> + ... Dialog contents +</div> +</pre> + +<h4 id="Example_5_Inline_Definition">Example 5: Inline Definition</h4> + +<p>In the example below, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the <strong>aria-labelledby</strong> attribute:</p> + +<pre class="brush: html"><p>The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> +an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span> +</p> +</pre> + +<h4 id="Example_6_Definition_Lists">Example 6: Definition Lists</h4> + +<p>In the example below, the definitions in a formal definition list are associated with the terms they define using the <code>aria-labelledby</code> attribute:</p> + +<pre class="brush: html"><dl> + <dt id="anathema">anathema</dt> + <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority + and accompanied by excommunication</dd> + <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd> + + <dt id="homily">homily</dt> + <dd role="definition" aria-labelledby="homily">a usually short sermon</dd> + <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd> +</dl> +</pre> + +<h4 id="Example_7_Menus">Example 7: Menus</h4> + +<p>In the example below, a popup menu is associated with its label using the <code>aria-labelledby</code> attribute:</p> + +<pre class="brush: html"><div role="menubar"> + <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div> + <div role="menu" aria-labelledby="fileMenu"> + <div role="menuitem">Open</div> + <div role="menuitem">Save</div> + <div role="menuitem">Save as ...</div> + ... + </div> + ... +</div> +</pre> + +<h4 id="Notes">Notes </h4> + +<p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property</p> + +<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3> + +<p>All elements of the base markup</p> + +<h3 id="Related_ARIA_techniques">Related ARIA techniques </h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">Using the aria-label attribute</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">Using the aria-describedby attribute</a></li> +</ul> + +<h3 id="Compatibility">Compatibility</h3> + +<p class="comment">TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="Additional_resources">Additional resources</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">WAI-ARIA specification for aria-labelledby</a></li> +</ul> diff --git a/files/ru/web/accessibility/aria/index.html b/files/ru/web/accessibility/aria/index.html new file mode 100644 index 0000000000..b2dc0f6ec3 --- /dev/null +++ b/files/ru/web/accessibility/aria/index.html @@ -0,0 +1,123 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Web + - доступность +translation_of: Web/Accessibility/ARIA +--- +<p><span class="seoSummary">Accessible Rich Internet Applications <strong>(ARIA)</strong> определяет способ сделать веб контент и веб приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями.</span> Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.</p> + +<p>ARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку, но особенно подходят для HTML. Атрибут <code>role</code> определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.</p> + +<p>Поддержка ARIA реализована в большинстве современных браузеров и программах экранного доступа. Конечно, реализации различаются, и старые технологии не поддерживают их полностью (либо вообще не поддерживают). Используйте постепенно деградирующий "щадящий" ARIA, или просите пользователей использовать новые технологии.</p> + +<div class="note"> +<p><strong>Note</strong>: Пожалуйста, примите участие в написании и/или переводе статей чтобы сделать ARIA понятнее и доступнее для тех, кто только начинает изучать материал! Не хватает на это времени? Тогда отправьте свои предложения в <a href="https://lists.mozilla.org/listinfo/accessibility">список рассылки Mozilla по теме accessibility</a>, или на <a href="https://wiki.mozilla.org/IRC">IRC канал</a>с тэгом #accessibility.</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Начало_работы_с_ARIA">Начало работы с ARIA</h3> + +<dl> + <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Введение в ARIA</a></dt> + <dd>Быстрое введение в превращение динамического контента в доступный с помощью ARIA. Смотрите также классическую статью <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, from 2008.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ">Web Applications and ARIA FAQ</a></dt> + <dd>Ответы на часто задаваемые вопросы о том как и почему нужно использовать ARIA в разработке интерфейсов веб-приложений.</dd> + <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Записи использования экранных читалок с ARIA.</a></dt> + <dd>На этих видео можно увидеть реальные и учебные примеры того ARIA улучшает доступность.</dd> + <dt><a class="external" href="http://w3c.github.io/aria-in-html/">Использование ARIA в HTML</a></dt> + <dd>Практическое руководство для разработчиков. Содержит рекомендации по использованию ARIA-атрибутов при разметке.</dd> +</dl> + +<h3 id="Простое_улучшение_ARIA">Простое улучшение ARIA</h3> + +<dl> + <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Улучшение навигации по странице с помощью ARIA Landmarks</a></dt> + <dd>Хорошее введение в использование ARIA landmarks для улучшения навигации для пользователей с экранными читалками. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Стоит также заглянуть в заметки по поддержке ARIA landmarks читалками </a> и примеры использования на реальных сайтах (опубликовано в Июле 2011).</dd> + <dt><a href="/en-US/docs/ARIA/forms">Улучшение доступности форм</a></dt> + <dd>ARIA используется не только для обозначения динамического контента! Узнайте, как улучшить доступность форм HTML используя дополнительные ARIA-атрибуты.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (в процессе написания)</a></dt> + <dd>Live regions подсказывают экранным читалкам как правильно обрабатывать изменения контента на странице.</dd> + <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Использование ARIA Live Regions для оповещения об изменении контента страницы</a></dt> + <dd>Краткая сводка об использовании live regions от создателей JAWS screen reader software. Live regions также поддерживаются NVDA в Firefox и VoiceOver в Safari.</dd> +</dl> + +<h3 id="ARIA_для_виджетов_на_JavaScript.">ARIA для виджетов на JavaScript.</h3> + +<dl> + <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Навигация с помощью клавиатуры и фокус в виджетах на JavaScript</a></dt> + <dd>Первый шаг в создании доступных JavaScript виджетов, позволяющих производить навигацию с помощью клавиатуры. Статья описывает последовательные шаги по достижению цели. Еще один хороший ресурс - <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">статья Yahoo! об управлении фокусом.</a></dd> + <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Style Guide for Keyboard Navigation</a></dt> + <dd>В этом руководстве описываются способы управления самыми распространенными виджетами с клавиатуры.</dd> +</dl> + +<h3 id="Дополнительные_ресурсы_по_ARIA">Дополнительные ресурсы по ARIA</h3> + +<dl> + <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview">Виджеты. Техники, руководства, примеры.</a></dt> + <dd>Нужен слайдер, меню или другой виджет? здесь вы можете найти все, что нужно</dd> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">JavaScript UI библиотеки со встроенной поддержкой ARIA.</a></dt> + <dd>Если вы начинаете новый проект, то вам стоит обратить внимание на UI библиотеки, имеющие встроенную поддержку ARIA. Внимание: статья 2009 года — то, что она описывает, стоит вынести в отдельную статью на MDN, которая будет поддерживаться в актуальном состоянии.</dd> +</dl> +</div> + +<div class="section"> +<h3 id="Список_рассылки.">Список рассылки.</h3> + +<dl> + <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Открытая Google Group, посвященная ARIA</a></dt> + <dd>Здесь можно задать вопрос об ARIA, а также предложить улучшение существующей документации, которая находится там же.</dd> +</dl> + +<h3 id="Блоги">Блоги</h3> + +<p>Хотя информация в блогах быстро теряет актуальность, все же в них можно почерпнуть ценную информацию из первых рук - разработчиков, развивающих ARIA.</p> + +<p><a class="external" href="https://www.paciellogroup.com/blog/archive/">Paciello Group</a></p> + +<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p> + +<h3 id="Обнаружение_багов.">Обнаружение багов.</h3> + +<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Сообщайте об ошибках ARIA в браузерах, экранных читалках и библиотеках JavaScript.</a></p> + +<h3 id="Примеры">Примеры</h3> + +<dl> + <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases">ARIA. Библиотека примеров.</a></dt> + <dd>Набор примеров по которым можно многому научиться.</dd> + <dt>Различные демки библиотек с доступными JS виджетами.</dt> + <dd><a class="external" href="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd> + <dt><a class="external" href="http://mail.yahoo.com">Yahoo! Mail</a></dt> + <dd>Детище Yahoo! - Yahoo! Mail, веб-приложение, выглядящее практически как нативное и вполне доступное. После <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">обзора Yahoo! Mail</a> с использованием экранной читалки Marco Zehe сказал: "Хорошая работа, не сбавляйте обороты!".</dd> + <dt><a class="external" href="http://search.yahoo.com">Yahoo! Search</a></dt> + <dd>Yahoo! проделали невероятную работу по продвижению ARIA в своем поисковике, используя все возможности и <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">делясь своим опытом</a>. Yahoo! Search использует одновременно ARIA landmarks, live regions, и widgets.</dd> +</dl> + +<h3 id="Стандартизация.">Стандартизация.</h3> + +<dl> + <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt> + <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd> + <dt><a class="external" href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt> + <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd> + <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt> + <dd> + <p>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.</p> + + <p>For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</p> + </dd> + <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt> + <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt> + <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.</dd> +</dl> +</div> +</div> + +<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3> + +<p><a href="/en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a></p> diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html new file mode 100644 index 0000000000..b9eb71997d --- /dev/null +++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html @@ -0,0 +1,149 @@ +--- +title: 'ARIA: checkbox role' +slug: Web/Accessibility/ARIA/Roles/checkbox_role +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +--- +<p>\{{ariaref}}</p> + +<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox role</a> используется для переключаемых интерактивных элементов управления. Элементы, содержащие <code>role="checkbox"</code> также должны включать <code>aria-checked</code> атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.</span></p> + +<pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> +</span> <label id="chk1-label">Remember my preferences</label></pre> + +<p>Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует небходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, который изначально предоставляет необходимый функционал:</p> + +<pre class="brush: html"><input type="checkbox" id="chk1-label"> +<label for="chk1-label">Запомнить мои предпочтения</label></pre> + +<h2 id="Описание">Описание</h2> + +<p>Нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с <a href="/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes">неопределенным</a> состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с <code>role="checkbox"</code> может находиться в трех состояниях, обозначенных через <code>aria-checked</code> атрибут: <code>true</code>, <code>false</code>, or <code>mixed</code>.</p> + +<p>Поскольку чекбокс является интерактивным элементом, он должен быть фокусируемым и доступным при помощи клавиатуры. Если роль установлена для нефокусируемого элемента, чтобы исправить ситуацию, используйте атрибут <code>tabindex</code>. Ожидаемый способ активации чекбокса при помощи клавиатуры - <kbd>Пробел</kbd> .</p> + +<p>Разработчику необходимо динамически изменять значение атрибута <code>aria-checked</code> при активации чекбокса.</p> + +<h3 id="Связанные_WAI-ARIA_Роли_Состояния_и_Свойства">Связанные WAI-ARIA Роли, Состояния, и Свойства</h3> + +<dl> +</dl> + +<dl> + <dt>aria-checked</dt> + <dd> + <p>Значение <code>aria-checked</code> определяет состояние чекбокса. Этот атрибут может принимать одно из трех значений:</p> + + <p><code>true</code><br> + Чекбокс отмечен<br> + <code>false</code><br> + Чекбокс не отмечен<br> + <code>mixed</code><br> + Чекбокс частично отмечен, или в неопределенном состоянии</p> + </dd> + <dt>tabindex="0"</dt> + <dd>Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.</dd> +</dl> + +<h3 id="Взаимодействие_с_клавиатурой">Взаимодействие с клавиатурой</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Клавиша</th> + <th scope="col">Функция</th> + </tr> + <tr> + <td><kbd>Пробел</kbd></td> + <td>Активирует чекбокс</td> + </tr> + </tbody> +</table> + +<h3 id="Необходимый_JavaScript">Необходимый JavaScript</h3> + +<h4 id="Необходимый_обработчики_событий">Необходимый обработчики событий</h4> + +<dl> + <dt>onclick</dt> + <dd>Обрабатывает клики, которые изменяют состояние чекбокса, меняя значение атрибута <code>aria-checked</code> и внешний вид чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd> + <dt>onKeyPress</dt> + <dd>Обрабатывает случай, когда пользователь нажимает <kbd>Пробел</kbd> для смены состояния чекбокса путем изменения значения атрибута <code>aria-checked</code> и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Примеры">Примеры</h3> + +<p>Пример ниже создает простой чекбокс, используя CSS и JavaScript для обработкиотмеченного и неотмеченного состояний элемента.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()" + tabindex="0" aria-labelledby="chk1-label"></span> +<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()">Запомнить мои предпочтения</label></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">[role="checkbox"] { + padding:5px; +} + +[aria-checked="true"]::before { + content: "[x]"; +} + +[aria-checked="false"]::before { + content: "[ ]"; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function changeCheckbox(event) { + let item = document.getElementById('chkPref'); + switch(item.getAttribute('aria-checked')) { + case "true": + item.setAttribute('aria-checked', "false"); + break; + case "false": + item.setAttribute('aria-checked', "true"); + break; + } +}</pre> + +<p>{{EmbedLiveSample("Examples", 230, 250)}}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Когда <code>checkbox</code> роль добавлена к элементу, юзер агент должен сделать следующее:</p> + +<ul> + <li>Показать элемент как элемент с функциями чекбокса для API доступности.</li> + <li>Когда значение aria-checked меняется, отправить оступное событие изменения состояния.</li> +</ul> + +<p>Продукты, использующие ассистивные технологии должны сделать следующее:</p> + +<ul> + <li>Программы чтения с экрана должны объявить элемент как чекбокс и при необходимости предоставить инструкции о том, как его активировать.</li> +</ul> + +<div class="note"><strong>Замечание:</strong> Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведенная выше, также одно из таких мнений, и не является нормативом.</div> + +<h2 id="Лучшие_практики">Лучшие практики</h2> + +<p>Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует небходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.</p> + +<h2 id="Смотрите_также">Смотрите также:</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">ARIA: radio role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitem_Role">ARIA: menuitem role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">ARIA: menuitemcheckbox role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">ARIA: menuitemradio role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">ARIA: switch role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_role">ARIA: option role</a></li> +</ul> + +<p> </p> diff --git a/files/ru/web/accessibility/aria/roles/index.html b/files/ru/web/accessibility/aria/roles/index.html new file mode 100644 index 0000000000..b86909d5a7 --- /dev/null +++ b/files/ru/web/accessibility/aria/roles/index.html @@ -0,0 +1,80 @@ +--- +title: WAI-ARIA Roles +slug: Web/Accessibility/ARIA/Roles +tags: + - ARIA + - ARIA Roles + - Accessibility + - NeedsTranslation + - Reference + - Rôles + - TopicStub +translation_of: Web/Accessibility/ARIA/Roles +--- +<p class="summary">This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, States, and Properties</a></p> + +<p>{{SubpagesWithSummaries}}</p> + +<div class="hidden"> +<p>Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Ones for which the first draft is completed have been removed from the below list.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li> +</ul> +</div> diff --git a/files/ru/web/accessibility/at-apis/gecko/index.html b/files/ru/web/accessibility/at-apis/gecko/index.html new file mode 100644 index 0000000000..9cd605e79d --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/index.html @@ -0,0 +1,9 @@ +--- +title: Gecko +slug: Web/Accessibility/AT-APIs/Gecko +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/index.html new file mode 100644 index 0000000000..3279dc94f1 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/roles/index.html @@ -0,0 +1,498 @@ +--- +title: Gecko Roles +slug: Web/Accessibility/AT-APIs/Gecko/Roles +tags: + - AT_APIs + - Accessibility + - NeedsTranslation + - Reference + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles +--- +<p><a href="/ru/docs/Accessibility:AT-APIs#Supported_Roles">« AT APIs Support Page</a></p> +<p><span class="seoSummary">This page offers a list of accessible roles used in Gecko. Role constants are defined in the <code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleRole" title="">nsIAccessibleRole</a></code> interface.</span></p> +<dl> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_NOTHING">ROLE_NOTHING</a></code></dt> + <dd> + Used when the accessible item doesn't have a strongly defined role.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TITLEBAR">ROLE_TITLEBAR</a></code></dt> + <dd> + Represents a title or caption bar for a window. Used by MSAA only, this is supported automatically by Microsoft Windows.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUBAR">ROLE_MENUBAR</a></code></dt> + <dd> + Represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on Mac OS X) from which menus are selected by the user.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLLBAR">ROLE_SCROLLBAR</a></code></dt> + <dd> + Represents a vertical or horizontal scroll bar, which is part of the client area or used in a control.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRIP">ROLE_GRIP</a></code></dt> + <dd> + Represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. For example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SOUND">ROLE_SOUND</a></code></dt> + <dd> + Represents a system sound, which is associated with various system events.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CURSOR">ROLE_CURSOR</a></code></dt> + <dd> + Represents the system mouse pointer.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CARET">ROLE_CARET</a></code></dt> + <dd> + Represents the system caret.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code></dt> + <dd> + Represents an alert or a condition that a user should be notified about. Assistive Technologies typically respond to the role by reading the entire onscreen contents of containers advertising this role. Should be used for warning dialogs, etc.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WINDOW">ROLE_WINDOW</a></code></dt> + <dd> + Represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. The role is supported automatically by Microsoft Windows.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INTERNAL_FRAME">ROLE_INTERNAL_FRAME</a></code></dt> + <dd> + A sub-document.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUPOPUP">ROLE_MENUPOPUP</a></code></dt> + <dd> + Represents a menu, which presents a list of options from which the user can make a selection to perform an action.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code></dt> + <dd> + Represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLTIP">ROLE_TOOLTIP</a></code></dt> + <dd> + Represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APPLICATION">ROLE_APPLICATION</a></code></dt> + <dd> + Represents a main window for an application.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT">ROLE_DOCUMENT</a></code></dt> + <dd> + Represents a document window. A document window is always contained within an application window.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PANE">ROLE_PANE</a></code></dt> + <dd> + Represents a pane within a frame or document window. Users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. Thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHART">ROLE_CHART</a></code></dt> + <dd> + Represents a graphical image used to represent data.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIALOG">ROLE_DIALOG</a></code></dt> + <dd> + Represents a dialog box or message box.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BORDER">ROLE_BORDER</a></code></dt> + <dd> + Represents a window border.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GROUPING">ROLE_GROUPING</a></code></dt> + <dd> + Logically groups other objects.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SEPARATOR">ROLE_SEPARATOR</a></code></dt> + <dd> + Used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLBAR">ROLE_TOOLBAR</a></code></dt> + <dd> + Represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATUSBAR">ROLE_STATUSBAR</a></code></dt> + <dd> + Represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. The status bar has multiple fields, which display different kinds of information.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE">ROLE_TABLE</a></code></dt> + <dd> + Represents a table that contains rows and columns of cells, and optionally, row headers and column headers.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMNHEADER">ROLE_COLUMNHEADER</a></code></dt> + <dd> + Represents a column header, providing a visual label for a column in a table.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROWHEADER">ROLE_ROWHEADER</a></code></dt> + <dd> + Represents a row header, which provides a visual label for a table row.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMN">ROLE_COLUMN</a></code></dt> + <dd> + Represents a column of cells within a table.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROW">ROLE_ROW</a></code></dt> + <dd> + Represents a row of cells within a table.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CELL">ROLE_CELL</a></code></dt> + <dd> + Represents a cell within a table.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LINK">ROLE_LINK</a></code></dt> + <dd> + Represents a link to something else. This object might look like text or a graphic, but it acts like a button.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HELPBALLOON">ROLE_HELPBALLOON</a></code></dt> + <dd> + Displays a Help topic in the form of a ToolTip or Help balloon.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHARACTER">ROLE_CHARACTER</a></code></dt> + <dd> + Represents a cartoon-like graphic object, such as Microsoft Office Assistant, which is displayed to provide help to users of an application.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LIST">ROLE_LIST</a></code></dt> + <dd> + Represents a list box, allowing the user to select one or more items.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTITEM">ROLE_LISTITEM</a></code></dt> + <dd> + Represents an item in a list.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINE">ROLE_OUTLINE</a></code></dt> + <dd> + Represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINEITEM">ROLE_OUTLINEITEM</a></code></dt> + <dd> + Represents an item in an outline or tree structure.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETAB">ROLE_PAGETAB</a></code></dt> + <dd> + Represents a page tab, it is a child of a page tab list.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROPERTYPAGE">ROLE_PROPERTYPAGE</a></code></dt> + <dd> + Represents a property sheet.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INDICATOR">ROLE_INDICATOR</a></code></dt> + <dd> + Represents an indicator, such as a pointer graphic, that points to the current item.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRAPHIC">ROLE_GRAPHIC</a></code></dt> + <dd> + Represents a picture.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATICTEXT">ROLE_STATICTEXT</a></code></dt> + <dd> + Represents read-only text, such as labels for other controls or instructions in a dialog box. Static text cannot be modified or selected.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_LEAF">ROLE_TEXT_LEAF</a></code></dt> + <dd> + Represents selectable text that allows edits or is designated read-only.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PUSHBUTTON">ROLE_PUSHBUTTON</a></code></dt> + <dd> + Represents a push button control.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECKBUTTON">ROLE_CHECKBUTTON</a></code></dt> + <dd> + Represents a check box control.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIOBUTTON">ROLE_RADIOBUTTON</a></code></dt> + <dd> + Represents an option button, also called a radio button. It is one of a group of mutually exclusive options. All objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX">ROLE_COMBOBOX</a></code></dt> + <dd> + Represents a combo box; an edit control with an associated list box that provides a set of predefined choices.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DROPLIST">ROLE_DROPLIST</a></code></dt> + <dd> + Represents the calendar control.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROGRESSBAR">ROLE_PROGRESSBAR</a></code></dt> + <dd> + Represents a progress bar, dynamically showing the user the percent complete of an operation in progress.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAL">ROLE_DIAL</a></code></dt> + <dd> + Represents a dial or knob whose purpose is to allow a user to set a value.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HOTKEYFIELD">ROLE_HOTKEYFIELD</a></code></dt> + <dd> + Represents a hot-key field that allows the user to enter a combination or sequence of keystrokes.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SLIDER">ROLE_SLIDER</a></code></dt> + <dd> + Represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPINBUTTON">ROLE_SPINBUTTON</a></code></dt> + <dd> + Represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAGRAM">ROLE_DIAGRAM</a></code></dt> + <dd> + Represents a graphical image used to diagram data.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ANIMATION">ROLE_ANIMATION</a></code></dt> + <dd> + Represents an animation control, which contains content that changes over time, such as a control that displays a series of bitmap frames.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EQUATION">ROLE_EQUATION</a></code></dt> + <dd> + Represents a mathematical equation. It is used by MATHML.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWN">ROLE_BUTTONDROPDOWN</a></code></dt> + <dd> + Represents a button that drops down a list of items.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONMENU">ROLE_BUTTONMENU</a></code></dt> + <dd> + Represents a button that drops down a menu.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWNGRID">ROLE_BUTTONDROPDOWNGRID</a></code></dt> + <dd> + Represents a button that drops down a grid.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WHITESPACE">ROLE_WHITESPACE</a></code></dt> + <dd> + Represents blank space between other objects.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETABLIST">ROLE_PAGETABLIST</a></code></dt> + <dd> + Represents a container of page tab controls.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CLOCK">ROLE_CLOCK</a></code></dt> + <dd> + Represents a control that displays time.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLITBUTTON">ROLE_SPLITBUTTON</a></code></dt> + <dd> + Represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IPADDRESS">ROLE_IPADDRESS</a></code></dt> + <dd> + Represents an edit control designed for an Internet Protocol (IP) address. The edit control is divided into sections for the different parts of the IP address.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ACCEL_LABEL">ROLE_ACCEL_LABEL</a></code></dt> + <dd> + Represents a label control that has an accelerator.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ARROW">ROLE_ARROW</a></code></dt> + <dd> + Represents an arrow in one of the four cardinal directions.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CANVAS">ROLE_CANVAS</a></code></dt> + <dd> + Represents a control that can be drawn into and is used to trap events.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECK_MENU_ITEM">ROLE_CHECK_MENU_ITEM</a></code></dt> + <dd> + Represents a menu item with a check box.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLOR_CHOOSER">ROLE_COLOR_CHOOSER</a></code></dt> + <dd> + Represents a specialized dialog that lets the user choose a color.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DATE_EDITOR">ROLE_DATE_EDITOR</a></code></dt> + <dd> + Represents control whose purpose is to allow a user to edit a date.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_ICON">ROLE_DESKTOP_ICON</a></code></dt> + <dd> + An iconified internal frame in an ROLE_DESKTOP_PANE.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_FRAME">ROLE_DESKTOP_FRAME</a></code></dt> + <dd> + A desktop pane. A pane that supports internal frames and iconified versions of those internal frames.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIRECTORY_PANE">ROLE_DIRECTORY_PANE</a></code></dt> + <dd> + A directory pane. A pane that allows the user to navigate through and select the contents of a directory. May be used by a file chooser.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FILE_CHOOSER">ROLE_FILE_CHOOSER</a></code></dt> + <dd> + A file chooser. A specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. May use the directory pane to show the contents of a directory.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FONT_CHOOSER">ROLE_FONT_CHOOSER</a></code></dt> + <dd> + A font chooser. A font chooser is a component that lets the user pick various attributes for fonts.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHROME_WINDOW">ROLE_CHROME_WINDOW</a></code></dt> + <dd> + Frame role. A top level window with a title bar, border, menu bar, etc. It is often used as the primary window for an application.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GLASS_PANE">ROLE_GLASS_PANE</a></code></dt> + <dd> + A glass pane. A pane that is guaranteed to be painted on top of all panes beneath it.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HTML_CONTAINER">ROLE_HTML_CONTAINER</a></code></dt> + <dd> + A document container for HTML, whose children represent the document content.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ICON">ROLE_ICON</a></code></dt> + <dd> + A small fixed size picture, typically used to decorate components.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LABEL">ROLE_LABEL</a></code></dt> + <dd> + Presents an icon or short string in an interface.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LAYERED_PANE">ROLE_LAYERED_PANE</a></code></dt> + <dd> + A layered pane. A specialized pane that allows its children to be drawn in layers, providing a form of stacking order. This is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION_PANE">ROLE_OPTION_PANE</a></code></dt> + <dd> + A specialized pane whose primary use is inside a dialog.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT">ROLE_PASSWORD_TEXT</a></code></dt> + <dd> + A text object uses for passwords, or other places where the text content is not shown visibly to the user.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_POPUP_MENU">ROLE_POPUP_MENU</a></code></dt> + <dd> + A temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIO_MENU_ITEM">ROLE_RADIO_MENU_ITEM</a></code></dt> + <dd> + A radio button that is a menu item.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROOT_PANE">ROLE_ROOT_PANE</a></code></dt> + <dd> + A root pane. A specialized pane that has a glass pane and a layered pane as its children. Its children can include scroll bars and a viewport.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLL_PANE">ROLE_SCROLL_PANE</a></code></dt> + <dd> + A scroll pane. An object that allows a user to incrementally view a large amount of information.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLIT_PANE">ROLE_SPLIT_PANE</a></code></dt> + <dd> + A split pane. A specialized panel that presents two other panels at the same time. Between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_COLUMN_HEADER">ROLE_TABLE_COLUMN_HEADER</a></code></dt> + <dd> + The header for a column of a table.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_ROW_HEADER">ROLE_TABLE_ROW_HEADER</a></code></dt> + <dd> + The header for a row of a table.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEAR_OFF_MENU_ITEM">ROLE_TEAR_OFF_MENU_ITEM</a></code></dt> + <dd> + A menu item used to tear off and reattach its menu.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TERMINAL">ROLE_TERMINAL</a></code></dt> + <dd> + Represents an accessible terminal.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_CONTAINER">ROLE_TEXT_CONTAINER</a></code></dt> + <dd> + Collection of objects that constitute a logical text entity.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOGGLE_BUTTON">ROLE_TOGGLE_BUTTON</a></code></dt> + <dd> + A toggle button. A specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TREE_TABLE">ROLE_TREE_TABLE</a></code></dt> + <dd> + Representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_VIEWPORT">ROLE_VIEWPORT</a></code></dt> + <dd> + A viewport. An object usually used in a scroll pane. It represents the portion of the entire data that the user can see. As the user manipulates the scroll bars, the contents of the viewport can change.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADER">ROLE_HEADER</a></code></dt> + <dd> + Header of a document page.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FOOTER">ROLE_FOOTER</a></code></dt> + <dd> + Footer of a document page.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARAGRAPH">ROLE_PARAGRAPH</a></code></dt> + <dd> + A paragraph of text.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RULER">ROLE_RULER</a></code></dt> + <dd> + A ruler such as those used in word processors.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_AUTOCOMPLETE">ROLE_AUTOCOMPLETE</a></code></dt> + <dd> + A text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EDITBAR">ROLE_EDITBAR</a></code></dt> + <dd> + An editable text object in a toolbar.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ENTRY">ROLE_ENTRY</a></code></dt> + <dd> + An control whose textual content may be entered or modified by the user.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CAPTION">ROLE_CAPTION</a></code></dt> + <dd> + A caption describing another object.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT_FRAME">ROLE_DOCUMENT_FRAME</a></code></dt> + <dd> + A visual frame or container which contains a view of document content. Document frames may occur within another Document instance, in which case the second document may be said to be embedded in the containing instance. HTML frames are often ROLE_DOCUMENT_FRAME. Either this object, or a singleton descendant, should implement the Document interface.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADING">ROLE_HEADING</a></code></dt> + <dd> + Heading.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGE">ROLE_PAGE</a></code></dt> + <dd> + An object representing a page of document content. It is used in documents which are accessed by the user on a page by page basis.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SECTION">ROLE_SECTION</a></code></dt> + <dd> + A container of document content.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_REDUNDANT_OBJECT">ROLE_REDUNDANT_OBJECT</a></code></dt> + <dd> + An object which is redundant with another object in the accessible hierarchy. ATs typically ignore objects with this role.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FORM">ROLE_FORM</a></code></dt> + <dd> + A container of form controls.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IME">ROLE_IME</a></code></dt> + <dd> + An object which is used to allow input of characters not found on a keyboard, such as the input of Chinese characters on a Western keyboard.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APP_ROOT">ROLE_APP_ROOT</a></code></dt> + <dd> + ???</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARENT_MENUITEM">ROLE_PARENT_MENUITEM</a></code></dt> + <dd> + Represents a menu item, which is an entry in a menu that a user can choose to display another menu.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CALENDAR">ROLE_CALENDAR</a></code></dt> + <dd> + A calendar that allows the user to select a date.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_LIST">ROLE_COMBOBOX_LIST</a></code></dt> + <dd> + A list of items that is shown by combobox.</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_OPTION">ROLE_COMBOBOX_OPTION</a></code></dt> + <dd> + A item of list that is shown by combobox</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IMAGE_MAP">ROLE_IMAGE_MAP</a></code></dt> + <dd> + An image map -- has child links representing the areas</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION">ROLE_OPTION</a></code></dt> + <dd> + An option in a listbox</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RICH_OPTION">ROLE_RICH_OPTION</a></code></dt> + <dd> + A rich option in a listbox, it can have other widgets as children</dd> + <dt> + <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTBOX">ROLE_LISTBOX</a></code></dt> + <dd> + A list of options</dd> +</dl> +<div class="note"> + <p><strong>Editor's note:</strong> Use template <span class="nowiki"><code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_">ROLE_</a></code></span> to get reference on accessible role. It looks like <code><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code>.</p> +</div> diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html new file mode 100644 index 0000000000..0116e62762 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/roles/role_document/index.html @@ -0,0 +1,31 @@ +--- +title: ROLE_DOCUMENT +slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT +--- +<p><a href="/ru/docs/Accessibility:AT-APIs:Gecko:Roles">« Gecko Roles Page</a></p> +<p>Represents a document window. A document window is always contained within an application window.</p> +<h2 id="Interfaces" name="Interfaces">Interfaces</h2> +<ul> + <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessNode" title="">nsIAccessNode</a></code></li> + <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessible" title="">nsIAccessible</a></code></li> + <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleText" title="">nsIAccessibleText</a></code></li> + <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleEditableText" title="">nsIAccessibleEditableText</a></code></li> + <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleHyperText" title="">nsIAccessibleHyperText</a></code></li> + <li><code><a href="/ru/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleDocument" title="">nsIAccessibleDocument</a></code></li> +</ul> +<h2 id="Mapped_to" name="Mapped_to">Mapped to</h2> +<ul> + <li>AT-SPI: <code>ROLE_DOCUMENT_FRAME</code></li> + <li>ATK: <code>ATK_ROLE_DOCUMENT_FRAME</code></li> + <li>UA: <code>NSAccessibilityGroupRole</code></li> + <li>MSAA/IA2: <code>ROLE_SYSTEM_DOCUMENT</code></li> +</ul> +<h2 id="Used_by" name="Used_by">Used by</h2> +<ul> + <li>ARIA: <code><a class="external" href="https://w3c.github.io/aria/#document">document</a></code></li> + <li>HTML: content document</li> +</ul> +<p></p><section class="Quick_links" id="Quick_Links"> +<ol><li><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT">ROLE PASSWORD TEXT</a></li><li><a href="/ru/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT">ROLE_DOCUMENT</a></li></ol> +</section><p></p> diff --git a/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html b/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html new file mode 100644 index 0000000000..3157da6c12 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/gecko/roles/role_password_text/index.html @@ -0,0 +1,27 @@ +--- +title: ROLE PASSWORD TEXT +slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT +--- +<p> </p> + +<p><a href="/ru/docs/Accessibility:AT-APIs:Gecko:Roles">« Gecko Roles Page</a></p> + +<h2 id="Description" name="Description">Description</h2> + +<p>A text object uses for passwords, or other places where the text content is not shown visibly to the user.</p> + +<h2 id="Mapped_to" name="Mapped_to">Mapped to</h2> + +<ul> + <li>AT-SPI: ROLE_PASSWORD_TEXT</li> + <li>ATK: ATK_ROLE_PASSWORD_TEXT</li> + <li>UA: NSAccessibilityTextFieldRole</li> + <li>MSAA/IA2: ROLE_SYSTEM_TEXT</li> +</ul> + +<h2 id="Used_by" name="Used_by">Used by</h2> + +<ul> + <li>HTML: <input type="password"/></li> +</ul> diff --git a/files/ru/web/accessibility/at-apis/index.html b/files/ru/web/accessibility/at-apis/index.html new file mode 100644 index 0000000000..43b7f1d8b6 --- /dev/null +++ b/files/ru/web/accessibility/at-apis/index.html @@ -0,0 +1,176 @@ +--- +title: AT APIs Support +slug: Web/Accessibility/AT-APIs +tags: + - AT_APIs + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<div class="note">Documentation is in progress still. But in the meantime it more up-to-date and contains more details than existed analogues for <a class="external" href="http://developer.mozilla.org/en/docs/Accessibility/AT-SPI_Support">AT-SPI</a> and <a class="external" href="http://wiki.mozilla.org/Accessibility/AT-Windows-API">MSAA</a></div> + +<p>This documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support Gecko-based software. We provide for them the support of these products on Windows, Linux/Unix and OS X platforms.</p> + +<h3 id="Accessible_Gecko" name="Accessible_Gecko">Accessible Gecko</h3> + +<p>Gecko is a rendering engine that Firefox, SeaMonkey, Netscape and yelp use. Gecko can render a variety of content, not just HTML and supports key web standards such as Cascading Style Sheets, Javascript and the W3C DOM. Gecko also handles the users keystrokes and mouse clicks. Gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.</p> + +<h3 id="Gecko_Based_Applications" name="Gecko_Based_Applications">Gecko Based Applications</h3> + +<p>Gecko can be used in two ways to create application:</p> + +<h4 id="Embedded_Clients" name="Embedded_Clients">Embedded Clients</h4> + +<p>Embedded clients use Gecko only in the content window, at the moment for HTML and generic XML only. They typically use standard Windows controls for their user interface -- the area outside of the client content window, plus the context menu.</p> + +<ul> + <li>on Windows platform + <ul> + <li>MFCEMBED testing client - this is a very simple package, great for testing basic HTML accessibility with your products and the Gecko rendering engine (please <a href="#Contacts">contact</a> us for a copy).</li> + <li><a class="external" href="http://kmeleon.sourceforge.net/">K-Meleon</a> - light, ultra-fast and more advanced (fully configurable) Gecko-based web browser available on the Windows platform</li> + </ul> + </li> + <li>on Linux/Unix platform + <ul> + <li><a class="external" href="http://live.gnome.org/Yelp">Yelp help viewer</a> - the help viewer in Gnome</li> + <li><a class="external" href="http://www.gnome.org/projects/evolution/">Evolution email</a> - provides integrated mail, addressbook and calendaring functionality to users of the GNOME desktop.</li> + </ul> + </li> + <li>on Mac platform + <ul> + <li><a class="external" href="http://caminobrowser.org/">Camino</a> - web browser for OS X</li> + </ul> + </li> +</ul> + +<h4 id="XUL_Applications" name="XUL_Applications">XUL Applications</h4> + +<p>XUL applications make full use of the Gecko architecture, not only for HTML content, but also for the entire user interface. Widgets such as menus, tab panels, tree views and dialogs are provided via an XML language called XUL (eXtensible User-interface Language). None of the user interface contains standard OS controls. This is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). Developing a XUL window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets.</p> + +<p>Examples of XUL applications:</p> + +<ul> + <li><a class="external" href="http://www.mozilla.com/en-US/firefox/">Firefox</a> - web-browser</li> + <li><a class="external" href="http://www.mozilla.com/en-US/thunderbird/">Thunderbird</a> - email client</li> + <li><a class="external" href="http://www.seamonkey-project.org/">Seamonkey</a> - web-browser, advanced e-mail and newsgroup client, IRC chat client, and HTML editing made simple</li> + <li><a class="external" href="http://www.mozilla.org/projects/calendar/sunbird/">Sunbird</a> - cross-platform calendar application</li> + <li><a class="external" href="http://www.kompozer.net/">KompoZer</a> - a complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver.</li> + <li><a class="external" href="http://www.openkomodo.com/">Open Komodo</a> - platform for building developer environments</li> + <li><a class="external" href="http://www.getmiro.com/">Miro</a> - a free, open source internet tv and video player</li> + <li>Any XulRunner application (<a class="external" href="http://www.songbirdnest.com/">Songbird media player</a>, etc.)</li> + <li>Extensions to other XUL apps (e.g. <a class="external" href="http://addons.mozilla.org">Firefox extensions</a>)</li> +</ul> + +<h3 id="Gecko_Version" name="Gecko_Version">Gecko Version</h3> + +<p>For Firefox and all other Gecko-based products: this documentation applies to up-to-date product builds based on Gecko 1.9.2 -- currently not available on official releases. However most of described features are supported starting from Gecko 1.9.0 (Firefox 3.0). However it's preferable to grab the current build of Firefox or any other Gecko-based product to be up to dated:</p> + +<ul> + <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox</a> recent builds</li> + <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-trunk/">Thunderbird</a> recent builds</li> + <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/seamonkey/nightly/latest-trunk/">Seamonkey</a> recent builds</li> +</ul> + +<h3 id="Determining_if_Accessibility_is_Enabled_in_a_Firefox">Determining if Accessibility is Enabled in a Firefox</h3> + +<p>Accessibility is enabled on Windows and Linux platforms by default. As well you might find helpful the <a class="link-https" href="https://addons.mozilla.org/firefox/2407/">about:accessibilityenabled Firefox</a> extension.</p> + +<h2 id="Supported_AT_APIs" name="Supported_AT_APIs">Supported AT APIs</h2> + +<h3 id="AT_APIs_terms" name="AT_APIs_terms">AT APIs terms</h3> + +<dl> + <dt><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/msaa/msaastart_9w2t.asp">Microsoft Active Accessibility (MSAA)</a></dt> + <dd>an API devised by Microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand MSAA, you'll need to read the docs on MSDN and play with the sample apps and code that come with <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742f-1f3d-4115-a8ba-2f7a6022b533&displaylang=en">MSAA SDK 1.3</a>. (I recommend SDK 1.3 because the MSAA SDK 2.0 doesn't come with the source code to the testing tools. The other differences are not important).</dd> + <dt><a class="external" href="http://www.linux-foundation.org/en/Accessibility/IAccessible2">IAccessible2 (IA2)</a></dt> + <dd>IAccessible2 is a new accessibility API which complements Microsoft's earlier work on MSAA. This API fills critical accessibility API gaps in the MSAA offering.</dd> + <dt><a class="external" href="http://www.gnome.org/~billh/at-spi-idl/html/">Assistive Technology Service Provider Interface (AT-SPI)</a></dt> + <dd>an API devised by Sun Microsystems so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand AT-SPI, you'll need to read the docs on gnome.org and play with the available sample apps and code, such as at-poke. Please note that the web docs are sometimes out of date, and the <a class="external" href="http://cvs.gnome.org/viewcvs/at-spi/">latest AT-SPI is available on CVS</a>.</dd> + <dt><a class="external" href="http://www.apple.com/macosx/features/universalaccess/">Universal Access (UA)</a></dt> + <dd>Universal Access (UA) is the Apple's accessibility framework.</dd> +</dl> + +<h3 id="Windows_platform" name="Windows_platform">Windows platform</h3> + +<p>We support MSAA (Microsoft Active Accessibility) and IAccessible2 on Windows. Also we expose <a href="/en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support" title="en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support">MS COM interfaces</a> ISimpleDOM* to provide an access to DOM tree.</p> + +<p>IAccessible2 is a set of interfaces that overlay the MSAA (IAccessible) and DOM (ISimpleDOM*) interface support. Any object that supports IAccessible will also support IAccessible2 and possibly any of the other IA2 interfaces.</p> + +<h3 id="Linux.2FUnix_platform" name="Linux.2FUnix_platform">Linux/Unix platform</h3> + +<p>We support ATK/AT-SPI interfaces on Linux.</p> + +<h3 id="Mac_platform" name="Mac_platform">Mac platform</h3> + +<p>We currently support only a subset of Universal Access. The rest of the <a class="external" href="http://wiki.mozilla.org/Mac:Accessibility">Mozilla Universal Access support</a> is in progress.</p> + +<h2 id="Accessible_Web_Specifications" name="Accessible_Web_Specifications">Accessible Web Specifications</h2> + +<p>Gecko exposes the number of XML languages including HTML to AT. Refer to <a href="/en/Accessibility/AT-APIs/Web_Specifications" title="en/ARIA_User_Agent_Implementors_Guide">accessible web specifications page</a> to learn what and how markup languages are exposed.</p> + +<h2 id="AT_APIs_Supported_Features_Details" name="AT_APIs_Supported_Features_Details">AT APIs Implementation Details</h2> + +<p>Refer to <a href="/En/Accessibility/AT-APIs/Implementation_Details" title="en/Accessibility/AT-APIs/Implementation_Details">implementation details page</a> to see how Gecko supports interesting AT API. There you will find information how AT API interfaces, roles, states and etc are mapped into Gecko accessibility API and visa versa.</p> + +<h2 id="Keyboard_User_Interface_and_API" name="Keyboard_User_Interface_and_API">Keyboard User Interface and API</h2> + +<p>Fortunately, Gecko uses the standard keyboard API's for each supported platform. The Mozilla keyboard shortcuts for content are similar to what is used in other browsers. Here is a list of <a class="external" href="http://www.mozilla.org/support/firefox/keyboard">Firefox keyboard shortcuts</a>.</p> + +<h2 id="Test_Tools" name="Test_Tools">Test Tools</h2> + +<p>Here you will find a list of tools to test accessibility Gecko-based applications.</p> + +<ul> + <li>MSAA + <ul> + <li><a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742F-1F3D-4115-A8BA-2F7A6022B533&displaylang=en">MSAA SDK tools</a> - version 1.3 is recommended instead of 2.0 because it includes source code for the tools</li> + </ul> + </li> + <li>IAccessible2 + <ul> + <li><a class="external" href="http://www.eclipse.org/actf/downloads/">Accessibility Probe</a> -- includes MSAA support as well</li> + </ul> + </li> + <li>ATK/AT-SPI + <ul> + <li><a class="external" href="http://live.gnome.org/Accerciser">Accerciser</a> - interactive Python accessibility explorer for the GNOME desktop</li> + </ul> + </li> + <li>Gecko + <ul> + <li><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a> has an ability to test Gecko accessibility layer, supports base features.</li> + <li>Firebug</li> + </ul> + </li> +</ul> + +<h2 id="Screen_Readers" name="Screen_Readers">Screen Readers</h2> + +<p>Here's a list of screen readers we are oriented to in the first place.</p> + +<ul> + <li>Windows platform + <ul> + <li><a class="external" href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a></li> + <li><a class="external" href="http://www.gwmicro.com/">Windows Eyes</a></li> + <li><a class="external" href="http://www.nvda-project.org/">NVDA</a></li> + </ul> + </li> + <li>Linux/Unix platform + <ul> + <li><a class="external" href="http://live.gnome.org/Orca">Orca</a></li> + </ul> + </li> + <li>OS X platform + <ul> + <li><a class="external" href="http://www.apple.com/accessibility/voiceover/">VoiceOver</a></li> + </ul> + </li> +</ul> + +<h2 id="Contacts" name="Contacts">Contacts</h2> + +<p>Please discuss accessibility issues on the <a class="external" href="http://groups.google.com/group/mozilla.dev.accessibility/topics">Mozilla Accessibility groups</a> or on the <a class="link-irc" href="irc://irc.mozilla.org/accessibility">Mozilla Accessibility IRC channel</a>.</p> diff --git a/files/ru/web/accessibility/index.html b/files/ru/web/accessibility/index.html new file mode 100644 index 0000000000..5906df0a22 --- /dev/null +++ b/files/ru/web/accessibility/index.html @@ -0,0 +1,54 @@ +--- +title: Доступность +slug: Web/Accessibility +tags: + - Accessibility + - Advanced + - Landing + - TopicStub + - Веб-разработка +translation_of: Web/Accessibility +--- +<p><span class="seoSummary">Доступность (Accessibility, A11y в англоязычной среде) в веб-разработке — это обеспечение возможности использования сайтов как можно большим числом людей, включая тех, чьи способности как-либо ограничены. </span></p> + +<p>Технологии облегчают жизнь многим людям. А людям с ограниченными возможностями технологии дают такие возможности, которые ранее им были недоступны. Доступность в контексте разработки подразумевает создание такого контента, пользоваться которым мог бы каждый, несмотря на индивидуальные физические или когнитивные способности и вне зависимости от того, как они получают доступ в сеть.</p> + +<p>«Термин "специальные возможности" часто применяется для описания возможности использования или удобства использования системы людьми с ограниченными возможностями, например, инвалидами на креслах-колясках. Это понятие следует понимать более широко, например, оно охватывает шрифт Брайля, пандусы для инвалидов на креслах-колясках, аудио-сигналы на пешеходных переходах, оборудованные рифленой тактильной плиткой пешеходные дорожки, разработку веб-сайтов и так далее." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Статья Accessibility в английской Википедии</a></p> + +<p>"<strong>Интернет принципиально создан для всех людей на Земле,</strong> независимо от их аппаратных, программных, языковых, культурных, территориальных, физических или умственных способностей." <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="Documentation" id="Documentation" name="Documentation">Документация</h2> + +<dl> + <dt><a href="/ru/docs/Accessibility/Web_Development" title="Accessibility Web Development">Веб-разработка</a></dt> + <dd>Набор статей для привлечения внимания к проблемам веб-разработки в мире специальных возможностей.</dd> + <dt><a href="/ru/docs/Accessibility/ARIA" title="/ru/docs/Accessibility/ARIA">ARIA</a></dt> + <dd>Набор статей о том, как сделать HTML-файлы доступнее с помощью ARIA.</dd> + <dt><a href="/ru/docs/Accessibility/AT_Development" title="AT Development">Разработка вспомогательных технологий (технических средств реабилитации, ТСР)</a></dt> + <dd>Набор статей для разработчиков ТСР.</dd> + <dt><a href="/ru/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt> + <dd>Этот документ предоставляет краткий список требований к разработке специальных возможностей для мобильных приложений.</dd> +</dl> + +<p><span class="alllinks"><a href="/ru/docs/tag/Accessibility" title="/ru/docs/tag/Accessibility">Смотреть все статьи о Специальных возможностях...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Инструменты для веб-разработчиков</h2> + +<ul> + <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs, эмулятор программы экранного доступа</a></li> + <li><a class="external" href="https://addons.mozilla.org/ru/firefox/addon/claws/">Claws - эмулятор программы экранного доступа</a></li> +</ul> + +<p><span class="alllinks"><a href="/ru/docs/tag/Accessibility:Tools" title="en-US/docs/tag/Accessibility:Tools">Смотреть всё...</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">Другие полезные сайты</h2> + +<ul> + <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Список программ экранного доступа</a></li> +</ul> +</div> +</div> diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html new file mode 100644 index 0000000000..00b91b8257 --- /dev/null +++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -0,0 +1,206 @@ +--- +title: Навигация с клавиатуры в JavaScript +slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +tags: + - Accessibility + - DOM +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +<p class="seoSummary">Как сделать для JavaScript-виджетов на основе span или div возможность навигации с клавиатуры.</p> + +<h3 id="Обзор">Обзор</h3> + +<p>Веб-приложения часто используют JavaScript, чтобы имитировать работу различных элементов, перешедших в веб с десктопных приложений: динамические меню, закладки, нестандартные элементы форм. Все эти элементы можно назвать виджетами. В вёрстке виджеты обычно состоят из набора HTML-элементов {{HTMLElement("div")}} и {{HTMLElement("span")}}, которые по умолчанию не предоставляют возможности работать с ними, используя клавиатуру. В данной статье описывается техника, позволяющая сделать JS-виджеты управляемыми с клавиатуры.</p> + +<h3 id="Использование_tabindex">Использование tabindex</h3> + +<p>Атрибут <code>tabindex</code> был представлен в спецификации HTML 4. Он позволяет задать порядок, в котором элементы будут получать фокус при навигации с клавиатуры. Текущая реализация, описанная в HTML 5 draft specs, довольно сильно отличается от первоначальной. Все распространённые браузеры теперь придерживаются новой спецификации.</p> + +<p>В данной таблице описано поведение элементов в зависимости от значения атрибута <code>tabindex</code>:</p> + +<table class="fullwidth-table" style="width: 75% !important;"> + <tbody> + <tr> + <th>Атрибут <code>tabindex</code></th> + <th> + <p>Фокус при помощи мыши или программно через <code>element.focus()</code></p> + </th> + <th>Фокус при навигации с клавиатуры (Tab)</th> + </tr> + <tr> + <td>Отсутствует</td> + <td>Работает согласно правилам платформы для конкретного элемента (возможен для элементов форм, ссылок и т.п.)</td> + <td>Работает согласно правилам платформы для конкретного элемента</td> + </tr> + <tr> + <td>Менее нуля (<code>tabindex="-1"</code>)</td> + <td>Возможен</td> + <td>Невозможен. Разработчик должен использовать <code><a href="/ru/DOM/Element.focus">focus()</a></code> при нажатии стрелочек на клавиатуре и других клавиш.</td> + </tr> + <tr> + <td>Нуль (<code>tabindex="0"</code>)</td> + <td>Возможен</td> + <td>Происходит поочередно, исходя из позиции элемента внутри документа</td> + </tr> + <tr> + <td>Более нуля (например <code>tabindex="33"</code>)</td> + <td>Возможен</td> + <td>Значение атрибута <code>tabindex</code> указывает очередность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придет на такие элементы раньше, чем на элементы с <code>tabindex="0"</code> и элементы, которые способны получить фокус без атрибута <code>tabindex</code> (например, <code>tabindex="7"</code> получит фокус раньше <code>tabindex="11"</code>)</td> + </tr> + </tbody> +</table> + +<h4 id="Простые_контролы">Простые контролы</h4> + +<p>Чтобы сделать простой виджет доступным через клавишу Tab, задайте <code>tabindex="0"</code> на HTML элементах {{HTMLElement("div")}} или {{HTMLElement("span")}}, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется {{HTMLElement("span")}}.</p> + +<p><em>Пример 1: Простой виджет, эмулирующий работу чекбосов путем смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.</em></p> + +<pre class="brush: html"><!-- Без атрибута tabindex, элементы <span> не смогут принимать фокус с клавиатуры --> +<div> + <span role="checkbox" aria-checked="true" tabindex="0"> + <img src="checked.gif" role="presentation" alt="" /> + Добавить декоративную корзину с фруктами + </span> +</div> +<div> + <span role="checkbox" aria-checked="true" tabindex="0"> + <img src="checked.gif" role="presentation" alt="" /> + Добавить поющую телеграмму + </span> +</div> +<div> + <span role="checkbox" aria-checked="false" tabindex="0"> + <img src="unchecked.gif" role="presentation" alt="" /> + С предоплатой + </span> +</div> +</pre> + +<h4 id="Сгруппированные_контролы">Сгруппированные контролы</h4> + +<p>Безусловно есть необходимость создания более сложных виджетов. В качестве примеров можно привести меню, панели табов, различные динамические таблицы, представления для информации, имеющей древовидную структуру. Для таких контролов родительский элемент должен иметь атрибут <code>tabindex="0"</code>. В таком случае он сможет попасть в фокус с клавиатуры. Все дочерние элменты (пункты меню, отдельные табы, ячейки, строки) должны иметь <code>tabindex="-1"</code>, чтобы не попадать в фокус при нажатии tab. Пользователи должны иметь возможность путешествовать по дочерним элементам при помощи стрелочек на клавиатуре.</p> + +<p>Ниже приведен пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню ({{HTMLElement("ul")}}), разработчик должен программно управлять фокусом, реагируя на нажития клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.</p> + +<p><em>Пример 2: Меню, использующее атрибут tabindex для осуществления доступа с клавиатуры</em></p> + +<pre class="brush: html"><ul id="mb1" tabindex="0"> + <li id="mb1_menu1" tabindex="-1"> Шрифт + <ul id="fontMenu" title="Шрифт" tabindex="-1"> + <li id="sans-serif" tabindex="-1">Sans-serif</li> + <li id="serif" tabindex="-1">Serif</li> + <li id="monospace" tabindex="-1">Monospace</li> + <li id="fantasy" tabindex="-1">Fantasy</li> + </ul> + </li> + <li id="mb1_menu2" tabindex="-1"> Стиль + <ul id="styleMenu" title="Стиль" tabindex="-1"> + <li id="italic" tabindex="-1">Наклонный</li> + <li id="bold" tabindex="-1">Жирный</li> + <li id="underline" tabindex="-1">Подчеркнутый</li> + </ul> + </li> + <li id="mb1_menu3" tabindex="-1"> Выравнивание + <ul id="justificationMenu" title="Выравнивание" tabindex="-1"> + <li id="left" tabindex="-1">Слева</li> + <li id="center" tabindex="-1">По центру</li> + <li id="right" tabindex="-1">Справа</li> + <li id="justify" tabindex="-1">По ширине</li> + </ul> + </li> +</ul></pre> + +<h4 id="Неактивные_(disabled)_контролы">Неактивные (disabled) контролы</h4> + +<p>Когда элемент управления становится неактивным, он должен не попадать в фокус при нажатии на tab, что обеспечивается выставлением у элемента атрибута <code>tabindex="-1"</code>. Обратите внимание, что неактивные элементы в пределах сгруппированного виджета (такие как, подпункты меню ) должны иметь возможность быть выбранными при помощи стрелочек на клавиатуре.</p> + +<h3 id="Управление_фокусом_внутри_виджета">Управление фокусом внутри виджета</h3> + +<p>Когда пользователь уходит с виджета, а потом возвращается обратно, фокус должен вернутся на определенный элемент, у которого был фокус раньше. Например, на конкретный элемент дерева или ячейку. Есть два варианта, которыми этого можно добиться:</p> + +<ol> + <li>Переходящий <code>tabindex</code>: програмное перемещение фокуса</li> + <li><code>aria-activedescendant</code>: управление «виртуальным» фокусом</li> +</ol> + +<h4 id="Техника_первая_Переходящий_tabindex">Техника первая: Переходящий tabindex</h4> + +<p>Идея данной техники заключается в выставлении атрибута <code>tabindex</code> в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдет табом с виджета, а потом вернется обратно, элемент восстановит фокус правильно. Заметьте, что выставляя <code>tabindex</code> в "0", необходимо выставлять <code>tabindex="-1"</code> для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.</p> + +<p>Для этого необходимо слушать событие keydown для каждого дочернего элемента виджета. Когда пользователь нажимает на стрелочки на клавиатуре, чтобы переместиться на другой элемент следует:</p> + +<ol> + <li>программно применить фокус к другому элементу</li> + <li>изменить tabindex элемента в фокусе на 0</li> + <li>изменить tabindex предыдущего элемента на -1</li> +</ol> + +<p>По ссылке Вы можете увидеть пример <a href="https://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html">WAI-ARIA tree view</a>, использующий эту технику.</p> + +<h5 id="Советы">Советы</h5> + +<h6 id="Используйте_element.focus()_чтобы_задать_фокус_элементу">Используйте element.focus() чтобы задать фокус элементу</h6> + +<p>Не используйте <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошел фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте <code>element.focus()</code>.</p> + +<h6 id="Используйте_событие_onfocus_чтобы_отслеживать_фокус">Используйте событие onfocus чтобы отслеживать фокус</h6> + +<p>При разработке не стоит расчитывать, что фокус будет меняться только в следствие манипуляций пользователя с клавиатурой и мышью. Вспомогательные программы, такие как screen readers могут задавать фокус элементам. Отслеживайте события <code>onfocus</code> и <code>onblur</code>, вместо событий мыши и клавиатуры.</p> + +<p><code>onfocus</code> и <code>onblur могут быть использованы с любыми елементами.</code> Сейчас в стандартах не описано метода для получения элемента, находящегося в фокусе. Поэтому если вам потребуется отслеживать элемент с фокусом, его надо будет запоминать в переменную.</p> + +<h4 id="Техника_вторая_aria-activedescendant">Техника вторая: aria-activedescendant</h4> + +<p>Эта техника позволяет объединить каждый отдельно взятый обработчик событий в контейнер графического элемента и использовать <code>aria-activedescendent</code> для слежения за "виртуальным" фокусом . (Для получения более подробной информации относительно ARIA обратите внимание на <a href="/ru/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">обзор доступных веб-приложений и виджетов </a>.)</p> + +<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a href="https://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p> + +<h5 id="Tips">Tips</h5> + +<h6 id="scrollIntoView">scrollIntoView</h6> + +<p>Note that the use of this pattern requires the author to ensure that the current <em>focused</em> widget is scrolled into view. You should be able to use the {{domxref("element.scrollIntoView()")}} function, but we recommend confirming this works for you in your target browsers using the <a href="https://www.quirksmode.org/dom/tests/scrollintoview.html">quirksmode test</a>.</p> + +<h6 id="Issues">Issues</h6> + +<ul> + <li><a href="https://www.quirksmode.org/dom/w3c_cssom.html">quirksmode reports problems in Opera, and Konqueror</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=450405">Firefox 3.0.1 introduced bug</a></li> +</ul> + +<h3 id="Рекомендации">Рекомендации</h3> + +<h4 id="Используйте_onkeydown_для_отлова_событий_вместо_onkeypress">Используйте onkeydown для отлова событий вместо onkeypress</h4> + +<p>В IE событие <code>keypress</code> срабатывает только для буквенно-цифровых клавиш. Используйте <code>onkeydown</code> вместо этого.</p> + +<h4 id="Убедитесь_что_клавиатура_и_мышь_производят_одинаковое_действие">Убедитесь, что клавиатура и мышь производят одинаковое действие</h4> + +<p>Чтобы обеспечить независимый от устройства ввода механизм взаимодействия с пользователем, обработчики событий мыши и клавиатуры должны совместно использовать код там, где это необходимо. Например, код, который обновляет значение <code>tabindex</code> или стили, когда пользователь переключается между элементами c помощью стрелок, должен выполняться и обработчиками клика мыши, чтобы применить те же самые изменения.</p> + +<h4 id="Убедитесь_что_можно_использовать_клавиатуру_для_активации_элемента">Убедитесь, что можно использовать клавиатуру для активации элемента </h4> + +<p>Чтобы обеспечить использование клавиатуры для активации элемента, любые обработчики событий мыши должны быть также связаны с событиями клавиатуры. Например, чтобы клавиша Enter активировала элемент, если у вас есть <code>onclick="doSomething()"</code>, вам необходимо также связать <code>doSomething()</code> с событием нажатия клавиши: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p> + +<h4 id="Не_используйте_focus_для_стилизации_фокусировки_(если_вы_поддерживаете_IE_7_и_более_ранние)">Не используйте :focus для стилизации фокусировки (если вы поддерживаете IE 7 и более ранние)</h4> + +<p>IE 7 и более ранние версии не поддерживают <code>:focus</code> псевдо-селектор; не используйте его для стилизации фокуса. Вместо этого, установите стили с помощью обработчика событий <code>onfocus</code>, например, добавив название CSS стиля аттрибуту <code>class</code>.</p> + +<h4 id="Always_draw_the_focus_for_tabindex-1_items_and_elements_that_receive_focus_programatically">Always draw the focus for tabindex="-1" items and elements that receive focus programatically</h4> + +<p>IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like <code>this.style.backgroundColor = "gray";</code> or add a dotted border via <code>this.style.border = "1px dotted invert"</code>. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).</p> + +<h4 id="Prevent_used_key_events_from_performing_browser_functions">Prevent used key events from performing browser functions</h4> + +<p>If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns <code>false</code>, the event will not be propagated beyond your handler.</p> + +<p>For example:</p> + +<pre class="brush: html"><span tabindex="-1" onkeydown="return handleKeyDown();"></pre> + +<p>If <code>handleKeyDown()</code> returns <code>false</code>, the event will be consumed, preventing the browser from performing any action based on the keystroke.</p> + +<h4 id="Don't_rely_on_consistent_behavior_for_key_repeat_at_this_point">Don't rely on consistent behavior for key repeat, at this point</h4> + +<p>Unfortunately <code>onkeydown</code> may or may not repeat depending on what browser and OS you're running on.</p> diff --git a/files/ru/web/accessibility/mobile_accessibility_checklist/index.html b/files/ru/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..3b5bfdd43f --- /dev/null +++ b/files/ru/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,90 @@ +--- +title: Контрольный список по мобильной доступности +slug: Web/Accessibility/Mobile_accessibility_checklist +tags: + - Мобильная разработка + - доступность +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +<div class="summary"> +<p><span class="seoSummary">Этот документ содержит краткий список требований доступности для разработчиков мобильных приложений. Он будет обновляться по мере появления новых техник и подходов.</span></p> +</div> + +<h2 id="Цвет">Цвет</h2> + +<ul> + <li>Контраст цвета <strong>ДОЛЖЕН</strong> соответствовать требованиям уровня AA <a href="http://www.w3.org/TR/WCAG/">WCAG 2.0</a>: + + <ul> + <li>Коэффициент контрастности 4.5:1 для обычного текста (менее 18 пунктов или 14 пунктов для жирного текста).</li> + <li>Коэффициент контрастности 3:1 для крупного текста (минимум 18 пунктов или 14 пунктов для жирного текста).</li> + </ul> + </li> + <li>Информация, передаваемая через цвет, <strong>ДОЛЖНА</strong> быть доступна и другими способами (подчёркнутый текст для ссылок и т. д.).</li> +</ul> + +<h2 id="Видимость">Видимость</h2> + +<ul> + <li>Техники сокрытия содержимого, такие как нулевая непрозрачность, порядок z-индекса и размещение вне экрана, <strong>НЕ ДОЛЖНЫ</strong> использоваться исключительно для управления видимостью.</li> + <li>Всё, кроме видимого в данный момент экрана, <strong>ДОЛЖНО</strong> быть действительно невидимым: + <ul> + <li><strong>ИСПОЛЬЗУЙТЕ </strong><code>hidden</code><strong> </strong>атрибут или свойство<strong> </strong><code>visibility</code><strong> </strong>или изменяйте тип отображения.</li> + <li>Без абсолютной необходимости, <strong>НЕ ИСПОЛЬЗУЙТЕ</strong> <code>aria-hidden</code> атрибут.</li> + </ul> + </li> +</ul> + +<h2 id="Фокус">Фокус</h2> + +<ul> + <li>Все интерактивные элементы <strong>ДОЛЖНЫ</strong> иметь состояние фокуса: + + <ul> + <li>Стандартные элементы, такие как ссылки, кнопки и поля формы фокусируемые по умолчанию.</li> + <li>Нестандартные элементы <strong>ДОЛЖНЫ</strong> иметь соответствующую <a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a>, назначенную им. Например, кнопка, ссылка или чекбокс.</li> + </ul> + </li> + <li>Фокус должен обрабатываться в логическом порядке и последовательным образом.</li> +</ul> + +<h2 id="Текстовые_эквиваленты">Текстовые эквиваленты</h2> + +<ul> + <li>Текстовый эквивалент <strong>ДОЛЖЕН</strong> быть предусмотрен для каждого не строго презентационного нетекстового элемента в приложении. + + <ul> + <li>Используйте <em>alt</em> и <em>title</em> там, где это уместно (<a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">см. статью</a> Steve Faulkner's про использование HTML атрибута {{ htmlelement("title") }}).</li> + <li>Если вышеуказанные атрибуты неприменимы, используйте соответствующие <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA Properties</a>, такие как <code>aria-label</code>, <code>aria-labelledby</code>, или <code>aria-describedby</code>.</li> + </ul> + </li> + <li>Необходимо <strong>ИЗБЕГАТЬ</strong> текста внутри изображений.</li> + <li>Все элементы формы <strong>ДОЛЖНЫ</strong> иметь метки ({{ htmlelement("label") }} элементы) в интересах пользователей программы чтения с экрана.</li> +</ul> + +<h2 id="Обработка_состояния">Обработка состояния</h2> + +<ul> + <li>Стандартные элементы, такие как радиокнопки и чекбоксы обрабатываются операционной системой. Однако, для других кастомных элементов изменения состояния должны быть предоставлены через <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA States</a>, такие как <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code>, and <code>aria-pressed</code>.</li> +</ul> + +<h2 id="Общие_рекомендации">Общие рекомендации</h2> + +<ul> + <li><strong>ДОЛЖНО</strong> быть указано название приложения ({{ htmlelement("title") }} элемент).</li> + <li>Заголовки <strong>НЕ ДОЛЖНЫ</strong> нарушать иерархическую структуру. + <pre class="brush: html"><h1>Заголовок верхнего уровня</h1> + <h2>Вторичный заголовок</h2> + <h2>Другой вторичный заголовок</h2> + <h3>Заголовок низкого уровня</h3></pre> + </li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA Landmark Roles</a> <strong>СЛЕДУЕТ </strong>использовать для описания приложения или структуры документа, такие как <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li> + <li>Обработчики сенсорных событий <strong>ДОЛЖНЫ</strong> запускаться только при соответствующих событиях.</li> + <li>Области нажатия <strong>ДОЛЖНЫ</strong> быть достаточно большими, чтобы пользователь мог взаимодействовать с ними (см. статью <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> с полезными рекомендациями по размеру области нажатия для сенсорного объекта).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">original version of this document</a> was written by <a href="http://yzen.github.io/">Yura Zenevich</a>.</p> +</div> + +<p> </p> diff --git a/files/ru/web/accessibility/understanding_wcag/index.html b/files/ru/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/ru/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/ru/web/accessibility/understanding_wcag/keyboard/index.html b/files/ru/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..1b92442abf --- /dev/null +++ b/files/ru/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,87 @@ +--- +title: Русский +slug: Web/Accessibility/Understanding_WCAG/Keyboard +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +<p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы веб-страница была полностью доступной, она должна быть управляема кем-то, кто использует только клавиатуру для доступа к ней и управления ею.</span> <span title="">Сюда входят пользователи программ чтения с экрана, но также могут быть пользователи, у которых есть проблемы с использованием указывающего устройства, такого как мышь или трекбол, или у которых мышь не работает в данный момент, или которые просто предпочитают использовать клавиатуру для ввода, когда это возможно.</span></span></p> + +<p>Фокусируемые элементы должны иметь интерактивную семантику</p> + +<p>Если элемент можно сфокусировать с помощью клавиатуры, он должен быть интерактивным; то есть пользователь должен иметь возможность что-то сделать с ним и произвести какое-либо изменение (например, активировать ссылку или изменить параметр).</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> One important exception to this rule is if the element has <code>role="document" </code>applied to it, <strong>inside </strong>an interactive context (such as <code>role="application"</code>). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").</p> +</div> + +<p>Most interactive elements are focusable by default; you can make an element focusable by adding a <code>tabindex=0</code> attribute value to it. However, you should only add <code>tabindex</code> if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.</p> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Avoid_using_tabindex_attribute_greater_than_zero">Avoid using <code>tabindex</code> attribute greater than zero</h2> + +<p>The <code>tabindex</code> attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their <code>tabindex</code> values (1, then 2, then 3, etc.).</p> + +<p>This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive <code>tabindex</code> values.</p> + +<h3 id="See_also_2">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding focus order</a></li> + <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don't use tabindex greater than 0</a></li> +</ul> + +<h2 id="Clickable_elements_must_be_focusable_and_should_have_interactive_semantics">Clickable elements must be focusable and should have interactive semantics</h2> + +<p>If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.</p> + +<p>An element is clickable if it has an <code>onclick</code> event handler defined. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. You can make it operable with the keyboard by defining an <code>onkeydown</code> event handler; in most cases, the action taken by event handler should be the same for both types of events.</p> + +<h3 id="See_also_3">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Interactive_elements_must_be_able_to_be_activated_using_a_keyboard">Interactive elements must be able to be activated using a keyboard</h2> + +<p>If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.</p> + +<h3 id="See_also_4">See also</h3> + +<ul> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Interactive_elements_must_be_focusable">Interactive elements must be focusable</h2> + +<p>If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. That will add the element to the list of elements that can be focused by pressing the <kbd>Tab</kbd> key, in the sequence of such elements as defined in the HTML document.</p> + +<h3 id="See_also_5">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> +</ul> + +<h2 id="Focusable_element_must_have_focus_styling">Focusable element must have focus styling</h2> + +<p>Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS pseudo-class.</p> + +<p>Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.</p> + +<p>If you create your own focusable components, be sure that you also define focus styling for them.</p> + +<h3 id="See_also_6">See also</h3> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Using CSS to change the presentation of a UI component when it receives focus</a></li> +</ul> diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html new file mode 100644 index 0000000000..e63497f6ee --- /dev/null +++ b/files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -0,0 +1,56 @@ +--- +title: Цветовой контраст +slug: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +tags: + - WCAG + - Контраст + - доступность +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +--- +<h2 id="Описание_проблемы">Описание проблемы</h2> + +<p>Цветовой контраст между фоном и содержимым переднего плана (обычно текстом) должен быть минимальным, чтобы обеспечить удобство чтения. Хорошо иметь крутой дизайн на своем сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.</p> + +<p>Пример хорошего контраста:<img alt="An example of good color contrast consisting of the words good contrast with a light purple background." src="https://mdn.mozillademos.org/files/16466/Screen_Shot_2019-02-04_at_5.31.23_PM.png" style="height: 310px; width: 810px;"></p> + +<p>Пример плохого контраста:<img alt="An example of bad color contrast consisting of the words bad contrast with a dark purple background." src="https://mdn.mozillademos.org/files/16467/Screen_Shot_2019-02-04_at_5.31.34_PM.png" style="height: 316px; width: 814px;"></p> + +<p>Наличие хорошего цветового контраста на вашем сайте принесёт пользу всем вашим пользователям, но в особенности будет полезно пользователям с определенными типами дальтонизма и другими подобными условиями, которые испытывают затруднения при распознавании похожих цветов.</p> + +<h2 id="Связанные_с_WCAG_критерии_успеха">Связанные с WCAG критерии успеха</h2> + +<dl> + <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Минимальный контраст (AA)</a></dt> + <dd>Цветовой контраст между фоном и содержимым переднего плана должен быть минимальным, чтобы обеспечить удобочитаемость: + <ul> + <li>Текст и его фон должны иметь контрастность не менее 4.5.1.</li> + <li>Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 3.1. Крупный текст определяется как минимум 18pt или 14pt полужирный.</li> + </ul> + </dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Улучшенный контраст (AAA)</a></dt> + <dd>Это следует и основывается на критерии 1.4.3. + <ul> + <li>Текст и его фон должны иметь контрастность не менее 7.1.</li> + <li>Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 4.5.1.</li> + </ul> + </dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Нетекстовый контраст (AA)</a> (добавлен в 2.1)</dt> + <dd>Минимальное соотношение цветовой контрастности для компонентов пользовательского интерфейса и графических объектов должно составлять 3 к 1.</dd> +</dl> + +<h2 id="Решение">Решение</h2> + +<p>При выборе цветовой схемы для вашего сайта, выберите цвета переднего плана и фона, которые имеют хороший контраст. Сделайте цветовой контраст настолько хорошим, насколько это возможно в рамках ваших проектных ограничений — в идеале используйте рейтинг AAA (см. 1.4.6 выше), или в крайнем случае, соответствуйте рейтингу AA (см. 1.4.3 выше).</p> + +<p>Если вы используете нетекстовый контент, такой как видео или анимация, вы должны следовать 1.4.11.</p> + +<p>Чтобы проверить свой контраст при выборе цвета, используйте такой инструмент, как <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Color Contrast Checker</a> от WebAIM.</p> + +<p>Вы также можете проверить цветовой контраст на лету с помощью инструментов разработчика Firefox — см. наше руководство <a href="/ru/docs/Tools/Инспектор_доступности">Инспектор доступности</a>, и в частности раздел <a href="/ru/docs/Tools/Инспектор_доступности#Цветовой_контраст">Цветовой контраст</a>.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Цвет и цветовой контраст</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Понимание нетекстового контраста</a></li> +</ul> diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/index.html new file mode 100644 index 0000000000..8388c3206f --- /dev/null +++ b/files/ru/web/accessibility/understanding_wcag/perceivable/index.html @@ -0,0 +1,359 @@ +--- +title: Perceivable +slug: Web/Accessibility/Understanding_WCAG/Perceivable +tags: + - Accessibility + - NeedsTranslation + - Principle 1 + - TopicStub + - WCAG + - Web Content Accessibility Guidelines + - contrast + - different presentation + - text alternatives + - time-based media +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +<p class="summary">This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p> + +<div class="note"> +<p><strong>Note</strong>: To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p> +</div> + +<h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2> + +<p>The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> + <td>All images that convey meaningful content should be given suitable alternative text.</td> + <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td> + </tr> + <tr> + <td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td> + <td> + <p>A text description may work, or an accessible data table (see <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p> + </td> + </tr> + <tr> + <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td> + <td> + <p>See <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p> + </td> + </tr> + <tr> + <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td> + <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code><button>Upload image</button></code>). For further information on other UI controls, see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td> + </tr> + <tr> + <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td> + <td> + <p>Decorative images should be implemented using CSS background images (see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p> + + <p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p> + </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p> +</div> + +<h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2> + +<p>Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td> + <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + </tr> + <tr> + <td colspan="1">1.2.2 Provide captions for web-based video (A)</td> + <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles & closed captions</a> (YouTube).</td> + </tr> + <tr> + <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td> + <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + </tr> + <tr> + <td colspan="1">1.2.4 Provide captions for live audio (AA)</td> + <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.5 Provide audio descriptions for prerecorded video (AA)</td> + <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td> + <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.7 Provide extended video with audio descriptions (AAA)</td> + <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td> + <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + </tr> + <tr> + <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td> + <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p> +</div> + +<h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2> + +<p>This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> + <td> + <p>Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p> + + <ul> + <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li> + <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li> + <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li> + </ul> + </td> + <td>The whole of + <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> + </td> + </tr> + <tr> + <td colspan="1">1.3.2 Meaningful content sequence (A)</td> + <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td> + <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td> + </tr> + <tr> + <td colspan="1">1.3.3 Sensory characteristics (A)</td> + <td> + <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p> + + <ul> + <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li> + <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li> + <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li> + </ul> + + <div class="note"> + <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p> + </div> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td> + <td> + <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p> + </td> + </tr> + <tr> + <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p> </p> + + <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field. </p> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td> + </tr> + <tr> + <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p> +</div> + +<h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2> + +<p>This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td> + <td> + <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p> + </td> + <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.2 Audio controls (A)</td> + <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td> + <td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.3 Minimum contrast (AA)</td> + <td> + <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p> + + <ul> + <li>Text and its background should have a contrast ratio of at least 4.5.1.</li> + <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li> + </ul> + </td> + <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.4 Resize text (AA)</td> + <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.5 Images of text (AA)</td> + <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> + <td> + <p>This follows, and builds on, criterion 1.4.3.</p> + + <ul> + <li>Text and its background should have a contrast ratio of at least 7.1.</li> + <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li> + </ul> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.7 Low or no background audio (AAA)</td> + <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.8 Visual presentation (AAA)</td> + <td> + <p>For text content presentation, the following should be true:</p> + + <ul> + <li>Foreground and background colors should be user-selectable.</li> + <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li> + <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li> + <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li> + <li>When the text size is doubled, the content should not need to be scrolled.</li> + </ul> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> + <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <ul> + <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) </li> + <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li> + <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td> + </tr> + <tr> + <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td> + </tr> + <tr> + <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p>No loss of content or functionality occurs when the following styles are applied: </p> + + <ul> + <li>Line height (line spacing) to at least 1.5 times the font size;</li> + <li>Spacing following paragraphs to at least 2 times the font size;</li> + <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> + <li>Word spacing to at least 0.16 times the font size.</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td> + </tr> + <tr> + <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p> + + <ul> + <li>dismissable (can be closed/removed)</li> + <li>hoverable (the additional content does not disappear when the pointer is over it) </li> + <li>persistent (the additional content does not disappear without user action)</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p> +</div> + +<p> </p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> + + <ol> + <li>Perceivable</li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> + </ol> + </li> +</ul> + +<p> </p> diff --git a/files/ru/web/accessibility/веб-разработка/index.html b/files/ru/web/accessibility/веб-разработка/index.html new file mode 100644 index 0000000000..3c20770967 --- /dev/null +++ b/files/ru/web/accessibility/веб-разработка/index.html @@ -0,0 +1,50 @@ +--- +title: Веб-разработка +slug: Web/Accessibility/Веб-разработка +tags: + - ARIA + - Web Development + - XUL + - доступность +translation_of: Web/Accessibility +--- +<p class="summary"><span class="seoSummary">Здесь ссылки на более подробную информацию для разработчиков о доступности (<span lang="en">accessibility</span>) в Веб и в XUL.</span></p> + +<table> + <tbody> + <tr> + <td style="vertical-align: top;"> + <h2 id="Доступность_в_Вебе">Доступность в Вебе</h2> + + <dl> + <dt><a href="/ru/docs/Accessibility/ARIA" title="http://developer.mozilla.org/ru/docs/Accessibility/ARIA">ARIA для разработчиков</a></dt> + <dd style="">ARIA позволяет делать доступным динамический HTML-контент. Examples are live content regions and JavaScript widgets.</dd> + <dt><a href="/ru/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt> + <dd>До недавнего времени у веб-разработчиков, желавших сделать свои виджеты на основе <div>, <span> и стилей доступными с клавиатуры, не было the proper techniques. Управляемость с клавиатуры — одно из минимальных требований accessibility, о которых должен знать каждый разработчик.</dd> + </dl> + + <h2 id="Доступность_XUL">Доступность XUL</h2> + + <dl> + <dt> </dt> + <dt><a href="/ru/Building_accessible_custom_components_in_XUL" title="en/Building_accessible_custom_components_in_XUL">Building accessible custom components in XUL</a></dt> + <dd>How to use DHTML Accessibility techniques to add accessibility to your custom XUL components.</dd> + <dt><a href="/ru/XUL_accessibility_guidelines" title="ru/XUL_accessibility_guidelines">Accessible XUL authoring guidelines</a></dt> + <dd>When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.</dd> + </dl> + </td> + <td style="vertical-align: top;"> + <h2 id="Внешние_ресурсы">Внешние ресурсы</h2> + + <dl> + <dt><a class="external" href="http://diveintoaccessibility.info/">Dive into Accessibility</a></dt> + <dd><small>Эта книга отвечает на два вопроса. Первый — «Зачем мне делать мой сайт более доступным?» Второй — «Как мне сделать мой сайт более доступным?»</small></dd> + <dt><a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt> + <dd>A handy web accessibility checklist, from IBM.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> |