Techniques for Image Naming and Making Them Decorative

Note that examples that are labeled as not valid HTML may still be accessible — conforming to both WCAG 1.1.1 and 4.1.1.

Image Naming

Naming 1: Alt Attribute

Naming 2: ARIA Label

Naming 2.1: ARIA Label (Not Valid HTML, Missing Alt)

Naming 3: ARIA Labelledby with Figure and Figcaption

Naming 4: Image Map, with Grumpy Eye and Grumpy Frown

Naming 5: Role Img Div with Div Inside That Has Background Image, Background Div ARIA-Hidden, ARIA-Label Used for Naming

Naming 6: Role Img Div with Div Inside That Has Background Image, Background Div ARIA-Hidden, ARIA-Labelledby Used for Naming

Decorative Images

Decorative 1: Empty Alt

Decorative 2: Role Presentation

Decorative 2.1: Role Presentation (Not Valid HTML, No Alt)

Decorative 3: Role None

Decorative 3.1: Role None (Not Valid HTML, No Alt)

Decorative 4: Role None with Filled Alt

Decorative 5: Role Presentation with Filled Alt

Decorative 6: Role Presentation with ARIA Label

Decorative 6.1: Role Presentation with ARIA Label (Not Valid HTML, No Alt)

Decorative 7: Role None with ARIA Labelledby

Decorative 8: Image Marked ARIA Hidden

Decorative 9: Image Marked ARIA Hidden But Has ARIA Label

Decorative 9.1: Image Marked ARIA Hidden But Has ARIA Label (Not Valid HTML, No Alt)