Help
Accessibility
Adding content to the website is pretty straight-forward. Keeping it accessible requires a bit of additional work.
Accessible Links to External Websites
There are 2 ways of linking to an external website, a regular link, or a link that opens the website in a new browser window. We have always opted to open links to websites in a new browser window. In order for an external link that opens in a new browser window to be accessible, the link needs to inform the user that a new browser window will open up. To do this, you will need to modify the link’s HTML code.
Step 1. Create your link to an external website, ensuring the “Open in new tab” option is selected.
note: Your text link will be within a paragraph.
Step 2. After the link is created, you’ll need to edit the link’s HTML code
– Click on the link once to display the settings box.
– Click the icon with the 3 vertical dots (more options)
– Click Edit as HTML
– The link will display as HTML, shown below…
<p><a rel="noreferrer noopener" href="https://splashmg.ca/" target="_blank">Example Link</a></p>Step 3. Add the following code to the link. Place exactly as shown in the example code.
– add: class=”newwin” and <span>Opens a new window</span>
<p><a class="newwin" rel="noreferrer noopener" href="https://splashmg.ca/" target="_blank">Example Link <span>Opens a new window</span></a></p>Step 4. Once added, click the icon with the 3 vertical dots
– Then click Edit Visually (changes back to normal link text)
– While your page is in Edit mode, you will see the extra text “Opens a new window” displayed, however once your page is published it will not display… until someone hovers over the link. Also, once published, an ‘external link’ icon will display.
Example Link Opens a new window
Accessible Text Abbreviations
To keep things simple, don’t use abbreviations unless you have to. If you must use abbreviations, there’s a bunch of different scenarios to be aware of. See two examples below. For additional examples, please visit https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H28 Opens a new window
Example 1. Providing the expansion or explanation of an abbreviation for the first occurrence of the abbreviation in a Web page.
“The United Nations High Commissioner for Human Rights (UNHCR) was established in 1950 to provide protection and assistance to refugees.”
“The WAI (Web Accessibility Initiative) demonstrates the W3C commitment to accessibility.”
Example 2: Using abbr element to expand abbreviations.
– To add the abbr element to your specific text, you will need to edit its HTML code.
– The abbr element requires an opening tag with the proper title, and its closing tag: <abbr title=””> and </abbr>
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p> Sugar is commonly sold in 5 lb. bags.
Welcome to the WWW!