Make Text Accessible on a Webpage

Use Text Styles

Use the text styles that are pre-defined by the text editor. Some text editors allow users to customize individual paragraphs with different text fonts, colors, and styles. Custom formatting can create an inconsistent look in the website. It also creates a barrier to screen readers because screen readers will read each individual style setting when the text style is not pre-defined.

Using text styles is very simple. When editing content in a website or blog, use the pre-defined text styles of the text editor, i.e. heading 1, heading 2, … and paragraph. Some text editors provide more styles, such as citation, underlined text, etc. Using text editor default styles creates tags in the coding of the webpage (<h1> <h2> … <p>). The screen reader will skip all text styles, and read only “heading 1”, “heading 2”… “paragraph”. The screenshot shows you how to select headings in a web text editor.

Select the texts and select "Heading 4" in web text editor
Select the texts and click on "Heading 4" in your text editor

Do not type out full hyperlinks in a website e.g. Link text instead, e.g. CCRI website. Screen reader programs have difficulty reading URLs and it takes more time for the reader to read a long URL.

Create Accessible Hyperlinks

Hyperlinked text needs to explain what the link offers, so that a user using a screen reader will understand the content of the link. Also, linked text has to be long enough for mobile device users to click on. For example:

The following are examples of poor links; also they are too short:

  • Click here for instructions on how to use a green screen on media editing.
  • Learn more about captioning here and here
  • Microsoft Word Editing 101 (Register) | Microsoft Access 101 (Register)
  • CCRI employees can use Microsoft Lync to chat with us instantly!... [Read More]

Strong examples:

This page developed and maintained by IT, Center for Instruction & Technology. Send comments and suggestions to

If you have difficulty accessing the information on this page, please contact Web Services.

Last Updated: 9/27/17