Howard University Website Assessment

website assessment
subject: howard.edu
1

allow me to re-introduce myself…
I’m Wes, and I’m passionate about design.
13+ years of UI/UX design + research
+ Web development
Experience in public/private/non-profit
sectors
MBA & MS in tech management
Certified in scrum + UX + 508 + product
design
2

why I’m here
It sounds cliché… but I’m here to help. Really.
To share data
To gather information
To improve your capabilities
To build bridges + develop potential roadmaps for the future
3

our agenda
Let’s talk data.
Howard.edu main site – current state
Identified issues
Website assessment strategy
The Wes Lewis approach
4

howard.edu main site - current state
10K+
student body in
2015-2016
2200+
students registered
at Howard with a disability
in 2015-2016
200+
university websites
to be maintained
by web services
2
Howard u.
web services team
developers
5

identifying issues
When products grade low on usability, they become USELESS. Users will
develop workarounds.
When products grade low on accessibility, not only do they become useless
for a specific demographic, but significant legal, PR, and financial
ramifications may apply.
According to Seyfarth Shaw LLP, 61 lawsuits alleging that a defendant’s inaccessible
website violates Title III of the ADA have been filed or removed to federal court since
January 1, 2015.
Harvard University and MIT were sued by the National Association of the Deaf (NAD) and
four deaf students for failing to caption learning materials.
Target corporation lost approx. $9 million as a result of an accessibility-related class-
action lawsuit.
Organizations miss out on cost-savings opportunities by neglecting to
implement universal design early.
6

website assessment strategy
Goal: to support Howard University’s mission by enhancing their
website and creating a universally-accessible digital experience.
Expert usability review
User testing
Accessibility scan
7

expert usability review
Assessed using current standards from
industry leaders + respected sources
Human Factors International (HFI)
Nielsen Norman Group (NN/g)
Usability.gov
8

why an expert usability review?
To uncover and assess the severity of usability issues on the
desktop and mobile websites.
To evaluate the usability of howard.edu against current industry
standards
To find opportunities to improve and optimize usability for the
intended users
9

usability review issue ratings
High Severity issues. Top priority. These issues keep user from
completing tasks efficiently.
Medium Severity. These issues impede ease of use and
understanding.
Low Severity. These issues inconvenience the user, but do not
completely stop them from completing tasks.
10

expert usability review findings
Finding On the Search Results page in responsive mode, the “X” icon
that enables a user to clear the contents of the search field is
very small.
Severity rating Low
Rationale Having a button as small as the X button is and placing it in
close proximity to a primary function such as the Search
button is an easy way to set a user up to fail in their task by
way of “fat-fingering” an unintended element. While the cost of
failure here is not as significant as in other use cases, it should
be a goal of this website to encourage success.
Recommendation I recommend that the “X” icon be removed as the value it
provides can be accomplished without taking the user away
from the keyboard. Additionally, its removal allows for more
space for the Search button.
11

Finding After conducting a search, the share icons on the Search Results page shares the URL
to a blank Search Results page.
Severity rating Low
Rationale The idea that the Share icons are present may lead a user to believe that what they’re
sharing includes search results, a feature which could hold value for research
purposes. However, the fact that it does not behave this way is but a minor
inconvenience.
Recommendation My recommendation is to remove the share icons from this page as there is very little
value in a user sharing a blank Search Results page.
12

Finding On the Search Results page in responsive view, the Search button is
partially cut off.
Severity rating Low
Rationale The bulk of the Search button is still accessible to the user and can be
triggered to submit a search string entered into the search field.
Recommendation I recommend that the user interface be developed to be more
accommodating of an intentional design decision at the mobile level.
13

Finding Long page titles are not correctly displaying in the mobile responsive view,
depending on the page and mode of display. On some pages, long titles are cut
off by the window and, on others, they wrap to the next line.
Severity rating Medium
Rationale This error does not always result in the user only receiving a part of the content;
but it can be dangerous if pertinent information is not properly displayed on the
screen.
Recommendation I recommend that the layout be assessed to determine how much left margin is
worth.
14

