January 15, 2021

I, Science

The science magazine of Imperial College

How I,Science is Working to Make our Website More Inclusive

Ariana Loehr

If you’ve visited this website before October, you might have noticed a few tiny changes. Okay, you caught us, we gave the site a whole new facelift. Together, the web team including Naomi Dinmore, Kaylee Gregor, Sophie Burley and myself, decided to revamp the website to reflect the change in lifestyle that we’ve all faced in 2020. With the magazine and our media consumption completely online for the time being, we thought it would be best to put all our outlets and content in clear locations that were easy to access. And that accessibility doesn’t just stop on the front page. 

Web accessibility is about making web pages universally easy to use. For websites to be universally accessible they need to be able to be viewed across all devices and browsers for all people. Many people face difficulties with web access because of vision or mobility impairments. Our updated choices in color, style and functions should ease the burdens of many of these issues.  


For any of you that may be looking to improve your own web accessibility, here’s a few quick tips: 

  1. Design the website mobile first 

In today’s world, many people will be viewing your website on a smartphone. On phones, the tabs and buttons may appear too small for our fingers to click, or the viewer needs to scroll side-to-side which is unnatural on a smartphone. It’s much easier to start with the small screen and work your way bigger. If you’re on a laptop, try making the browser as narrow as possible, this will help indicate how the website will look on phones. 

Screen shot of mobile webpage
I, Science Mobile Website
  1. Try tabbing through your page 

Many people have mobility or vision impairments that prohibit them from easily using a mouse or touchpad. Instead, they’ll use the tab key on their keyboard. You should be able to access each page by just using the tab and the enter button. Always double check that this works for your dropdown menus too! 

  1. Avoid red and green color combinations 

Red and green colorblindness is the most common form of colorblindness and faced by 10% of all men, followed by blue/yellow colorblindness. By avoiding this color combination in buttons and headings, you’ll make your page easier to understand. Avoiding this color combination in images and graphics will also help to be inclusive of those who face this difficulty. 

  1. Add alt text to images 

There are a lot of reasons why someone may not be able to see an image on your website; their internet may be a bit slow, or they could be using a screen reader due to vision impairment. No matter their reason, if the image doesn’t show, there will be an alternative text presented. Often the presets for these are just “picture” or “image”. By changing this text to be a description of the actual image, you can help recreate the picture in the minds of your viewers. 

Adding alt text to images
Adding alt text to images
  1. Choose a font family 

There are loads of browsers to choose from nowadays, and not all of them are created equal. Some have issues with loading specific functions or fonts. The best way to eliminate this problem is by including a font family rather than just one font. These font families are usually very clear fonts, and if the first one doesn’t show up on a particular browser, then it will apply the next font in the lineup and so on. This way, no one is left with empty boxes where there should be letters. 

Choosing a font family
Choosing a font family

There are many other ways to improve accessibility that you can hear about in the video above. At I,Science, we aim to comply with the Imperial College London guidelines for web accessibility found here, by the end of 2021. So, if anything on this site seems difficult to access, send me an email and I’ll make sure to fix it right away!