H590 Spring 2018

Project 1: Web Accessibility Evaluation

Parth Patel, paapatel@iu.edu

Brief Description of the assignment

I evaluated a robust multi-page website and then wrote an accessibility report on it, and provided instructions on how to make it more accessible.  I used the WCAG 2.0 standards (Level A), and structured our evaluation using the WCAG-EM template. I found out that website evaluation checks are certainly necessary on websites in order to make them fully compliant according to the accessibility standards. This will ensure that there will be no kind of person that doesn't have the privileges to access the website in question. The website that I evaluated had lots of issues in terms of accessibility and have seen most operating system in-built accessibility tools fail while using that website.

Project Evaluation
1. Executive Summary

This report describes the conformance of the Scoopwhoop website with W3C's Web Content Accessibility Guidelines (WCAG). The review process is described in Section 5 below and is based on evaluation described in Accessibility Evaluation Resources.

Based on this evaluation, the Scoopwhoop website does not meet WCAG 2.0, Conformance Level A. Detailed review results are available in Section 6 below. Resources for follow-up study are listed in Section 7 below. Feedback on this evaluation is welcome.

2. Background about Evaluation

Conformance evaluation of web accessibility requires a combination of semi-automated evaluation tools and manual evaluation by an experienced reviewer. The evaluation results in this report are based on evaluation conducted on the following date(s): Feb 9, 2018. The website may have changed since that time.

3. Website Reviewed

Name of website: Scoopwhoop

Base URL of site: www.scoopwhoop.com

URLs included in review:

1. https://www.scoopwhoop.com/

Scoopwhoop homepage

Reviewed semi-automatically and then manually

 

2. https://www.scoopwhoop.com/mcdonalds-fries-may-help-cure-baldness/?ref=latest&utm_source=home_latest&utm_medium=desktop#.65zorj221

Reviewed semi-automatically and then manually

Scientists claim McDonald's French Fries can cure baldness and Twitter shouts 'I'm Lovin' It"
Scoopwhoop Entertainment Main page

Reviewed semi-automatically and then manually

 

Review time: Feb 9, 2018, 2:30 AM

Natural language of website: English

4. Reviewer

Name of reviewer: Parth Patel

Organization with which reviewer is affiliated: IUPUI

Contact information for reviewer: paapatel@iu.edu

Reviewer(s) areas of expertise, by reference to "expertise of review teams" in Using Combined Expertise to Evaluate Web Accessibility: Beginner

Natural language(s) with which reviewer is fluent, or familiar: English, Hindi, Gujarati, Marathi

5. Review Process

WCAG 2.0 Level for which conformance was tested: Level A

Evaluation and validation tools used, and versions thereof: WAVE Tool, WCAG 2.0

6. Results and Recommended Actions

Interpretative summary of review results: The website appears to not meet WCAG 2.0 AA

Accessibility features in which this site is strong:

  • Language of Parts

  • An ARIA role, state, or property

  • Presence of a <header> element or banner landmark

  • Presence of inline frame (<iframe>)

 

Recommended priorities for addressing inaccessible features of site:

  • Add alternative text to images for screen readers

  • Add alternative text to images that have links so that the links are not unusable for screen readers

  • Form control needs to have a corresponding label

  • Remove empty links or provide text within the links that describes the functionality and/or target of that link

  • Remove redundant links or combine the duplicate links into one link

Detailed results, structured according to WCAG 2.0:

Non-text Content

Missing alternative text (1.1.1)

 

WCAG 2.0 Success criteria: http://www.w3.org/TR/WCAG20/#text-equiv-all

WCAG 2.0 Technique: https://www.w3.org/TR/WCAG20-TECHS/H37.html

When using the img element, specify a short text alternative with the alt attribute. The value of this attribute is referred to as "alt text".

Link Purpose (In Context)

Linked image missing alternative text (1.1.1 and 2.4.4)

 

WCAG 2.0 Success criteria: http://www.w3.org/TR/WCAG20/#text-equiv-all, https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs

WCAG 2.0 Technique: https://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all, https://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs

When using the img element, specify a short text alternative with the alt attribute. The value of this attribute is referred to as "alt text".

Empty button (1.1.1, 2.4.4)

 

WCAG 2.0 Success criteria: https://www.w3.org/TR/WCAG20/#text-equiv-all, https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs

WCAG 2.0 Technique: https://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all, https://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs

Place text content within the <button> element or give the <input> element a value attribute.

Empty link (2.4.4)

 

WCAG 2.0 Success criteria: https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs

WCAG 2.0 Technique: https://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs

Remove the empty link or provide text within the link that describes the functionality and/or target of that link.

 

Non-text Content, Info and Relationships, Headings and Labels, Labels or Instructions

Missing form label (1.1.1, 1.3.1, 3.3.2)

WCAG 2.0 Success criteria: http://www.w3.org/TR/WCAG20/#text-equiv-all, https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic, https://www.w3.org/TR/WCAG20/#minimize-error-cues

WCAG 2.0 Technique: https://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all, https://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-programmatic, https://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-cues

A properly associated label is a non-empty title attribute, or a non-empty aria-labelled by attribute.

Language of Page

Document language missing (3.1.1)

 

WCAG 2.0 Success criteria: https://www.w3.org/TR/WCAG20/#meaning-doc-lang-id

WCAG 2.0 Technique: https://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-doc-lang-id

Add the missing <html lang> tag

Contrast (Minimum)

Very Low Contrast (1.4.3)

 

 

WCAG 2.0 Success criteria: https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast

WCAG 2.0 Technique: https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast

Increase the contrast between the foreground (text) color and the background color.

7. References
  • Web Content Accessibility Guidelines (WCAG) Overview

https://www.w3.org/WAI/intro/wcag

  • Web Content Accessibility Guidelines 2.0

https://www.w3.org/TR/WCAG20/

  • Techniques for WCAG 2.0

https://www.w3.org/TR/WCAG20-TECHS/

  • Accessibility Evaluation Resources

http://www.w3.org/WAI/eval/

  • Web Accessibility Evaluation Tools List

https://www.w3.org/WAI/ER/tools/

  • Using Combined Expertise to Evaluate Web Accessibility

https://www.w3.org/WAI/eval/reviewteams

8. Appendices

Evaluation tool reports:

Page 1:

 

 

 

 

 

 

 

 

 

 

Page 2:

 

 

 

 

 

 

 

 

 

 

Page 3:

 

 

 

 

 

 

 

 

 

Missing alternative text (1.1.1)
Linked image missing alternative text (1.1.1 and 2.4.4)
Empty button (1.1.1, 2.4.4)
Document language missing (3.1.1)
Missing form label (1.1.1, 1.3.1, 3.3.2)
Empty link (2.4.4)
Very Low Contrast (1.4.3)
Page 1 Evaluation Summary
Page 3 Evaluation Summary
Page 2 Evaluation Summary