About the Widget.
Glide Panel Magic is a PVII Widget that lets you present some or all of your Web page content in a logically structured, engaging, and compact format. You can, for instance, display product facts, multi-part forms, or multi-step tutorials, in logical chunks—and in a unique and visually engaging way. The Glide Panel Magic navigation bar quickly identifies major sections and minimizes page scrolling by keeping more information above the fold.
Your information is presented in a search engine-friendly, standards-based (x)html structure that's accessible to all users at all times, even when JavaScript is not available. Navigation links are keyboard accessible and act as ordinary named anchors when JavaScript is not available, to deliver users straight to the relevant content.
Source: Project Seven Web Site. External Link.
Code Generation Performance of the Widget.
The Glide Panel Magic widget renders flawlessly in any Web content page regardless of MIME content type or DTD. It conforms to full W3C standards based upon the content page's DTD.
The CSS created by the extension and for the widget conforms to full W3C CSS standards and validates, accordingly.
Since the widget's JavaScript produces content for either
the text/html or application/xhtml+xml
MIME content type based upon the DTD of the content page,
Glide Panel Magic performs flawlessly within ASP.NET code and
is rendered XHTML compliant by the .NET framework
for browsers that support true XHTML.
Disclaimer.
This is an evaluation of a beta of the Glide Panel Magic widget by Project Seven. This testing is for content generation, standards compliance and accessibility compliance, only.
The widget is supplied as an Adobe Dreamweaver extension. Performance of the widget within Dreamweaver and its content development environment are beyond the scope of this test.
HTTP Header.
Major browsers include development tool add–ons that allow views of various aspects of the Web page's DOM. A view of this Web page's HTTP Header information is shown in the image in the left sidebar.
The pertinent information of this image is that it shows
this specific page is delivered and parsed by the browser
with a MIME content–type of text/html.
The W3C Validation Service can be used for further verification of the content–type [EXT] that is delivered to the Web browser.
Summary.
The Project Seven Glide Panel Magic widget meets any level of Web standards and best practice technical specification and consideration.
Its CSS based design is highly configurable that enables the widget to accommodate any sound HTML design. Multiple widgets can exist on the same content page. The widget's menu structure can be horizontal or vertical and can be located separate from the content that the widget controls. The CSS degrades gracefully in older browsers. It can be adjusted to accommodate and/or coexist with external style sheets that control primary content for all devices that support CSS and supported CSS media types.
The JavaScript is clean and succinct. For devices and user agents that do not support JavaScript or for Web visitors who disable JavaScript, the widget content is highly structured and usable.
It is how and in the manner which the JavaScript for this
widget has been coded that allows the JavaScript to impact
the DOM of
any modern Web browser regardless of the Web page's
recognized MIME type. It further allows the script to make
the required adjustments to the DOM prior to the Web page
being parsed. This allows the content page to successfully
render within the browser for either of the MIME types of
text/html or application/xhtml+xml.
The DTDs Used for Tests.
These tests are based upon performance, parsing and rendering of these pages that use the various XHTML DTDs.
Performance is not an issue in pages that do not specify a DTD or use a malformed DTD. Use of such is not recommended. However, when it happens, as in the creation of much of the hobby and do–it–yourself Web content, browsers will render that content in their Quirks mode. The widget will function correctly in such environments.
Tests were not necessary for determination of performance
of content with a MIME type of text/html that
use HTML DTDs. It would have been a redundant series of tests.
The Content's Logical Structure and Use of the
tabindex Element.
Logical structure of Web content is a critical accessibility issue. It is also important to efficiency of the Web content's presentation. With this type of widget, logical tab order becomes important particularly when content is present within the sidebar.
Logical Structure and Use of the Appropriate
header Element.
The widget constructs itself in a logical order based upon its placement within the Web content page. The widget's menu structure can be placed anywhere within the content. With its use of CSS, the widget's menu can be either a horizontal menu or a vertical menu.
Each of the content ‘folds’ as represented by
each separate menu link should contain a header
element, h2 through h6, that
explicitly reference the menu's text for that specific
content ‘fold’. This aides the Web visitor's
comprehension and identification of the content with or
without the use of JavaScript within a browser.
Use of the tabindex Element and Logical
Tab Order.
Most Web developers let the browser automatically assign
tabindex values to links and form controls.
Personally, I assign tabindex values to each,
independently.
One reason for this is presented within the use of this widget wherein a link appears within the sidebar content and a link, also, is present within the widget's primary content.
When the menu and sidebar content are within a left column and then is followed by the primary content column of the widget, left to right visual movement, Arabic languages aside, must be considered. Content is read from left to right. Links within the sidebar take priority over links within the primary content. Tab order should move from left to right and thus requires the code to manually establish tab order of those links. For a menu/sidebar that is constructed to the right of the primary content, a right–hand sidebar, tab order is not an issue.
There is problem with this type of order whenever JavaScript is disabled. It is not a problem with the widget but merely a problem of logical order versus tab order.
When JavaScript is disabled or is not rendered, as in most assistive technology user agents, tab order is out of place in relation to the logical order of the code. Left–hand sidebar links and content follow the primary content. However, the sidebar tab order of any links will take precedence over those links within the primary content.
Such an order places additional burden upon users who depend upon accessibility user agents. It is my position that the primary targeted audience of the those who use the Web site should always take precedence whenever such a conflict appears. For this Web content, sighted visitors far outnumber those who are not sighted. Therefore, tab order should accommodate those sighted users in this particular instance of conflict.
Additional Structure and Content Recommendations.
Additional requirement of use of the noscript
element and inclusion of a named anchor link add usability
and accessibility compliance to the content whenever the
widget is used.
Use of the noscript Element.
This widget is dependent upon client–side JavaScript.
It is strongly recommended to include a noscript
element whenever client-side JavaScript is used. This includes
its use for improvements and feature additions to usability
of any Web content.
Use of the Internal Page Link.
Dependent upon the type of content that is used with this widget, a named anchor link that will navigate to the beginning of the widget's content is recommended.
As used on this content page wherein information is
presented and folded by the widget, a the named anchor link
of top of page is used. Its use adds function
and purpose for the ‘un–folded’ content
when the content is presented without use of the widget's
associated JavaScript.
Accessibility.
Content and developer skill dependent, this widget meets all levels of the WCAG version 1.0 as published by the W3C As I said, it meets all levels: Priority One, Priority Two and Priority Three. This includes the United States Americans with Disabilities Act Section 508 Accessibility Guidelines.
This content page has been machine validated against the WCAG 1.0 standard using Hiawatha's AccVerify and Watchfire's WebXact products. No errors are reported at Priority 1, Priority 2 or Priority 3 levels.
SEO Performance.
The content within the widget is exposed fully to search engines provided that the specific content is not excluded by technique, e.g. robot text file exclusion.
This ability is superior over standard AJAX techniques that are used to present content within a collapsible content ‘fold’.
Exposing content to search engines and having the content conveniently available to users via ‘click through’ of the search engine link are distinct and separate issues. The Web developer must be cognizant of these issues. Specific technique and suggestions are provided within the Application Test content page of this Web site and address these issues.
