An accessible website is a valuable asset. Not only is it the ethical approach, but it ensures you don’t shut out certain customers and users as soon as they land on your site. On top of that, a lot of best practice around accessibility leads to a better website experience for everyone.
Despite this, it’s a severely neglected area of website design. Even though detailed accessibility compliance documents are freely available online, many website owners, designers, and developers don’t give much thought to accessibility.
These compliances cover a huge range of areas, but one important one is how well a screen reader can read a website. Luckily, it’s also an area where simple changes can make a huge difference.
How Does a Screen Reader Work?
Put very simply, a screen reader uses an electronic voice to describe what’s on a website, allowing people who are blind or visually-impaired to interact with it. The user is able to cycle through different sections, such as the navigation menu or article headers, with the screen reader describing each one.
With hundreds of millions of visually-impaired people around the world, this isn’t a niche concern. This blog on why screen readers are important goes into more detail on the issue, along with details on compliance and further technical information.
With all this in mind, here’s four ways you can make your website more screen reader friendly right away.
Getting the Navigation Bar Right
A screen reader should pick up your navigation bar on your site as a specific element, and it will often be the first thing a visually-impaired user will use to get around. This is obviously its purpose anyway, but in a world of fancy homepages that aim to catch the eye, it can be easy to neglect nav bars.
Have you ever been to a restaurant with a gigantic menu and been so overwhelmed you struggled to choose? Don’t create a navigation bar that has the same effect. Nail down your most important and useful sections, and avoid adding a huge sublist to them as well. This is just good UX practice for all users, making navigation easier for everyone.
Also make sure that the section names are self-explanatory and clear. Avoid product names unless your product is incredibly well-known, while puns or witty names are out too. For example, if you have a blog with a fancy name, just refer to it as “Blog” in your nav bar, or the user will have no idea what it is.
For a much deeper, and more technical, dive into accessible navigation bars, this piece on building accessible menu systems is perfect.
How to Format Links
Links are so ubiquitous you probably don’t give them much thought when creating them. But it’s so easy to make them confusing for those using screen readers. This is a particular problem when these users cycle through the links on the page as soon as they land on it, a common way to quickly find what they’re looking for.
For example, if you use the anchor text “click here”, a screen reader will relay that as something like “link, click here.” Not very helpful. This is even worse if there’s little or no context in the copy around the link. Instead the user has to listen to the URL being read out, hoping that offers some clues.
Make your anchor text descriptive of where you’re trying to send the user. If for whatever reason this isn’t possible, ensure the text around the link offers enough context to make it clear.
Creating Clear Content Structures
This is just as applicable to blog posts as it is to product pages. An ordered and structured page is far easier to understand quickly, and to navigate.
This means a main header, with subheadings separating out each section below. You should also avoid massive blocks of text unless absolutely necessary. This means a screen reader user will be able to easily flick through sections to get the information they want.
Good practice is to make sure a page only has one H1-tagged header, and that this header should make it 100% clear what the page is about. Screen reader users will seek these out to make sure they’ve come to the right place.
It’s also a good idea to list your sections at the top of the piece, making each item a jump link to that section to increase ease of navigation. But this can also make the content look messy. A common solution is to hide these lists to everyone but screen reading software. Find out how to do this with this explainer on invisible content design.
Writing Image Descriptions
Images without descriptions, or lacking “alt text tags” to use the technical term, are woefully common. When a screen reader comes across these the user has to hope the filename is descriptive enough, but this is rarely the case. With no description, all the screen reader knows is that there’s an image there.
Keep the descriptions as simple as you can to describe exactly what is shown, or at least what is necessary for it to serve its purpose as part of your content. Let’s consider a picture of a red Ford Chevy. In some cases, simply putting “a parked red pickup truck” will do, but for an audience who know their cars, mentioning the make and model would be important.
Adding image descriptions is usually very simple. Website builders, like MotoCMS, let you add image alt text when you upload images, making it quick and easy. If you’re not using a website builder and you’re editing code yourself, here’s an excellent explainer on image alt text.
Author | Emily Forbes
An Entrepreneur, Mother & A passionate tech writer in the technology industry!
Email:- forbesemily@yandex.com
