Formatting your text content correctly will make your content readable for everyone. Fonts and formatting Body text will be one of the main components on your website. Your body text should be size 12-14 and written in Source Sans Pro, the University typography. To make the text as readable as possible, you should avoid prolonged use of: Bold text Italics Strikethrough Underlining Uppercase The text formatting options listed above cannot be detected by screenreaders, so if your content relied on these types of formatting, some users would miss out on the full meaning of the page or find the page more difficult to navigate. These text formatting options can also be difficult for some users to read. Avoiding this formatting will keep your web content easy to read for all visitors, and there are many other page components you can use to make parts of your webpage stand out. Page components - Demonstrating EdWeb 2 The EdWeb 2 Demonstration site, including this page, is written in the University typography and follows these text formatting guidelines so you can see how text will appear on your published website. Headings You should use headings to divide content on a web page. Chunking and signposting different topics and subtopics makes your content easier to navigate and more visually appealing. For headings and subheadings, the Web Publishing Platform provides up to 6 heading types. These headings automatically nest when used in the right order, allowing visitors using screenreaders to easily navigate and read the page. You must nest these headings correctly or your page will break for screenreaders. You should also never use a different heading style for aesthetic reasons. Heading 2 Heading H1 is used for the page title, so the first available heading for you to use is H2. Heading 3 H3 onwards can be used to further divide up your subheadings. Heading 4 Heading 5 Heading 6 Although up to H6 is available, we would not recommend using this many levels. Instead, you could split your content into multiple pages to make your content less overwhelming. All the content on this website uses these nested headings, so you can see how pages with multiple subheadings will display when published. You can find more information on the 'Headings' page of the Demonstration Site: Headings - Demonstrating EdWeb 2 Abbreviations and tagging Tagging can be used when providing an explanation for an abbreviation or acronym used in-text. For example, you might use it for a country, company department, or piece of legislation. You should tag for An abbreviation – a set of initials A contraction - a word that has been shortened An acronym - a set of initials that spell out a pronounceable word When an abbreviation, contraction or acronym is tagged, a screenreader will ignore the text on screen and read out the tagging information instead. This will enable visitors to your site who have disabilities to access the full meaning of the text. You can read more about how abbreviations and tagging improve accessibility in the Wiki article: Abbreviations, tagging and accessibility - EdWeb Wiki [EASE login required] Abbreviations should be avoided wherever possible. If you do need to use an abbreviation, a grey dotted line will appear under the abbreviation and a small pop-up box will appear with an explanation when the user hovers their mouse over it. Common abbreviations You might need to tag a variety of abbreviations, including: Degree titles, for example MClinDent, PGDE, BA or DSc Names of University schools or departments, for example ECA or EUSA External organisations, such as the UCAS or SQA. Another common abbreviation is the USA. Colour and contrast In EdWeb 2, your use of colour on your website will be one of the approved University colour palettes. It will determine the colour of your page title, and any standout components such as block quotes and feature cards on your page. Edinburgh's digital colours – Brand guidelines [EASE login required] To make your content readable for all visitors, you must make sure that there is a clear difference between background colour and text colour. You should also avoid conveying information by colour alone. For example, if groups of information were categorised by colour, you should write out the category associated with each colour. This ensures that the full meaning of the data would be accessible to screen reader users or users with colour blindness. Take it further You can learn about these topics and see some examples of good practice in the video from the Effective Digital Content training: Accessibility and readable text – watch the video on Media Hopper This article was published on 2024-02-10
