Visual Impairment

Visual impairment is a broad term covering any significant reduction in vision that cannot be fully corrected through conventional means like eyeglasses, contact lenses, or medical intervention. The World Health Organization estimates that at least 2.2 billion people globally have some form of vision impairment, with approximately 39 million people classified as blind. Visual impairments exist on a wide spectrum. At one end, a person with low vision may be able to read text if it is large enough and has sufficient contrast. At the other end, a person who is completely blind perceives no visual information at all. Between these extremes are conditions like tunnel vision (loss of peripheral sight), central vision loss, blurred vision, and extreme light sensitivity. Common causes include age-related macular degeneration, glaucoma, cataracts, diabetic retinopathy, retinitis pigmentosa, and optic nerve damage. Some conditions are stable, while others are progressive, meaning a person's vision may change over time and their assistive technology needs may evolve. In digital accessibility, visual impairment is one of the most well-understood disability categories, and the Web Content Accessibility Guidelines devote extensive criteria to ensuring content is perceivable by people with varying levels of vision.

The web is an overwhelmingly visual medium. Page layouts, navigation patterns, images, charts, icons, color coding, and video content all rely on sight. Without deliberate effort to make this information accessible through non-visual channels, a significant portion of users is excluded. For people who are blind, a screen reader is the primary interface to the web. Screen readers like JAWS, NVDA, and VoiceOver parse the HTML document structure and present content as synthesized speech or refreshable braille. They rely entirely on the semantic quality of the underlying code. A beautiful visual design built on meaningless `div` and `span` elements with no headings, labels, or alt text is essentially an empty page to a screen reader user. For people with low vision, the challenges are different but equally real. They may use screen magnification software that enlarges a portion of the screen to 200% or more, meaning they see only a fraction of the layout at any time. They may invert colors, switch to high-contrast modes, or use custom stylesheets. Content that relies on precise spatial relationships, uses low-contrast text, or breaks when zoomed creates barriers for these users. Legal frameworks worldwide mandate visual accessibility. WCAG's Perceivable principle (Principle 1) is largely focused on ensuring content is available to users regardless of their visual ability. The ADA, Section 508, and the European Accessibility Act all require compliance with these standards.

People with visual impairments use a variety of strategies and tools to access digital content. Understanding these approaches helps developers and designers make better decisions. ### Screen Readers Screen readers are software applications that interpret the structure and content of a web page and present it as speech or braille. They navigate by headings, landmarks, links, and form controls. Key behaviors include announcing the role, name, and state of interactive elements (for example, "Submit, button" or "Email, edit field, required"), reading alt text for images, and skipping decorative content marked with empty alt attributes. For screen readers to work correctly, content must be built with semantic HTML. Headings must use `h1` through `h6` tags in a logical hierarchy. Form inputs must have associated labels. Images must have descriptive alt text. Interactive elements must have accessible names. Page regions should use landmark roles or HTML5 sectioning elements. ### Screen Magnification Users with low vision often use screen magnifiers such as ZoomText, MAGic, or the built-in zoom features of operating systems. At high magnification levels (4x to 16x), users see only a small window of the page at a time and must scroll extensively. Designs that spread related information across wide areas of the screen force magnifier users to scroll back and forth constantly. Keeping related content close together and maintaining a linear layout helps enormously. ### Browser-Level Adjustments Many users with low vision adjust their browser settings rather than using dedicated magnification software. They may increase the default font size, zoom the entire page (which WCAG requires to work up to 200% without loss of content), enable high-contrast mode, or apply custom CSS. Websites that use fixed pixel sizes for text, hide content on zoom via `overflow: hidden`, or rely on color alone to convey information break under these adjustments. ### Braille Displays Some users who are deaf-blind or who prefer braille use refreshable braille displays that raise and lower pins to form braille characters. These devices work in tandem with screen readers and depend on the same semantic HTML foundation.

**Inaccessible design:** A product image on an e-commerce site has no alt text. A screen reader announces "image" with no further context, leaving blind users unable to understand the product. **Accessible design:** The same image has alt text reading "Blue running shoe, Nike Air Zoom, side profile view." A screen reader user receives meaningful information about the product. **Inaccessible design:** A data visualization uses only color to distinguish categories in a pie chart — red for expenses, green for revenue, blue for savings — with no labels or patterns. **Accessible design:** The chart uses color plus distinct patterns (hatching, dots, solid fill), includes text labels on each segment, and provides a data table alternative below the chart. **Inaccessible design:** Body text on a website is styled in light gray (#999999) on a white background, producing a contrast ratio of 2.85:1, well below the WCAG AA requirement of 4.5:1. **Accessible design:** Body text uses dark gray (#333333) on a white background, achieving a contrast ratio of 12.63:1, exceeding WCAG AAA requirements. **Inaccessible design:** A page uses only visual indentation to show a hierarchical list. Screen readers present all items as a flat sequence with no indication of parent-child relationships. **Accessible design:** The page uses nested `ul` and `li` elements. Screen readers announce list nesting levels, letting users understand the hierarchy.