Think about how you would describe the image to someone on the phone. Use the and elements (with the element inside the element) to create a disclosure component that reveals the longer description on requestĪndroid Use the android:contentDescription on the image view to add a long text description iOS Use the accessibilityLabel attribute on the image to add a long text description Tips for writing effective text descriptions.Use the aria-describedby attribute to point to an element on the same page that contains a longer description of the image.Text descriptions for complex images HTML Use the alt attribute on the element to add a short text description then either: Typical example of a complex image, a pie chart. The text description must be accompanied by a more extended description or an alternative presentation of the image.
#ATEXT AND ACCESSIBILITY ANDROID#
Text descriptions for images of text, functional and informative images HTML Use the alt` attribute on the element to add the text description Android Use the android:contentDescription on the image view to add the text description iOS Use the accessibilityLabel attribute on the image to add the text description Complex imagesĬomplex images convey detailed, factual information like graphs and charts, illustrations and infographics. However, the fact that the image shows a cat means it is strongly recommended that a text alternative is provided - such as "An image of a ginger cat sitting on a kitchen floor". The image is closely related to the subject matter of the page content but not directly discussed. Credit card symbols for payment options.Pictures of products and product variations.
Photos that show people, scenery or objects that add to the experience of the content.Informative images communicate information or add to the user experience in some way. Typical example of a functional image forming part of a button (source: Microsoft Outlook) Informative images For example, a button to start a new email might show an icon of a pen, but the text description should be "New email", not "Pen icon" because it's the button's action that's the important information. The text description for a functional image should convey the intended action of the interactive element. Functional imagesįunctional images form part of interactive elements like links or buttons. If you have to use an image of text, the text description must contain the same words as the image itself. Android Use the android:contentDescription attribute on the image view, and set its value to iOS Set the isAccessibilityElement property on the image to false and do not provide a label Images of textĪvoid images of text where possible because the visual quality of the text deteriorates for people browsing with screen magnification. If a different approach is used to generate images, for example an icon font), apply aria-hidden="true" to the element used for the image. HTML Use the alt attribute on the element but do not give it a value: alt="". It is still important to handle decorative images in the right way though. Text descriptions for decorative imagesĭecorative images do not need text descriptions because they do not convey information or meaning.
Typical example of a decorative image from the footer of the TetraLogical website.
0 kommentar(er)
