Summary of Website Evaluation For each category, I have included the most important reasons for granting the

rating. Please see the table for a full analysis of all elements analyzed. Accessibility/Usability: Poor 1) Speed a. Seemed adequate when I load the site at home. b. Based on the WebPageTest site recommended in Robbins, it could be significantly improved. WebPageTest gave the home page failing grades for three of the six speed criteria when I tested IE9, Chrome, and Firefox. c. WebPageTest of tablet load speeds were significantly longer than those for standard browsers; however, no grades were assigned. 2) Screen Reader: a. There were important elements that the screen reader was unable to read, such as the librarys hours. b. There was not alt text provided for most of the visual elements of the website. Only the library logo had alt text. c. The plug-in slide shows and carousel found on two different pages do not have alt text, nor do they have a link to a plug-in or applet (Robbins, 2012, loc 1151) in order access them if needed. 2) Keyboard Access: a. Although the Tab key worked to move around the links and menus on the pages, these elements did not show that they were selected through either a highlight, change in color, or underline. It was difficult to follow the process of the Tab around the page. b. The Tab did move in a fairly logical pattern on the page, but some items came up more than once, which was confusing. c. Site skips from H1 headings to H3 headings. d. Site does not contain ARIA Landmarks or Accesskeys to designate specific content. 3) Color/Contrast: a. WAVE testing demonstrated that the contrast on the screen was very low. b. WAVE was unable to test the contrast of the display when the High contrast toggle was active. 4) Fonts a. The fonts are clear; however, the text is fairly small, especially the top line navigation text.

Identity: Fair 1) All the pages in the website had the sites logo clearly and prominently displayed. 2) The logo always appears in the same place on the screen. 3) There is a definite home page which is easily accessible from all other pages. 4) The broad audience is addressed through multiple blog posts from the different departments at the library, as well as through the slide show that runs across the top of the home page. 5) Paths are clearly indicated and understandable. 6) Interior pages have short summaries of their purpose. Navigation: Good 1) All of the pages are clearly named, and most of them match their title in the link that accesses the page. 2) Page names always appear under the site logo. 3) Breadcrumbs always appear under the page name. 4) There is a site search field on all but 3 of the websites pages (the home page, suggest a purchase form page, and the research page). 5) Links either change color or underline when hovered-over. 6) The pointing hand icon appears when you hover over a link. Content: Good 1) There is clear visual hierarchy based on the font size, placement, and color of the text. 2) The site follows most web conventions: a. The logo is in the upper left corner of the page. b. The search field is on the right-hand side of the top of the page, although not in the area specified by Lynch and Horton. c. There are static navigation bars along the top of every page. d. There is a static footer with library information such as the address and contact information, library hours, and social media links. e. At the very bottom of all the pages is the copyright, About Us, Contact Us, Job Openings, and Policies. 3) Text is on the small side, but clear and legible. 4) URL displays are clearly related to the pages they connect to. Usually the URL matches the name of the page and the path that leads to the page. 5) HTML titles are unique and distinct to their pages.

Manhattan Public Library Webpage Analysis

Assessment areas Site Name Manhattan Public Library Screenshots

Site URL Usability/ Accessibility

http://www.mhklibrary.org/

Speed: According to Chrome web page test: Home page load: 67 requests;
158 KB transferred; 8.97s (load: 4.98s, DOM Content Loaded: 4.95s); st according to WebPageTest in Chrome: 1 View = 5.574s Repeat view = st st .977s; In IE9: 1 View = 5.220s Repeat view = .985s; In Firefox: 1 View = 4.949s Repeat view = .655s Although the speed seemed quick to me, when I used the WebPageTest suggested by Robbins (2012, loc 1213), WebPageTest assigned the home page F grades for the following areas: First Byte Time, Compress Transfer, and Progressive JPEGs in each of the browsers; WebPageTest assigned an A grade to the following areas: Keep-alive Enabled and Cache Static Content for all three browsers.

Toggle buttons to change Contrast, Gray Scale, & Font Size

Color: The initial display is in color; however, there are toggle buttons on
the far left that allow easy change to high contrast and/or gray scale; WAVE test shows very low contrast for all parts of the home page that have any background color. All things that are clickable either change color or get an underline when hovered over, at which time they also all display Events Calendar Plug-in

a pointing hand.

Fonts: The font seems clear to me; varying size from tiny for the static bar
across the top to significantly larger section headers; the lines are clearly spaced; When I resized the font with Chrome, the page adjusted so that there was no need for horizontal scrolling. On WAVE test both the Normal Text and the Large Text were given Pass for AA and AAA levels

