Tt
Click this widget to change the font size.
CC
Click this widget to change contrast.

Home Page 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Links | Search | Bio |

Guide to HTML, CSS, and JavaScript (Buffalo State University Version)


Chapter 5: Creating an HTML5/CSS and ADA Compliant Web Page

Since this is a course that emphasizes HTML5, it is important that your web pages are HTML5 compliant. Earlier I introduced the first line of every HTML5:

<!doctype html>

As mentioned, this line tells the browser to expect HTML5 code (as opposed to HTML or XHTML).

Validating HTML and CSS on a Web Page

You can test whether your web page is HTML5 and CSS3 compliant by using the W3C HTML Validator (https://validator.w3.org/nu) and W3C CSS3 jigsaw page (https://jigsaw.w3.org/css-validator/) and entering the URL of your website. This service is under development so you may receive some errors or warnings that don't appear to have anything wrong with your code. For example:

-ms-radial-gradient
or
-moz-border-radius

You may also ignore any errors or warnings you may receive if you are using a third-party framework such as BootStrap.

ADA Compliance

Not only should your HTML5 and CSS code be compliant but your web site should also be compliant with the Americans With Disability Act (ADA) too. You can test whether your web pages are compliant by using a browser extension for Edge or Chrome, such as Accessibility Insights for Web, WAVE, Lighthouse, or Axe.

You can find the Web Content Accessibility Guidelines (WCAG) on the W3C.org web site. You should strive to meet the A and AA guideline levels.

WCAG A and AA Level Compliance

Some of the issues you should look for in your web site:

Required HTML tags
The tag <html> should have the llanguage defined. For example, in the United States you would use: <html lang="en-us">
There should be a <meta /> tag that declares the character set being used. For example, <meta charset="UTF-8" />. This <meta /> should be the first tag after the <html lang="en-us"> tag.
There should be a set of <title>put-page-title-text-here</title> tags. This information is used by screen readers and for the browser bookmark/favorite text.
There should only be one (1) set of <h1> ... </h1> tags per page.
Color Contrast
The ratio of the background color and the foreground color of every item on your web site should be at least 4.5.
The webaim.org color contrast checker is a good tool for finding the right contrast.
Image alt="" Elements
Screen reading software, such as JAWS, NVDA (Non-Virtual Desktop Access), or the "Read Aloud" feature of your web browser, need to be able to tell the user what a graphic image looks like. This is done using the alt element on the <img /> tag. If the image is "decorative" and does not need to be read out loud to the user then use alt="".
Duplicate id Elements
The id element on any tag needs to be unique.
Missing Descriptive Text on <a> and <frame> Tags
Links (<a>) and <frame> tags should have a title element that provides some descriptive text for the screen reader to help the user understand where that link (<a> tag) will take them. For example:
<a href="http://jimgerland.com/guide" title="Jim's HTML/CSS Guide web site" target="_blank">Guide to HTML/CSS</a>
Missing Descriptive Labels on Form Fields
Form fields for user input should have an appropriate <label> tag associate with the <input> field. Both the <label> and <input> tags should have the value in the id element. For example:
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" />
Videos
Videos should have user controls and not start until the user clicks the start control.
Videos should have closed-captioning.
Videos should have a separate file containing text describing the contents of the video as it is played.
Responsive Design
The page should render well when the user increases the zoom size to 200%.
The page should render well on different size devices (small monitors, large monitors, mobile phones, tablets, etc.) including when viewed in landscape mode on those devices.
Skip Keyboard Navigation
If your web page has navigational links then you should provide a "Skip to Content" link that allows a keyboard user to bypass your navigation and go directly to your content.

Here is some sample HTML Code:

<div>
  <a class="skip-to-content-link" href="#main" title="skip">Skip to content</a>
</div> <!-- end id='skip-to-content-link" -->
Here is some sample CSS styles:
.skip-to-content-link {
  left: -999px; 
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
}

.skip-to-content-link:focus {
  color: #fff;
  background-color: #000;
  left: auto;
  top: auto;
  width: 15%;
  height: auto;
  overflow: auto;
  padding: 2px;
  text-align: center;
  font-size: 1em;
  z-index: 10;
}

Task - Create an HTML5/CSS and ADA Compliant Web Page

For this task you will create a new web page just as you did in previous tasks. Copy your current CSS Special Effects task web page to a new html5.html web page. You also need to install the Accessibility Insights for web extension for your browser. This new web page that utilizes your HTML5 and CSS should include the following:

You should use the W3C Unicorn Validator to verify your HTML5 code and CSS styles.

You should use a browser extension to verify your web page is ADA Levels A and AA compliant.

This web page should also have a link back to your Home Page web page.

You should then add an <a> (anchor) tag to your Home Page web page that opens your HTML5/CSS/ADA web page.

Help contribute to my OER Resources. Donate with PayPal button via my PayPal account.
Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2016-2024 Jim Gerland