IT 214 - Human-Computer Interaction 2

MODULE 2: ACCESSIBILITY IN WEB PROTOTYPES USING BOOTSTRAP

 Apply accessibility standards (WCAG, ARIA) in coded designs.

 Use Bootstrap utilities for readability and contrast.

 Improve text structure and navigability for all users.

Accessibility in HCI

Why accessibility matters?

Accessibility ensures that digital interfaces can be used by everyone, including people with:

 Visual impairments – color blindness, low vision, or blindness

 Auditory impairments – partial or complete hearing loss

 Motor impairments – difficulty using a mouse or precise movements

 Cognitive impairments – memory, attention, or comprehension challenges.(visual,

Example:

A user with color blindness may not distinguish between red and green buttons. Instead of
using only color to show status, designers should also add text or icons.

<button class="btn btn-success">✔ Success</button>

<button class="btn btn-danger">✖ Error</button>

Accessibility laws and standards (WCAG 2.1, Section 508)

The Web Content Accessibility Guidelines (WCAG) are an international standard developed
by the World Wide Web Consortium (W3C) to make web content more accessible for people
with disabilities.

 Version 2.1 builds on earlier versions (2.0) by adding rules to support mobile users,
people with low vision, and people with cognitive or learning disabilities.

 WCAG 2.1 is structured around four main principles—often remembered by the

 Information and user interface components must be presented in ways that users can
recognize, regardless of their abilities.

 Example: Providing alt text for images so blind users with screen readers can
understand them.

 Example: Using sufficient color contrast so text is visible to people with low vision.

2. Operable

 The interface must allow all users to interact with it.

 Example: Navigation should be possible using only a keyboard, not just a mouse.

 Example: Avoiding time-limited tasks or providing options to extend time for users who
need more.

3. Understandable

 Information and operation of the UI must be clear and predictable.

 Example: Using simple language and consistent navigation menus across all pages.

 Example: Providing error suggestions, like “Please enter a valid email format,” instead
of a vague “Error.”

4. Robust

 Content must be able to work with different user agents, including assistive
technologies.

 Example: Code should follow semantic HTML (like using <button> instead of clickable
<div>) so that screen readers can interpret the content.

 Example: Web forms should be compatible with future technologies and different
browsers.

Section 508 (U.S. Accessibility Law)

Section 508 is part of the Rehabilitation Act of 1973 in the United States. It requires that all
federal agencies’ electronic and information technology (EIT) be accessible to people with
disabilities.

 This law covers government websites, software, hardware, and systems used by the
public or federal employees.

 Section 508 was updated in 2017 to harmonize with WCAG 2.0 Level AA standards,
meaning U.S. law and international guidelines are now more aligned.

Key requirements:
1. Accessible Web Pages – Federal websites must include features such as alt text for images,
proper form labels, and keyboard navigation.

2. Accessible Documents – PDF or Word files must be readable by screen readers.

3. Accessible Software and Hardware – Systems used by federal workers must be usable by
those with disabilities. For example, kiosks in government offices must be designed for
wheelchair users and compatible with assistive devices.

Example:

 A government agency that posts tax forms online must ensure those PDFs are
accessible to screen readers so that blind taxpayers can use them.

 A federal website must provide captions for training videos so that deaf employees can
follow along.

Bootstrap for Accessibility

1. Text utilities

Bootstrap includes text utility classes that help improve readability and clarity, especially for
users with visual or cognitive difficulties.

 Headings and Display

Bootstrap allows you to style text in different sizes using headings (<h1> to <h6>)

or display classes (.display-1 to .display-6).

Example:

<h1>Main Title</h1>

<p class="lead">This is a lead paragraph for emphasis.</p>

<p>Normal text goes here for regular reading.</p>

<h2 class="display-4">Big Accessible Heading</h2>

.text-uppercase, .text-lowercase, .text-capitalize can help with consistency.

But caution: avoid using ALL CAPS excessively because it may reduce readability for
dyslexic users.

Example:

<p class="text-uppercase">important notice</p>

<p class="text-lowercase">THIS TEXT IS LOWERCASED</p>

<p class="text-capitalize">this text is capitalized</p>

 Line Height

Use .lh-1, .lh-sm, .lh-base, .lh-lg to control line height.

More spacing makes reading easier for people with cognitive or reading disabilities.

Example:

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is
affected by our utilities. Classes are applied to the element itself or sometimes the parent
element. These classes can be customized as needed with our utility API.</p>

<p class="lh-sm">This is a long paragraph written to show how the line-height of an element
is affected by our utilities. Classes are applied to the element itself or sometimes the parent
element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an
element is affected by our utilities. Classes are applied to the element itself or sometimes
the parent element. These classes can be customized as needed with our utility API.</p>

<p class="lh-lg">This is a long paragraph written to show how the line-height of an element
is affected by our utilities. Classes are applied to the element itself or sometimes the parent
element. These classes can be customized as needed with our utility API.</p>

4. Keyboard navigation and focus states (:focus, .focus-ring).

Many users with motor disabilities, visual impairments, or repetitive strain injuries rely on
keyboards (or keyboard-like devices) instead of a mouse.

 Focus State

When navigating with the keyboard, users need to see which element is currently active
(focused). This is where focus states come in.

Default :focus

In CSS, the :focus pseudo-class highlights the element currently selected by the keyboard.

Browsers provide a default outline (usually a blue or dotted line).

Example:

<button>Click Me</button>

<input type="text" placeholder="Type here">

<a href="#">A focusable link</a>

It creates a distinct outline around the focused element.

Helps users know exactly where they are on the page.

Exaple:

<button class="btn btn-primary focus-ring">Submit</button>

<a href="#" class="btn btn-outline-success focus-ring">Next Page</a>