Plug-ins: On the home page there is an events calendar and a slide show;
on the young adult page there is a carousel and a slide show. I believe these are plug-ins. The slide show on the young adult page does not have alt text. At the time I was testing, the slide show had been disabled on the home page. The carousel on the YA page did not appear at all in the WAVE test. The events calendar plug-in worked with the screen reader. None of these plug-ins had a link to a plug-in or applet (Robbins, 2012, loc 1151). Young Adult page Carousel Plug-in

Alt text: Overall, the alt text left much to be desired. Rather than using
the alt text as a substitute for the image content (Robbins, 2012, loc 3931) the website mostly ignored this option. Wave indicates no alt text for 3 of the 4 main images on home page; there is alt text for the MPL logo and all the other links on the page. Similarly, on other pages, most images did not have alt text or had alt text that was simply a filler. For example, on the form page, Alternative Text was used as the alt text for an item. The MPL logo was the only item that consistently had alt text.

Missing alt text

Landmarks: Each page has the static top section followed by a stripe with
the pages name on it. Under the page name, the breadcrumb path is shown. Under the stripe, there is usually a photo and/or a description of the page content. Although these elements add a few you are here cues (Lynch & Horton, n.d.), they are not very distinctive. The pages do not contain any WAI ARIA functions as far as I could tell testing with the WebAnywhere screen reader.

Findability: The home page can be reached from any page using the
breadcrumb path or by clicking on the site logo. Unfortunately, nothing indicates this when the logo is hovered over. The persistent navigation (Krug, 2014, loc 918) of the main menu options and links remains on each page in the same format, except for the events calendar page and the Suggest a Purchase form page. On the events calendar page, the links

Event Calendar Page

remain, but they are formatted differently. There are no navigation options on the form page.

Wayfinding: The paths provide consistent, predictable navigational links

that appear the same way throughout the web site (Lynch & Horton, n.d.). There are clear page names and images that differentiate pages at different levels of the website. However, the differentiation of regions is minimal.

Screen reader: The screen reader was able to read the page fairly well; it
had trouble with all the wills. I am unsure if this is a problem with the reader or the page. The only issues the reader had were that it read the items on the events calendar plug-in that did not appear on the page. It also was unable to read the library hours.

Suggest a Purchase Form Page

Responsive design: The site looks the same in the Internet Explorer,
Google Chrome, and Mozilla Firefox browsers. It appears that responsive web design has been utilized because, when the page is viewed on a smartphone, it appears in one column with large links for easy tapping. But when [this] same page is viewed on a larger desktop browser, the content rearranges into multiple columns with traditional navigation elements (Robbins, 2012, loc 1052). This can be seen through the Responsivator Test, for example: Phone: The page loads the content vertically, stacking things that appear next to one another on the desktop sized screen. This is true whether the phone display is portrait or landscape; however, the display does spread out to use all the space available if the phone display is landscape. This means that there would be less need for scrolling. Additionally, the frame that appears on the full-sized version of the website either shrinks or disappears entirely as the screen size is reduced. The MPL logo appears centered on the screen in both displays. On the phone displays the home page contains a Select a page dropdown menu instead of the individual drop down menus and links found on the larger version of the page. This single dropdown menu has all the content in it that is separated out into individual dropdowns and links on the full-sized page. This is the most significant change to the page, and it allows for equal functionality as the individual menus and links on the larger version.

Phone (Portrait)

Phone (Landscape)

Small Tablet: These things hold true for the portrait display on a small tablet. However, in the landscape display on the small tablet, the individual menus and links appear. In addition, there is some horizontal content that appears next to each other instead of stacked on the landscape display. The MPL logo is centered on both the portrait and landscape displays. Large Tablet: For both the portrait and landscape displays, the content layout almost matches that found on the full-sized display. The main difference is that Items wrap differently to fit on the smaller screen. In the portrait display, the MPL logo is still centered and the individual menus and links show up below it. In the landscape display, the MPL logo is to the left of the menus and links.

WAVE No Styles Test: When the styles are taken away, the page reads in
a logical order. The content is clear and understandable in this format.

Small Tablet (Landscape)

WAVE Form Test: Although I was able to navigate through the form using
only the keyboard, when I ran the WAVE test, there were a lot of errors: All of the text fields were missing their labels. Where form labels were present, they were not correctly associated with the form control. The document language was not specified, nor was there a first level header on the page. Only the radio buttons had the correct labels; however, these buttons were not enclosed in a fieldset. The one item that needed alt text had Alternative Text instead of an actual alt text. The <label> and <input> id values were present in the HTML.

Keyboard Accessibility: Although the Tab key took me to different links

