When you want to present information that is sequential or related, it is recommended to make use of list elements. Visually these will be styled with either numbers or bullet points, as a conventional list would. Semantically, they communicate that each list ‘element’ (each point in the list) stands alone, but is grouped with the other elements in the list.

As part of the WYSIWYG editor, you get the option of two types of lists:

  • Ordered (numbered) lists
    This should be used where the list elements are sequential, such as a set of instructions.​​​​​​
  • Unordered (bullet point) lists
    These should be used where information is grouped, but the sequence is non-essential – contact details, for example, all have grouped meaning, but could often be presented in any order.

Screenshot of the different types of lists in use - unordered bullet point lists, and ordered numbered lists

It is important that you use the list function in the WYSIWYG editor, and do not paste bullets or numbers from a Word document.  When this is done, the code is not aware that it is a list, and it can't be read out or skipped by screen readers.

Sub-lists

It is also possible to create sub-lists, further indenting bullet points or beginning a letter-based list beneath a specific number. These are communicated appropriately to assistive technologies, so are best used where one list element has a series of further grouped elements beneath that.

Screenshot highlighting the button to insert an unordered bullet point list in the 'What you see is what you get (WYSIWYG)' editor

Creating sub-lists

  • In your WYSIWYG editor, on one of your list elements (blank or otherwise), press ‘tab’. This will further indent the element that you have selected, creating a sub-list of the same type as your main list.
  • To change the type of the sub-list, simply then select the different type of list. This will change your sub-list, but not the main list.
  • To break-out from the sub-list and return to the main list, press enter to start a new list element, and then press enter again while it is still blank. This will close the sub-list and return you to a new point on the main list. Pressing enter again on this blank main list element will close the list as a whole and return you to a new line in the editor.