You are on page 1of 23

Web Accessibility Report for the Messer Construction Website

Prepared for:
Michael Batdorf, Messer Representative
Jackiedra Wilson, Messer Representative

Prepared by:
Natalia Lui
Jason Repasy
Aaron Tigert

University of Cincinnati

November 29, 2022


Executive Summary
On October 25, 2022, our group was requested to examine the accessibility of Messer
Construction's website. Michael Batdorf and Jackiedra Wilson were brought in to discuss
the website's current capabilities and future additions. This included mention of a
forthcoming search bar and the transition to WordPress. We decided to take these into
consideration as we tested the site.

Two teams were initially formed to examine the website's overall design and test the
website's accessibility features across multiple mediums. Team 1 focused on the website's
code, color contrast, and plain language. Team 2 (ourselves) focused on testing the website
through various devices, operating systems, and browsers, while providing light insight into
the general accessibility of the site.

The devices we used were Asus Chromebook, MacBook Air, HP Pavilion x360, iPhone 11,
and Motorola G Stylus. Operating systems used were ChromeOS, MacOS, and Windows.
Browsing services used were Google Chrome, Safari, and Firefox. Interacting with the
website through this variety of formats allowed for a sort of cross examination aimed at
uncovering all accessibility of the website at hand.

Rigorous testing was done through the course of two weeks using a variety of resources.
This includes WAVE, ChromeVox, ChromeOS Speech-to-Text, MacOS & IOS Voiceover,
MacOS Voice Control, Android Select-to-Speak, and Zoom for all devices. Recommendations
include providing more detailed alternative text, examining pop-up and link functionality,
uniformity, and alternative text, and create a dedicated mobile version with smaller font and
intuitive scrolling. These resources were available to University of Cincinnati students living
in the United States that read and speak English.
Table of Contents

Introduction 4

Analysis | Operating Systems and Devices 4


Asus Chromebook 4
Chrome OS version 107.0.5304.110 4
ChromeVox for Google Chrome 5
MacBook Air 13-inch 2017 5
Mac OS Monterey version 12.6.1 5
Safari version 16.1 5
Additional Features: Screen Colors Filter – Color Tint & Dim HEV Block App 6
HP Pavilion x360 6
Windows 11 OS (Includes Tablet Mode) 6
Windows Narrator 6
Firefox 7
Apple iPhone 11 7
IOS version 16 7
Motorola G Stylus 2021 7
Android OS version 11 7

Issues | Operating System 8


Chrome OS – Google Chrome 8
Mac OS – Safari 9
Windows 11 OS – Firefox 11

Issues | Mobile Devices 11


iPhone 11 – Safari 11
Motorola G Stylus 2021 – Brave 12
HP Pavilion x360 – Tablet Mode – Firefox 13

Recommendations 14
Contrast and Alternative Text 14
Image Carousels and Videos 14
Links and Buttons 14
Pop-ups 15
Mobile Version 15

Conclusion 16

Appendix 17
Introduction
The contents of this document will embody an analysis of the Messer website domain
through a lens of accessibility by employing a variety of perusal applications including the
built-in tools for the majority of main operating systems (OS), in addition to our own skills as
students in the Creating Accessible Content class. As this document is being composed for
a public business with a notable presence and well established brand, one of our goals is to
ensure that Messer has the most accessible, and therefore professional, residencies on the
internet.

By achieving this goal of making Messer’s domain as accessible as possible, we hope to


fortify an already flourishing website and brand. Efforts to sculpt the greatest possible rate
of accessibility within the pages of Messer’s internet domain are backed by a desire to
embody universal design, the design of products that do not require adaptation or
specialized design to be usable by all peoples. Hence, the scope of this report reaches the
demographic of Messer’s website and beyond: potential corporate affiliations, future
employees, and curious researchers.

To ensure that this site can extend its influence, the adaptation to universal design, as
previously asserted, is the main objective. This allows clients of any background to learn
about Messer's community impact and experience the opportunities available at Messer
through a technological medium without the hindrances of imperfect sight, hearing, and
touch. Furthermore, the creation of an accessible website doubles as a standard for
commercial business. If not already a standard, then the client will find themselves ahead of
contemporaries by setting themselves up for success.

