ARIA ??? ???? HTML ??? ???? ????? ??? ??????

ARIA (??? ??? ?? ??? ??????) ?? ??? ? ??? ? ? ?? ????? ?? ????? ??????? ??? ? ? ??? HTML ??? ?? ? ??? ??? ?????. ARIA ??? ???? HTML ??? ???? ????? ??? ??? ????.

1. ??? ??? ???? ??????.
   ARIA ??? ??, ?? ?? ??? ???? ??? ??? ?????. ?? ??, ??? ?? ?? ?? ????? ?? ????? role="menu" ??? ? ??? role="menuitem" ? ?? ? ? ????. ??? ??? ??? ?? ?? ??? ?????.

    <code class="html"><div role="menu"> <div role="menuitem">Option 1</div> <div role="menuitem">Option 2</div> </div></code>

2. ?? ??? ?? ?? :
   aria-label ?? aria-labelledby ???? ??? ?? ??? ??????. ??? ???? ??? ?? ??? ?? ?? ??? ?? ?????. ?? ??:

    <code class="html"><button aria-label="Close">X</button></code>

3. ??? ??? ?????.
   Aria ?? ? ??? ??? ?? ?? (? : aria-checked , aria-disabled ) ?? ?? ?? ?? ?? (? : aria-describedby , aria-required )? ?????. ?? ??, ???? ?? :

    <code class="html"><input type="checkbox" aria-checked="true"></code>

4. ???? ?? ?? :
   aria-live ???? ?? ???? ?????? ?? ?? ????? ? ???? ? ??? ???? ??? ??????. ?? ???? ???? ?????? ? ???? ???? ?? ??? ????????.

    <code class="html"><div aria-live="polite">Status updates will appear here.</div></code>

