Compare Revisions

Using the aria-orientation attribute

Revision 24273:

Revision 24273 by anastasia on

Revision 432361:

Revision 432361 by zomigi on

Title:
Using the aria-orientation attribute
Using the aria-orientation attribute
Slug:
Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute
Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute
Content:

Revision 24273
Revision 432361
n8      <div>n
9        <h3 id="Description">8      <h3 id="Description">
10          Description9        Description
11        </h3>10      </h3>
12        <p>11      <p>
13          This technique demonstrates how to use the <a class="ex12        This technique demonstrates how to use the <a class="exte
>ternal" href="http://www.w3.org/TR/wai-aria/states_and_properties>rnal" href="http://www.w3.org/TR/wai-aria/states_and_properties#a
>#aria-orientation" rel="external" target="_blank" title="http://w>ria-orientation" rel="external" target="_blank" title="http://www
>ww.w3.org/TR/wai-aria/states_and_properties#aria-orientation">ari>.w3.org/TR/wai-aria/states_and_properties#aria-orientation">aria-
>a-orientation</a> attribute.&nbsp;>orientation</a> attribute.&nbsp;
14        </p>13      </p>
15        <p>14      <p>
16          The <code>aria-orientation</code> attribute is used to 15        The <code>aria-orientation</code> attribute is used to in
>indicate whether an element is oriented horizonally or vertically>dicate whether an element is oriented horizonally or vertically.
>. 
17        </p>16      </p>
18        <h3 id="Value">17      <h3 id="Value">
19          Value18        Value
20        </h3>19      </h3>
21        <p>20      <p>
22          Vocabulary21        Vocabulary
23        </p>22      </p>
24        <table align="center" border="1" cellpadding="1" cellspac23      <table align="center" border="1" cellpadding="1" cellspacin
>ing="1" style="table-layout: fixed; width: 50%;">>g="1" style="table-layout: fixed; width: 50%;">
25          <tbody>24        <tbody>
26            <tr>25          <tr>
27              <td>26            <td>
28                vertical27              vertical
29              </td>28            </td>
30              <td>29            <td>
31                The element is oriented vertically.30              The element is oriented vertically.
32              </td>31            </td>
33            </tr>32          </tr>
34            <tr>33          <tr>
35              <td>34            <td>
36                horizontal (default)35              horizontal (default)
37              </td>36            </td>
38              <td>37            <td>
39                The element is oriented horizontally.38              The element is oriented horizontally.
40              </td>39            </td>
41            </tr>40          </tr>
42          </tbody>41        </tbody>
43        </table>42      </table>
44        <h3 id="Possible_effects_on_user_agents_and_assistive_tec43      <h3 id="Possible_effects_on_user_agents_and_assistive_techn
>hnology&nbsp;">>ology.C2.A0">
45          Possible effects on user agents and assistive technolog44        Possible effects on user agents and assistive technology&
>y&nbsp;>nbsp;
46        </h3>45      </h3>
47        <p>46      <p>
48          &nbsp;47        &nbsp;
49        </p>48      </p>
50        <div class="note">49      <div class="note">
51          <strong>Note:</strong>&nbsp;Opinions may differ on how 50        <strong>Note:</strong>&nbsp;Opinions may differ on how as
>assistive technology should handle this technique. The informatio>sistive technology should handle this technique. The information 
>n provided above is one of those opinions and therefore not norma>provided above is one of those opinions and therefore not normati
>tive.>ve.
52        </div>51      </div>
53        <h3 id="Examples">52      <h3 id="Examples">
54          Examples53        Examples
55        </h3>54      </h3>
56        <h4 id="Example_1:&nbsp;">55      <h4 id="Example_1.3A.C2.A0">
57          Example 1:&nbsp;56        Example 1:&nbsp;
58        </h4>57      </h4>
59        <p>58      <p>
60          The snippet below shows a simple slider that is oriente59        The snippet below shows a simple slider that is oriented 
>d vertically.>vertically.
61        </p>60      </p>
62        <pre class="brush: html">61      <pre class="brush: html">
n72        <h4 id="Working_Examples:">n71      <h4 id="Working_Examples.3A">
73          Working Examples:72        Working Examples:
74        </h4>73      </h4>
75        <ul>74      <ul>
76          <li>75        <li>
77            <a class="external" href="http://www.oaa-accessibilit76          <a class="external" href="http://www.oaa-accessibility.
>y.org/examplep/slider1/" title="http://www.oaa-accessibility.org/>org/examplep/slider1/" title="http://www.oaa-accessibility.org/ex
>examplep/slider1/">Slider example</a>>amplep/slider1/">Slider example</a>
78          </li>77        </li>
79          <li>
80            <a class="external" href="http://www.oaa-accessibilit
>y.org/examplep/menubar1/" title="http://www.oaa-accessibility.org 
>/examplep/menubar1/">Menubar example</a> 
81          </li>
82        </ul>78      </ul>
83        <h3 id="Notes&nbsp;">79      <h3 id="Notes.C2.A0">
84          Notes&nbsp;80        Notes&nbsp;
85        </h3>81      </h3>
86        <h3 id="Used_With_ARIA_Roles">82      <h3 id="Used_With_ARIA_Roles">
87          Used With ARIA Roles83        Used With ARIA Roles
88        </h3>84      </h3>
89        <ul>85      <ul>
90          <li>scrollbar86        <li>scrollbar
91          </li>87        </li>
92          <li>88        <li>
93            <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using89          <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_t
>_the_slider_role" title="Using the slider role">slider</a>>he_slider_role" title="Using the slider role">slider</a>
94          </li>90        </li>
95          <li>separator91        <li>separator
96          </li>92        </li>
97        </ul>93      </ul>
98        <h3 id="Related_ARIA_techniques&nbsp;">94      <h3 id="Related_ARIA_techniques.C2.A0">
99          Related ARIA techniques&nbsp;95        Related ARIA techniques&nbsp;
100        </h3>96      </h3>
101        <h3 id="Compatibility">97      <h3 id="Compatibility">
102          Compatibility98        Compatibility
103        </h3>99      </h3>
104        <p class="comment">100      <p class="comment">
105          TBD: Add support information for common UA and AT produ101        TBD: Add support information for common UA and AT product
>ct combinations> combinations
106        </p>102      </p>
107        <h3 id="Additional_resources">103      <h3 id="Additional_resources">
108          Additional resources104        Additional resources
109        </h3>105      </h3>
110        <ul>106      <ul>
111          <li>107        <li>
112            <a class="external" href="http://www.w3.org/TR/wai-ar108          <a class="external" href="http://www.w3.org/TR/wai-aria
>ia/states_and_properties#aria-orientation" title="http://www.w3.o>/states_and_properties#aria-orientation" title="http://www.w3.org
>rg/TR/wai-aria/states_and_properties#aria-orientation">WAI-ARIA s>/TR/wai-aria/states_and_properties#aria-orientation">WAI-ARIA spe
>pecification for the <code>aria-orientation</code> attribute</a>>cification for the <code>aria-orientation</code> attribute</a>
113          </li>109        </li>
114        </ul>110      </ul>
115      </div>
tt112    <p>
113      &nbsp;
114    </p>

Back to History