Bitte zum Testen nur aktuelle Browser verwenden! ILIAS unterstützt alle aktuellen Browser wie z.B. Firefox, Safari, Microsoft Edge, Chrome und Chromium. Der von Micosoft nicht mehr unterstützte und weiterentwickelte 'Internet Explorer' kann nicht zum Testen von ILIAS 7 verwendet werden.
Testers are the best!

Documentation

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

Avatar

Description

Purpose
Avatars are graphical representations of a user. They contain a user-defined picture, a deputy-picture or an abbreviation for it's 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
  1. user slate in the Meta Bar
  2. members gallery in a course
  3. forum posts

Rivals

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.

Rules

Usage
  1. Avatars MUST be used to represent a specific user.
  2. Avatars MUST be used in combination with the represented username.
Responsiveness
  1. the avatar MUST adjust it's size to the parent container.
Accessibility
  1. 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.
  2. 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".
  3. If the Avatar is not or might not (due to some setting) be accompaniedby the name of the user shown in the image, the alternative text MUST be "User Avatar of NameOfUser".
  4. Avatars that show the currently logged in user outside some list with other users, the alternative text MUST be "Your user avatar".

Relations

Parents
  1. UIComponent
  2. Symbol
Descendants
  • Picture
  • Letter