Overview
Making websites and emails accessible for all is an important part of communicating.
This article contains an overview of:
Title pages and hyperlinks appropriately
Titles appear in the top of the browser window/tab. Help your readers differentiate between pages by offering clear, descriptive titles under 60 characters in length.
When placing links in text, avoid the use of “click here” or “more info”. Instead of “Click here to register for the internship”, choose a phrase like “Register for the internship online”. Instead of “You can learn more about residence accommodations through this page”, choose a phrase like “Learn more about residence accommodation options”.
Provide alternative text for photos and images
Images should have short, readable filenames. For example, ideally “PresidentHennessy.jpg” rather than “hennessy_news_202501pic.jpg” or “IMG_03235”, etc.
All images should have "alt text" that describes what the image is (ex. “Acadia Axewomen Basketball player Paloma Anderson”). These alt-text descriptions should incorporate keywords as appropriate. If this image is a navigation element, ex. the Acadia logo in the top left that directs users back to the Acadia homepage, it should be labeled based on what it does, ex. “Acadia University homepage”.
In Microsoft products like Word and Outlook, simply right-click the image and select "Edit Alt Text" (Windows) or "View Alt Text" (Mac).
Provide alt text in Contao
Add alt text in File Manager
Navigate to the file in File Manager and select the edit (pencil) icon.
In the Metadata area, enter the description of the image in the "Alternate text" field.
By adding this text to the file itself, it will be used by default everywhere the picture is used on your website. However, if you enter a different description on a given page using one of the options below, it will take precedence.
Add alt text to an image in a paragraph
If you have used the 'image' button to add an image in a text element, simply click the image button and enter appropriate text. Keep in mind that this controls alt text for this specific use of the image, but not everywhere else it is used. If you re-use this image elsewhere, you will need to enter alt text again.
Add alt text in the Image Settings/image module area
If you used the "Add an image" function under a text element, you will need to select "Overwrite metadata" and add the description. Keep in mind that this controls alt text for this specific use of the image, but not everywhere else it is used. If you re-use this image elsewhere, you will need to enter alt text again.
Choose colours carefully
Choose contrasting colours and ensure text is always clearly legible. Colourblindness affects up to 5% of the population. While highlighting a large paragraph in a colour or using a text colour other than black or white may seem like it is calling attention to your content, it can make it more difficult to read.
Colour should never be the primary means of choosing between two different options: ensure buttons or icons are also shaped differently for easy reference.
Structure content and write clearly
One of the most important means of improving accessibility, and your website in general, is to both write and structure your content clearly. Use headings and paragraphs, and write at a level appropriate for a layperson: ideally, a grade 9 reading level. While this can be difficult in academic writing or when explaining highly technical information, it is often possible to explain our registration procedures, services, etc. using plainer language.
If your content is well-structured and written, it will be easier for both people and software to understand. This is helpful for users who rely on screen readers and other assistive technologies.
Keep vital information in text
Ensure the most important information is in text, rather than in images or scripts, which may not be accessible or enabled for users relying on assistive technologies. “Hover” actions work poorly for both mobile devices and users who do not have a mouse. Avoid using Flash entirely. If you include animated content, it should be easy to stop the animation, and you should be careful about using flashing or blinking imagery.
If you are presenting charts,infographics, organizational charts, etc., consider providing a description and linking to a table with the original data.
Many departments create graphics to advertise events. Include alt text that conveys the same information as the graphic itself, or make sure that the information is represented in the text of the page. For example, if you post an event to an online calendar that includes the date and time of the event in text and a picture of the event poster, make sure that the event poster does not include information that isn't also written in the text, like cost or a registration deadline.
Consider supporting files
There are ways to make even PDF, Word, and Excel files more accessible. Consider evaluating important supporting documentation or files for accessibility.
Check your website
Acadia uses the Silktide platform for website accessibility and quality assurance. Please contact us if you'd like information about how your website is performing. We can also give you access to the platform.
Additional Resources
For more information and to see your website accessibility compliance score: https://www.webaccessibility.com/
Accessibility at Penn State: http://accessibility.psu.edu/webpagetools/
Other links:
https://www.w3.org/TR/WCAG20/