Making your website and blog accessible

“UCL strives for equity, diversity, and inclusion in all we do. As such, we are committed to embed accessibility as a fundamental principle into all aspects of our planning, development and delivery.” This is why we encourage you to strive for it too, and make sure your content is accessible to everyone.

Making the content on your website as well as your website itself is important for multiple reasons. Accessible media is essential for people with disabilities, and is useful for everyone. Accessibility features are also used by people without disabilities in a variety of situations.

Another thing to consider is the way your media content appears and is recorded. Indeed, background noises, loud background music on a video or audio file can distract the listener, and can sometimes be picked up by automatic caption devices, leading to confusion for the user.

Let’s start with the basics!

When building your blog, you will normally use the need to think about the following items to make accessible:

Fonts: Choosing your font can impact the readability of your content. Some fonts are more easy to read than others and can help not strain your eyes when reading handfuls of text. Here are some of the most accessible fonts, which are recommended as good practice: Tahoma, Calibri, Helvetica, Arial, Verdana, Times New Roman, Slab Sans Serif suite (Arvo, Museo Slab, Rockwell)
Headers and colours: Some plugins can help you automatically change the colours of your website identity to make it accessible by ruling out some colours. Visit here for a list of accessible plugins (link to CampusPress + plugins webpage)
Sizes: we recommend using a minimum 12 points size font, however, making it to 16 points can help increase readability.
Video: Adding subtitles, text description of the video, transcript or even using a media player that supports accessibility are considerations you should have when embedding video content.
Audio: Just like for videos, having a transcript can help users enjoy the content without audio. Make sure the media player you use is accessible.
Images: Adding text description of the image can help screen-reader devices detect whether it is an important image or a decorative one.
PDF Files: Adding a text description to the pdf file can help screen-readers devices detect the document, and tell the user what it is about.
Audio: Adding a transcript below your audio content can help non-hearing users enjoy your content.

A number of accessibility-ready themes (opens in new tab) exist for your website. This is especially useful if you have strict accessibility requirements and want to make sure all aspects of your website are accessible without spending too much time on it. Here are a few themes we recommend.

Watch the video below to learn more about accessibility, discover the plugins and tips about making your website more user-friendly:

Trouble accessing the video? Click on the following link: https://youtu.be/v7em870r9C0 (opens in a new tab)

Other resources

Visit the UCL Accessibility page (opens in a new tab), you will find more tips on how to create accessible content, in line with UCL’s policy and commitments.

Visit the CampusPress Accessibility guide (opens in. new tab), you will have step-by-step explanations from content-creation to making your website accessible, based on a number of considerations.

Visit the Web Accessibility Initiative (WIA) website (opens in a new tab), this is perhaps the most detailed resource on digital and web accessibility.

Visit the VennGage website (opens in a new tab) to learn more about accessible colour contrasts.