From fd22f61b41d97ef4c8358310d92bf2e15d698d75 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 29 Sep 2022 12:52:50 +0200 Subject: [PATCH 1/3] move *.html to *.md --- .../accessibility/aria/aria_live_regions/{index.html => index.md} | 0 .../accessibility/aria/aria_techniques/{index.html => index.md} | 0 files/ru/web/accessibility/aria/{index.html => index.md} | 0 .../aria/roles/checkbox_role/{index.html => index.md} | 0 files/ru/web/accessibility/aria/roles/{index.html => index.md} | 0 files/ru/web/accessibility/{index.html => index.md} | 0 .../{index.html => index.md} | 0 .../mobile_accessibility_checklist/{index.html => index.md} | 0 .../web/accessibility/understanding_wcag/{index.html => index.md} | 0 .../understanding_wcag/keyboard/{index.html => index.md} | 0 .../perceivable/color_contrast/{index.html => index.md} | 0 .../understanding_wcag/perceivable/{index.html => index.md} | 0 12 files changed, 0 insertions(+), 0 deletions(-) rename files/ru/web/accessibility/aria/aria_live_regions/{index.html => index.md} (100%) rename files/ru/web/accessibility/aria/aria_techniques/{index.html => index.md} (100%) rename files/ru/web/accessibility/aria/{index.html => index.md} (100%) rename files/ru/web/accessibility/aria/roles/checkbox_role/{index.html => index.md} (100%) rename files/ru/web/accessibility/aria/roles/{index.html => index.md} (100%) rename files/ru/web/accessibility/{index.html => index.md} (100%) rename files/ru/web/accessibility/keyboard-navigable_javascript_widgets/{index.html => index.md} (100%) rename files/ru/web/accessibility/mobile_accessibility_checklist/{index.html => index.md} (100%) rename files/ru/web/accessibility/understanding_wcag/{index.html => index.md} (100%) rename files/ru/web/accessibility/understanding_wcag/keyboard/{index.html => index.md} (100%) rename files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/{index.html => index.md} (100%) rename files/ru/web/accessibility/understanding_wcag/perceivable/{index.html => index.md} (100%) diff --git a/files/ru/web/accessibility/aria/aria_live_regions/index.html b/files/ru/web/accessibility/aria/aria_live_regions/index.md similarity index 100% rename from files/ru/web/accessibility/aria/aria_live_regions/index.html rename to files/ru/web/accessibility/aria/aria_live_regions/index.md diff --git a/files/ru/web/accessibility/aria/aria_techniques/index.html b/files/ru/web/accessibility/aria/aria_techniques/index.md similarity index 100% rename from files/ru/web/accessibility/aria/aria_techniques/index.html rename to files/ru/web/accessibility/aria/aria_techniques/index.md diff --git a/files/ru/web/accessibility/aria/index.html b/files/ru/web/accessibility/aria/index.md similarity index 100% rename from files/ru/web/accessibility/aria/index.html rename to files/ru/web/accessibility/aria/index.md diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html b/files/ru/web/accessibility/aria/roles/checkbox_role/index.md similarity index 100% rename from files/ru/web/accessibility/aria/roles/checkbox_role/index.html rename to files/ru/web/accessibility/aria/roles/checkbox_role/index.md diff --git a/files/ru/web/accessibility/aria/roles/index.html b/files/ru/web/accessibility/aria/roles/index.md similarity index 100% rename from files/ru/web/accessibility/aria/roles/index.html rename to files/ru/web/accessibility/aria/roles/index.md diff --git a/files/ru/web/accessibility/index.html b/files/ru/web/accessibility/index.md similarity index 100% rename from files/ru/web/accessibility/index.html rename to files/ru/web/accessibility/index.md diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.md similarity index 100% rename from files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html rename to files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.md diff --git a/files/ru/web/accessibility/mobile_accessibility_checklist/index.html b/files/ru/web/accessibility/mobile_accessibility_checklist/index.md similarity index 100% rename from files/ru/web/accessibility/mobile_accessibility_checklist/index.html rename to files/ru/web/accessibility/mobile_accessibility_checklist/index.md diff --git a/files/ru/web/accessibility/understanding_wcag/index.html b/files/ru/web/accessibility/understanding_wcag/index.md similarity index 100% rename from files/ru/web/accessibility/understanding_wcag/index.html rename to files/ru/web/accessibility/understanding_wcag/index.md diff --git a/files/ru/web/accessibility/understanding_wcag/keyboard/index.html b/files/ru/web/accessibility/understanding_wcag/keyboard/index.md similarity index 100% rename from files/ru/web/accessibility/understanding_wcag/keyboard/index.html rename to files/ru/web/accessibility/understanding_wcag/keyboard/index.md 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.md similarity index 100% rename from files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html rename to files/ru/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md diff --git a/files/ru/web/accessibility/understanding_wcag/perceivable/index.html b/files/ru/web/accessibility/understanding_wcag/perceivable/index.md similarity index 100% rename from files/ru/web/accessibility/understanding_wcag/perceivable/index.html rename to files/ru/web/accessibility/understanding_wcag/perceivable/index.md From 891e3dfeff117f8bcab92c2514d3de53ed923726 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 29 Sep 2022 12:53:04 +0200 Subject: [PATCH 2/3] convert content to md --- .../aria/aria_live_regions/index.md | 168 ++-- .../aria/aria_techniques/index.md | 280 +++--- files/ru/web/accessibility/aria/index.md | 206 ++-- .../aria/roles/checkbox_role/index.md | 170 ++-- .../ru/web/accessibility/aria/roles/index.md | 4 +- files/ru/web/accessibility/index.md | 42 +- .../index.md | 276 +++--- .../mobile_accessibility_checklist/index.md | 141 ++- .../accessibility/understanding_wcag/index.md | 63 +- .../understanding_wcag/keyboard/index.md | 90 +- .../perceivable/color_contrast/index.md | 64 +- .../understanding_wcag/perceivable/index.md | 904 ++++++++++++------ 12 files changed, 1248 insertions(+), 1160 deletions(-) diff --git a/files/ru/web/accessibility/aria/aria_live_regions/index.md b/files/ru/web/accessibility/aria/aria_live_regions/index.md index 6a6ccaad427352..126a62a00ea374 100644 --- a/files/ru/web/accessibility/aria/aria_live_regions/index.md +++ b/files/ru/web/accessibility/aria/aria_live_regions/index.md @@ -3,109 +3,69 @@ title: ARIA Live Regions slug: Web/Accessibility/ARIA/ARIA_Live_Regions translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions --- -