Finding The links in the footer are difficult to see in mobile responsive view.
Severity rating Low
Rationale The color of the font and its size technically do not violate Section 508.
However, the contrast of the children is a hair just above the required contrast
level of 4.5:1 and is still rather difficult to see against a dark grey background
Recommendation I recommend that the color of the child links be changed from #a0a0a0 to
#E1E1E1 to increase the contrast level to 9.66:1, well above the required ratio
of 4.5:1.
15

Finding Contrast on the homepage between background image and
foreground text makes text hard to read.
Rationale The font on desktop is much more easily read as the detailed areas
of the background image are spanned out to the sides of the screen,
leaving the middle area containing the text free. On mobile, those
areas are brought in behind the fine text, making it very difficult to
read.
Recommendation I recommend that the background image be removed in the interest
of providing clear and readable information to mobile users.
16

Finding The carousel on the homepage appears to go against conventional scroll direction. The
arrows move the carousel stories in the direction that they point towards and not the
opposite, which is standard.
Severity rating Low
Rationale While a user is still able to cycle through stories in the carousel using the arrows, the
direction in which it goes is unconventional. Nevertheless, this is potentially more an
annoyance than an inconvenience.
Recommendation I recommend that the scripts utilized for the story toggle to dictate direction of motion be
reversed to reflect a more conventional behavior.
17

Finding The icon used to close the responsive navigation menu is non-conventional.
Rationale An “X” is generally accepted as an icon which means “close” or “hide.” The
stretched hamburger icon has never served as a convention in that sense
and the infrequent user should not have to be forced to learn a design
pattern which is unconventional. Not understanding how to close the
navigation fly-out menu serves as a serious impediment.
Recommendation I recommend that the stretched hamburger icon be switched to a more
conventional “X” icon.
18

Finding The positioning of the icon used to close the responsive navigation menu is confusing.
When a menu item is expanded, the close icon is pushed further down on the page,
resulting in the user needing to scroll to locate it. Combined with its non-conventional
appearance and the fact that it is the only element that can be used to close the navigation,
this is a less-than-ideal design paradigm.
Severity rating High
Rationale The positioning of the close icon is affected when users expand the menu and is pushed out
of view. Users expect to be able to easily close this aspect of the page; however,
experimenting with the menu in hopes that it will close might lead users to other pages or
accidentally trigger other actions which distract them from their primary purpose. Because
this can be hidden unintentionally by users and can prevent them from completing tasks
efficiently, the severity rating was set at High.
Recommendation I recommend that the “close/hide” icon be moved to the top of the menu – preferably in
place of the default hamburger icon to display a smooth toggle between “open/show menu”
and “close/hide menu.” In this design pattern, the menu icon will always remain in the same
place, regardless of expanded/collapsed menu items.
19

Finding The search icon in responsive view operates the exact same way as the
expand menu hamburger icon.
Severity rating Low
Rationale The expected behavior of selecting the search icon in responsive view is that
it exposes and places focus in a search field. Currently, the side menu
containing the search field is exposed; however, no focus is placed in the
field and the user must tap the field to begin typing. In essence, the search
icon executes the same code as the hamburger icon next to it. Users still
have access to the search –they just have to commit an additional action to
use it.
Recommendation I recommend that the search icon not only open the navigation menu, but it
also places focus within the search field so that a user simply has to trigger
the search icon and begin typing his or her search terms.
20

Finding The content slider on the admissions page has one picture in it, but still allows users
to interact with it as if it contains additional stories.
Severity rating Low
Rationale Having arrows still appear to be active on a slider with one slider story or picture in it
leads a user to believe that there may be more than just one. This may confuse or
annoy a user; however it does not hinder users from completing tasks.
Recommendation I recommend that arrows only appear in sliders with more than one slider story or
image. When there is only one image or story, the slider should hide or disable its
arrows.
21

Finding Large text used for emphasis creates more work for
visitors.
Rationale The exceptionally large font on the admissions page adds
more to user workload in scrolling than it helps to
accentuate the text. In several cases, the font is so large
that only one word can fit on each line. In user
experience, the term for this is a “widow,” and it is
regarded as poor practice as it impacts a user’s ability to
scan.
Recommendation I recommend ensuring that this verbiage still stands out;
however, it should be made smaller and easier to read
on a mobile device so that a user does not have to scroll
to read one sentence (as shown in the example on the
right).
22

