- Digital Accessibility Hub
- Content
- Images
Overview
Web page layout and components are important in creating and accessible experience for all users. Ensuring these considerations are used in page design phase will reduce fix time and help create the most accessible experience for all users.
Best Practices
Best practices for accessible content.
Formatting images
Image format
Before sharing or posting an image, verify the image follows UTMB guidelines:
The image doesn't contain text
(screen readers can't read it and it often won't resize correctly)
The file type is correct for the function
- jpg, jpeg - photographs and other images
- .png - when a transparent background is needed
The file is under 1MB
Image file name is clear
- Meaningful and relate to the content
- Sentence case or Title Case (avoid all caps except for acronyms)
- Single between the words
- No special characters, especially underscores, ampersand,s and quotes)
- Avoid dates and words like final, copy
The image has alt text
Images should have alternate text added.
Describing images
Images have alternative text
Summary: images must have associated text describing the content of the image also called alt text. Some decorative images do not require a description.
Writing a good image description
Describe the image like you would to a person who wasn't in the room with you, so they know what is happening in the image.
- Write in sentence case.
- Include just the description, not introductory text like "An image of" or "Image of" as screen readers will say something like, "Image: Image of a red train going through a dark tunnel."
- Indicating the image is a graph, photo, or screenshot is okay. It will often sound like Image: Graph showing the number increase in sales" or "Image: Photograph of Mount Hood at sunset"
- Include any text in the image (for example legacy images that haven't been updated)
- If the image is complex or needs more of a description, add a detailed caption to the image.
Basic verification
- Run the application's accessibility checker. If the application doesn't have an accessibility checker (or wizard, etc.) Manually verify that each image has a description.
- Verify images
- have alternative (alt) text
- the image doesn't contain words as part of the image
- doesn't use the file name as the alt text
See also:
Add alt text to images in:
Relates to: WCAG 1.1.1 Non-text Content
Web Content Accessibility Guidelines (WCAG)
Related WCAG Guidelines.
1.1.1 Non-text Content
1.1.1 Non-text Content
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
1.4.5 Images of Text
1.4.5 Images of Text
1.4.6 Contrast (Enhanced)
1.4.6 Contrast (Enhanced)
1.4.9 Images of Text (No Exception)
1.4.9 Images of Text (No Exception)
1.4.10 Reflow
1.4.10 Reflow
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
Note
Note: 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which are designed to scroll horizontally (e.g. with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024px at 400% zoom.
Note
Examples of content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.
1.4.11 Non-text Contrast
1.4.11 Non-text Contrast
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components
- Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
- Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Section pages
All pages in this section of the site.