Hill College is committed in providing those with and without disabilities access to all content and services that are offered. This page provides the resources and recommended accessible elements that meet the Web Content Accessibility Guidelines (WCAG 2.0) along with the Section 508 standards. The Hill College website exceeds the accessible benchmarks and will continue to improve and sustain this initiative. The Hill College vision and goal is making our site accessible to all faculty, students, staff and visitors.
Introduction to Web Accessibility
Hill College aligns its strategies and standards with the World Wide Web Consortium (W3C). To better understand the concepts that are applied to developing an accessible website, W3C summarizes web accessibility nicely in their Web Content Accessibility Guidelines 2.0 (WCAG) video.
How To use the Source Code Tool
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.
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 publishing online.
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.
This table is a responsive, bordered, and accessible example.
|First Name||Last Name||Hero Title|
<table class="table table-bordered"><caption><strong>Testing Center Contacts</strong></caption>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Hero Title</th>
This is a Hoverable Row table. Table is designed to be responsive, hover state on rows, accessible attributes and with a colspan attribute.
|2||Dust Devils||San Antonio||South|
|Games will start at 9:00am.|
<td colspan="4">Games will start at 9:00am.</td>
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:
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)
Color and contrast are both vital when we are talking about web accessibility. There are three success criteria in WCAG 2 that address contrast.
- 1.4.3 Contrast (Minimum)
- 1.4.6 Contrast (Enhanced)
- 1.4.11 Non-text Contrast
- One additional is the 1.4.1 use of Color, which we discussed in the Link section.
|1.4.3 Contrast (Minimum)||1.4.6 Contrast (Enhanced)||1.4.11 Non-text Contrast
|This is a Level AA requirement||Level AAA requirement||WCAG 2.1 was published in June 2018. One new 2.1 success criterion moves contrast beyond just text. 1.4.11 Non-text Contrast (Level AA) reads:|
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
The only difference between this Level AAA success criterion and Level AA 1.4.3 is that contrast requirements are more stringent. It requires 7:1 contrast for normal text and 4.5:1 for large text. Although higher contrast is often recommended, we focus on 1.4.3 compliance throughout this article.
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
We must keep in mind that color blindness affects approximately 1 in 12 men and 1 in 200 women worldwide. this can affect users who have cataracts, low vision, or are in poor lighting situations.
- If a user needs to select a color from a group of swatches, label the color names on the page or item.
- Avoid color-banded rows in tables, they can cause problems when the background and foreground don't have a high enough contrast ratio.
- Color in Graphs, Use patterns or various shades so that color-blind users can distinguish them. Adding a legend or labels near each element is also helpful.
- Referring to Color, don't refer to the color of an object as the only attribute. E.g., instead of saying "select the red button," say "select the red stop button." Button also has the universal square shape in the button.
If you have any questions regarding accessibility and/or any of the defined elements above, please contact: