10 more ways to make your website accessible

Closeup of a keyboard with a large green key lit up that says

We’ve had a busy year at Huxley, with accessibility at the heart of everything we do. Back in May we shared 13 tips for making your website more accessible. Today we’re sharing 10 more tips, from #14-23.

2022 will be our best year yet. We’re excited to be launching an accessibility hub called Skip to Content that will feature interviews from leading accessibility experts, articles, resources, and more. Check back soon for more info.

Want to stay up to date with our latest tips and news? Follow us on Instagram, Twitter, or LinkedIn.

 

A screen grab of a cursor hovering over a drop-down menu on the BBC website.
A screen grab of a cursor hovering over a drop-down menu on the BBC website.

#14: Optimise drop-down menus.

Drop down menus, or fly-out menus, can be tricky when considering accessibility and responsiveness. While they may work as intended for some mouse users, they can be especially cumbersome for those who rely on keyboard navigation, those who have tremors, or those on mobile devices.

W3C has a helpful tutorial for ensuring drop down accessibility with slightly separate considerations for mouse and keyboard users. Check it out here.

If you can’t make a drop-down menu accessible, it’s best to avoid it altogether.

In this example, we looked at the BBC’s website navigation. The drop down menu is accessible and easy to use across different screen sizes and types of interaction.

 

Screen grab of Wikipedia zooming in. As it's zoomed in, the navigation text overlaps and looks terrible.
Screen grab of Wikipedia zooming in. As it’s zoomed in, the navigation text overlaps and looks terrible.

#15: Make sure your website is zoomable and scalable.

Some users with vision impairment may rely on the zoom magnification function to access your website’s content. If your website isn’t fully optimised for scalability, text and other components may overlap or clip when zoomed in.

In this example, we look at the problematic Wikipedia homepage when zoomed in. The overlapping text makes it difficult to read and select the desired link.

 

A large computer monitor, tablet, laptop, and mobile screen showing the front page of BBC.
A large computer monitor, tablet, laptop, and mobile screen showing the front page of BBC.

#16: Make sure your website is fully responsive.

The internet isn’t only accessed from computers anymore. We can now browse our favourite sites on phones, tablets, gaming systems, and even refrigerators. This can make website design tricky, and the one-size-fits-all mindset won’t always apply.

By ensuring your website is fully responsive for all screen sizes, you’re making your website more accessible. This means ensuring all your typography, text elements, images and videos, and touch elements are fluid and will automatically resize accordingly, without compromising on content or design.

 

A screen grab of an article on CNN in which a video starts playing while halfway down, forcing the user to scroll back up to stop it.
A screen grab of an article on CNN in which a video starts playing while halfway down, forcing the user to scroll back up to stop it.

#17: Avoid autoplaying media.

We’ve all tried to read an article in a quiet office when a loud video starts playing automatically and then the whole office knows about your toenail problem and you can’t close the tab quickly enough.

Besides it being jarring and potentially embarrassing, it can also be incredibly detrimental to the experience of those with access needs, including those who rely on screen readers, those with cognitive impairments, and those with photosensitive epilepsy.

To be more accessible, ensure your embedded videos and audio have clear controls to start, stop, and change the volume.

In this example, we look at CNN’s intrusive autoplayed video while trying to skim an article.

 

Tinyjpg.com home page
Tinyjpg.com home page featuring a cute panda

#18: Optimise image file sizes.

We’ve all been on a website with tons of billboard-sized images that took 10 years to load. No one wants to wait around for that, and many people will simply click away, never to return.

By uploading your photos as JPEGs under 1MB, you can help your website run faster – which will result in better conversions, better SEO rankings, better user experience, and better accessibility.

There are even websites that can smush your images down to a compatible size for you, like TinyJPG, so you don’t need Photoshop knowledge to ensure your images are optimised.

 

 

#19: Be mindful with animation and flashing content.

GIFs and scrolling effects can be distracting and detrimental to the experience of your audience, especially if they suffer from motion sickness or photosensitive epilepsy.

From rapidly flashing animations to highly contrasted geometric patterns to Zoom videos with moving ceiling fans in the background, unintentional triggers are more common than you’d think.

Some tips you can try:
– Ensure no content flashes or flickers more than 3 times per second
– Be careful with videos and animations on autoplay; offer an easy way to stop a video if needed
– Avoid displaying many high-contrast stripes or other geometric patterns together
– Avoid scrolljacking, or manipulating the scroll action to move in an unexpected speed or direction
– Use a clear trigger warning if you do need to display overly animated or flashing content

For an example, check out the Huffington Post article ‘FML’ by Michael Hobbes. They use a combination of flashing lights, animation, contrasting patterns, and scrolljacking to make a unique but distracting display. Luckily, they also posted a text-only version, which is a little difficult to find.

 

A screengrab of Hannah talking at the camera, with the caption at the bottom of the screen in black and yellow.
A screengrab of Hannah talking at the camera, with the caption at the bottom of the screen in black and yellow.

#20: Caption all video content.

According to Hearing Link, 1 in 6 people in the UK are affected by hearing loss, which can make viewing video content challenging.

Ensuring your videos have accurate and synchronised captions is important to those who suffer from hearing impairments, or even those who are in a quiet setting and don’t want to distract others.

Luckily, social media is catching on to these accessibility requirements – YouTube, Instagram, and TikTok have implemented auto captioning features, so if you don’t have the time to type out all dialogue, you can still ensure your videos are accessible with the click of a button.

 

Screenshot of a Youtube video of Tom talking to the camera with the timestamped transcript underneath.
Screenshot of a Youtube video of Tom talking to the camera with the timestamped transcript underneath.

#21: Provide transcripts for all multimedia.

In the last tip we talked about captions, and now we’re looking at transcripts. Unlike captions that are embedded in the video themselves, transcripts are separate from multimedia and exist in a standalone text format. Transcripts include the spoken word, as well as descriptions of important audio information (like laughter) and visual information (like someone entering the room).

Transcripts are great for a number of reasons: they help deaf/blind users access content with Braille devices, make your audio content accessible for those in a noisy environment or those who don’t have time to listen, and they’re searchable, which is super important for SEO.

If you don’t have time to transcribe yourself, you can always use a transcription or audio-to-text service.

Don’t assume your audience will watch or listen to your content – they may not be able to, so always include a transcript.

 

 

#22: Provide audio descriptions for video.

In the last couple of tips we talked about captions and transcripts. Another lesser known but equally important way to make your multimedia more accessible is audio description.

With audio description, a narrator describes the visual content in a video as it is displayed on the screen. This can be embedded in the video or provided as a separate audio file.

Ensuring your multimedia is set up for those with visual impairments is so important in making your content accessible to a wider audience.

Check out Talking Pictures AD on YouTube for an excellent example.

 

#23: Always include alt text in non-text elements.

Probably one of the most well-known aspects of digital accessibility, alt text is an important way to ensure people who use screen readers are able to access your photos and graphics. It’s also important if your image fails to load, and is helpful for SEO.

Make sure your alt text is descriptive without being flowery – it should be succinct and accurate, without adding redundant information (like “Photo of”, “Graphic of”, etc.)

In this example, we look at a stock image used on the Huxley blog, with the alt text being read out by NVDA, a free, open-source screen reader software for Windows.