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/aria | |
| 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/aria')
8 files changed, 927 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> |