Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Avatar

Purpose: Avatars are graphical representations of a user. They contain a user-defined picture, a deputy-picture or an abbreviation for its username. Avatars are used in places where there is a direct reference to a user (-account), such as the entries in the Metabar entry "user", a members gallery the of a course or the avatar in a forum-post.
Composition: Avatars are available in a fixed size. They always contain either a picture (defined by the user himself or a general replacement) or an abbreviation that indicates the username of the user. In the case of abbreviations, the avatar receives a colored background.
Effect: The Avatar itself has no own interaction but can be used in a context which triggers further actions (such as a Bulky Button in the Meta Bar).

Context

Glyph: Glyphs are typographical characters that act as a trigger for some action. There is a user Glyph as well.
Image: Images belong to the content and can be purely decorative.
Icon: Avatars represent a User in the System, Icons just an Object which is not defined further.

Usage

Responsiveness

Accessibility

Avatars MUST bear an aria-label or contain an image with an alt tag with some alternative text. Note, that it MUST NOT contain both, a aria-label and an image with a non-empty alt tag.
If the Avatar is accompanied by the name of the user shown in the image (e.g. in the Members Gallery), the alternative text attribute MUST be "User Avatar".
If the Avatar is not or might not (due to some setting) be accompanied by the name of the user shown in the image, the alternative text MUST be "User Avatar of NameOfUser".
Avatars that show the currently logged-in user outside some list with other users, the alternative text MUST be "Your user avatar".

Parents

Descendants