An example simulating commonly used inaccessible graphics. Images like these should be avoided as they pose several accessibility issues.
Images of Text (Graphics) Present Concerns for Accessibility
Flattened graphics, or images of text, have become a popular choice with social media’s drive towards image-centric content. “Image of Text” is when readable text is presented inside an image, including text that has been presented in a fixed image form to achieve a visual or graphical style. “Flattened graphics”, or “flattened copy” refers to the process of saving text and any combination of graphical elements into a final image file.
While they may appear visually attractive, they are often not accessible or responsive. Images of text pose issues for users with many types of disabilities or difficulties. Since the text content is flattened, or designed as an image instead of readable text, users cannot use tools, like screen readers to read the text. Even something as simple as resizing the font size is impossible.
Flattened graphics are especially popular in social media posts and when communicating events (flyers, etc.). There are ways to make your communications visual and still be mindful of accessibility.
|
Good Visuals & Imagery Can Improve Accessibility
Do include images in your digital communications! Building proper images can become a common practice.
Some people think that graphics are bad for accessibility. The truth is that graphics can be of great benefit to the accessibility of a web page by providing illustrations, icons, animations, or other visual cues that aid comprehension for sighted individuals. Too often we forget that when we design for people with disabilities, we are not designing only for the blind. We must consider disabilities of all types. Graphics can be especially useful to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.
Source: Stanford University User Experience Guide
|
Rethinking Flattened Copy
Think billboard. Clear. Concise. Limited text and largely visual.
- Build copy as readable text on your website.
- Create accessible links to direct users to the full copy.
Create for accessibility compliance
- Limit text to a title or headline only.
- Build proper alt text for the image.
- Build the information in the post body (website readable text, social media post body, etc.).
- Repeat the headline in the readable text, and use proper header formatting if available.
Use best practice design principles
- Strong color contrast.
- Clean fonts and typography to increase readability and minimize challenges for visual impairments or dyslexia.
- Avoid overcrowding.
- Do not build links or ULRs in flattened copy.
- Beware of QR codes not being accessible or usable.
- Build for mobile size first, not desktop.
Avoid posting flyers meant for print
- PDF flyers designed for print are typically not accessible in digital form, and event details are typically too long to include in the alt text.
- Create web page content for flyers, and include the flyer as an image or PDF, and build alt text for the flyer. (Example: Our Event Flyer. Event Details in content.)
|
|
|
|
|