The focus and tone of this report will pertain to the behaviour of specific operating systems
in conjunction with the website's pre-existing features. For this reason, it is worth noting the
differences in each OS “accessibility features” as each have their own limitations and
potentials. Our process for exercising each OS at our disposal can be thought of as
troubleshooting we cycled through each tool and feature on a given OS using Messer.com
as the constant variable. The results are composed neatly in sections of analysis, issue, and
proposed plans.

Please also note, regarding the composition of this report, that as we assessed the site from
an abundance of angles, we developed an abundance of repeat information. For this reason,
our sections labelled ‘Issues’ and especially the section labelled ‘Analysis’ offer the majority
of the fruits of our research so that, should you ever need the specifics regarding a particular
OS or browser, they are at your disposal. This compilation, at times will border on being
loquacious and generally wordy, as an effort to preserve all found data.
Analysis | Operating Systems and Devices
This section describes the specifications of each device, OS, and accessibility tool used.

Asus Chromebook
Chrome OS version 107.0.5304.110
The Chrome OS offers a variety of accessibility features for those with disabilities.
There is also the option to download more accessibility tools from the Chrome Web
Store is also available. The tools built into Chrome OS are easy-to-use and intuitive.
The main tools used in this audit were text-to-speech and magnification.
● Text to speech
● Magnification
● Keyboard shortcuts
● Cursor customization
● Captions

ChromeVox for Google Chrome


ChromeVox is a text-to-speech tool that allows the user to navigate the device using
their keyboard. The tool reads out what is on the screen for the user. Select-to-speak
works in a similar way by allowing the user to select text on the screen using the
cursor and have it read aloud to them. This feature also works on images to read
alternative text. The magnification tools are simple and straightforward. The user is
able to increase and decrease the magnification level of the device using a simple
keyboard shortcut. Using the cursor or arrow keys allows the user to move around
the magnified screen.

MacBook Air 13-inch 2017


Mac OS Monterey version 12.6.1
The MacBook Air was built to be ultraportable with many accessibility features for
the device that support hearing, vision, physical motor, learning, and literacy
requirements. The features used in this audit are voiceover, zoom, voice control,
accessibility keyboard, pointer control, switch control, and Siri.
● VoiceOver provides spoken and braille descriptions of items on the computer
screen and provides control of the computer through the keyboard rather than
the touchpad. Zoom uses keyboard shortcuts as well.
● Voice Control allows the user to edit text and interact with the device through
speaking. This function was done using the English language and an overlay.
● The accessibility keyboard, pointer control, and switch control are different
mediums for the user to interact with the device. The accessibility keyboard
maps commands to key combinations and is highly customizable. The
pointer control is focused on the mouse and trackpad experience. Users can
customize the trackpad's speed and delay and connect and customize
wireless and wired mice. There are three other options as well:
○ Mouse Keys allows the pointer to be controlled by the keyboard or
number pad.
○ Alternate Pointer Actions use facial expressions or switches to be
used in place of the left and right click functions of the trackpad and
mouse.
○ Head Pointer allows the pointer to be controlled using the movement
of the user's head captured by the camera.
● Siri. Has a "Type-to-Siri" function where the user is able to type commands
rather than speaking to them. However, Siri will continue to beep and listen
for voice input when activated from a headset.

Safari version 16.1


Of all available browsers, Safari works the best with the Mac OS. Since the Mac has
so many accessibility features (the native OS for Safari), the tools available for Safari
are rather limited. There are three useful functions that the website was tested with:

● Reader mode is especially useful for news articles and sites that have
multiple advertisements and links that hinder one's reading process.
This function removes images and formatting, leaving only text and
necessary links.
● If the user cannot see small text, there is a function to "never show
text size less than __pt." The scale of this is 9 pt. to 24pt. and simply
increases the font size.
● If the user cannot use the trackpad or mouse, they are able to "press
tab to highlight each item on a webpage." This is useful for finding
links and clickable text.

HP Pavilion x360
Windows 11 OS (Includes Tablet Mode)
The HP Pavilion laptop is popular amongst students and casual users on account of
its intuitive interface, functional ability, and Windows/ Microsoft components.
Further, the laptop offers 'tablet mode' wherein the user is able to flip the monitor
onto the back of the computer to form a tablet. This mode offers some diversity in
accessibility tool behaviours, and so all applications where also test using the laptop
as a table (with touch screen). Below are the specs that can be found in the
accessibility tools of the HP Pavilion.

