#Tips for improving website content for screen readers

#Tips for improving website content for screen readers

Make it easy to read:-

One technique that improves readability for the public also works well for screen readers:

Use shorter sentences and bullets:-

Check the content and suggest readability improvements, including word choice, sentence and paragraph length, diversity - but clarity - of vocabulary.

Avoid abbreviations and spelling mistakes:-

Accurate spelling and grammar are especially important for screen readers.

Spelling mistakes can cause screen readers to mispronounce a word.

Use titles instead of bold type:-

Use appropriate headings to indicate new sections or categories instead of relying on bold fonts.

The constant use of H2 and H3 headers gives assistive technology and all readers a sense of the organization and structure of the page.

Maintaining an appropriate hierarchy also helps communicate how these captions relate to each other.

Wait for the emojis:-

If using emojis in the copy, put them at the end of a sentence. Placing them in the middle disrupts speech interpretation and decreases the readability of the content.

Promote hashtags:-

They make it easier to read hashtags correctly.

The first letter of each word in capital letters.

With camelCase, the first letter of the first word is lower case, while the first letter of each subsequent word is upper case.

Do not "click here":-

The linked text should have meaning regardless of surrounding sentences.

Instead of saying "click here", use descriptive text such as "Check out this post on Topic A." Visitors to the site will know what they will see if they click on the link.

Forget the new windows:-

When including a link in the text, allow it to open in the existing window to minimize confusion and avoid a reset of the back button.

If someone has a compelling reason for wanting links to open in new windows, provide a warning. Visitors can then decide whether they want to leave the current window and, if they open it, they can find their way back to the original window.

Rethink embedded text in images:-

Screen readers cannot read text printed on an image.

Only embed important text in an image if you have created explanatory alt text or captions for it.

Make infographics and charts work:-

If creating an infographic or graph, include a detailed textual explanation of the data or information provided in the image.

Label data directly instead of using only color-coded captions to reduce the cognitive burden on users.

The technique also reduces the need for the human reader to scan back and forth to match the legend with the data.

Get straight to the point in the alt text

Be descriptive - not poetic - with alt text.

Don't include unnecessary keywords.

Instead, describe the image in a sentence or two.

Readers cut alt text descriptions after 120 or 125 characters. So avoid posting any images or graphics that have an excessive amount of copies if you cannot write effective image descriptions for them.

Twitter, Facebook, Instagram, and LinkedIn all allow you to add personalized alt text to images.

Describe functional images:-

The websites use images for functional purposes as well as for illustrative purposes.

Images used as links (including buttons) must include a textual alternative to describe their functionality.

For example, the alt text for a blue oval with the word “submit” could be “a button to submit a form”.

Fill in the details of the form:-

Use a symbol such as an asterisk to indicate a required field on a form.

The display of the asterisk at the beginning in a different color makes it a little easier to identify the required fields.

Delete the non-compulsory fields or say them at least "optional"

Bonus section: think about the color

Color may not affect how screen readers interpret your copy.

The goal is to make the links in the body of the text clearly stand out. Blue works well with dark copy and emphasizing links makes them even easier.

Some readers have difficulty reading text when there is not enough contrast between the foreground and the back.