Lab 06 : WAI - Web Accessibility Initiative

I chose to use WAVE to evaluate the accessibility of this site .

1. What are each of the Errors, and how can they be fixed?

There are 4 errors, 2 of them are empty headings and 2 are empty links. The empty heading errors indicate that the site contains heading tags that do not have any text. When a heading is empty, it can be confusing for screen reader users because they expect a descriptive title that provides context. To fix this, the website should either remove unnecessary empty headings or make sure each one contains meaningful text that describes the section that follows. The empty link errors occur when there are clickable elements on the site that do not contain any text or descriptive content. To solve this issue, all links should have clear, descriptive text that explains their purpose, or states what the link leads to. If a link is not needed, it should be removed.

2. What are each of the Alerts, and why does WAVE draw attention to them?

There are 11 main alerts and most are repeated to add up to 73 alerts in total.

Suspicious Alternative Text

The Suspicious Alternative Text alert means that the alt description of an image might be unclear. The WAVE draws attention to them because if the alt text doesn’t properly explain the image, screen reader users or those who can’t see images won’t get the same information. The alt text should be short but meaningful, describing the image’s content clearly and concisely.

Unlabeled Form Control with Title

The Unlabeled Form Control with Title alert means that a form element has a title attribute but lacks a proper label. WAVE draws attention this because screen readers may not find the title useful, making it harder for them to understand the point of the form element.

Skipped Heading Level

The Skipped Heading Level alert means that the page jumps between headings without following a proper order. WAVE draws attention to this because screen reader users rely on a logical heading structure to navigate content. Headings should follow a correct sequence (e.g., h2 should be followed by h3, not h5) to maintain readability.

Possible Heading

The Possible Heading alert means that certain text elements might be better formatted as headings. WAVE draws attention to this because if bold or large text is visually styled like a heading but not coded as one, technologies that assist some readers might not recognize it correctly. Proper heading tags should be used to improve structure and therefore, accessibility.

Broken Same-Page Link

The Broken Same-Page Link alert means that a link designed to navigate within the same page does not function properly. WAVE draws attention to this because users relying on keyboard navigation or reader technology may be unable to move efficiently through the page. Fixing broken links allows smooth navigation.

Suspicious Link Text

The Suspicious Link Text alert means that a link has vague or repetitive text, such as “Click here” or “Read more.” WAVE draws attention to this because unclear link texts make it difficult for users to understand where the link will take them. Links should be clear and descriptive so users can navigate them confidently.

Redundant Link

The Redundant Link alert means that two or more links close together lead to the same destination. WAVE draws attention to this because it can create unnecessary clutter and confusion. Where possible, redundant links should be combined or removed.

Link to PDF Document

The Link to PDF Document alert means that a link directs users to a PDF file, which may not be fully accessible. WAVE draws attention to this out because PDFs can be difficult for screen readers to interpret if they lack accessibility features like proper tagging and alt text for images. PDFs should be checked for readability and accessibility before being link to the page.

Noscript Element

The Noscript Element alert means that the page contains a noscript tag, which provides content for users to fall back on in case JavaScript disabled. WAVE draws attention to this to ensure that the alternative content is actually useful and does not negatively impact navigation.

Very Small Text

The Very Small Text alert is straightforward and means that some text on the page may be too small to read. WAVE draws attention to this because small font sizes can be difficult for users with visual impairments.

Redundant Title Text

The Redundant Title Text alert means that an element, such as a link or button, has a title attribute that repeats its visible text. WAVE draws attention to this because screen readers may announce the same information twice, creating unnecessary.

3. Which of the four WCAG Principles is WAVE referencing with each Error and Alert?

Errors

Empty headings – perceivable, understandable

Empty links – operable

Alerts

Suspicious alternative text – perceivable

Unlabeled form control with title – perceivable, understandable

Skipped heading level – understandable

Possible heading – perceivable, understandable

Broken same-page link – operable

Suspicious link text – understandable, operable

Redundant link – operable, understandable

Link to pdf document – robust

Noscript element – robust

Very small text – perceivable

Redundant title text – understandable

4. What do the Order and Structure tabs tell you about the site? Are there any problems with the organization of information?

The Order tab lists all clickable items (like buttons and links) in the order they appear, while the Structure tab shows the page’s headings and sections. Then they have the navigation that takes them to all the important or most useful resoucers of their page. Then I can see some h2 elements for the importnat titles and also few h4 and h5 elements.

There are some problems with the site’s organization. The heading levels numbers are mixed up, which can make the page confusing to follow. And in the Order, some buttons and links don’t have clear names, i.e., they say "No Accessible Names". So users might not know what they do.

5. What do you learn about the page by disabling its styles?

Unfortunately , I couldn't figure out how to disable the CSS of the entrire page...