Finding Delineation between textual content and images containing text
required to prevent user error.
Severity rating Low
Rationale Words typed on select images resemble actual text on the screen,
confusing users attempting to copy and paste words.
Recommendation I recommend that, as often as possible, text not be overlaid on images
in the same font face as it would in the body of the rendered HTML.
23

Finding Subnavigation is difficult to expose due to the design of the
menu.
Rationale Selecting sub-navigation in responsive navigation menu is
difficult due to the small size of the arrows and the proximity
to the parent level elements, which are often separate links
themselves.
Recommendation I recommend that either (1) the arrows to the right of the
parent level elements be made bigger and positioned father
from the actual labels, or (2) the parent labels be made to act
solely as triggers to expand its children. Once the children
are exposed, provide another link to access the home link for
that section.
24

Finding The search field in the header in standard desktop view is very small (it can only
display 7 characters before shifting with the cursor).
Severity rating Low
Rationale Students, faculty, alumni, and other categories of visitors will be utilizing search. As a
research university, it may be understandable to think that many of the searches
being run from the website may contain more than 7 characters.
Recommendation I recommend the lengthening of the search field to more than 7 characters in view so
that users may view more of the search string prior to conducting the search.
25

Finding Excessive scrolling on several pages in responsive view before user accesses actual
page content.
Rationale Just because a page is beautiful does not mean that it is usable. Some pages and
elements are meant to be eye-catching; however, others are meant to be purely
informational. Forcing users to dig through images and certain blocks of text and
functionality when should not have to is the reflection of a poor user experience.
Recommendation I recommend that screen elements be evaluated on the grounds of “What value does
this bring to the user?”
26

Finding The website uses terms and acronyms which users may not be familiar
with.
Rationale Terms used should match the mental models of the audience. Otherwise,
users will be confused and be forced to read through information to
decipher the term. The severity rating of Medium was assigned because, if a
term is not known or understood by a user in the midst of a task, either the
task is completed with the help of educated guesses, not completed at all
because the user needs to conduct additional research on the term, or not
completed correctly due to a misunderstanding.
Recommendation I recommend that Howard-centric vocabulary, including acronyms, be
evaluated to determine the likelihood that an average user would or should
understand what it means.
27

Finding Users might consider the sudden departure from howard.edu when selecting
an inconspicuous link as jarring to the overall experience.
Severity rating Low
Rationale Links in Howard’s navigation may or may not keep the user within the domain of
www2.howard.edu. Without warning, the interface may change, which includes
global navigation. This has the potential to confuse users, especially those with
disabilities who may not be fully cognizant of the switch to a new domain.
Recommendation I recommend the utilization of an icon, title text, or a warning to the user that
they are leaving howard.edu for another site before they act on a link.
28

Finding Headings decrease in prominence the higher they go in the H1-H6
construct.
Severity rating Low
Rationale Users can still complete tasks, but may be unclear of the actual structure
of the site.
Recommendation I recommend that heading size should decrease in prominence the
LOWER they go in the H1-H6 construct. For example, H1 should be the
largest header and H6 should be the smallest.
29

user testing
User testing is about observing what people actually do, and hearing
what they think as they interact with your website, application, or
marketing content.
Get representative users.
Ask them to perform realistic tasks.
Shut up and let them do the talking.
30

why user testing?
It’s the best way to discover what works (so you can do it more),
what doesn't work, and WHY. Then use these insights to fix it.
Why your users stay and why they leave
Why they buy and why they don't
Why they pay and why they abandon their shopping carts
Why they buy from your competitors and not from you
31

our method to user testing
I identified three user groups to conduct usability testing with and
assigned them tasks based on what said user group would likely use
the website for.
I observed time spent on locating and executing these tasks and
documented their thought process, which they were encouraged to
share with us as they walked through the site.
They received no additional assistance.
1 prospective + 1 current student3 Howard alumni, one blind
32

