Report: Accessibility of the Optus Website and WCAG 2.0 Compliance

This report assesses the accessibility of the Optus website, evaluating its compliance with the Web Content Accessibility Guidelines (WCAG) 2.0. The methodology involves reviewing key pages such as the Home Page, About Us, and Contact Us, using the WAVE Web Accessibility Evaluation Tool to identify errors. The report highlights specific issues, including the use of unordered lists instead of ordered lists, missing text in links, skipped heading labels, and problems with ARIA attributes and tab index values. It also examines issues with skip links, adjacent links pointing to the same URL, and the presence of alternative text for images. Based on the findings, the report concludes that while the website closely meets WCAG 2.0 Level A standards in areas such as adaptability and color contrast, there are areas for improvement, such as providing audio content for users with disabilities. The report recommends specific fixes to address the identified errors to ensure full compliance with WCAG 2.0 AA, including restructuring headings, correcting ARIA attributes, adjusting tab index values, and improving link and image descriptions. The report emphasizes the importance of these repairs to enhance the website's accessibility for all users.

Running head: ACCESSIBILITY OF THE WEBSITE OF OPTUS
Accessibility of the Website of Optus
Name of the Student
Name of the University
Author’s note

1ACCESSIBILITY OF THE WEBSITE OF OPTUS
Table of Contents
1. Executive Summary.....................................................................................................................2
2. Background and Methodology....................................................................................................2
3. Review Process............................................................................................................................2
4. Findings and Recommendations..................................................................................................3
5. Summary....................................................................................................................................12
6. References..................................................................................................................................13

2ACCESSIBILITY OF THE WEBSITE OF OPTUS
1. Executive Summary
The primary purpose of this report is to access the compliance of the website of Optus according
to the Web Content Accessibility Guidelines (WCAG) 2.0.
2. Background and Methodology
The WCAG 2.0 is able to define the process of making a web content to be much more
accessible to the people who would be suffering from various kinds of disabilities (Al-Mouh, Al-
Khalifa & Al-Khalifa, 2014). These requires a fast form of accessibility features that would
include auditory, visual, speech, physical, learning, and neurological form of disabilities. The
WCAG 2.0 is being widely used by web developers and designers (Iglesias et al., 2014).
The primary purpose of this report is to review the website of Optus and thus test the
accessibility features of the website (Optus, 2018). Accessibility within the website is very much
important for making the web content to be made available to the users. This would help in
removing the barriers of disabilities and thus the user would be able to access the web content.
3. Review Process
The main purpose of this report is to access the compliance of the Optus’s website with the
WCAG 2.0 and identify any form of failures within the existing system (Kamoun, Al Mourad &
Bataineh, 2013). Hence the evaluation would be mainly focused on certain pages:
 Home Page
 About Us
 Contact Us

