Is it possible to change the header on our homepage (the text that reads “The Sustaining Family Forests Initiative”) to be an image (our logo) rather than text?
As a reminder Yale’s Web Accessibility Policy went into effect this past January. In an effort to comply with those standards, know that using an image for your site name is strongly discouraged as it may adversely affect accessibility to folks who rely on assistive technology to navigate the site. Screen readers will read and list the site name twice and people with low vision who use screen reader magnifiers may have difficulty reading it.
Important note: For YaleSItes, the text in the site name field becomes the alt text for the image so it’s important that it matches the image text exactly.
If you still want to use an image for your site name, here are some best practice.
In general, text in images should be a generous size to mitigate pixelation when zoomed.
A minimum size of 19px is a good rule of thumb, with larger being better.
Text in images should match color contrast ratio minimums. For text that is at least 24px and normal weight or 19px and bold, use a contrast ratio that is at least 3:1. Ideally, use a contrast ratio that is at least 4.5:1.
Thanks for your help on this. I followed the instructions you linked, but the logo doesn’t change. Since we need to chat about reordering our people profiles on our TELE site, why don’t we talk about this on that call as well?
My calendar is up to date, can you send me a calendar invite?
Hi Ben,
Here’s a link that explains how to change the header to an image. https://yalesites.yale.edu/book/change-header-logo-banner
As a reminder Yale’s Web Accessibility Policy went into effect this past January. In an effort to comply with those standards, know that using an image for your site name is strongly discouraged as it may adversely affect accessibility to folks who rely on assistive technology to navigate the site. Screen readers will read and list the site name twice and people with low vision who use screen reader magnifiers may have difficulty reading it.
Important note: For YaleSItes, the text in the site name field becomes the alt text for the image so it’s important that it matches the image text exactly.
If you still want to use an image for your site name, here are some best practice.
Further reading: https://usability.yale.edu/web-accessibility/articles/images
Kind regards,
Chris Mongillo
Hi Chris,
Thanks for your help on this. I followed the instructions you linked, but the logo doesn’t change. Since we need to chat about reordering our people profiles on our TELE site, why don’t we talk about this on that call as well?
My calendar is up to date, can you send me a calendar invite?
-Ben