Improving Web Accessibility with the IR Technique

The IR(Information Redundancy) technique is a method of providing additional textual information so that users relying on assistive technologies (such as screen readers) can easily understand complex or visually-based information. For content like special characters, symbols, organizational charts, or graphs, alternative text is provided through hidden elements.

<a href="#" class="menu"></a>

In such cases, the IR technique can be applied as follows.

<a href="#" class="menu">
  <span class="blind">Menu</span>
</a>

The blind class is typically set via CSS to make the text invisible on the screen, allowing the menu text to remain hidden visually while still being read aloud by the screen reader.

The blind class is not provided by default in HTML or CSS; it must be defined manually. You can define it as follows.

.blind {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

clip: rect(0, 0, 0, 0) is a CSS property that cuts the element into a 0-sized rectangle, making it invisible on the screen. The values are specified in the rect(top, right, bottom, left) format, and (0, 0, 0, 0) cuts all sides of the element to 0 size, so the element will not be displayed on the screen.

The clip property is used to cut the visible area of an element, and in the case of elements with absolute or fixed positioning, the position is clearly defined, allowing for the cutting operation. This is why 'position: absolute` or similar properties are necessary.