3ACCESSIBILITY OF THE WEBSITE OF OPTUS
This site was examined with the help of WAVE Web Accessibility Evaluation Tool
(http://wave.webaim.org/).
4. Findings and Recommendations
Home Page
Error 1: There is an unordered list of options
Why this is important: The ordered list would be able to offer a group of related and parallel
items. Users would be able to easily locate the items in the list.
Why it is an issue: The unordered list might be confusing for some users for navigation
purposes.
How to fix: Ensuring of an ordered list with the help of an (<ol>) tag would be appropriate.
Snip Code:
<ol id="nav-primary-level" class="nav-primary-level" style="width: 960px;">
<li class="">
<a href="/shop/mobile">
Mobile
</a>
</li>

4ACCESSIBILITY OF THE WEBSITE OF OPTUS
Error 2: The concerned link contains no text
Why this is important: This is important because the unfilled link would serve no purpose. This
could also present a confusion to the user.
Why it is an issue: The anchor element has a href attribute. It contains unfulfilled text with no
images and no such alternative text.
How to fix: The error could be removed by removal of the empty link. Some text could be
provided within the link, which would able to describe the form of functionality or would be able
to target the concerned link.
Snip Code:
<a href="/">
<span class="logo-yellow ico ico-optus-logo" aria-hidden="true"></span>
</a>

5ACCESSIBILITY OF THE WEBSITE OF OPTUS
Error 3: The heading label has been skipped.
Why this is important: This problem is important as the headings would provide a proper
document structure and would also be able to facilitate navigation by keyboard.
Why it is an issue: This problem is an issue as the users of the website would get confused or
might experience difficulties during proper kind of navigation whenever the headings would be
skipped.
How to fix: The error could be fixed by restructuring the headings of the document. This could
be help in ensuring that the levels of the headings would not be skipped.
Snip Code: The heading level would be skipped such as an <h1> is followed with an <h3> tag.
There is also no such intermediate <h2> tag. It is also not required to put an <h1> tag within the
first heading in the document.
<h4 style=" text-transform: none; color: black;">
Get 20% off plan fees on our $45/mth 12mth SIM Only plan. Includes 15GB bonus data.
</h4>

6ACCESSIBILITY OF THE WEBSITE OF OPTUS
About Us
Error 1: An aria-label attribute is present
Why this is important: ARIA labels and descriptions would permit the elements for being
associated with several other content.
Why it is an issue: This is an issue because these labels and descriptions would be mostly read
by screen-reader.
How to fix: Ensuring the aria-labelledby or ariaa-describedby references of attribute, which
would be able to provide a correct description or label. It could be done by using the standard
HTML <label> or any other form of markup in order to perform the association.
Snip Code:
<div class="container hide-for-small" aria-hidden="true">
<div class="text-next swiper-button-disabled" role="button" aria-label="Next" tabindex="-1">
<span class="icon-right-arrow">
</div>
</div>

7ACCESSIBILITY OF THE WEBSITE OF OPTUS
Error 2: There is a presence of an ARIA role, property or state.
Why this is important: This is important because the ARIA would be able to provide an
enhanced form of semantics and different forms of accessibility for the content of the website.
Why it is an issue: This could be regarded as an issue as the value of ARIA would get changed
within different browsers.
How to fix: This problem could be fixed as by ensuring the role of ARIA, property or state. A
standard form of HTML features of accessibility could be used.
Snip Code:
<div aria-hidden="false" class="columns column-left">
Error 3: There is a value of tab index value of zero or less.

8ACCESSIBILITY OF THE WEBSITE OF OPTUS
Why this is important: This issue is important as the tab index would be able to facilitate the
navigation of the keyboard based on interactive elements. The tab index value of zero would
place an item into the navigation of the keyboard.
Why it is an issue: This could be regarded as an issue as a value of much less than zero would
remove any element from the keyboard.
How to fix: The typical errors could be fixed with the correction of navigation and thus
interacting with the elements.
Snip Code:
<h1 class="banner-title" tabindex="0">
<wrapper>
<div class="sd-component-base cmb-title sd-component-standard-text-base sd-component-text-
base sd-component-text-title">
<span style="color: rgb(255,255,255);">About us</span>
</div>
<wrapper>
</wrapper>
</h1>

9ACCESSIBILITY OF THE WEBSITE OF OPTUS
Contact Us
Error 1: A target for a “skip” link is present
Why this is important: A “skip” target would be able to identify the location in between the
pages where navigation and reading would resume after a “skip” link would be activated.
How to fix: It should be ensured that the element is at the proper place in between the page.
Snip Code:
<ul id="nav-site-level" class="inline-list left nav-site-level">
<li>
<a class="active" href="//www.optus.com.au/">
<span class="hide-for-small">
For
</span>
You
</a>
</li>

10ACCESSIBILITY OF THE WEBSITE OF OPTUS
Error 2: The adjacent links would point to the same URL.
Why this is important: This issue is important as the adjacent links would point to the same
location.
Why it is an issue: This is considered to be an issue as this would result to an additional form of
navigation and thus repetition of the keyboard and screen reader for the users.
How to fix: The errors within the code could be skipped with the help of combining the
redundant links into a single link. This would be able to remove any form of alternative or
redundant text.
Snip Code:
<a class="ico ico-home sd-global-hide" aria-hidden="true" href="/" style="display: inline;">
<span class="separator">
</a>
Error 3: The alternative text would be present based on an image without a proper link.
Why this is important: This issue is important as it includes inappropriate form of alternative
text based on an image within a link. This would ensure that the function and the purpose of the
links would be made to be available to the users.

11ACCESSIBILITY OF THE WEBSITE OF OPTUS
Why it is an issue: This is considered to be an issue because the content of the image should be
made to be available to the users whenever the images would be unavailable.
How to fix: The errors could be skipped by ensuring that the alternative form of text would
present the image content. The functions present within the link should be presented in the form
of text. The image should also be given an empty or null form of alternative text (alt = “ “) in
order to avoid the process of redundancy.
Snip Code:
<img src="//smb.optus.com.au/opfiles/Shop/Consumer/Assets/Images/Content/My-optus-app-
banner.png" alt="My Optus App">
Based on the WCAG 2 guidelines, the website could be analyzed as:
1. Perceivable
1.3 Adaptable
1.3.1 Info and Relationships - Level A: The website is adaptable to the latest trends. The
various kinds of relationships to the different pages are easily available with wide form of
information.
1.3.2 Meaningful Sequence - Level A: The pages are provided in a proper sequence.
1.3 Adaptable
1.4.1 Use of Color - Level A: There is a high form of color contrast and users would be able to
easily view the pages.