Using Superfish Menus in Drupal - Ray Ositis, iSchool
- Looking Ahead: What Topics Could We Focus On In the Coming Year?
- Menus
- Seem to be a major puzzle area. How do you design a menu that works for mouse-users, voice browser users, speech recognition users, and keyboard only users?
- Video accessibility
- IBM's Pawan Khera is still interested in coming to the UW to talk about IBM's AbilityLab Media Captioner and Editor
- 3Play Media (http://www.3playmedia.com/) offers some nice transcription and captioning services
- How can we help make captioning a normal step in the workflow of video creation?
- User testing for accessibility
- iSchool as putting together a portable usability lab and would like to include accessibility as one of the things they test for
- Other Higher Ed Web sites
- How are we doing in comparison with our peers?
- Terrill Thompson's study of the accessibility of higher education Web sites should become available on the Web in a few months
- Central UW tool to check accessibilty and usability
- SiteCheck being evaluated
- Could AccessibleWeb@U help explain results and process?
- Using the Superfish Menus in Drupal - Ryan Ositis, iSchool Web Administrator and Developer
- iSchool site is at http://ischool.uw.edu/
- iSchool needed to update their custom CMS
- Wanted more and more features, hard to keep up
- Decided in February it was time, partly in response to RBI initiative
- Wanted a new CMS
- Need something that will do everything they already had with their old system
- What additional features can a new system provide?
- Can our developers work with it with a minimum or retraining?
- Drupal is built on PHP, which the iSchool Web staff was already familiar with
- Drupal (http://drupal.org ) looked good
- Strong, active community
- Modular structure
- Feature rich
- Commitment to accessibility and security
- Decided to go with Drupal
- Superfish Menus Module (http://drupal.org/project/superfish)
- Derived from Suckerfish menu originally published by Patrick Griffiths and Dan Web on A List Apart (http://www.alistapart.com/) in 2003
- In working with Drupal modules, had already learned that, if you want a new feature, you should first go look for a module that already contains the feature, rather than trying to hack code.
- Installation
- Simple to install
- Does not require any other modules
- Unpack and copy folder into /sites/all modules folder
- Versions available for Drupal 6 and Drupal 7
- Run update.php (standard procedure for adding modules)
- Go to modules menu, turn on Superfish menu
- Configure menu
- Go to Blocks menu to put the menu in a content block
- You can have multiple menus, iSchool has a dozen different menus
- For each Superfish menu, many configuration options are available - menu type (navbar, horizontal, vertical, mouse delay, drop shadows, etc.
- Can control which pages a given menu appears on; useful for larger sites
- Behavior
- Users like menus, but most are dependent on mouse. Superfish can be navigated entirely with keyboard by using tabs and back-tabs
- With Safari, did not work that well unless you change the settings
- Pitfalls
- Its a menu, not a panacea
- Issues with jQuery plugin can impact module. Especially true with Internet Explorer and the z-index, but solutions are readily available in the Drupal community.
- CSS for customizing can be tricky and takes time. Make sure to budget extra time for customizing
- Discussion
- Would be nice to have more controls, such as being able to navigate with arrow keys
- Some screen reader software uses arrow keys, easy to step on toes
- Code to make it work with arrow keys can break
- Top level of menu items are all h4s, which most screen readers can find and go directly to
- Could define access keys (http://webaim.org/techniques/keyboard/accesskey ), but there are no real standards
- How do you tell users what access keys are available
- Whatever you set up is likely to conflict with keys assigned by software
- Carousel on the iSchool home page(http://ischool.uw.edu/ )
- Custom coded in jQuery, it is a version 1.0; the team still has many more ideas they want to implement
- Want to make it more accessible; already can tab through news stories
- Do provide an All Features link to a simple list of the news items; could be put in front of carousel in tab order
- Carousels are in general a "weird accessibility gap"; none of the readily available versions do well
- There is a need for cool things on home pages, but tend to be used for pictures and other stuff that does not have much value
- Do people really use carousels? Apparently not much.
- Some carousels are connected to direct actions (apply now, buy this)
- iSchool site to a degree is experimental, always trying things
- Statistics
- Drupal has modules that will give you all sorts of statistics; search keywords, referrers, performance statistics, accesslogs
- There is a Drupal module that hooks everything into Google Analytics, generating the proper code for each page
- Relying on UW Groups service (https://wiki.cac.washington.edu/display/infra/Groups Service ) for who can do what on the Web site
- Evaluating Accessibility
- Have a couple of tools similar to W3C validator
- Need to work on use of headings
- Had Drupal Interest Group meeting in Fall; 40 people attended,
- iSchool Web team wants to work with that group
- Particularly interested in accessibility of Drupal sites
- Adopting a CMS
- Moving school onto a CMS is a huge shift in thinking
- Old method is to have static page templates, give out copies
- Have moved to a distributed authorship model; has changed workflow and roles for many groups
- Content providers get a window they can put content into; more limited role, but creates accessible pages if set up right
- For image management; one reason for going to Drupal is there were people who wanted to add images on the fly
- Go Around
- Global Health (http://depts.washington.edu/deptgh/index.php) is going to Drupal and WordPress
- Interest in mobile designs
- Can it help push sites to simple functionality?
- Dylan Wilbanks reports that he has heard several talks by top Web designers recommending that all new Web sites should be built first to work with mobile devices, then secondarily for big screens.
- What does mobile design mean?
- What are the criteria of a site designed for mobile access?
- Fully readable and navigable without zooming?
- Seems to involve flex designs (designs built with relative sizing) to give mobile device greatest flexibility to display page
- Are there guidelines to mobile design?
- A lot of stuff out there is woefully out of date, particularly the stuff that recommends hacking out most of your content
- Current smartphones have very good browsers, can easily display full pages; how readable the pages are depends on the site design.
- Rigid designs (wide, fixed width, fixed font sizes) will require a lot of zooming and scrolling
- How does Mobile design relate to accessible design?
- Simple navigation and content organization
- What else?
No comments:
Post a Comment