Introduction

- -

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.

- -

Simple Live Regions

- -

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.

- -
    -
  1. aria-live: 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.
    2. -
  2. -

    aria-controls: 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".

    - -
    Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.
    -
    3. -
- -

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.

- -

For regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with aria-live="off".

- -

Simple Use Case: combobox updates useful on-screen information

- -

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.

- -

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

- -

<div role="region" id="bird-info" aria-live="polite">

- -

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.

- -

Preferring Specialized Live Region Roles

- -

In the following well-known predefined cases it is better to use a specific provided "live region role":

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleDescriptionCompatibility Notes
logChat, error, game or other type of logTo maximize compatibility, add a redundant aria-live="polite" when using this role.
statusA 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.To maximize compatibility, add a redundant aria-live="polite" when using this role.
alertError 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)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.
progressbarA hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).
marqueefor text which scrolls, such as a stock ticker.
timeror any kind of timer or clock, such as a countdown timer or stopwatch readout.
- -

Advanced Live Regions

- -

(TBD: what is supported where?)

- -
    -
  1. aria-atomic: 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.
    2. -
  2. aria-relevant: 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.
    3. -
  3. aria-labelledby: 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.
    4. -
  4. aria-describedby: 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.
    5. -
- -

Advanced Use Case: Roster

- -

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).

- -
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
-	<!-- use JavaScript to add remove users here-->
-</ul>
-
- -

Breakdown of ARIA live properties:

- -