on the page, there was no indication on the page of what was selected. I did discover that the path to the selected item shows up in the lower left corner. Sometimes this path has names that match the links on the page, but sometimes the path names do not match the link names on the page. Either way, navigating with the Tab keys was frustrating at best. The way the Tab jumps around the page follows a pattern: it starts on the far left and moves to the right and from top to bottom. However, some items come up repeatedly, such as the Catalog option. On internal pages, the Tab key took me through each of the set options (the same as on the home page) before allowing me to go to page specific links. The first new option on this page is a Search field. When I Tab to this field, the cursor

Small Tablet (Portrait)

appears in the search box. As I continued to Tab, it took me lower on the page and popped me to approximately the spot of the link. The Tab key never took me to the right hand navigation menus. There was no skip navigation link visible on any of the pages. Identity

Logo: The MPL logo appears on every page except for the My Account
login page and the Suggest a Purchase form page. The logo always appears in the same place one type of device, and it is the most prominent thing on the page (Krug, 2014, loc 937).

Tagline: There is no tagline. Home page: There is an obvious home page. It is not overly cluttered, and
does not confuse the user with too many choices (Lynch & Horton, n.d). Home page

Paths: Paths are clear and usually not many clicks (most often 2 clicks).
Some items can be accessed from multiple paths, such as Inter Library Loan which shows up as an option under Adult Services and Library Services. When there are subcategories in a lower menu, these categories are shown as well as their umbrella category.

Audience: MPL has a very broad audience. Any member of the general
public of any age and ability is likely to use the site.

Internal page Navigation

Page names: Each page has a page name, and all but 2 of them match the
link clicked to get to them. The 2 that do not match are link = Research/ page name = Library Research, and link = News/ page name = News & More. (Krug, 2014, loc 1059)

Breadcrumbs: There are breadcrumbs; however, sometimes they are

simplified. For example, the page that I got to by clicking At The Library, then News, then Childrens Dept has a breadcrumb trail of Home Childrens Dept.

Page name and Breadcrumbs

Labels: The only button on the home page is the Catalog button. It is
labeled Catalog. On a later page, there is a text box labeled Search. . . with a magnifying glass logo in it. This searches the webpage content, not the catalog. The search field is not located in one of the areas Lynch and Horton site as where users expect to see a search box.

Tabs: There are no tabs. Logo: The MPL logo appears on all pages and provides a link to the home
page.

Catalog button & Search field

Links: All of the links are functioning. Site search: Contrary to what Krug suggests, there is not a site search
field on the home page (2014, loc 1004). On many but not all of the later pages, there is a site search field. The Events and Research pages do not have site search fields. Content

Visual hierarchy: There is an obvious hierarchy of text size and location

on the pages.

Conventions: Pages follow most web conventions with site logo at topleft corner. . .and the primary navigation *running+ across the top (Krug, 2014, loc 511) of the page. The search field has what Krug calls the universally recognized magnifying glass icon (2014, loc 997) and is located on the right hand side of the page. The page has a footer that contains additional navigation tools as well as the copyright information for the website. The utilities are not in the upper left corner, but in the upper right corner. These things appear on every page except for the form page for submitting purchase suggestions.

Conventional placement of logo & navigation

Styling: Headers and other text are clear and consistent. The headings are
closer to the sections they introduce than to the sections they follow (Krug, 2014, loc 655). The colors throughout the site are consistent: headings all appear in the same colors and a larger font, while smaller font

text appears in a different color. The color of headings matches the MPL logo.

Text: Majority of text is descriptive and brief. On many of the pages,

entries from the different departmental blogs appear below the main content. These entries are truncated and end with . . . to ind icate that more content is available. All blog posts have a word balloon to the left of their headings.

URLs: the URLs clearly name the pages, and most of them show the path
taken to reach the page. The events calendar URL is more complicated.

Conventional placement of links in footer

Titles: In HTML each page has a unique and descriptive (WebAIM

Testing Web Content for Accessibility checklist, 2014) title.

Validate HTML: When I attempted to validate the HTML, the program

from WebAIM (validator.w3.org) was unable to validate the document.

Validate CSS: When I validated the CSS, there were 528 errors and 604
warnings.

Reference List

Center for Persons with Disabilities. (2014). 2014 WebAIM. Retrieved from http://webaim.org/intro/
Krug, S. (2014). Dont make me think, revisited: A common sense approach to web usability (3rd ed.) [Kindle version]. Upper Saddle River, NJ: New Riders Publishing. Lynch, P.J. & Horton, S. (2008-2011). Web style guide (3rd ed.). Freely available at http://www.webstyleguide.com/.

Robbins, J. (2012). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics (4th ed.) [Kindle version]. Sebastopol, CA: O'Reilly Media, Inc.
WebAIM. (n.d.). WAVE: Web accessibility evaluation tool. Retrieved from http://wave.webaim.org/ WebAnywhere (n.d.). WebAnywhere. Retrieved from http://webanywhere.cs.washington.edu/wa.php