• Home
  • News
    • Features
    • Latest/Upcoming Tech
    • Product Review
    • Tech Events
  • Technology
    • Computing
      • Hardware
      • Software
    • Mobile
      • Devices
    • Apps
      • Messaging App
  • Innovation
    • Startups
    • Smart Gadgets
    • Augmented Reality
    • Cloud Computing
  • Business
    • Internet Commerce
    • Tech Market
  • Tips & Tricks
  • Miscellaneous
    • Jobs / Career
    • Social Media
TheTechNews
  • Home
  • News
    • Features
    • Latest/Upcoming Tech
    • Product Review
    • Tech Events
  • Technology
    • Computing
      • Hardware
      • Software
    • Mobile
      • Devices
    • Apps
      • Messaging App
  • Innovation
    • Startups
    • Smart Gadgets
    • Augmented Reality
    • Cloud Computing
  • Business
    • Internet Commerce
    • Tech Market
  • Tips & Tricks
  • Miscellaneous
    • Jobs / Career
    • Social Media
Web Technology

How to Optimise Your Website for Screen Readers!

by Emily Forbes
-- January 19, 2021
How to Optimise Your Website for Screen Readers!

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

Information Sign on Shelf

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

Person With Difficulty And Questions In Studies

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

ringid
Related Items
Click to add a comment
Web Technology
January 19, 2021
Emily Forbes @forbesemily@yandex.com

An Entrepreneur, Mother & A passionate tech writer in the technology industry! Contact Email:- forbesemily@yandex.com

Related Items

More in Web Technology

5 Reasons Why Every Church Needs A Website!

Emily ForbesJanuary 6, 2021
Read More
wordpress_com_plugins_the_technews

WordPress is Introducing Learn WordPress!

Emily ForbesJanuary 3, 2021
Read More

What Every Business Owner Should Know About SEO!

Emily ForbesDecember 18, 2020
Read More
torrent

Top 2021 Web Design Trends For Your Website!

Emily ForbesDecember 11, 2020
Read More
torrent

Starting a Website: Everything You Need To Know About Pricing!

Emily ForbesDecember 3, 2020
Read More
impenetrable_online_security_the_technews

Why a Superfast Internet Connection is Integral for Construction Sites During COVID-19!

Emily ForbesNovember 27, 2020
Read More

SEO – Your Article’s Best Friend!

Emily ForbesApril 13, 2020
Read More
stronger-network-security-the-tech-news

Why Security Audits are Important to Your Business

Emily ForbesApril 12, 2020
Read More
Start-your-Online-Business

Develop a Marketing Plan For Your Business!

Emily ForbesFebruary 21, 2020
Read More
Scroll for more
Tap

Join Our Newsletter

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

we respect your privacy and take protecting it seriously

Top News

  • big-data-experts
    Reasons Why Organizations Need Modern Integration Platforms!
    Big DataFebruary 18, 2021
  • best_practices_online_business_the_technews
    Implement Business Analytics and Cut Costs!
    BusinessFebruary 18, 2021
  • Effective SEO Techniques to Drive Traffic to Your Website Today!
    Tips & TricksFebruary 17, 2021
  • The Internet of Things in 2021!
    InnovationFebruary 16, 2021
  • Can You Eliminate Shipping Damage?
    InnovationFebruary 15, 2021
  • SmileDirectClub Partners with MetLife to Democratize Orthodontic Care
    Health & FitnessFebruary 14, 2021
  • How to Use Business Analysis Tools in Your Company!
    BusinessFebruary 11, 2021
TheTechNews

A technology media that aims at the latest tech news, events, gadgets, tools, innovations, startups and many more.

    NEWS

  • Features
  • Latest/Upcoming Tech
  • Product Review
  • Tech Events
  • Technology
  • Innovation
  • Business

    Hardware & Software

  • Computing
  • Hardware
  • Software
  • Mobile
  • Devices
  • Messaging App
  • Tips & Tricks

    Others

  • Startups
  • Cloud Computing
  • Social Media
  • Internet Commerce

Copyright © 2016 www.thetechnews.com | Pages: ABOUT US | PRIVACY POLICY | TERMS OF USE | CONTACT US

5 Reasons Why Every Church Needs A Website!