Professional Documents
Culture Documents
Prepared for:
Michael Batdorf, Messer Representative
Jackiedra Wilson, Messer Representative
Prepared by:
Natalia Lui
Jason Repasy
Aaron Tigert
University of Cincinnati
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
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.
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
● 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.
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.
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.
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.
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.
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 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.
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.
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 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.