Usage and Tips

##Usage

• A picture can be worth a thousand words, so use Graphic when you need to convey body language or to provide a visual metaphor.

• Graphic is great for breaking up text-heavy sections of a course and adding visual interest alongside a text component.

###Layouts Single or spanned (full width).

###Mobile fall-back If spanned, it will resize to a single width.

###Accessibility

• Screen readers don't "read" the pixels in your image, so don’t use the Graphic component to deliver textual information.
• Remember to include an alt attribute for all your images. (The authoring tool provides this automatically.) Screen readers will read aloud alt text content, so leave the alt text empty (present but with no text value) if the image does not contribute significant course content.
• If the alt text is left empty, the image will not be included in the tab order. If the component is configured to display title or body text, these will remain keyboard accessible.
• If the alt text is assigned a value, but the component is not being tracked for course completion, assign the class 'no-state' to the Graphic component. Adapt's accessibility mode reports to the learner the 'state' of the component, whether it is complete or incomplete. It is not common practice to require interaction with (or 'completion' of) an image for course completion. Indeed, a screen reader needlessly announcing the state of an image may be distracting for the learner. Assigning the built-in class 'no-state' prevents this.

##Tips

Here are some techniques for getting the most from Graphic:

• Don’t add images simply for decoration—make sure that the images add value to the course.
• Graphic is intended to display an image. If your course or custom code requires you to leave the image 'src' blank, the normal rules for component completion will still apply. The Graphic will be marked as complete when the full component has come into view, even if there is no image to see. This behaviour prevents other dependent plug-ins, such as Trickle, from freezing while they await a completion event that would otherwise never occur.