user testing tasks + findings: students
Students were tasked with:
Checking in/checking out library book
Requesting a visit to campus
Researching an academic program of their interest.
Findings were:
Library load time too slow
Home page too busy
Found drastic look and feel between howard.edu and
departmental pages to be jarring; became disoriented
Mobile navigation trap “unexpected”
33

user testing tasks + findings: alumni
Alumni were tasked with:
Completing Donation Process
Locating Alumni Affairs
Accessing University Schedule
Findings were:
When introduced to the mobile navigation trap: “Nobody would
know that”
Mobile font too small, unable to zoom
Believes site is written in a way that doesn’t engage alumni, just
asks them to donate
Too many steps to donate (took 35 seconds to navigate)
Desktop view very heavy.
34

accessibility review subject: audrey lester
32 year old female
Lives with congenital glaucoma. Had
cataracts removed at birth. Has been
experiencing a decline in vision
throughout her life.
Totally blind in right eye, limited vision in
left eye and is legally blind. Field of vision
is < 20/200.
Works as a licensed graduate social
worker in DC
BS in Education, Howard University (2007)
MS in Clinical Social Work, Catholic
University (2012)
Assistive technology: ZoomText, JAWS, &
OpenBook
“I’ve been interviewed before and I’ve been
asked to imagine an accessible world. I
don’t know if I can.”
-Audrey Lester
35

accessibility review findings: audrey lester
Simple layouts benefit users with disabilities; reduces already tasked cognitive
load
“The average person isn’t buying JAWS.”
To use the JAWS links list, a user would need to know what they are looking for to
be effective.
In use of high contrast mode, Audrey exposed a duplicate search field on the
home page. Did not know which one to use.
Needed help to complete activities scripted for alumni
Recommendations for the website:
”I would encourage them to take a look at how they label their links, buttons and
graphics. I came across some images that were labeled “Gallery Image 1, Gallery
Image 2…they don’t have to write an essay to describe it.”
More descriptive links
36

accessibility scan
Conducted by a DHS trusted tester
Identified a number of globally-occurring
issues across three primary Drupal
content types at:
The homepage level,
The parent page level
The child page level
37

why accessibility scan?
"Web accessibility means that people with disabilities can use the Web. More
specifically, Web accessibility means that people with disabilities can perceive,
understand, navigate, and interact with the Web, and that they can contribute to
the Web.“
-Web Accessibility Initiative (WAI)
38

notable accessibility scan results
Issue #1: Inaccessible screen elements
In the example depicted above, the red slide-out container on the far right of the Howard
University homepage (and on other top-level pages throughout the website) contains links that a
user with visual context and a mouse can interact with; in this example, Apply, Donate, and
Graduation 2016 Recap are displayed.
The control itself is styled to maintain fixed positioning on the screen. It does not move from its
placement when a user scrolls or resizes the screen (prior to the viewport adjusting to
accommodate mobile devices) nor is it included in the page’s tab order. This means that a user is
unable to place focus on either of these links within this container by way of the Tab key.
39

