Nablopomo – Day 17 – Skip links

I’m a definite proponent of ‘skip links’ with any site I build. In addition to being an essential part of the Web Content Accessibility Guidelines – 2.4.1. – Bypass Blocks, I firmly believe that skip links are valuable for a more effective user experience. I just do mine a little differently.

My site only has 2 skip links:

Skip to Content
Takes you directly to the content of the current page that you’re on.
Skip to Search
Takes you directly to the search field.

You may have noticed that I do not have a ‘Skip to Navigation’ link.

Why? Quite simply, I feel that skipping to static information doesn’t make the best experience.

This is not to say that the navigation isn’t important. It’s the key to any site, obviously. But for me, this site’s navigation shouldn’t be changing on a regular basis.

It’s not about the importance of content. It’s about accessing dynamic content and the tools associated with it.

Of course, there can be exceptions based on the type of site you have. Perhaps if you have navigation elements that are dynamic in nature (like a product based site that filters down to a specific type of product), then you’d want to reconsider how it’s treated.

Regardless, the key is to assure that the user is having the best and most effective experience possible. For my site, I feel this works best.

Site Review – Temple Gate

With the current discussion around the recently announced Temple Gate, An Accessible HTML 5 WordPress Theme, I figured I’d give it a quick review to see how the site measures up in regards to accessibility, usability and overall design.

Strengths

  • The feature highlights that are listed.
  • Decent visual design.
  • Effective highlighting of the most ‘Popular Posts’ in the banner.
  • Semantics are okay. (The <div> elements can be streamlined a bit, but not the end of the world.)
  • Utilization of WAI-ARIA roles: banner, article, complimentary and contentinfo.
  • Information is still differentiated effectively when colour is ignored. (via Graybit)
  • Visual guide used for focus on search input. (In other words, the little magnifying glass disappears when you focus on the search field.)

Improvements

  • Not all links have a title attribute assigned.
  • As well as the current link from the logo, add a ‘Home’ link in the main navigation.
  • Add a ‘Skip to Search’ in the skip links.
  • The main logo that shifts on mouse over can be considered a bit distracting.
  • No text resize widgets or themes in use.
  • Further utilization of WAI-ARIA roles: navigation, main, search.
  • No alternative themes used. At least have one for high contrast.
  • By default, some text is a bit small for skip links and some secondary content.
  • With keyboard navigation (not with the mouse), focus and visited can be improved. Use more than colour to indicate this.
  • Colour contrast can be improved in some areas. Dark grey ‘Sep 2010’ against light grey, light red ‘xiwang’ against light grey and off-white, blog post separators, etc.
  • Consider having an accessibility statement built in, as well as the brief description in the complimentary content area.
  • Consider using GZIP to improve load time. W3 Total Cache has done a decent job for me.
  • Take advantage of a grid layout. (Vertically align the separator between the picture and the ‘Popular Posts’ with the line between the main and complimentary content.)

Things to still test

  • Screen reader testing
  • Multiple User Agent testing (Older browsers, IPad, BlackBerry)

Keep in mind that this is not meant to slam any of the work that been done. It’s simply to improve things for all involved.

Overall, a good first effort. It’s always good to see people automate things in the effort of applying the best practices in recommended web standards. If there’s any questions about the points above, I’ll be happy to clarify them for you.

phpBB WASO

We are proud to introduce the latest offering from Crazy Bat Designs, the phpBB WASO.

Project Origin

What started me on this project was the interest in the creation and the use of a successful Web Application that was being used by a large, diverse user group. In this case, I chose to look at one of the more popular open-source forums being used; the phpBB forums.

I wanted to get to the core issues of what it was that has made phpBB as successful as it is. To start, I thought of Web Applications as a whole and came to a logic conclusion. To create a successful Web Application, there are two key factors that are vital; functionality and user interface design.

One of the most important things with Web applications should be that it functions properly. You wouldn’t want to use an application to not perform what it is you want to do. If it doesn’t work, no one will use it.

Next to this, the User Interface is the next item of focus. Along with a fully functional Web application, you want to make sure that the usability has been well thought out to allow for the most ideal user
experience. Again, if it is not usable, no one will use it.

However, what I see that needs more awareness is Web Application design that meets Web and Accessibility Standards. One of the most common and overlooked aspect of Web application design that should be as equally vital as functionality and user interface design.

I believe this is because the majority of users who use Web applications don’t immediately see the impact of it being well structured and designed with accessibility in mind. I think the way of thinking is that if most users can use it, then the benefit of conforming to Web and Accessibility standards is negligible.

Keeping in mind that Web and Accessibility Standards are more in focus these days, I’m sure that the people responsible for developing the next generation of the phpBB have these standards in mind. To compliment this, what I am showing here is that it’s possible to take an existing Web application, like the phpBB, and make it more Web and Accessible compliant. In addition to the immediate benefits of easing on bandwidth and making it simpler to update the phpBB template files, I am also attempting to reach the most people possible.

Objectives

The overall objective of this project is to rework the existing phpBB with the intention of;

Downloads

For the latest files available for download, visit the Crazy Bat Design forums on Github for more information.

About phpBB

phpBB is a high powered, fully scalable, and highly customizable Open Source bulletin board package. phpBB has a user-friendly interface, simple and straightforward administration panel, and helpful FAQ. Based on the powerful PHP server language and your choice of MySQL, MS-SQL, PostgreSQL or Access/ODBC database servers, phpBB is the ideal free community solution for all web sites.

phpBB are a group of individuals based internationally who believe in Open Source software. The project has been stable since its creation in June 2000 without changes in licensing, leadership or corporate associations. Our goals remain unchanged and clear, to continue developing and supporting a stable, free, Open Source forum system.

About this project

I am a firm believer in open-source software as well as reaching the most people possible. This project is intended to contribute and add value to the already popular phpBB framework by making these enhancements open for everyone to use.

As well, I am also a promoter of Web and Accessibility Standards. This project is an example of taking the existing phpBB and reworking the front-end so that it becomes more standard compliant, with only minor changes to the core functionality. It’s to also show that it is possible to achieve standards compliancy, regardless of the complex nature of phpBB’s functionality and default user interface.

See and example of the phpBB WASO in use with the Crazy Bat Design forums

If you have found any value in this project, please feel free to copy, use and distribute the provided image. Spread the word about phpBB WASO.

phpBB Web and Accessibility Standards Overhaul - 80 by 15 button

Thank you. Marco.

Contacts

(Marco Battilana) (info@crazybat.ca)
www.crazybat.ca

References