Guide to HTML, CSS, and JavaScript (University at Buffalo 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 usealt=""
. - 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 atitle
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 theid
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:
- A correct DOCTYPE tag for HTML5
- Convert any of your tags that are not compliant
- Correct any of your CSS that is not valid
- Correct any ADA issues identified by the browser extension
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.