Web page layout and 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.
Review quarterly
Just like security, digital accessibility requirements will evolve as software and technology develop.
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 doesn't always 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:
Best practices
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
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.
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.