Making the Most of Images and PDFs: A Guide to Accessible Visual Content
Strategic use of images enhances web content by breaking up text blocks, increasing engagement, and providing visual interest. While images create a better experience for sighted users, properly crafted alternative text (alt text) ensures accessibility for those using screen readers or assistive technologies. Alt text benefits everyone – when images fail to load due to slow connections or offline viewing, this descriptive text maintains context and meaning. Alt text also helps enhance search engines’ understanding of your content.
What is Image “Alt Text”?
Well-crafted alt text is essential for ensuring web accessibility and usability. The best alt text takes into consideration the context of the image along with its purpose.
NN/g, “Alt Text: What to Write“
If an image is used to help people to complete a task or understand page content, it needs alt text. This alternative text attribute, or “alt text,” is a text substitute for images, graphs, videos, and other visual (non-text) elements. Alt text should:
- Tell people why the image is there based on context
- Be concise and describe the essential information about the image. This is not a place for marketing copy or keyword stuffing
- Explain the image in a meaningful way, as if to a friend
- Watch out for and avoid overly long alternative text
You do not need to include words like ‘image’ or ‘photo’ at the beginning of alt text. Screen readers will identify images based on their <img> tag. Learn more about writing helpful alt text.
Is the image merely decorative?
Alt text is not necessary for images that are purely decorative. If a text description doesn’t provide context or meaningful information, don’t add it. Unnecessary alt text is verbose and annoying.
Alt Text and Search Engine Optimization
Including keywords in alt text can also be beneficial for SEO. Those text descriptions also help search engines understand your images. It is important to balance your optimization efforts with providing accurate, descriptive information about your images.
Avoid Keyword Stuffing
Keyword stuffing in alt text is considered a poor practice and can negatively impact your SEO efforts:
- Google explicitly warns against filling alt attributes with keywords, as it may cause your site to be seen as spam.
- Overusing keywords can detract from user experience, especially for those using screen readers
Use keywords appropriately and in context, without compromising the primary function of alt text, which is to provide accessibility with clear, concise image descriptions.
Images of Text
While images containing text remain popular for social media and web content, they often create accessibility barriers. Although tools like Canva make it easy to create visually appealing designs, these graphics typically aren’t accessible by default. Instead, modern CSS and responsive design techniques allow developers to create sophisticated visual effects – like text overlays on images – that maintain accessibility while achieving the same aesthetic impact.
Use actual text instead of images containing text wherever possible on your website.
- Text embedded in images cannot be read by screen readers or search engines. This content is inaccessible to users with visual impairments and search.
- Text in images doesn’t scale well on mobile devices or when users zoom in, potentially becoming illegible.
- Text over images often lacks sufficient color contrast and is difficult for users with low vision or color blindness to read.
- For complex images like infographics, offer a text-only HTML version that captures all essential information.
- For essential images of text, like scanned documents, offer text-based alternatives.
I get it – images of text dominate social media feeds. They grab attention and add visual impact to your message. But don’t let style override accessibility: pair that spiffy design with clear, descriptive alt text so everyone can engage with your content.
Infographics
Creating accessible infographics begins with clear, concise content that breaks down complex information into digestible chunks without jargon.
Information should follow a logical structure with proper headings and subheadings to guide understanding. To ensure all users can access your data, provide alternative formats such as downloadable tables or plain text summaries alongside the visual representation.
- Keep layouts clean and uncluttered.
- Avoid excessive animations or effects that might distract users.
- Ensure text and graphics meet WCAG contrast requirements.
- Use easily readable sans-serif fonts, and avoid small text sizes.
- Clearly label all visual elements, including axes, data points, and legends in charts and graphs to enhance comprehension for all users.
- Use semantic HTML elements to structure web-based infographics.
- Ensure keyboard navigation for all interactive components, and provide comprehensive alt text for images and graphs.
- When using tables, implement proper HTML table elements with appropriate headers and captions.
- Offer text transcripts that provide full descriptions of the infographic’s content for users who rely on screen readers or other assistive technologies.
Creating accessible infographics helps make the content usable and understandable for all users, including those with disabilities.
Should I use a PDF?
Good structure matters everywhere – whether you’re creating webpage content or PDFs, using proper headings, organized lists, and clear document hierarchy helps make your content accessible to all users. But the question remains: which format best serves your content and audience?
- Adobe Acrobat Pro can check accessibility in a PDF
- Using Word to create a PDF is probably your best bet
- PDFs created in Canva or other design programs are likely NOT accessible by default! You can check and remediate PDFs in Adobe Acrobat Pro.
PDFs vs. Modern Web Capabilities
The PDF (Portable Document Format), created by Adobe in 1993, was designed to display documents consistently across different devices and operating systems. When PDFs first emerged, creating sophisticated website designs was nearly impossible without heavy reliance on images and tables, and browsers displayed content inconsistently. Today, modern CSS and improved browser interoperability allow for rich, accessible web-based experiences that are equal to or better than the formatting control enabled through PDFs.
Consider PDFs when:
- Your content requires specific formatting that can’t be replicated on a webpage
- Users need offline access to downloadable documents
- PDFs work well for printable forms, annual reports, or documents with complex layouts that must remain static.
For most web content, however, inline text is the better choice. Inline content improves searchability, simplifies updates, adapts to different screen sizes, and enhances accessibility. It also helps maintain website performance by avoiding the additional load time of PDF files. Before automatically reaching for a PDF, ask yourself if your content could work just as well – or better – as standard webpage text.
Create More Accessible Content, Starting with Your Next Image
Making your content accessible isn’t just about compliance – it’s about creating an inclusive digital experience that serves all users effectively. Take time to write descriptive alt text for your images and carefully consider whether your content belongs in a PDF or inline on your webpage. Small changes in how you handle these elements can make a significant difference in user experience.
Ready to improve your content accessibility? Start by auditing your existing images and PDFs. Update alt text on key images, and identify which PDFs could work better as inline content.
Accessibility tools and resources
- Authoring meaningful alternative text
- WAVE browser extension from WebAIM
- Accessibility Checker, a WordPress plugin by Equalize Digital
- EveryAlt, an AI powered alt text generator for WordPress – note this tool still needs manual oversight
- EditoriA11Y, a WordPress plugin from Princeton University’s Web Development Services team
- Create Accessible PDFs – How to create accessible Portable Document Format (PDF) documents that conform to the Revised 508 Standards.
Need help getting started? Download our accessibility checklist or reach out to our team for a content accessibility review.
