Making images and alternative text accessible is crucial because it ensures that individuals with visual impairments can understand and interact with content using screen readers. It also improves usability for those on slow connections or using text-only browsers, and enhances search engine optimization by providing context for indexing.
Image Accessibility
Images serve as integral components of website design, evoking a sense of atmosphere and prompting user engagement. Their strategic placement and design significantly contribute to crafting compelling and immersive web content. However, it’s imperative to consider a few key factors when incorporating images into a site to ensure accessibility for all users.
Size
The new Cascade template features a handy tool called ‘Image Zoomer,’ designed to automatically resize images to the appropriate dimensions based on their placement. For instance, uploading a 1200px wide image intended to span the width of the site will suffice in most cases. The Image Zoomer will dynamically adjust the image size, ensuring optimal display across various screen sizes. However, for many purposes, particularly when adding images to a block, an 800px wide image is typically adequate.
Images often constitute the largest portion of a website’s total size, necessitating caution to accommodate users with limited bandwidth. Avoid using raw images directly from digital cameras, as they can often be several megabytes in size. As a general guideline, aim to keep image sizes below 500kb.
Alt-text
To ensure equivalent information conveyance, images must be accompanied by descriptive text, also known as ‘alt text,’ entered into the Image Description field. This ensures that all users can comprehend the content depicted on the site.
Providing an accurate image description can sometimes pose challenges. Consider an image of a graph; while it may be tempting to label the alt text as “A graph showing graduation rates,” this fails to effectively convey the information contained within the image. Instead, strive to provide a description that mirrors the functional content of the image. For example, include the numerical data depicted in the graph within the alt text.
However, in most cases, crafting an image description is straightforward. Simply describe the contents of the image clearly. If individuals appear in the image, include their names in the description if relevant. Otherwise, opt for a description such as ‘People in front of Main Hall on the Wesleyan University Campus.’
Wesleyan principles for crafting alternative text include:
- Focus on the purpose behind including visual information in the text.
- Write concise descriptions that progress from general information to specific details.
- Consider context and objectivity when determining the content of the description.
- As a best practice, limit alt-text to no more than 125 characters to avoid tediousness and ensure compatibility with screen readers, which may truncate longer alt-text.
- Tailor tone and language to suit the audience.