This website is accessible to the partially and completely blind.
By implementing appropriate technologies, verbose layout, and good practices, this website makes itself highly usable by persons with visual impairments. More information about visual impairments is available on this site. It’s important to recognize that although a person’s vision may be compromised, they should not be disadvantaged when using the web. Tasks like discovering information, finding entertainment, and socializing with friends should not be difficult for anybody to do.
Our Choices
Our final solution used the HTML5 Boilerplate project’s CSS resets and JS libraries as a robust base to begin nearly 1000 lines of custom CSS and JS, in addition to a few GNU jQuery plugins. The project was written completely in HTML5/CSS3 for the NJ State Conference of TSA (using PHP only for includes). For the National Conference, the entire website was converted into a WordPress theme. By using a Content Management System, we are able to rapidly modify and create new pages, and have a finished system that is modularly upgradable and configurable. This system is very future-ready, and will serve as the school’s official Technology Education website for the forseeable future.
It was only after heated debate that we chose to utilize a CMS. This option adds a small amount of time to page loading and means that we must develop for many general scenarious, but it was decided that the ease of use for the High Point Tech Department made the extra effort worth it.
Typekit, an external service, provides simple font replacement. The Typekit service was chosen over alternatives like sIFR or Cufon because it provides a wide variety of choices, is easy to implement, and does not require image replacement or Flash. The resulting text is even user-selectable. Though we could have done the entire site in this style, we chose to only apply Typekit to the headings and use a browser-font for the body text.
Just as last year, use metrics are gathered by Google Analytics. These metrics allow us to assess our decisions after competition- ie, which parts of the website were effective and which were not. For example, our data from the 2010 website indicated that very few users clicked on logo to return to the home page, preferring other methods although the logo was the most prominent. We therefore decided to keep the pervious year’s functionality, but add an explicit ‘Home’ button at the beginning of the navigation bar.
Our Workflow
When planning this website, the High Point team started by identifying broad areas of content and then specific sections before starting any work. It’s important to identify all needs that the website would meet; it was only after the information architecture stages were finished that the design process continued.
Research was conducted to compile information from reputable sources. Usability studies and writings on best practices were used to compare the strengths and disadvantages of candidate methods and components as well as design trends. Our findings resulted in a number of sketches and combinations of pre-built and custom-made PHP and JS components. Candidates were slowly narrowed down until the final solution was reached.
During final development, we began using a version control system (Our master repository is public on GitHub). This allowed us to compare different versions of the site and, when necessary, easily revert to previous versions. It also makes it easy for multiple people to collaborate from different locations, and to share our project perpetually.
Before uploading the WordPress theme to our LAMP server, we utilized HTML5 Boilerplate’s version of the Apache ant build script. This script concatenates and minified CSS, JS, and HTML files and optimizes all images for the web. It also generates .htaccess files for the Apache server. The build process greatly decreases website load times, especially for repeat visitors.
Design Elements
Specific choices made by the High Point development team were made with respect to usability for vision-impaired users, and the long-term use of the website. Our final solution includes:
- Compliance with International Standards
- Standards for website set by organizations including the W3C and US Dept. of State are followed on all pages in this website. The HTML5 and CSS3 all validate by the W3C working standards, except in rare and documented instances where a “hack” (intentionally invalid code) makes the functionality of the website more consistent or fixes a known mistake in the browser. Because all content meets the standards set by these international organizations, alternative methods of interaction (eg, screen readers or mobile devices) can properly use the site.
- Semantic Markup
- This website uses verbose HTML5 tags rather than non-descriptive, generic tags whenever possible (eg, <time /> rather than <span /> and <dl />s instead of <table />s). The website’s structure is also clear, with the visual layout reflective of the HTML. In other words, the order that content is presented on the screen can be predicted by looking at the markup only.
- Universal Navigation Bar with Horizontal Drop-Down
- The navigation bar is in the same place on every page. Consistency is very important for usability- the user interface should be memorable, but functionality and efficiency far outweigh aesthetics. The main sections are clearly listed, and below each section is a horizontal list of sub-pages. This list can be displayed even when the user is not focused on the menu because it’s horizontal rather than vertical. All pages are listed simultaneously in the markup produced by our customized WordPress function (PHP), but CSS hides all sections except the active one. A jQuery plugin called ‘hoverIntent’ is used as a better alternative to ‘mouseOver’ when hiding the current menu and displaying the hover’ed section’s menu. This configuration means that assistive technologies can interpret the markup without being interrupted, but fully-sighted users (the majority of our userbase) can have a visually interesting experience. A list of all pages is also provided in the footer, along with a button to scroll back to the top or the page (with an animation).
- Reductionist Styling
- While some developers start a project by asking “What can I add to the design?”, we began by asking “What can we take away?” Superfluous elements- visually or in code- were not included in the design. It is because of this minimalist approach that our website is so easily usable. A concise color scheme and fonts of contrasting weight, face, and style are used along with CSS design and as few images as possible to create a smooth user experience. When developing the website, functionality was consistently emphasized over aesthetics.
- Section 508
- The US Rehabilitation Act (1998) establishes standards that allow visually impaired persons to navigate websites. Section 508 requirements are met by this site: Alternative text (eg, alt and title) is provided for any non-text references (eg, images). Additionally, this website does not require any plugins or applets that would need alternative methods to communicate their content non-visually. Also note that because all styling of this website is done by a single (minified) stylesheet, user definitions can easily and elastically modify the presentation of the site (eg, increase text sizes without breaking anything).
Documentation and Source
This project is High Point Regional High School’s entry to the 2011 Technology Student Association Webmaster Competition. It placed 2nd at the NJ State Conference. Theo Pak will represent the project at the National Conference to be held in Dallas, TX. For detailed documentation, please view source on Github. The README file there includes a changelog and project statement.
I developed this solution to A) serve High Point TSA’s needs, and to B) compete in the National TSA competition. I feel that my final solution is a useful and innovative approach to giving TSA chapters an informative website. I used F/OSS whenever possible, and am proud to contribute to the community. I am therefore licensing this WordPress theme as a GNU/MIT Fair-Use (Open Source) project. Please feel free to study the way I used the excellent GNU software that already exists and to use my solution in portions or in its entirety. I ask only that you attribute the original authors of each component, and give back to the community with code or suggestions.
Contributors
All content of the site was compiled and written by this team, except as cited otherwise. The website was built using the excellent HTML5 Boilerplate project with Geany, a non-WYSIWYG editor, on Arch Linux 64-bit. Take a look at the CSS source file for detailed documentation and references.
- Lead Developer
- Theo Pak
- Copy Writers
- Mackenzie A
- Diego C
- Emily S
- Technology Student Association
- Chapter Advisor – Mr. Brian Brelick