Widgets

Code

<!-- Basic Version -->
<div class="info-widget-CTA coc-secondary-8L cui">
    <div class="left-col">
        <p id="cityTalk" class="details">Your official source for the latest<br> City of Calgary news and information</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md primary" aria-describedby="cityTalk">View CityTalk&nbsp;<span class="cicon-external-link"></span></a>
    </div>
</div>

<!-- Large Decorative Icon Version -->
<div class="info-widget-CTA with-large-icon coc-secondary-8L cui">
    <div class="left-col">
        <span class="cicon-comments-o" aria-hidden="true"></span>
        <p id="cityTalk" class="details">Your official source for the<br> latest City of Calgary news and information</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md primary" aria-describedby="cityTalk">View CityTalk&nbsp;<span class="cicon-external-link"></span></a>
    </div>
</div>

<!-- Compacted Version -->
<div class="info-widget-CTA coc-secondary-8L cui info-widget-CTA-compact">
    <div class="left-col">
        <p id="cityTalk" class="details">Your official source for the latest <br>City of Calgary news and information</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md primary" aria-describedby="cityTalk">View CityTalk&nbsp;<span class="cicon-external-link"></span></a>
    </div>
</div>

<!-- Compacted Version with 2 CTA buttons -->
<div class="info-widget-CTA coc-secondary-8L cui info-widget-CTA-compact">
    <div class="left-col">
        <p id="cityTalk" class="details">Looking for more business information on<br> helping customers get around 17th Ave?</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md secondary-ghost" aria-describedby="cityTalk">View business FAQs</a>
        <a class="cui btn-md secondary-ghost" aria-describedby="cityTalk">Send me updates</a>
    </div>
</div>

Usage

Display information and invite the user to take the action.

Accessibility

Use the aria-describedby attribute to indicate the ID of the elements that describe the object

Code

<!--Important-->
<h3>To identify the menu, there are additional special elements and attributes in HTML and WAI-ARIA that, for example, enable users of assistive technology to jump directly to the menu. this functionality, a WAI-ARIA landmark role of navigation should be added to the element wrapping the navigation links.</h3>
<div role="navigation" aria-label="Main Menu">…</div>

<h3>If HTML5 is used, the <nav>element is supposed to apply the landmark role implicitly. As some browser don’t do this at the time of writing, and to improve the experience for users with older browsers, the navigation role should be added as well.</h3>
<nav aria-label="Main Menu">…</nav>

<Using aria-label>
<h3>The aria-label provides a description of the section to users that use landmarks to navigate the page. This approach makes it possible to use headings only in the main content of the page. The label of the menu is announced when entering the menu as well as when navigating to it. </h3>


<h2>List widget - regular font-weights for all the list items</h2>
			<nav aria-label="Main Menu">
				<ul class="list-widget cui">
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
				</ul>
			</nav>

			<nav aria-label="Main Menu">
				<ol class="list-widget cui">
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
					<li><a href="#"><span>Aliquam tincidunt</span></a></li>
				</ol>
			</nav>

<h2>List widget - bold font for only the first list item</h2>
				<nav aria-label="Main Menu">
					<ul class="list-widget page-links cui">
						<li><a href="#"><span class="boldFont">Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
						<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
						<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
						<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					</ul>
				</nav>

			<nav aria-label="Main Menu">
					<ol class="list-widget page-links cui">
						<li><a href="#"><span class="boldFont">Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
						<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
						<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
						<li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
						<li><a href="#"><span>Aliquam tincidunt</span></a></li>
					</ol>
				</nav>

<!--Important-->
<
- Group navigation links using the HTML5 nav element.
- Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers.

>
<nav aria-label="Ralated links">
		<h3 class="regular-link-title">Related links</h3>
		<ul class="list-widget cui regular-link">
				<li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
				<li><a href="#">Aliquam tincidunt</a></li>
				<li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
				<li><a href="#">Aliquam tincidunt</a></li>
				<li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
				<li><a href="#">Aliquam tincidunt</a></li>
				<li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
				<li><a href="#">Aliquam tincidunt</a></li>
		</ul>
</nav>

Usage

• Identifying the menu
• The first item on the list widget should be the most important item on the list and should be bolded to emphasize its importance. Best practice dictates that only the first item be bolded

				<nav aria-label="Main Menu">
					<ul class="list-widget cui">
						...
					</ul>
				</nav>
		

• Identifying the group the page links

	 <nav aria-label="Ralated links">
			<h3 class="regular-link-title">Related links</h3>
			<ul class="list-widget cui regular-link">
				...
			</ul>
	</nav>

Accessibility

For websites where the order in which the user reads the pages doesn’t matter, an unordered list <ul> should be used.

In some instances, pages/links need to be read in a certain order, an ordered list <ol> should be used

Identifying the menu

Identifying the group the page links

Code

<!--Label widget - with button-->
 <div class="cui label-widget">
		<button aria-label="Click to check more details of the beta" class="cui icon-label-btn icon-label-btn-info" >
			Beta  <span class="cicon-info-circle" aria-hidden="true" ></span>
		</button>

		<p id="beta">Neque porro quisquam est <a href="#">Feedback</a>. Go back to <a href="#">our old site</a> </p>.
</div>

<!--Label widget - with text-->
<div class="cui label-widget">
	<span class="cui label-text coc-secondary-blue-access" >
		Beta
		<span class="cicon-info-circle" aria-hidden="true" ></span>
	</span>

	<p id="beta">Neque porro quisquam est <a href="#">Feedback</a>. Go back to <a href="#">our old site</a> </p>.
</div>

Usage

• Helps user to understand the status of new digital services or sites
• Allows user a longer transition phase from a legacy system
• Helps user make a more informed decision when choosing to use the new or legacy system to accomplish their goals and objectives

Accessibility

Use the aria-describedby attribute to indicate the ID of the elements that describe the object. Use this technique if the objective of the text is to further explain the purpose of the button.