• 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

Leave a Reply

Cancel reply

Your email address will not be published. Required fields are marked *

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

SEO Trends in 2021 – What to Look for?

Emily ForbesFebruary 11, 2022
Read More
Shared-hosting

What is Shared Hosting?

Emily ForbesJanuary 30, 2022
Read More
10 most effective ways to increase your content-reach

How to Choose the Right Web Design Company!

Emily ForbesJanuary 24, 2022
Read More

Indispensable Digital Tools for Beginner Digital Marketers!

Emily ForbesNovember 19, 2021
Read More

SEO For a New Website [7 Tips]

Emily ForbesNovember 2, 2021
Read More

Trending Features of Top Business Websites!

Emily ForbesOctober 7, 2021
Read More
Start-your-Online-Business

Don’t Make Online Forex Trading Complicated!

Emily ForbesSeptember 16, 2021
Read More

How To Choose a Web Design Team!

Emily ForbesJuly 10, 2021
Read More

5 Reasons Why Every Church Needs A Website!

Emily ForbesJanuary 6, 2021
Read More
Scroll for more
Tap

Top News

  • buying-ca-car
    What Should You Check when Buying a Vehicle from an Overseas Dealer?
    VehicleAugust 20, 2022
  • Cargo-Registry
    Why You Should Use A Cargo Registry For Better Cargo Repository Management!
    SoftwareAugust 9, 2022
  • Do You Know What Benefits An OSHA Training Can Offer You?
    Health & FitnessJuly 29, 2022
  • The Basics of the Cloud, Technology Magic or Simply Servers?
    MobileJuly 22, 2022
  • When Pranks Go Too Far: What to Avoid to Keep Pranks Harmless!
    Social MediaJuly 21, 2022
  • Benefits Of Using A Lone Worker App & How To Choose One!
    DesignJuly 18, 2022
  • JZZ Technologies, Inc. Launches ActiveLifestyleNutrition.com Product Site Offering Nutritional Solutions Aligned with Seniors’ Needs!
    BusinessJuly 14, 2022
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!
How To Choose a Web Design Team!