● Text size
● Visual effects (scroll bars, transparency, animations)
● Mouse pointer size and color
● Text cursor appearance
● Magnifier
● Color filters
● Contrast themes
● Narrator; see below.

Windows Narrator
Windows narrator is activated with the command; windows key + control + enter.
When activated, it will read all the information on the page without stopping unless
the user presses the tab button. Tab can used to move to next item that is a button
or link. Shift plus tab is used to navigate back to the previous item. Enter can be
pressed to activate buttons or links within the page. Windows narrator does not work
on images to read alt text on the page when using tab. While using tab it does not
read text either, only links or buttons.

Firefox
Generally touted as a more user friendly browser, Firefox offers an array of
accessibility tools in addition to developer tools which I used to identify errors of
contrast and lacking alt text. Developer tools are essentially a function that allows
code based analysis in a user friendly interface. Below are the built in tools that were
used to test the domain.

● Keyboard Navigation
● Zoom
● Contrast Themes
● Popup blocker (useful with narrator)
● Compatibility with screen readers (narrators)

Apple iPhone 11
IOS version 16
The iPhone has an extensive number of tools that the user can access. There are
tools for those with vision, physical and motor, and hearing disabilities. The main
features that will be tested on are VoiceOver and Zoom.

● The Zoom feature allows the user to magnify what is on the screen. The
simple command of double-tapping on the screen with three fingers is
intuitive and useful for activating and controlling the Zoom feature. Dragging
three fingers on the screen allows the user to move around the zoomed in
screen. By double-tapping three fingers and dragging, the user can change the
level of zoom.
● The VoiceOver feature allows the user to select something on screen which
will then be read aloud. By double-tapping the same selected item, such as
an app or a button on screen, it will allow the user to activate that item.

