If the last year has proved anything, it is that the internet is one of life’s essential items. It is hard to imagine how most of us would have coped last year without it. From socialising and hobbies to work and retail, much of 2020 was lived online. The internet is an amazing place and for those who face additional challenges in the physical world, it can be life-changing.
Thanks to accessibility tools like screen readers many of the potential barriers to web use have been removed. Screen readers ‘read’ the text on the screen and then output it to the user as speech or braille. These are an essential bit of technology for internet users who are blind or visually impaired, but they are also used by others for a variety of reasons.
Writing content that works for screen readers is simply about writing good content, something that is accessible for all users. Here are three easy changes you can make to your content that will help those using a screen reader.
Structure Your Website Correctly
When people open a web page their eyes immediately scan around the screen looking for relevant or interesting information. And people using screen readers do the same. Just like everyone else, those using a screen reader will skim read pages. They may begin by quickly tabbing through elements such as headings, lists or links as they get a feel for what information is available on the page.
Screen readers rely on your website’s HTML code to understand what a page looks like. This can cause issues if what the page looks like is not reflected in the code. For example, numbers may have been added at the start of lines to give the appearance of a list or the font size may have been increased and put into bold to make the title of a paragraph look like a heading. But without the relevant tags – <h> for headings etc – a screen reader will not see any of that. What they will see is an impossible-to-navigate wall of text.
Add Useful Links
It should be clear where a link will take you from its title. Try to include the full title of the page you are about to arrive at or a full description of what it is, such as ‘Enquiry Form for Summer Weddings’ or ‘The 8 Best Yoga Poses’. Links such as ‘Click Here’, ‘Here’ or ‘Form’ should never be used.
People using screen readers will often skim read a page by jumping from one link to the next, so it is important to label it clearly. Each link should have its own distinct name, which makes it clear which thing it refers to. For example, a venue’s wedding page might have different enquiry forms for summer and winter weddings. In this case, they should not label each link ‘Wedding Enquiry Form’ and then rely on the preceding paragraph to tell users which one is which.
If you are suggesting that someone find additional information on another site or another area of your website, then include a link to that page rather than an instruction to go there. For example, ‘learn more on the About Us page’ should be a link to the About Us page, not just a suggestion to look at that page.
Ideally, links should open in the same window as this allows users to navigate using the ‘Back’ button. Although this may not be possible if you want to direct them to additional information but keep them on your website.
Add Alt Tags to Images
Alternative tags, commonly called Alt tags, should describe the meaning of an image rather than describing what is shown in the image. For example, an image showing the Twitter icon should say ‘Twitter Icon’ not ‘Blue Bird’. Think about the reason the picture is there, rather than what the picture actually shows. These do not need to be long-winded, just enough to give the person using a screen reader an idea of why there is an image on the screen.
Never add a picture without an alt tag. If your picture is purely decorative and you think an alt description is an unnecessary distraction you need to add an empty alt tag to it. This lets the screen reader know that the picture is there but that it can ignore it. Without this some screen readers may choose to read out the file name of the image, which is confusing.
Interested in learning a few more accessibility and inclusion tips? Check out our accessibility blog for some extra easy-to-follow tips!
Need some expert help to make your website more accessible? Get in touch with our lovely team for a FREE digital consultation!
