OSDPL Accessibility Testing Results and Notes

Owned by Jonathan Hung
Last updated: Mar 23, 2009 by Paul ZabloskyVersion comment
13 min read

Following the Simple Accessibility Review Protocol, we evaluated the OSDPL for obvious accessibility concerns. The following are results and notes of that evaluation.

Evaluators: Erin Yu and Jonathan Hung
Date conducted: July 25, 28, 29 2008

Step 1 - Assess the overall layout, structure and content of the page

[AB: General comment: if a fix require coding work that goes beyond beyond the theme, we may want to consider putting it off until we upgrade Drupal (probably to 6.0) as there may be fixes, or our changes may not affect this new version.]

Home

  • Not clear what it is a user can do upon visiting the page. Lots of text down the middle that does not convey any interaction.
    • AB: The home page is intended to be a very high-level introduction to patterns and how they can help users of the site. As we define governance policies and procedures for contributing patterns, it would be helpful to add a pointer to content about how to do this (though I'm guessing the actual content should go on a separate page). It may also be nice to create a visual like the web patterns library uses: http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/home.php, or short summaries of recent patterns like Yahoo! uses. We could also invite people to rate patterns, but I'm not sure if we want to require a user account to do this? I didn't do that because we hadn't had that discussion yet.
    • JH: I think the idea is that the main page should be a bit more engaging by showing prominent items that the user can interact with. A single line summary of what the OSDPL is about, and then a few interactive elements to reinforce that. Ideas: "Recent Patterns" box, a prominent Search or Tag cloud so the user can start browsing. Why tell users what we're about when we can show them or they can discover it themselves?
    • DO:  Here's another front page:  http://ui-patterns.com/  Seems like a jira ticket for this one should include the design and benchmarking work to come up with the solution rather than us coming up with the solution now.  I agree that something more interactive would be good as the main content though.  Perhaps the information that's there now should be in a FAQ?

Breadcrumbs

  • Clearly indicates where the user is within the site and provides quick links to the parent pages.

Left column & Navigation

  • Good breakdown of sections into logical parts.
    • Navigation menu - not clear that clicking a menu item that has sub-items will reveal unique content. Typical menu convention has content at leaves / children.
      • AB: We are using Drupal Nice Menus to allow users quick access to content without having to click through a hierarchy of pages. There may be other, better choices but I've explored a few and this seemed to be the best based on what I saw. I'm not sure I really understand the problem you're describing, though? Pages in the left nav with children have ">" next to the page title and mousing over a page title reveals the children underneath. The alternative to using Nice Menus would be that the user would have to click on the page to find out whether it has children, so exposing them on mouseover seems more efficient. There is a bug to Add styling to "Nice Menus" pullout menus in OSDPL (http://issues.fluidproject.org/browse/FLUID-935) so perhaps that might address the issue?
      • JH: May need to revisit this during the Architecture phase. I can foresee a problem where there are too many sub-items and navigating through it would be too tedious. Also having the current menu not behave like a typical menu could be confusing. Perhaps there's another way of presenting our structure and content?
      • DO:  I agree that its misleading that the parent menu items are their own page.  The current interaction focuses your attention on the submenus.  But I do think we want them to have quick access to the patterns.  I don't know the solution though.  Seems like another case where the jira should be a design task to figure out some alternative that meet all of goals.  Perhaps we could define the design goals for the navigation in the jira or make that definition part of the jira itself.
  • When viewing a design pattern that has two related "sub-patterns", it's not clear that there are related sub-patterns. How do you get to those sub-patterns from the parent pattern?
    • AB: Yup, this is a definite problem, and now they only way to get to the child patterns is to go to the top level page (e.g. Information Organization) or the "Related Patterns" section of the Drag and Drop pattern. This is a reported bug: OSDPL: Figure out how to create a parent-child relationship between patterns & implement solution(http://issues.fluidproject.org/browse/FLUID-588)
  • FF3 on Windows, mousing over 5-star plugin causes the right sidebar to shift up and down. Only happens if the DP already has a rating. Fine in IE7.

Right column

  • Confusing when no Category follows the word "in". Currently it says "Posted July 3rd, 2008 by abloodworth in" followed by blank space. [AB: This is a reported bug: OSDPL: Remove "in" from OSDPL pages that aren't in a category(http://issues.fluidproject.org/browse/FLUID-595)]
  • The same information about the events (such as date and time) are repeated in small and large fonts [AB: This is because the story title and the beginning of the content is displayed, and you may have been looking at a story or two where there content was very similar. This is not the normal case.]
    • DO - (somewhat unrelated) I'd like to see the title text a little smaller.  It currently has the largest text on the page.
  • "Login or register to post" is repeated after each OSDPL News post. [AB: Perhaps we should change the wording to "Login or register to comment" since we don't allow just anyone to post a news story. I think it would also disappear if we didn't allow anyone to comment on News stories.]
    • DO - Is there a use case for commenting on news stories?  I'm not sure what other stories will be up there other than meeting notices.
  • "comments" and "Read more" are also repeated, which may be on purpose. One might question the value of the "Read more" link, since the title of the event brings up the page with the details. Small inconsistency: "comments" is not capitalized, "Read more" is. [AB: We *could* remove this programmatically, but I think it's a fairly consistent news metaphor to have "read more" if you show just the beginning of a news story. If we needed the space to show more stories, it might make sense, but could take some effort which we'd have to weigh against.]
  • A user may expect the "more tags" link below the tag cloud to expand the section to show more tags. Currently it brings user to a page with the same list of tags. [AB: This is only because currently there are very few tags. When there are more tags than fit in the "Find patterns by tag" box, more will be displayed. I don't think there's any action needed.]
    • DO - Can we get rid of it until there are more tags -- or add a bunch of tags (smile)

JH: Perhaps the root of the issue is that the right hand column is being used to display content that requires more room to properly convey. Aside from announcements, any Story content is being published there. Maybe announcements should be on the front page main content and moved out from the right-hand column?

Main column

  • "Recent Comments" on the center column - unclear if that comment applies to the main page itself or if it's a recent comment for a page somewhere else not seen.
    • [AB: I believe this is recent comments on patterns. We could delete it unless we think it's helpful for people to see what people are talking about in the library (it may not be now, but I think it might be in the future, if it will fit nicely in the page). In that case we may want to rename it "Recent Pattern Comments" and perhaps put a visual separator between it and the main content of the page, or move it to another part of the page.]
  • "Printer-friendly version" link is sometimes placed at the bottom of the page and sometimes at the top. Provide printable pages for the design patterns pages only.
    **[AB: What is the reasoning behind making only the DP pages printable? I think there will be many pages users could want to print, such as the contributors guide, copyright policy, about the library, etc. The link should be made consistent, though, and I'd recommend entering a bug.]
    **JH: Although it does seem pointless to have a printing functionality for every page, I think we should offer it just in case. I wouldn't feel bad about doing this if we can somehow make it an image (with appropriate alt-text) instead of a text link. The text link gets obscured when there is a lot of text.
  • There is an invisible link after the vertical bar in "Printer-friendly version |"
    • [AB: Good catch; we should enter a bug for this.]
    • (warning) JH: I'm thinking this is a bad accessibility bug. It will take a screen reader user to a page we did not intend or create. Could create a navigational mess since it messes up the perceived structure of the site.
  • Navigation correctly has higher priority. The first tabbable group after the header/banner.
    **[AB: There is a "Skip to main content" link which gets users directly to the main content, skipping the navigation. Isn't that the best practice?]
    **JH: You're right and I think this note was made to say we're doing this correctly. Added the word "correctly" to the note to clarify.

Styling

  • Various font sizes and colours are used in this section, which makes it difficult to see at a glance where one section starts and ends.
    • "OSDPL News" header smaller and less bold than the links that are following.
      • [AB: This is indeed a problem. There is a bug for doing a general overhaul of the CSS (FLUID-508), but perhaps we should enter  smaller bugs for specific issues like this that come up. In this case, we need to change the styling on the <a> within an <h2>. Perhaps for now just making it not bold? I think the color could be tweaked slightly as well, but it may be better to do that as part of a more comprehensive overhaul of the styling.]
    • "more tags" should be distinguished from the other links in the tag cloud.
      ***[AB: This is probably a low priority issue, as currently the link is distinguished by it's placement and the whitespace around it. We do also want consistency among the links in the site, but we could consider making the tags themselves a different font (since they are sort of different links.]
  • Difficult to see green links against a white background when the fonts are small.
    **[AB: Could we make them a deeper green? We might want to run them through the Color Contrast Analyzer: http://juicystudio.com/services/colourcontrast.php\]
  • "in" and "<category name>" are on separate lines.
    **[AB: It certainly would be nice to have them on the same line to save space, but I'm not sure that's urgent. Probably a lower priority bug?]
  • Extra line spacing within "Related Patterns" and "Contributors" sections in a design pattern.
    **[AB: I would suggest making this part of this bug: OSDPL: Finalize Design Pattern submission form & node display (http://issues.fluidproject.org/browse/FLUID-507) as I think it would be easiest to tackle this with other related changes.]

Step 2 - Play around with the layout

FF3 on Windows/Mac

  • Columns and text look good. No overlaps. Labels and text headers are all associated appropriately.
  • When there is a big screenshot in the middle column and its width is larger than the width of the middle column, it will overflow into the right column, thus making sidebar text hard to read. [AB: Definitely a bug. May be fixable by making sure uploaded images are resized to a small enough width.]
  • Does not wrap tag text at edge of screen as seen in IE7 [AB: Is this the "Find patterns by tag" section? Screenshot needed for bug.]

FF3 on Mac

  • Columns and text look good in all other pages except: "Content Management" and "Information Organization" pages
    • At 5x increase, the right-most column (Find patterns by tag) gets overlapped with the grey area of the middle column [AB: Do we need to support that much of an increase? There are other (seemingly worse) overlap issues with the Nice Menus at that size in FF2/Mac.]
      • DO - 5x is about the size my grandmas "large text" books were in (smile)
  • Same problem of large images overflowing into the right column

IE7

  • Header title overlaps into the center content area. [AB: Without magnification? Screenshot needed for bug.]
  • tag word wraps lines at edge of screen. [AB: Not sure what is being described here. Screenshot needed for bug.]
  • images in center column can overlap right sidebar, thus making sidebar text hard to read.

Step 3 - Tab through page

  • Online and New Users sections in left sidebar should be lower in the tab hierarchy. Not that important compared to navigation and accessing content. [AB: Agreed, but doesn't the skip to main content link address this problem?]
    • DO - Except they need to know to skip to content and if they can't see the screen they won't know there is less useful information

FF3 on Mac/PC

  • Not able to access sub-menus using keyboard [AB: We have to decide if this is a requirement. My understanding is that it isn't since the content is available by navigating to the page. However, we should investigate the other Drupal menu modules in the future to see if others do it better. Having the fly-out menus I think is a usability improvement.]
    • DO - I would love to solve this problem.  Although its available on the main page users will have to go through a lot of tabbing and content to get to say a pattern at the end of the list.  It would be nice for them to have an overview of what's on the page.  Could we add some sort of a TOC at the top that anchors to the pattern below?

IE7

  • Menu system not keyboard navigable, but works because you can activate each menu item using Enter and then drilling down through the pages. [AB: see my comment above.]
  • Activating an item on the menu loads a different page and the user needs to start tabbing through once again. [AB: see my comment above.]
  • Tab focus can be placed on "http:// ... /taxonomy_menu/1/%24arg" and "http:// ... /taxonomy_menu/%24arg/%24arg". Invisible links just after UI Design Patterns. IE7 only. [AB: Sounds like a bug. Is it the invisible links that are navigating to these URLs?]
  • Opening "http://osdpl.fluidproject.org/taxonomy_menu/%24arg/%24arg" shows an "Uncategorized" design pattern page.
  • Opening "http://osdpl.fluidproject.org/taxonomy_menu/1/%24arg" shows the same thing.
  • Invisible skip to main content link... should it be visible? Probably. [AB: It is made visible when you tab to it, which seems to be sufficient. Visual clutter is reduced by not displaying it to users who wouldn't use it.]
    • DO - I wonder if keyboard users would appreciate seeing ahead of time?  Right now they don't know they can do it until they get to it so they may come to a page and think it's way too overwhelming to get the content and give up.

Step 4 - Alt attributes

No Tooltips / Alt Text

  • Login or Register links [AB: I'm not sure if this is in the theme or in core Drupal. We may want to consider contributing fixes like this back.]
  • My Tags [AB: I only see "My tags" as a heading in "Tag this pattern," which I assume is not a problem since it's not a link. Is it somewhere else I don't see?]
  • Error message icons [AB: I'm not sure if this is in the theme or in core Drupal. We may want to consider contributing fixes like this back.]

Has Tooltips

  • Printer-friendly version
  • Category link in main content area
  • Search
  • Images
  • User Profile links (under "Who's New" and "Online Users").
  • Star rating

Other Notes

  • The URL of the site is "uidesignpatterns.org", but the site is referred to as OSDPL everywhere within the site. [AB: In general, we need to think about branding for the site. The Fluid logo was used long ago, which is fine to use if that's the route we want to go (and it should actually be linked to the Fluid website), but whether or not we should create a new logo for the OSDPL was never discussed. I'm also not entirely convinced that someone who comes to uidesignpatterns.org should be redirected to osdpl.fluidproject.org. Must the name of the site always be tied exactly to the URL?]
  • Make sure the text in the site is inclusive. 
    • The text mentions Sakai, Moodle, uPortal ... I'm not a member of any of those communities, is there anything here for me? [AB: I agree that if we are being more open about the submission of patterns that this should be changed. But I'm not sure we're there yet...I assume we'll figure this out as part of the governance discussions. Currently these are the communities we are working with so it seems accurate. We do want to accurately reflect what a person can do if they come to the site today.]
    • Who is Christopher Alexander? Is he an important person? Should I know him? May be an alienating statement. [AB: I agree that it may be a little academic to mention Christoper Alexander, but when the front page lacked content, I did think it was good info to pass on. If we have better content I think it's fine to remove it. In the meantime, I added information that Alexander was the "father of the pattern language movement in computer science." I do think the fact that a pattern is a 3 part rule should be retained.]
      • DO - If we move this information to a FAQ page I think it's fine to mention him and would be interesting to some.  Perhaps we could also use an "elevator pitch" and have them link off to get the more detailed answer?
  • "User Login" - why do you need an account? What does it mean to have an account? What am I missing if I don't have one? [AB: This would be great information to cover on (or link to from) the front page of the site after we figure out governance.]
    • DO - In the meantime, what can't you do until you log in?  Perhaps we could mention that someplace?
  • Reduce text to make site more concise.
    • Home page should contain dynamic contents/updates rather than static text. [AB: I don't know if I completely agree with this. I think it's great to have some updated content on the front page (e.g. I love the way Yahoo! has recent patterns), but I think there should be some static content which explains what the site is all about and potentially how to use it.]
      • DO - Repeating myself but perhaps we could do both -- use a 1 liner on this page and link off for more information.  There is quite a bit of text right now but I think it's useful information.
    • 403 (Forbidden) error is a bit wordy: "Access denied  We're sorry, but you must have permission to view the page you requested. If you are already a registered member of this site, please try logging in. If you are not a member, you'll need to create an account. If you have any questions about our site or group, please feel free to contact us. --Webmistress" [AB: Feel free to change; this was based on Drupal example 403 message wording. We should make sure all the important points are covered, though.]