5. ??? ?? ?? :
   ARIA? ???? HTML5? ?? ?? ??? ???? ????? ?????????. ?? ??, <div> ? ??? ???? ?? <code><nav role="navigation"></nav> ??????.

   ??? ARIA ??? ???? ?????? ?? ??? ???? ?????? ? ???? ???? ?? ???? ? ????.

   ? ???? ARIA ??? ?????? ?? ??? ??????

   ARIA ??? ???? ???? ?? ??? ? ??? ???? ?? ???? ???? ? ?????. ??? ??? ?? ?? ?????.

   1. ??? ?? ?? ARIA? ???? ????.
      Aria? ??? HTML? ???? ?? ????????. Semantic HTML5 ??? ?? ??? ?? ??? ?? ARIA? ??????.
   2. ???? ?? ??? ??????.
      ARIA ??? ???? ?? ?? ?? ??? ??? ???? ??? ??????. WAI-ARIA ?? ? ??? ?? ????????.
   3. ?? ???? ??? :
      ??? ??? ??? ????? ????? ???? ???? ARIA ??? ??? ???? ???? ? ???????.
   4. ???? ??????.
      ?? ?? ARIA ??? ???? ?? ??? ?? ? ? ????. ARIA ? ???? ??? ??? ??? ??? ????.
   5. ??? ???? ?? :
      ?? ARIA? ?? ? ???? ???? ?? ??? ?? ? ? ??? ??????. tabindex ???? ??? ?? ??? ???? ??? ??? ??? ??? ??? ????????.
   6. ???? ??? ???? ?????.
      aria-label , aria-labelledby ? aria-describedby ??? ??? ???? ??? ???? ??????. ?? ?? ???? ? ???? ??? ???? ? ??????.
   7. ???? ?? ?? :
      aria-controls , aria-owns ? ????? ?? ??? ??? ?? ? ? Focus Management? ???? ???? ????? ???? ? ??????????.
   8. ARIA ?? ?? :
      ARIA ??? ?? W3C? NU HTML ???? ?? ??? ???? ARIA ??? ??????. ?? ???? ??? ???? ?? ??? ?????.

   ???? ??? ??? ????? ? ?? ???? ARIA ??? ??????

   ARIA ??? ??? ???? ? ?? ??? ??? ?? ?? ? ??? ?? ??? ??? ??? ????? ? ?? ????? ??? ???????.

   1. Aria-Label ? Aria-Labelledby :
      ??? ??? ??? ?? ??? ??? ???? ? ?????. aria-label ? ?? ??? ??? ??? ???? aria-labelledby ???? ?? ??? ???? ??? ?? ??? ?? ?????.

       <code class="html"><button aria-label="Submit form">Submit</button> <div id="form-description">This form collects your details for processing.</div> <form aria-labelledby="form-description">...</form></code>

   2. aria-live :
      ? ??? ???? ???? ?????? ? ??????. ??? ??? ??? ??? ???? ????? ??? ??? ?? ?? ?? ??? ?? ??? ???? ? ??????.

       <code class="html"><div aria-live="assertive">Your order has been successfully submitted.</div></code>

   3. Aria-Hidden :
      ? ??? ???? ?? ??? ?? ?? ??? ??? ?? ??? ??? ????? ?? ???? ??? ?????.

       <code class="html"><img src="/static/imghw/default1.png" data-src="decorative-image.png" class="lazy" alt="" aria-hidden="true"></code>

   4. aria-expanded :
      ? ??? ???? ?? ?? ??? ?? ?? ??? ??? ??? ???? ? ?????, ?? ?? ??? ?? ???? ????? ?????.

       <code class="html"><button aria-expanded="false">Show More</button></code>

   5. ??? ?? :
      ? ??? ???? ???? ???? ??? ???? ???? ?? ??? ????? ? ?????.

       <code class="html"><button aria-controls="content-panel">Open Panel</button> <div id="content-panel">...</div></code>

   ??? ??? ?? ? ? ????? ARIA ??? ??? ??? ??? ? ? ?????

   ARIA ??? ??? ????? ??? ??? ???? ?? ? ??? ??? ?????. ??? ???? ???? ???? ???? ? ??? ??? ? ?? ?????.

   1. ??? ? ??? ?? :
      Wave (? ??? ?? ??), AX ?? W3C? ??? ???? ?? ??? ???? ARIA ? ?? ??? ??? ?? ? ???? ???? ??????. ??? ??? ???? ??? ???? ??? ?? ? ? ????.
   2. ?? ??? ??? ?? ??? :
      NVDA (Visual Desktop Access), Jaws (Speech with Speech) ?? VoiceOver? ?? ??? ??? ???? ? ???? ???? ???????. ??? ? ???? ???? ???? ARIA ??? ????? ??? ??? ?? ??? ????? ??????.
   3. ???? ??? ?? :
      ?? ????? ??? ???? ?? ??? ?? (? : Chrome Devtools? ??? ?)? ?????? ?????? ARIA ??? ??? ????? ???? ? ??????.
   4. ??? ??? ??? ??? :
      ????? ???? ??? ??? ??? ??????. ? ???? ???? ARIA ??? ?? ?????? ??? ????? ???? ? ?? ?????.
   5. ARIA ? ?? :
      ARIA ??? ?? ?? ??, ??? ?? ??, ??? ??? ? ??? ?? ? ?? ??? ??????. ARIA ??? ?? ?? ? ??? ?????? ??????.
   6. ??? API ? ????? :
      React? ?? ?? ??? ?? ? ?????? ?? ??? ?? ? ARIA ??? ?????. ?? ?? ??? ??? ???? ???? ??????.
   7. ?? ?? ? ???? :
      ???? ??? ??? ????. ???? ???? ARIA ?? ? ?? ??? ???? ? ? ARIA ??? ????? ???? ????????.

   ??? ??? ?????? ? ????? ARIA ??? ??? ??? ???? ?????? ?? ???? ??? ? ??? ??? ?? ? ? ????.