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