Overall, the features are slightly more difficult to use than other devices, like a
desktop or laptop. The smaller screen (6.1") combined with this slight learning curve
could prove difficult for users with motor or physical disabilities.

Siri, a staple feature of the iPhone, can be useful to navigate the device. Siri allows
you to open a browser and search a website using just your voice. However, Siri
does not have the ability to navigate a web page once you open it.

Motorola G Stylus 2021


Android OS version 11
Motorola is not known for their phones or their accessibility features, but the basic
Select-to-Speak and Zoom features are sufficient. Select-to-Speak can only be used
for certain apps. Fortunately, Brave, the browser for this device, can use this feature.
● Select-to-Speak: Reads all content on the screen, tracking interactions with
the touch screen, and can be controlled with a movable touch bar as seen in
Figure 1. To activate it, the user needs to swipe, with three fingers, from the
bottom of the screen to the top. To use it, the user must tap a specific item,
like text or an image, and the reader will begin to speak. Dragging a finger
across the screen selects multiple items. To hear everything on the screen,
tap the play button.
● Zoom: Zooming in and out is extremely easy by pinching the screen.

Issues | Operating Systems, Laptops, and Browsers


This section describes the different issues faced with each OS and browser.

Chrome OS – Google Chrome


This section contains the results of testing the Messer website using the Chrome OS
and its built-in accessibility tools. The testing was focused on the home page and
career opportunities page. These pages were presented as the most important by the
Messer representatives.

Issues began to present themselves in conjunction with the ChromeVox tool. The
ChromeVox tool reads out what the user has selected on the screen. Many of the
issues with the site are found in the alternative text of images and the structure of
the site in certain areas. Throughout the site, there are many instances where the
alternative text does not sufficiently describe the image, is incorrect, or is not
present. This issue comes up when using both the ChromeVox tool and the Select-to-
Speak tool.
● On the home page, the "Purpose and Mission" images and the "Career
Opportunities Section" image both have alternative text, but it does not
sufficiently describe what is being shown.
● The "Purpose and Mission" images only read "Messer Purpose" and "Messer
Mission" but not the rest of the text within the image.
● The career opportunities image reads, “Messer employees working and
volunteering.” The image portrays more specific scenes like two women
conversing in an office, two men in orange shirts conversing over documents,
a man in a neon safety vest and a hard hat on site, and two Messer
employees presenting in front of a grade school class.

A majority of the images on the home page and career opportunities page are
missing alternative text. These images are in the "Stay Up to Date," "Innovation," and
"Become a Business Partner" sections. All of the images on the "Career
Opportunities" page of the site also suffer from the same issue. Not every image has
issues with alternative text, as the "Community Investments and Featured Projects"
sections of the home page include sufficient alternative text.

Image carousels, like the one in the "Featured Projects" section, may prove difficult to
navigate for those with vision and motor disabilities. The collapsible menus on the
home page present the same problem. Another issue, although a small one, is the
video playing in the background of the home page. There is a pause button for the
video that can be selected using the ChromeVox tool. Since the video has no audio, a
user with a visual disability may be confused because of the pause button. These
minor details, if addressed, can increase the accessibility of the website greatly.

Mac OS – Safari
Regarding the testing done on Mac OS/ Safari- below are lists of each tool used,
followed by a list of each finding:
Safari Accessibility Tools Used: 4. Voiceover
1. Reader mode 5. Voice Control
2. Text size 6. Pointer Controls
3. Tab to access links 7. Zoom
MacOS Accessibility Tools Used:

1. When Reader mode is engaged, every image and video disappear from the
site. Due to this, body text and links to job openings, Craftforce, urban
workforce development initiative, and other pages remain (See Figure 2). This
tool is best used for users that will read everything on the webpage. The
trade-off with this accessibility feature is the limited access to the rest of the
website. To remedy this issue, users are able to turn off reader mode,
navigate the site, and turn it back on. Hence, this can be chalked up as a
device issue and cannot be attributed to the site.

2. There is an accessibility feature named "never use font sizes smaller than __"
which can be used to alter text size. Rather than zooming in to a certain area,
users can make the text larger and not worry about sacrificing the experience
of seeing and experiencing the website.

3. Another accessibility feature for Safari called "press tab to highlight each item
on a webpage" highlights links and some in-text links. With this feature, users
are able to access all links, including the social media links under "join the
conversation." Figure 3 is an example of a hidden link shown through this
feature.

4. Voiceover is a useful accessibility tool for those with vision impairments.


Once it is activated, text is shown in a floating black box overlay that is read
aloud. Multiple issues arise from the use of this tool on Messer's website.
Issues are grouped in the following sections:
a. "Skip Content" Link. As seen in Figure 4, there is a link to "skip
content," but it does nothing. It is covered by the logo and is not
accessible via the main website.
b. Links. Each link is labelled as a header and a button. Figure 5 contains
the text "Corporate and Regional, button." Since the text mentions
"button" at the very end, users may not realize that the current
highlighted item was a link.
c. In-text Links. When the voiceover is activated, it is only able to read
paragraphs and it does not mention in-text links. Any in-text links were
only found after individually going through each letter in the body text.
d. Social Media Links. When using voiceover on the "join the
conversation" section, only the Instagram and Facebook links could be
accessed. Twitter and LinkedIn links could not be accessed.
e. Images. Most images on the home page do not have sufficient
alternative text to describe the image. For example, an image of "two
men in a warehouse with construction equipment" as seen in Figure 6
is instead read as "Market Conditions Report image CY 2022 Q@,
image."
f. Buttons. The pause button for the initial video is read aloud, however,
those with a vision impairment may need context regarding its
existence. Adding an alternative text to the button describing the video
may be a valid solution.
5. Voice control is an exceptional accessibility tool. Although it would be difficult
to use in a public setting or with a faulty microphone, it is incredibly
convenient. In terms of cooperation, voice control does not pair well with
voice over. Voice control works well on the website. There are two options to
navigate the screen with item numbers, as seen in Figure 5, and numbered
grid, seen in Figure 7.
a. Item numbers allow the user to say a number out loud and interact
with that item. The numbering was not consistent, but they were well-
placed. This feature does not work for cookies or popups.
b. Numbered grid is similar to zoom, however, it does not allow the user
to navigate the page.

6. There are multiple options for pointer control. This accessibility tool is used
best for users whose trackpads do not work or do not have a mouse. Certain
pointer controls pair very well with others and emulate the function of a
mouse. It is compatible with the website.

7. Zoom has multiple functions, none of which enhance the accessibility of the
website. It would be better for users to activate the text size accessibility tool
as they are able to experience the website as a whole rather than zoomed in.

Windows 11 OS – Firefox
Firefox has quickly become one of my favourite accessible browsers, and through
using it in conjunction with a Windows 11 operating system, my experience has been
utilitarian. Firefox offers several tools to help with external accessibility applications.
It has built in accommodations for screen readers, and pop up blockers that help
maintain application focus on the content of the page. Without these functions, an
external application could have a higher rate of malfunction. In addition to these
features, Firefox also provides some in house services such as mouse shortcuts,
zoom variations, and keyboard navigation. Messer’s domain worked well with these
features and navigating the site by keyboard is nearly as easy as navigating by
mouse.

HP Pavilion x360 – Tablet Mode – Firefox


Interacting with the Messer site on the HP laptop interface is as intuitive as any other
well-rounded website. All accessibility features, including the "animation limiter"
allow for the site to change visually whilst remaining true to its messages.

I was moderately concerned about how a lack of animations would affect the page
appearance, since there is an abundance of shuffling images and effects, but when I
turned off the animations the site was… just the site, but without animations. I was
also pleased to see that when changing text size, the page didn’t become too
jumbled or illegible. Whether this function is a concern or not is up for debate.

The narrator application is a different story. It is not so much an issue with the site as
it is between the narrator and user. The narrator can be used in several different
fashions, a user can select bodies of text, individual character and images, or use
scan mode (where it scans by reading each item down the page. The narrator will
read all text on the page, moving through as one would anticipate, but it encounters
difficulty when scanning images to read alt text and getting hung up on various links.
In these instances of shortcomings, I opt to blame the Windows 11 narrator function
instead of the website itself.

Regarding the Tablet Mode on the HP Pavilion, most applications function the same
as usual, however, the narrator is a bit more user friendly in this format to me. If one
can get to the actual website they seek (it’s no easy task when the narrator is on) and
learn to scroll properly (once again, not easy), then getting the narrator to work is
easier than "regular mode." In Tablet Mode, I found it easier to select images and
bodies of text for reading, and the scan mode is still an option. Even better, a user
has the option to employ an on-screen keyboard in case the whole touch screen thing
isn’t their preference. Once again, I seldom encountered an issue that could be
blamed on the site itself.

Windows narrator activated with windows key + control + enter. Read all information
on the page without stopping except for tabbed elements. Tab was used to move to
next item. Shift + tab used to navigate back. Pressing enter activated buttons and
links. Does not work on images to read alternative text on the page when using tab.
While using tab, it does not read text, only buttons and links. However, it does
activate buttons, links, and search bars on the career opportunities page.

Issues | Mobile Devices


This section describes the different issues faced with each mobile device.

iPhone 11 – Safari
The iPhone tools used to evaluate the site were the VoiceOver, Zoom, and Siri. The
Home page of the site has many of the same issues that can be found when using
other accessibility tools on other operating systems. The text on the screen has a
larger font size increasing its readability. Using the zoom feature allows the user to
increase the size of the text even further.
Missing or insufficient alternative text is an underlying issue that can be found on the
mobile version of the site.
● Some images are not selectable when using the VoiceOver feature in the
News and Insights section.
● The images that are selectable on the site have no alternative text or
alternative text that is lacking in how it describes the image.
● The Messer logo at the bottom of the home page reacts strangely to the
VoiceOver feature. It reads each letter individually rather than as a whole.

Structurally, the page would benefit from have a button at the bottom that allows the
user to quickly return to the top of the page. The skip to main content button does
not take the user fully down to the main content of the home page. The ‘accept
cookies’ pop-up that appears when first visiting could potentially be troublesome to a
someone using the VoiceOver feature. The pop-up blocks some of the content on the
home page. The image carousels that are present on the desktop and laptop
versions are not present on the mobile site. This makes it much easier to access
those articles. The collapsed tabs in the Innovation section of the home page work
well on the mobile site compared to the desktop version. The small social media
icons on the bottom of the page might be difficult for a person with a motor or
physical disability to press.

The VoiceOver feature itself could prove troublesome to users and hinder the
accessibility of the site.
● It breaks the page down into percentages instead of allowing the user to
freely scroll. This causes some issue for the site as there is content that is
not displayed correctly.
● Images and sections are split between two different markers making them
small and able to be missed completely. This happened more so in the middle
of the page in the News and Insights and Innovation sections as seen in
figure 8.
● A dedicated mobile version of the website might help to alleviate some of the
formatting issues with VoiceOver.

The Career Opportunities Page faces similar issues as the home page. Missing
alternative text, small social media links, and content being cut off can be found on
this page. This page features an image carousel unlike the home page. The carousel
is off centre with most of it being entirely off the screen. The small set of arrows
below make them hard to select.

Motorola G Stylus 2021 – Brave


Interacting with the website is tedious on a smaller screen. The text is very large, and
the colours do not translate well. This makes it difficult to determine what is a link
and what is text. Links stacked on top of one another have no space in-between. This
leaves the user with a cluttered interface where one may accidentally click on the
wrong link. The section "join the conversation" has small social media links that are
not easily recognizable. Furthermore, hover interactions for links do not work. The
screen size for this device is 6.4" making videos and animations more difficult to
navigate. The image carousel arrows are inconsistent across all pages. Figure 9 to
the left, and Figure 10 to the right. Lastly, there is no "reduced animations" option for
quicker scrolling.

In terms of accessibility features, Motorola has Zoom and Select-to-Speak. The zoom
feature works as intended; however, the decreased screen size makes the already
large text even larger. This may be useful for some users and this feature is
compatible with the website. Select-to-Speak on Motorola is surprisingly intuitive,
simple, and convenient. The main issue between the tool and the website has to do
with alternative text. Listed below are specific issues from the home page:
● Alternative text for "Messer's Purpose" and "Messer's Mission" correspond
with each image. However, the text inside the images cannot be read through
Select-to-Speak.
● For some reason, Select-to-Speak is able to read text in the "Safety," "Quality,"
"Craftforce," "Flow Scheduling," and "Target Value Design" panels.
● The "Learn More" text in every panel is not read out loud.
● Alternative text for "Target Value Design" is much lengthier than other panels
and describes the image better than other alternative text.

Recommendations
Over the course of three weeks, our team completed rigorous testing and compiled pages of
information. This section breaks down each recommendation into specific actions.

Contrast
Team #1 was more focused with colour contrasting; however, we will provide our
basic recommendation to improve upon contrast issues. Many of the contrast issues
were related to branding colours, however, there is an issue of light green and light
orange links in the body of the site that can be easily remedied by either darkening
the colour of the links or adding a black border around the lettering. See Figure 10 for
an example of a light green link.

Alternative Text
Most images on the home page do not have sufficient alternative text, specifically,
the "career opportunities" image reads, “Messer employees working and
volunteering.” The image, however, portrays more specific scenes like two women
conversing in an office, two men in orange shirts conversing over documents, a man
in a neon safety vest and a hard hat on site, and two Messer employees presenting in
front of a grade school class.

Another example, as seen in Figure 6, contains the alternative text "Market


Conditions Report image CY 2022 Q@" for an image of two men in a warehouse with
construction equipment. Furthermore, in the "News and Insights" section, some
images cannot be selected. The images that can be selected have no alternative text
or have alternative text that is lacking in description. The most prominent fix is to
ensure that every image has alternative text and to edit existing text to be more
descriptive.

Image Carousels and Videos


Image carousels, such as the one in the "Featured Projects" section, may prove
difficult to navigate for those with vision and motor disabilities. The arrows are
inconsistently placed, blend in with the background, and separated from the image
carousels by a noticeable space. The collapsible menus on the home page present
the same problem. It is important to note that many operating systems offer the
option to turn off animations, and the site works well with this function. Therefore,
the only suggestion we will offer here is the potential for increased contrast in the
arrows.

Another issue can be found with the video playing in the background of the home
page. There is a pause button for the video that can be selected using the
ChromeVox tool. Since the video has no audio, a user with a visual disability may
experience difficulty or confusion due to the existence of the pause button.
Removing the button or adding alternative text to the button element may assist
users in identifying the purpose of the button.

Links and Buttons


After testing the site with the voiceover accessibility feature in Mac OS, we found an
issue with some of the links on the site. Each link is labelled as a header and a
button. Figure 5 shows that the highlighted link is registered as a "button" as a result,
vision-impaired users may not detect that "Corporate and Regional" is a link and
instead a button or text.

Another issue, as seen in Figure 4, is a mysterious link to "skip content" that does
nothing. It is covered by the logo and is not accessible via the main website. When
MacOS voiceover is activated for paragraphs, it does not notify the user of any in-text
links. To find and interact with these links, users must go through each letter
individually until the voiceover recognizes a link and notifies the user. Only Instagram
and Facebook links can be accessed in the "join the conversation" section when
using MacOS voiceover. Twitter and LinkedIn links could not be accessed. To remedy
these issues, revisit all links on the website to ensure that they function, are uniformly
presented, and are recognized by accessibility tools.

Structurally, the website lacks an arrow that allows the user to quickly return to the
top of the page. For the voiceover tools, it would be best to redirect users to a vertical
site map for easier navigation.

Pop-ups
The ‘accept cookies’ pop-up that appears for a user's first visit are not read aloud by
voiceover features, and for mobile, the pop-ups block content on the home page. The
collapsed tabs in the ‘Innovation’ section of the home page, however, work well on
the mobile site compared to the desktop version.

Mobile Version Specifics


The font of the entire website is very large. While this is perfectly acceptable and
accessible for large-screened devices (such as laptops and tablets), smaller devices
will have difficulty with this. Links stacked on top of one another have no space in-
between. This leaves the user with a cluttered interface where they may accidentally
click on the wrong link.

The iPhone voiceover feature breaks the page down into percentages rather than
allowing the user to freely scroll. This causes some issue for the site as there is
content that is not displayed. This happened in the middle of the page in the News
and Insights and Innovation sections as seen in figure 8. The Messer logo at the
bottom of the home page interacts improperly with the VoiceOver feature. It reads
each letter individually rather than as a whole. A dedicated mobile version of the
website might help to alleviate some of the formatting issues with VoiceOver.

The "Career Opportunities" page faces similar issues as the home page. Missing
alternative text, small social media links, and content being cut off can be found on
this page. This page features an image carousel unlike the home page. The carousel
is off-centered with most of it being entirely off the screen. The small set of arrows
below make them hard to select.

Motorola accessibility features faced issues with alternative text. Alternative text for
"Messer's Purpose" and "Messer's Mission" correspond with each image. However,
the text inside the images cannot be read through Select-to-Speak. For some reason,
Select-to-Speak is able to read text in the "Safety," "Quality," "Craftforce," "Flow
Scheduling," and "Target Value Design" panels. The "Learn More" text in every panel is
not read out loud. Alternative text for "Target Value Design" is much lengthier than
other panels and describes the image better than other alternative text.
Conclusion
The current state of the Messer website, although accessible in most instances, is minorly
marred by areas that could be improved upon- most notably as it relates to the issues of
contrast and alt text inclusion as mentioned in our proposed plan. It is our sincere hope that
you may find value in our thorough analysis and testing of the wide variety of OS, browsers,
and devices, as can be gleaned from this document. By following our proposed plan, the
Messer we anticipate that the website will become the best version of itself whilst staying
true to its current image.

We urge you to use this audit as a steppingstone to more conclusive and detailed
investigation. Through sculpting the website with a lens of universal design, Messer will no
doubt acquire the potential to reach untapped markets, promote inclusivity, and become a
model specimen for business standards and ethics.

We thank you for your time and consideration on this project. Our team wishes Messer the
best on its future endeavours. Thank you!
Appendix

Figure 1. Select-to-Speak touch bar for Motorola G Stylus. Has "-" and "+" volume buttons,
skip forward and skip backward buttons, a pause/play button, and the red button is to
deactivate this feature.

Figure 2. Reader mode.


Figure 3. Mysterious skip content link with tab feature.

Figure 4. "Skip To Main Content" link in voiceover.


Figure 5. The word "button" is located at the very end of the link description. The user will not
know that this link is a button or even understand where the button leads since the word
"button" is located at the end.

Figure 6. Example of insufficient alternative text.


Figure 7. Example of the numbered grid accessibility tools.

Figure 8. iPhone screenshot showing content being cut off by the VoiceOver accessibility
feature.
Figure 9. Motorola screenshot. Arrows on the image carousel are located to the right.

Figure 10. A light green link that lacks contrast


Figure 11. Motorola screenshot. Arrows on the image carousel are located to the left.

You might also like