University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Implementation Techniques

Example Site

This is an example site to showcase some inaccessible elements, and how to fix these elements to be more accessible. The elements are marked in the HTML, and the fixes are listed underneath. The fixes are based on the recommended WCAG guidelines.

Before

The before site contains many inaccessible elements. For example, there is one inaccessible element that is not visible in the image below and is not highlighted in the HTML code, but is fixed in the after website. As a part of manual checks, developers need to be able to find elements of their implementation that could be considered inaccessible and therefore more difficult to use.

An example website with the UNH Logo, an About section, and a Contact Form with inaccessible elements. There is an unmarked element where the heading is marked as h3 instead of h2, making it harder for screen readers to know the importance of the About section.
This is an example website with many inaccessible features.

Inaccessible elements are marked in red. Alternatively, the list of marked issues can be referenced to know which elements are inaccessible and how to fix them.

An example HTML code snippet with markup highlighting the features that are accessible.
This is the HTML code of an example websitte with many inaccessible features.
List of marked issues found in the HTML of the inaccessible site
  1. Title - Ensure there is a detailed title on your site.
  2. Semantic HTML - Check that you are using meaningful HTML. Instead of tagging a div as a header, use the header element to allow screen readers to read out the content as intended.
  3. ALT Text - This image has no ALT text making it innaccessible to those with slow wifi or low vision.
  4. Color Contrast - Use a color contrast checker to ensure the contrast ratio passes.
  5. Labeling - Use meaningful labeling. Instead of "Click here" use "Show Full Text".
  6. Spacing - The site may appear cluttered without breaks inbetween elements, making it difficult for users with cognitive disabilities to interpret.

After

The after site contains fixes to the previously found inaccessible elements. There is more spacing in between sections, higher color contrast, and easier keyboard access.

An example website with the UNH Logo, an About section, and a Contact Form with accessible elements.
The example site with changes to make it more accessible.

Accessible elements are marked in green. Alternatively, the list of marked fixes can be referenced to know which elements are now accessible.

An example HTML code snippet with markup highlighting the features that are accessible.
The accessible site HTML with labels to represent accessible feature fixes.

The fixes are labeled in the after image.

List of marked accessible features found in the HTML of the accessible site
  1. Language - Ensure the language is listed.
  2. Metadata - Setting the initial scale to 1.0 helps users using screens of different sizes to see the expected site.
  3. Body Element - Using the body element further ensures screen readers will be read the content as expected.
  4. Skip Links - Adding in Skip Links allows keyboard users to skip to different parts of the site.