UNIVERSITY PUTRA MALAYSIA

FACULTY OF COMPUTER SCIENCE AND INFORMATION

HUMAN COMPUTER INTERFACE

(ANTARA MUKA MANUSIA - KOMPUTER)
SSE5212

GROUP ASSIGNMENT
(TUGAS BERKUMPULAN)

TITLE:
ACCESSIBILITY EVALUATION TOWARDS WEBSITE

DATE OF SUBMISSION:
JANUARY 2023

PREPARE BY:
NUR AIN BINTI MD ISA (GS57753)
ZHANG XU (GS61590)

LECTURER:
DR KHAIRONI YATIM SHARIF
1.0 Introduction

Accessibility is the term which refers to the accessibility of any software system
to people without or with physical disability or impairments. Those impairments include
such following;

1. Visual Impairments such color blind, low vision, complete or partial blind
2. Hearing Disabilities like hyperacusis or deaf
3. Learning or cognitive impairments like dyslexia
4. Motor or mobility issues like wheelchair user’s concerns

Accessibility is essential for developers and organizations that want to create

high quality websites and web tools and not exclude people from using their products
and services. Web accessibility means that websites, tools, and technologies are
designed and developed so that people with disabilities can use them. More specifically,
people can perceive, understand, navigate, and interact with the Web.

1.1 Evaluating Web Accessibility Overview

Evaluation helps us to ensure that the websites and applications meet

accessibility requirements. Ideally we evaluate regularly throughout the design and
development process. By this way, we can find faults or errors earlier and can avoid
costly repairs later in the process. The W3C Web Accessibility Initiative, W-A-I or WAI,
provides free resources to help us conduct accessibility evaluation on the websites. The
aim of WAI is to make the web as accessible as it can be so that everyone may use it
equally, including those with disabilities as mentioned above.

1.2 Example of Web Accessibility

Those websites and tools that are properly designed can be used by
people with disabilities. However, a lot of websites and tools have been created
with accessibility issues, which make it hard or impossible for some people to
utilize them. Here are some examples;
 1. Inaccurate or absence of text alternatives for images
- Screen reader users generally depend on their screen
readers to understand visual content. Hence, every image
on a website must have an image alt text tag since the
people with visual impaired cannot see them. The best way
to avoid this issue from happening is by developing a
strategy at the design stage. We have to decide which
images require and don’t require meaningful alt text.

2. Keyboard input
- Some people are unable to use a mouse. As an example,
the older users since they have limited fine motor control.
The website that has good accessibility does not rely on
the mouse only. The website should have all functionality
available from a keyboard. By that, people with disabilities
can utilize the assistive technologies that mimic the
keyboard such as speech input.

3. Missing or ambiguous link text

- Links may be necessary for web navigation, but only if
properly used. Missing or ambiguous link text can trigger
multiple accessibility issues. For example, missing link text
is an obstacle to visually impaired users. This link can be
anything like a button, icon, logo, or any other image.
Whatever the link may be, the screen reader user will not
read any image that functions as a link without any text.
- This issue can be avoided by ensuring the image alt text
conveys the image action instead of just having an image
description.

1.3 Tool

In this assignment, we chose the AXe Accessible Audit tool as a tool to evaluate
the accessibility of websites. Axe Accessibility Audit Tool is an engine developed by
 Deque Labs to test the accessibility of web pages. Axe engine is available for Chrome
and Firefox and the extension can be installed directly. When this tool is already
activated, it will allow us to analyze the web page that we want to test and we can see
the accessibility issues in the panel beside the web page. Axe is a great tool because it
also inspects the code of the page. Here are several benefits of using this tool;

1. Enterprise Grade - Deque tools and services are used and trusted in the
world’s largest and most secure government and enterprise
organizations.

2. Saves Time & Resources - Axe DevTools helps our web development
teams catch accessibility errors while coding and at the same time
reducing the time and cost of manual accessibility testing down the line.

3. Full Coverage Compliance - This tool enables functional testers with

minimal accessibility knowledge to perform step-by-step manual
accessibility tests, catching a wide breadth of issues that automated tests
cannot cover.

4. Reliable Compliance Monitoring - Axe helps ensure your website

becomes compliant and remains compliant. Dynamically scan, monitor
and report on the accessibility status of your site across business and
development teams.

2.0 The Website Chosen

We decided to do accessibility evaluation towards two websites; Amazon.com

and UPM Putrablast.

3.0 Web Accessibility Evaluation

This section shows how the evaluation was conducted towards those two
websites.
1. Once the website was opened, click ctrl + shift + i to view the panel.

2. Make sure the axe extension is already added into chrome. Then click the
navigation symbol “>>” and choose “axe Devtools” to start evaluation.

3. Then you can choose to scan ALL of the web page or by PART of the
web page. If you choose to scan ALL, the test will run for the whole
features in the web page.
4. If you want to scan by parts, you can do “mouse selection: ON” to select
manually which features that you want to to check. Then click SCAN as in
the picture below.

5. Other than that, axe tool also allowed us to test or check by categories
available in the picture below. We can check the table, keyboard access,
modal dialogue, interactive elements, structure, images and forms in the
web page that we want to test.
4.0 Result

The result section will represent the result of accessibility checking for
Amazon.com and UPM Putrablast website using axe accessibility audit tool. Two
categories were checked; Keyboard access and structure of the web page. Keyboard
access and interactive element. Keyboard access means critical to ensure all users have
access to information without requiring a mouse. Meanwhile, structure means the
information components within an HTML document. For instance: headings, lists and
paragraphs.

1. Amazon.com

Result after scanning was done. It shows that there are 256 total issues
related to keyboard accessibilities.

We can view the result by clicking on the number on the total issues.
Then it will show as below.

As mentioned earlier, the axe audit tool also inspects the code of the
page. So if we click the issues one by one, we can see the codes in
detail.
 For structure checking of Amazon.com website, there are 4 total issues
covered. There is; Visual heading text is not marked as heading, heading
does not describe content, visual list is not marked up as list and change
in language is not marked.

2. UPM Putrablast

Total issues for keyboard accessibility checking for UPM Putrablast web
page is 36 issues.
 For the structure checking, there are 4 issues captured as described
below.

5.0 Conclusion

As a conclusion, everyone benefits from accessibility. Accessible design

improves access to information on the web for individuals with and without disabilities.
Well-designed, accessible web sites expedite the delivery of information and services.
Therefore, the accessibility evaluation is needed to make sure that our web page is
accessible enough for everyone regardless of their abilities. Hence, axe audit tool is a
good tool to check the accessibility of the website since it enables functional testers with
 minimal accessibility knowledge to perform step-by-step manual accessibility tests,
catching a wide breadth of issues that automated tests alone do not cover.

6.0 References

1. https://www.w3.org/standards/webdesign/accessibility
2. https://www.w3.org/WAI/standards-guidelines/wcag/
3. https://www.w3.org/WAI/test-evaluate/
4. https://www.youtube.com/watch?v=93QDeIgSlqg
5. https://pressbooks.ulib.csuohio.edu/accessibility/chapter/axe-accessibility-audit-tool/
6. https://adasitecompliance.com/10-most-common-accessibility-issues/