Recommendation for Issue #1: Inaccessible screen elements
I recommend the removal of the red slide-out container and using the natural flow of the
page to facilitate ease of navigation for all users. As a fixed element, there are not many
simple ways to gracefully include the navigation items enclosed in the page’s tab order.
The Graduation 2016 Recap is a very important feature to Howard University;
however, it is already accessible via the carousel on the home page. In fact, it is the
very first featured story. The recommended action is to remove this link.
A clear call-to-action should always be accessible for visitors to donate. The
recommended action is to remove this link and to reposition it in a more
prominent location in the header, potentially after the Contact link.
The “Apply” link is actually misleading. The link currently directs users to the
parent-level page for Admissions, as opposed to the actual Howard University
application for admissions (located at
https://bisonweb.howard.edu/PROD/bwskalog.P_DispLoginNon). At a minimum,
the secondary Apply link is redundant. The recommended action is to remove this
link.
40

Issue #2: Loss of Focus
When controlling the interface with keyboard only, if there is no visual differentiation between the
current focused item and the rest of the interface / content, then it is not possible to tell where in
the interface the user is. Therefore, a visual indication of focus is necessary.
A common issue in Howard University’s user interface is that almost none of the link style classes
have a separate style declared for links that have been focused upon by the user within the
browser. A link that has focus on it looks identical to its state prior to its garnering of browser
focus.
41

Recommendation for Issue #2: Loss of Focus
Use the global stylesheet to declare a visibly-different appearance for a link in focus. Per
accessibility best practices, using color alone to convey meaning is meaningless to a user
experiencing colorblindness.
Underline links in their default state and either remove the underline or place a noticeably-colored
2px border around the link in its focus state.
42

Issue #3: Stylesheet dependency
Because of their particular visual needs, some people with visual
impairments create their own style sheets (font color, background
color, etc.) to replace the provided style sheet. When content is
not properly separated from presentation, it becomes difficult or
impossible to read the information on the screen. Therefore,
pages must be tested with style sheet information removed, to
ensure that all content is still being delivered to the user.
When disabling stylesheets for Howard University’s homepage, a
prominent and very confusing defect occurred: a second, non-
functional search field was exposed, which could mislead users.
43

Issue #3: Stylesheet dependency
Because of their particular visual needs, some
people with visual impairments create their own
style sheets (font color, background color, etc.) to
replace the provided style sheet. When content is
not properly separated from presentation, it
becomes difficult or impossible to read the
information on the screen. Therefore, pages must
be tested with style sheet information removed,
to ensure that all content is still being delivered to
the user.
When disabling stylesheets for Howard
University’s homepage, a prominent and very
confusing defect occurred: imagery utilized in the
parallax display of the homepage is overlapped by
stylistically-positioned social media widgets.
44

Recommendation for Issue #3: Stylesheet dependency
When implementing new functionality, ensure that the site still reads clearly and logically, with or
without stylesheets.
If there is only one search field in the default styled view, there should only be one search field in
the style-free view.
Connect with Howard should be clearly below the image of the Howard football player in its own
section, separated by white space. In fact, the Howard football player image should be placed as a
background within a <div> as, by itself, the image is purely there for aesthetic purposes and does
not convey pertinent information to the user. This way, the image will not be present when styling
is turned off.
45

Issue #4: Keyboard access – Inaccessible sub-navigation
Non-standard or alternative keyboard commands are required for access but are not
documented.  
The Howard University website contains navigation that is inaccessible to keyboard-bound users.
While the navigation elements which are inaccessible in the header are accessible in the footer of
the website, this poses a usability issue to users who are keyboard-bound in that they will need to
use the Tab key to navigate to through every focusable element on the page just to get to the
navigation in the footer. This is a less-than-desirable design paradigm.
46

Recommendation for Issue #4: Keyboard access – Inaccessible sub-navigation
I recommend that the navigation based in the header of the website be reengineered to be
keyboard accessible.
Users should be able to:
• Tab through the parent-level navigation items and utilize the Spacebar to expose/hide its
children.
• Use the arrow keys or the tab button to cycle through the child elements of the navigation bar.
• Use Enter to trigger any of the child elements to navigate to the page the element represents.
47

Issue #5: Meaningful images lack equivalent text description
Section 508 calls for meaningful images to have an equivalent text description (purpose and
function). In this example, Howard University highlights key figures which will hopefully convey to
new students and those unfamiliar with their accomplishments the significant milestones the
school has achieved over the years. To do this, images containing factoids are used within the
context of an image slider on the homepage.
The infraction lies in that each one of these images has been given the exact same ALT text, which
is used to describe an image to a user who cannot see or process its contents or imagery.
Currently the ALT text for each of the ten images in this section is “Howard by the numbers,”
which leaves out quite a number of respectable and extraordinary feats for those who rely solely
on screen readers to process information conveyed via the browser.
48

Recommendation for Issue #5: Meaningful images lack equivalent text description
I recommend that the ALT text for each of these ten items and other images around the site to be
configured to reflect the contents of the images themselves.
For example, the ALT text for the four images displayed in the figure above should read as follows:
• 89 Buildings on 256 Acres
• Top 20 Law School for Public Service
• 1330+ Faculty Members
• “An incubator for cinematographers”
49

Issue #5: Meaningful images lack equivalent text description
Another infraction exists in the header; ALT text is not declared for any of the social media icons.
Per Section 508, even if the images in use were there purely for decorative purposes, an empty
ALT attribute is required.
Without this, screen readers will read whatever is available to identify it to the user. As these are
links, the URL will be read in full. If these were not linked, a screen reader would simply read the
path of the icon within Howard’s folder structure. In some cases, this may be three or more levels
deep and the file names may contain gibberish and nonsensically-organized characters, all of
which mean nothing to the user.
50

Recommendation for Issue #5: Meaningful images lack equivalent text description
I recommend adding ALT text to each of these four icons. (e.g., alt=”Howard University on
Facebook”)
51

Issue #6: Synchronized captions are not provided for multimedia
Some users will not be able to hear the content well or hear it at all. Therefore, there needs to be
another mode to provide the audio information. This usually means captions (text showing what
is being said, and other relevant sounds). Captions need to be available, but do not necessarily
need to be turned on by default. For example, users who need captions can switch them on with
a control (usually a 'CC' button for Closed Captions). If there is no means of switching modes, then
the default mode must be accessible (i.e., Open Captions).
It appears that very few, if any, of Howard University’s media that has been published to YouTube
and posted to the University website contain captions.
52

Recommendation for Issue #6: Synchronized captions are not provided for multimedia
I recommend that Howard University highly consider adding captions to their videos.
53

Issue #7: Iframe title/name is non-descriptive.
Non-visual users can also use the keyboard to navigate between frames, but if there is no
programmatic name for the frames, the user has to read through the content of each frame in an
attempt to discern where the information they need might be. This can take a long time, and can
lead non-visual users to make errors. For this reason, it is necessary for each frame to include a
descriptive name. The name should make sense when spoken in isolation as the user navigates
between frames.
In locations where Howard University has embedded YouTube content, the iframes rendered are
nameless.
54

Recommendation for Issue #7: Iframe title/name is non-descriptive.
I recommend adding a unique name to the “name” attribute of the <iframe> tag.
55

Issue #8: No method exists to skip repetitive content.
Howard University’s global header contains 15 focusable elements; therefore; it would take a
keyboard-bound user a minimum of 15 keystrokes of the Tab key to access the information they
initially set out to navigate to. This count does not include breadcrumbs which occur at the top of
each page and can involve varying numbers of links which reflect the levels of navigation needed
to navigate to the current page.
56

Recommendation for Issue #8: No method exists to skip repetitive content.
To rectify this issue, I recommend the implementation of a “Skip Link” in the Howard University
header. As the very first focusable element on every page, triggering the Skip Link will act as in-
page navigation, jumping the user down to the page content and using the page title as an anchor.
This way, any user can opt to skip the navigation items upon arriving on a new page.
Additionally, I recommend that parent-level templates within Howard University’s Drupal
information architecture no longer use large images underneath the global header to identify the
page title in the interest of (1) establishing consistency with templates which use the H1 header to
identify the page title (more usability-focused than accessibility) and (2) creating a consistent page
anchor after the header for the Skip Link to direct the user to on every page.
According to the failure conditions of 1194.22(o), once it has been determined that a Skip Link is
available, its target or anchor must be placed after the repetitive content and work properly.
57

how I operate: user experience (ux)
59

how I operate: accessibility
Planning
Accessibility scan + assessment
Level of effort assessment for remediation
Final report detailing most significant barriers + next steps
Remediation
Detailed assessment
Component assessment
Getting dirty with code
Finalization
Validation
Usability Testing
Certification
60

I’m here to universalize your product.
Many consultants in this arena are single-faceted in that they excel at ONE
of the following three disciplines:
User experience
Accessibility
Software/Web Development
Not only am I a CERTIFIED expert in all three of these major areas, but I
merge them together in a manner all my own. To truly improve a product,
knowledge in multiple domains is required. This is where I shine.
Contact me today for more information!
hello@theweslewis.com | 240.388.0476
61

Howard University Website Assessment

More Related Content

What's hot (17)

Similar to Howard University Website Assessment (20)

Recently uploaded (20)

Howard University Website Assessment