Web_Accessibility

Web Accessibility

What is Web Accessibility?

  • With web accessibility, you can be guaranteed to always receive information at an equal level regardless of the situation when accessing the web

2. Web Content Accessibility Guidelines (WCAG)

βœ… Perceivable : All content must be perceivable by users

  • Appropriate alternative text

    • Provide alternative text with alt attribute

    • For cases like background images where information recognition is not needed, give empty string as alt value so screen readers don't recognize it

  • Caption provision

    • Include captions or use track element inside video element to load caption files

  • Content recognition independent of color

    • Content must be recognized regardless of color, so set borders on content or add labels to make content understandable

  • Clear instruction provision

    • Write alternative text for instructions or provide visual feedback together

  • Text content luminance contrast

    • If luminance contrast is not sufficiently secured, text reading becomes difficult

    • Luminance contrast between text content and background must be 4.5:1 or higher

  • Prohibit auto-play

    • When using screen readers, it's difficult to understand page content due to overlapping auto-played sounds

  • Content distinction

    • Adjacent content must be distinguishable, so distinguish with borders, dividing lines, luminance contrast, spacing, etc.

βœ… Operable : User interface components must be operable and navigable

  • Keyboard usage guarantee

    • All functions must be usable with keyboard only

  • Focus movement

    • Focus by keyboard must move logically and be visually distinguishable

  • Operable

    • User input and controls must be provided to be operable

    • Must be able to select and operate desired elements even in situations where fine manipulation is difficult

  • Response time adjustment

    • Content with time limits must allow response time adjustment or inform end time

  • Pause time provision

    • Content that changes automatically must be controllable

  • Limit blinking and flashing usage

    • Can cause eye fatigue or photosensitive seizures, so certain conditions must be met even if used

  • Skip repeated areas

    • Provide methods to skip to main content even if provided

  • Title provision

    • Help quick access to content by providing appropriate titles

  • Appropriate link text

    • Link text must be provided to understand purpose or goal

βœ… Understandable : Content must be understandable

  • Basic language indication

    • Specify the primary language used ex) <html lang = "ko">

  • Execution according to user requirements

    • Functions not intended by users (new windows, context changes by focus, etc.) should not be executed

  • Content linear structure

    • Content must be provided in logical order

  • Table composition

    • Tables must be composed to be easily understood

  • Label provision

    • User input must have corresponding labels

    • Setting only value or placeholder attributes on <input> elements is not appropriate

    • Set id on <input> element and connect with for attribute of <label> element

  • Error correction

    • Must provide methods to correct input errors

βœ… Robust : Web content must be made robust to be accessible with future technologies

  • Prevent markup errors

    • Markup language elements must have no errors in opening/closing, nesting relationships, and attribute declarations

  • Web application accessibility compliance

    • Web applications included in content must be accessible, and if not, alternative means must be provided

3. WAI-ARIA

1. WAI-ARIA

  • WAI (Web Accessibility Initiative)

    • Organization responsible for web accessibility at W3C that sets web standards

  • ARIA (Accessible Rich Internet Applications)

    • Technology to enable people with disabilities to more easily access web content and web applications, i.e., technology for web accessibility

2. Need for WAI-ARIA

  • Can enhance web accessibility by allowing additional meaning to be given to HTML elements

3. How to Use WAI-ARIA

  1. Role

  • Attribute used to specify what role an element plays when HTML element type and role don't match

    <div role="button">Element that uses div as button</div>
    <!-- Wrong usage example of WAI-ARIA: explaining again with WAI-ARIA -->
<button role="button">button element</button>
<h1 role="button">h1 element</h1>

  1. State

  • aria-selected: Attribute that can indicate selected elements among multiple selectable elements

    <ul role="tabList">
  <!-- First tab is selected -->
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</ul>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

  1. Property

  • aria-label: Attaches a label to an element

      <!-- 1. It's hard to know what role the button plays with just HTML element structure -->
  <button> <img src="X.png" /> </button>
  <button> <img src="magnifying_glass.png" /> </button>

  <!-- 2. Using aria-label -->
  <button aria-label="Close"/> <img src="X.png" /> </button>
  <button aria-label="Search"/> <img src="magnifying_glass.png" /> </button>

  • aria-live: Indicates whether the element is an area that changes content in real-time (alert, modal, etc.)

    • Property values include polite, assertive, off(default)

PreviousTCP/IPNextWeb Standard

Last updated