eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Working Examples
  • Best Practices
  • Interaction Design
  • Developer Guide
  • ARIA Reference
  1. Structure

Image

Because the web would be pretty dull without images...

There are two types of image:

  1. content images

  2. decoration images

Working Examples

The content for this page is not yet available.

Best Practices

Every image can be classed as important content or non-important decoration.

Every image must have an alt attribute. There are no exceptions.

Decoration images must have an empty alt attribute value. This informs screen reader to skip over this element, otherwise the long, ugly URL/filename of image will be read.

Content images must have a meaningful, descriptive alt attribute value that should be defined by your content team.

If a content image is adjacent to descriptive text, for example in the case of an item title right before or after the item image, then the alt text of the image can be left blank.

If possible, always try and use CSS background images or generated content (e.g. font icons) for decoration images.

Avoid using CSS background images for content images because they are disabled by default in Windows high contrast mode (this setting can be overridden in your application CSS however).

Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

Keyboard

Image tags are not interactive by default and therefore should not be keyboard focusable.

Screen Reader

A screen reader will skip over a decoration image (with empty alt text) and will read the alt text of content images.

Pointer

Image tags are not interactive by default and therefore are not clickable.

Developer Guide

The content for this section is not yet available.

ARIA Reference

The content for this section is not yet available.

PreviousHeadingNextItem Tile

Last updated 3 months ago