Text

Text is the most accessible form of digital information. Text can be presented in different ways by assistive technologies. For example, reading software can convert a text into speech (auditory) and a braille display can translate it into braille (tactile).

A clear structure is important for the accessibility of a text. Elements such as headings, subheadings, and lists are used for structure. The structure also needs to be properly coded. In addition, the content must be understandable and presented to visitors in a logical order. All of this must be indicated correctly in the code.

  • The page title should describe the topic or purpose of the page. A descriptive page title makes it easier for everyone to navigate the website. Page titles are displayed in the browser window or in a tab. A good page title helps visitors to easily find the page when, for example, several tabs are open in the browser.

    Good page titles:

    • clearly describe the topic or purpose of the page.
    • change when a new page is loaded.
    • have the unique information in front.
    • are uniform with the other pages.
    • are concise.
    • are unique.

    Page titles are used by the assistive technology to identify the web page. This is the first information that is presented when a page is opened.

    Use the title element in the <​head> element in the page’s code. In this element, describe the topic or purpose of the page.

    It looks like this in the code:

    				
    					
    				
    			

    In a CMS, the page title can often be set per page of the website.

  • The headings on a web page should describe the topic or purpose of the underlying text. Make sure each heading says something about the text below it. A descriptive heading makes it easier for anyone to find information on a page. All headings together should give a good idea of the content of the web page. This allows visitors to quickly recognize the structure of a web page or text.

    A heading must always have an underlying content.

    Visitors using a screen reader can use a list of all headings to navigate over the web page. They can also jump straight to the next heading.

  • Thanks to well-written descriptive headings, visitors can quickly recognize the structure of a text. A heading often has a different design, for example it is larger and in bold. It makes it easier to scan the structure of the page.

    The structure that is only conveyed through design cannot be perceived (or not properly perceived) by visitors who are blind or partially sighted. For these visitors it is important to also record structure in the code. For example, software can also determine the structure and the relationships on the web page.

    Visitors using a screen reader can use a list of all headings to navigate the page. They can also jump straight to the next heading.

    Make sure that all headings are formatted with an HTML element (h1 to h6).

    Note: Texts that are not headings may not be formatted with an HTML heading element.

    Further make sure that the order of the headings and subheadings is logical. A few rules apply:

    • The first heading on the page should be a first-level heading.
    • A first-level heading should be followed by a second-level heading.
    • A second-level heading should be followed by another second-level heading or a third-level heading.
    • The heading levels should not be skipped.
    				
    					
    				
    			

    In a CMS, a text can be selected and indicated that it is a heading. You can also choose the level of a heading. This automatically formats the text with the correct HTML element.

  • Lists emphasize important points in a text. A list often has a different design. Parts of a list are formatted with a bullet or a number.

    Structure that is only conveyed through design cannot be perceived (or not properly perceived) by visitors who are blind or partially sighted. For these visitors it is important to also record structure in the code. For example, software can also determine the structure and the relationships on the web page.

    Visitors who use a screen reader can navigate through a list more easily. For example, screen readers indicate how many items are in the list and offer the option to skip the list completely.

    Make sure lists are formatted with a list element. There are different types of lists: a bulleted list (<​ul>), a numbered list (<​ol>), and a descriptive list (<​dl>).

    Bulleted list

    Items in a bulleted list are preceded by a bullet character such as a bullet or dash. Use bullet points when the order of the items in the list is not important.

    It looks like this in the code:

    				
    					
    				
    			

    Numbered list

    Items in a numbered list are preceded by a number. Use numbered lists when the order of the items on the list is important.

    It looks like this in the code:

    				
    					
    				
    			

    Description list

    Use a description list for lists that consist of a name, a term, or a concept with a description that goes with it. For example, it can be used for a glossary of terms. In a description list, the <dt> element is used to indicate a term and the <dd> element is used to indicate the description.

    It looks like this in the code:

    				
    					
    				
    			

    In a CMS, you can select a text and mark it as a list. You can choose between a bulleted or a numbered list. This automatically formats the text with the correct HTML element.

    Note: A description list is not always supported.

  • Tables consist of rows and columns. The data in those rows and columns is interrelated. For visitors with a visual impairment, this relationship is not immediately clear. For these visitors it is important that these relationships are also registered in the code.

    Structure and relationships that are only conveyed through design, cannot be (properly) perceived by visitors who are blind or visually impaired. For these visitors it is important to also register the structure in the code. For example, software can also determine the structure and relationships on the web page.

    Bezoekers die gebruik maken van een schermlezer kunnen makkelijker door een lijst navigeren. Schermlezers geven bijvoorbeeld aan hoeveel onderdelen er in de lijst staan en bieden de mogelijkheid om de lijst gelijk over te slaan.

    Make sure that tables are formatted with a table element (<​table>). This element must also specify what a table headers are and what the data cells are. The table headers are coded with a <​th> element, and the data cells with a <​td> element.

    It looks like this in the code:

    				
    					
    				
    			

    Also give the table a short description. This description is coded with a <caption> element. A good description helps visitors find a table and understand what the table is about.

    It looks like this in the code:

    				
    					
    				
    			

    A table can (in many cases) be inserted in a CMS. Determine the number of rows and columns, and precisely indicate what the table headers are. This automatically formats the table with the correct HTML elements.

  • Give links on a web page a link text from which the purpose of the link can be easily understood. A descriptive link text is clear to everyone. Make sure that the link text is formulated in such a way that the visitors immediately know what the link refers to.

    Do not write:

    • Read more. (unclear)
    • LinkedIn. (unclear)

    But write:

    • Read more about digital accessibility.
    • Go to our LinkedIn page.

    Tip: If you reference an e-mail address, use the full e-mail address as the link text.

    Visitors using a screen reader can use a list of all links to navigate the page.

    If there really is no other option, then the context of the link may also be used to describe the purpose of the link. For example, the same sentence, paragraph, or in the same table cell. The link text can also be extended in the code with the aria- label attribute or with the title attribute.

    It looks like this in the code:

    				
    					
    				
    			

    Wat ook kan is het verbergen van een deel van de linktekst met CSS:

    				
    					
    				
    			
    				
    					
    				
    			

    Note: Link texts that are expanded using CSS or the aria-label attribute are only visible to visitors using a screen reader.

    A link text should never be left empty. Without a link text it is impossible to determine where the link refers to. An empty link may not be visible on the page, but these links will appear in the focus order. Screen readers will notice these links as well.

    In cases where not only text but also an image is used as a link, we speak of functional images. Give images that are also a link a text alternative that describes what the link points to. If an image and a text are used with both the same link purpose, it is better to combine them into one link. For visitors who use assistive technologies, it can be distracting if the same link is read twice in a row.

  • In instructions, do not refer only to sensory properties of components such as shape, color, size, location, orientation, or sound, but also use text.

    Do not write:

    • Use the round button to send your data. (form)
    • We are available on the days marked with a green dot. (colour)
    • Click the button at the bottom right of the page to go to the next page. (location)

    Instead write:

    • Use the (round, green) button (at the bottom) with the text “Send” to submit your details.

    Instructions in which only sensory properties are used cannot be properly followed by all visitors. For example, visitors who are blind or visually impaired cannot perceive shape, size or location. Instructions in which only sound is used cannot be (properly) followed by visitors who are deaf or hard of hearing.

  • Specify the default language of a web page in the code. For example, software can determine the language of the web page. If there are several languages on a page, use the language that is most common.

    Reading software reads a web page. The pronunciation of the words depends on the language of the page. If no language or a wrong one is specified in the code, reading software may read the content incorrectly or unclearly. The default language of the browser is then used and it does not always match the language of the content.

    Add the lang attribute to the html element to set the language of a web page. Use the correct language code in this attribute. A language code consists of a two letters.

    It looks like this in the code:

    				
    					
    				
    			

    Each language has its own designation. For Dutch it is ‘nl’ (lang=”nl”), for English it is ‘en’ (lang=”en”), for German it is ‘de’ (lang=”de”). View all language codes on IANA Language Subtag Registry.

    In a CMS, the language of a website can be specified in the settings.

  • If a sentence or paragraph in the content is written in a language other than the default language, this must be indicated in the code. This way software can determine the language of the web page. This obligation only applies to sentences and paragraphs, not to individual words.

    Reading software reads a web page. The pronunciation of the words depends on the language of the page. If no language or a wrong one is specified in the code, reading software may read the content incorrectly or unclearly. The default language of the browser is then used and it does not always match the language of the content.

    Add the lang attribute to the elements with a different language. Give this attribute a value that consists of a two-letter code that represents a language. The lang attribute can be used at the block level (<​div>, <​p>, <​table>, etc.) but also on inline elements (<​span>, <​a>, <​strong>, etc.).

    It looks like this in the code:

    				
    					
    				
    			

    There are exceptions for proper nouns, technical terms, words of an indefinite language, and words or phrases that have become part of the vernacular of the surrounding text.

    View all language codes on IANA Language Subtag Registry.

    Note: Not all kids of CMS support this feature.

Succescriteria

  • Principle 1. Perceivable
    • Guideline 1.3 Adaptable
      • 1.3.1 Info and Relationships
      • 1.3.3 Sensory Characteristics
  • Principle 2. Operable
    • Guideline 2.4 Navigable
      • 2.4.2 Page Titled
      • 2.4.4 Link Purpose (In Context)
      • 2.4.6 Headings and Labels
  • Principle 3. Understandable
    • Guideline 3.1 Readable
      • 3.1.1 Language of Page
      • 3.1.2 Language of Parts