Best Practices for Creating Accessible Content with Umbraco
Learn how to create accessible content using Umbraco effectively. Discover tips on structuring pages, managing page titles, entering content, and checking HTML for accessibility issues. Embrace the importance of creating web content that is user-friendly and inclusive.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
HSL Training Using Umbraco to create accessible content
Overview Introduction Umbraco 4 difficulties
Creating a page Keep pages layouts as simple as possible Structure content with headings Avoid copying and pasting content from other sources directly into Umbraco Use bold and italics sparingly - when used, do not highlight large areas Do not use colour
Page titles The page title must be unique When changing an existing page title, be mindful of the URL Users may have this bookmarked Google will have indexed the previous URL To change the page title, without changing the URL follow the below instructions: Enter the existing URL into the URL Name field under properties Change the Name field to the new page title Do not include spaces after the page title. A space will appear as a hyphen. The page title appears in the Browser tab, this could be different to the main page title.
Entering content Ideally, content should be typed directly into the Umbraco editor Once content is added to Umbraco, it is converted into HTML HTML is coding which instructs the browser/screen reader on how to display content When adding content, you must be mindful of the HTML that is generated If text needs to be copied, from Word or other sources, first copy the text into Notepad or Notepad++ to strip any unwanted formatting
Checking your HTML The HTML icon allows editors to view the page s HTML HTML is made up of tags - there are open tags <strong> and close tags </strong> The text in-between the tags is what is affected by the enclosing tags Example: <strong>This text will be bold on screen</strong> The HTML viewer can help you to spot accessibility issues that are not visible in the editor The HTML icon within the Umbraco Editor
HTML window - Example The text shown within Umbraco The HTML generated for the text within the left-hand side image
Cleaning up HTML Copying content from Word or other sources can add additional HMTL which can impact accessibility Examples of this are: Classes i.e. class=MsoNormal Empty tags Bullet points that are not formatted correctly Unnecessary styles Span tags Pasting content into Notepad first will reduce this though it may not capture everything Tip: Click Save before editing the HTML tab, Umbraco will sometimes strip out unnecessary code HTML generated from text that is pasted from Word
Using text Styles Styles available within the Style drop down are: Heading 2-4 Heading 1 is not required as the Page title is automatically set to Heading 1 BlockQuote Used for stand out quotes If you are quoting in-line with text, this style does not need to be used Adding a BlockQuote and continuing to enter text can add multiple BlockQuotes Add BlockQuotes last or, use the HTML viewer to create a break at the end of the HTML
Headings Common failures: Empty heading tags Headings in incorrect order Non-descriptive headings How to fix: Check HTML tab for empty heading tags i.e. <h2> </h2> Empty headings are open and close heading tags with no heading text in between Headings in incorrect order A H2 should come after a H1, a H3 after a H2, H4 after H3 A heading can be followed by another heading of the same level Ensure your headings are descriptive of the content underneath Headings are added using the Styles drop down in Umbraco
Lists A common accessibility failure is having a list of ONE item, lists should always contain multiple items Two types of lists can be added using Umbraco Ordered lists Lists ordered by number (HTML = <ol>) Unordered lists Lists using bullet points (HTML = <ul>) The correct HTML for bullet points: <ul> <li>bullet one</li> <li>bullet two</li> </ul> Incorrect HTML two items have been added into two separate lists of one item <ul> <li>bullet one</li> </ul> <ul> <li>bullet two</li> </ul>
Adding hyperlinks Link text should be unambiguous The purpose of the action should be determined from the link text alone Avoid Making whole sentences into links Very short links Empty links Avoid non-informative link text like: click here read more link to [some link destination] Info URLs as link text
Adding links to media When adding links to media, include the file type and download size Use the format [pdf, 283 kB] Use square brackets [] rather than parentheses Use file extension without punctuation (.) rather than program name; e.g. docx rather than Word Use kB, MB, etc and no more than 1 decimal place on MB and GB Example format for document type and size
Anchors Anchors can be used to jump a user to a heading Anchors can be added as follows: 1. Using the HTML viewer, find the heading you would like to link to CTRL + F can be used to find specific text 2. Add an id to the heading you would like to link to and Update E.g. <h2 id= myIDhere >My heading</h2> 3. Highlight the text you would like to link 4. Select the link icon 5. Enter your ID into the URL field with a hashtag before the ID #myIDhere Note that IDs are case sensitive
Adding Images When adding an image to a page it is important that you change the Name field The Name field is used for the images alt text Umbraco will pre-populate this field with the name of the image this is likely to be inappropriate The title field is not required, we recommend this is left empty to avoid accessibility issues When images are added directly to the Media Library there is an alternative text field, however this is not pulled into the page
Alt text tips For decorative images, delete the pre-populated name (alt) text so that the field is empty Alt text should be a short description conveying the essential information presented by the image Alt text should not include the file name and extension Avoid having images of text Avoid having links on an image where the link is repeated in surrounding text For complex images, such as diagrams, provide supporting information in the body text to avoid long alt text The W3C have provided a decision tree that can help you work out what the alt text should be https://www.w3.org/WAI/tutorials/images/decision-tree/ There is also information here that can be helpful for more complex cases https://www.w3.org/WAI/tutorials/images/
Tables Tables should be used to display data Tables used for layout should be kept to a minimum If required, use the tick box Used for layout this tells screen readers to ignore the table Adding table borders 1.Select the table icon 2.Enter columns and rows 3.Select Value from the Class field 4.Enter table-border 5.Insert table
Tables (continued) Data alignment Use the alignment icons to align data within tables Outside of tables, do not overuse the alignment icons. Blocks of centred text can be difficult to read. To make header rows: 1. Right-click on your heading and go to Row -> table row properties 2. Set Row in table part to Table Head 3. For each heading: Right-click and go to Cell -> Table cell properties Set Cell Type to Header Set Scope to either Column or Row Alignment options
Other issues Other accessibility issues to be aware of are: Using T and E for Telephone and Email these should be written in full Videos Videos can be added using the Insert YouTube Video Macro Enter a descriptive title for your video If the title is blank, a default title Embedded Youtube Video will be added
Questions? Time for any queries or specifics
