This page provides the recommended accessible elements that meet the Web Content Accessibility Guidelines (WCAG 2.0) along with the Section 508 standards. The Hill College website exceedes the accessible bechmarks and will continue to be in line with the federal mandates. The Hill College vision and goal is making our site accessible to all faculty, students, staff and visitors.


Web Accessibility for Designers Infographic

Web Accessibility for Designers infographic with link to text version at WebAIM.org

How To use the Source Code Tool

The Advanced Code Editor (ACE) is Cascade CMS' built-in syntax-highlighting editor. Assets that are editable with the code editor include Files, Template, Formats, and Text/XML Blocks. The editor provides syntax-highlighting for a variety of languages, auto-indentation and auto-formatting, code folding and code snippets. For our purpose, ACE will be referenced as Source Code Tool. Please review the Using Source Code Tool PDF prior to coping and pasting code to your pages.

Buttons

HC Theme add

Copy & Paste code:

<div style="text-align: center;"><a class="slide-button alt" href="https://www.hillcollege.edu">HC Theme Button</a></div>

All that will need to be done is to edit the URL or path ("href" is where the URL and/or path to the file will be added. everything inside the quotes is where you plug in the url or path, don't delete the quotes) and text on the button.

Call to Action add

*Please submit a ticket to Phillip Esparza or Eric Larson to have the call to action button added.

 


Accessible PDF

A document or application is considered accessible if meets certain technical criteria and can be used by people with disabilities. This includes access by people who are mobility impaired, blind, low vision, deaf, hard of hearing, or who have cognitive impairments. The PDF is an accessible sample. All PDFs need to be accessible prior to publishin on site.

Note: These Best Practices techniques require access to Adobe Acrobat Pro DC. Adobe Acrobat Reader DC and Adobe Acrobat Standard DC do not have the complete set of tools needed to create and validate PDF documents for accessibility.

Accessible Table

Table add
Testing Center Contacts
First Name Last Name Hero Title
Bruce Wayne Batman
Peter Parker Spiderman
Bruce Banner The Hulk
Clark Kent Superman
Table Code add
<table><caption><strong>Testing Center Contacts</strong></caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Hero Title</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="First Name">Bruce</td>
<td data-label="Last Name">Wayne</td>
<td data-label="Hero Title">Batman</td>
</tr>
<tr>
<td data-label="First Name">Peter</td>
<td data-label="Last Name">Parker</td>
<td data-label="Hero Title">Spiderman</td>
</tr>
<tr>
<td data-label="First Name">Bruce</td>
<td data-label="Last Name">Banner</td>
<td data-label="Hero Title">The Hulk</td>
</tr>
<tr>
<td data-label="First Name">Clark</td>
<td data-label="Last Name">Kent</td>
<td data-label="Hero Title">Superman</td>
</tr>
</tbody>
</table>
<style><!--
table {
border-collapse: collapse;
width: 100%;
}
caption {
color:#000000;
}
th {
background-color: #eee;
font-weight: bold;
}
th,
td {
border: 0.125em solid #333;
line-height: 1.5;
padding: 0.75em;
text-align: left;
}
/* Stack rows vertically on small screens */
@media (max-width: 30em) {
/* Hide column labels */
thead tr {
position: absolute;
top: -9999em;
left: -9999em;
}
tr {
border: 0.125em solid #333;
border-bottom: 0;
}
/* Leave a space between table rows */
tr + tr {
margin-top: 1.5em;
}
/* Get table cells to act like rows */
tr,
td {
display: block;
}
td {
border: none;
border-bottom: 0.125em solid #333;
/* Leave a space for data labels */
padding-left: 50%;
}
/* Add data labels */
td:before {
content: attr(data-label);
display: inline-block;
font-weight: bold;
line-height: 1.5;
margin-left: -100%;
width: 100%;
}
}
/* Stack labels vertically on smaller screens */
@media (max-width: 20em) {
td {
padding-left: 0.75em;
}
td:before {
display: block;
margin-bottom: 0.75em;
margin-left: 0;
}
}
--></style>

Image

Decorative Image Sample

The "alt" tag is empty, Code:

<img alt="" caption="false" class="" src="" width="500" height="357" />

For a decorative Image, select "decorative image" before clicking "OK" on the edit image dialog screen. See below:

Edit image dialog box with decorative image selected

Images used to supplement other information

The above image is a supplement for the content of the page, notice that the "alt" tag has a description of the image, below:

<img alt="Edit image dialog box with decorative image selected" caption="false" class="" src="" width="331" height="279" />

 

Icon image that has a function (hyperlinked)

Print this page
Use the functionality of the link or button icon as your "alt" text alternative when working with icon images, Code:

<img alt="Print this page" caption="false" src="" width="144" height="144" />
For more information on Alternative Text can be found on the WebAIM website.

Links

 Page direction or email links

  • Links or Hyperlinks must be either Bold or Underlined:

jspicer@sample.com

or

jspicer@sample.com

Refrain from using "click here",

Instead of: "please click here" - here being the link.

Use this: Please click about transcripts for more information - make sure to title the hyperlink.

Link text used for multiple different destinations

  • The same link text is used for links going to different destinations in the Navigation. Users might not know the difference if they are not somehow explained. If the destination page is the same, this is not an issue. If the destination pages are not the same, make sure the links can be distinguished by their link texts or WAI-ARIA labels ('aria-labelledby' or 'aria-label') alone to make the difference clear to all users:

 Example:

"Admissions" In the nav-bar on top of pages should point to the same location as the "Admissions" listed in the side-nav.