b
UTEP Logo      Usability / Accessibility
Reference Materials, Web Basics, Links, University Guidelines and Rules*

!! Update !!

UTEP will be presenting a new accessibility policy for:
  • Web Pages
  • Web Sites
  • Electronic Media
This policy is not intended for 'web applications', such as the Parking Permit Purchase application, etc, as it is covered by a separate policy controlled by the Department of Information Technology.

The new policy will go into effect on or before June 30, 2009.

The University Accessibility Co-ordinator is Sandy Vasquez, Assistant Vice President of Institutional Compliance.  The Department of Web Content will be working with Institutional Compliance to fulfill the Texas Administrative Code (TAC) which refers to State Educational Web Pages, Web Sites, and Electronic Media. The below listed website overrides all prior accessibility and and style guide items within the University.

Refer all questions to at accessibility@utep.edu

The new website is located at:

http://admin.utep.edu/Default.aspx?tabid=59577&submenuheader=0



USE the TAC/508 Checklist to see if your web page, web site or electronic media product complies.


Introduction:

Those of us in the Administrative areas of the University would rather work with web page owners to ensure compliance and minimize errors, so bear in mind that we are here to assist and guide. We are not here to throw a rule book in your lap and walk away. Contact us for assistance and we will be glad to help.

*This is a living document. It will be modified on a regular basis as issues arise.  The only official version of this document is ONLINE. Printed versions might be out of date. The responsibility lies with the user to ensure that the most up to date version is being used. This document is intended to be a rolling list of issues that are encountered at UTEP and not a definitive guide to the Design, Usability and Accessibility of web pages, as there are volumes of books written about such subject matter.

Purpose:

  • To promote the understanding of the following with respect to the UTEP website
    • Viability - Information must be correct, up to date and useful.
    • Accessibility - Information must be in a format that it can be used by people with disabilities.
    • Usability -  Information must be in a format that allows the user to accomplish their goals. This includes page layout, navigation and text formatting just to name a few.
    • Legal Requirements - Information and the methods that convey it must conform to the State of Texas and UTEP's Legal requirements. This includes, but is not limited to, website terms of use and privacy statements. Because of this web forms and web applications must be compliant.
    • Branding - The UTEP website must be branded so that it is recognizable and unique. In the Internet Universe you can go from Amazon to the New York Times with a single click. The user must recognize that they are at UTEP and not somewhere else.
  • To instruct in methods and best practices in order to produce useful and usable web pages.
    • How?
      • UTEP Webmaster's meetings
      • Exploration of Usablity Techniques and use of research based best practices
      • Instruction in Accessibility rules and regulations
      • Exploration of DNN and non DNN tools and modules which will enable the production of great UTEP web pages
    • When?
      • Regular UTEP web masters' meetings; initially twice a month going to once a month. People will be invited and they should RSVP so rooms can be scheduled.
  • Recognize the following:
    • Our students are distinctively international
    • Our students are financially constrained.
    • Our students are mostly commuters
    • Some of our students cross the border every day to come to class
    • Most of our students have English as a second language
    • If we didn't have our students, none of us would have jobs. If our enrollment slips, then workforce reductions are entirely possible.
    • As the State of Texas reduces state funding to public insititutions, it will be our responsiblity to ensure that we provide an attractive and affordable educatonal solution to people of this region.
    • Our purpose is not self promotion, it is promotion of our students (current and potential); we will receive recognition when we do our jobs and do them well.
    • The UTEP website gets between 90,000 and 62,000 new and unique visitors every month. December of 2007 we had over 90K unique visitors to the UTEP home page. Each new visitor is a potential student either through direct interaction or referral. We reach more people in one month (unique visitors and regular visitors combined) than all our mailings for an entire year. Treat your web pages as if they were your brochure to the general population.
    • UTEP web pages are your face to the outside world.
  • Some statistics:
  • Do the following:
    • Design with our end users in mind. Your boss may sign your paycheck, but if  enrollment declines due to a lack of focus on the end users, then you and your boss might be out of work.
    • Gather requirements from end users. Formal methods exist, like focus groups and surveys,  as well as informal methods.
    • Utilize the User Centered Design process.   The UCD process never fails if it is implemented correctly.
    • Test using end users and ensure that it works and gives them what they need to accomplish their task.
    • Ask the students what they need to make their life at UTEP easier and to promote their graduation.
    • Take a representative sample of our user population when asking what they need.
    • Communicate within your area to ensure that area goals are the focus of your web pages.
    • Learn the concepts of Cascading Style Sheets (CSS). Free Training is available at:  http://www.w3schools.com/css/default.asp

Usability

"Refers to the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of the user."  ISO (international organization for standardization) 9241-11

    Important points:
  • Specified Product - Website, standalone computer application, dashboard of a car, computer keyboard, building layout, etc
  • Specified Users - You need an audience definition. UTEP Business Affairs users are not the same users as the Student Life users. People who use the web that are blind have different needs from those who are sighted.
  • Goals - What the users need to accomplish; what is their task?
  • Effectiveness and efficiency - No errors, no confusion and no misinformation.
  • Satisfaction - Users must be pleased with the product. If you have a bad web site, people will avoid it.
  • Context - What are the characteristics of the user? Look at economics, educational level, ethnicity and employment status.
Origins of Usablity:
  • Began as an official field of study around the time of WWII.
  • Some claim that it is an offshoot of Industrial/Organizational Psychology
  • Combines Industrial Engineering and Psychology with Cognitive Science, Experimental methodology and Statistics.
  • Since the inception of Human Factors/Usability specific topical areas have become their own separate fields of study
    • Human-Computer Interation
    • Interaction Design
    • Information Architecture

Website Accessibility

Purpose: To ensure the widest access to the content and features of a website.

Definition: Accessibility is best considered as a way of producing websites accessible to the broadest range of people. This includes
  • people with limited bandwidth
  • people with older computers and browsers
  • people with a range of disabilities including poor eyesight, blindness, deafness, motor impairments, seizure disorders and cognitive impairments.
  • people using a wide range of user agents such as graphical browser, text-only browsers, screen readers and handheld devices.
Accessibility is is a Federal and State mandate.

Reference Materials

UTEP Specific Items
  • UTEP colors are:
    • Specified in the following University Communications Specification Document.
    • Save our colors in the pure format, as our colors do not convert well. (photoshop people know what I'm talking about.)
    • The concept of the "Web-safe" color palette is no longer applicable because well over 98% of users can support more than 256 colors.
  • The UTEP official LOGO is the one at the top of this page. (The UTEP Pick)
    • No other logo is to be used by the Academic and Administrative branches of the University.  This will be implemented as older style University pages are migrated to the new format. This new format will be based on the requirements of the owning entity and requirements of the President's office.
    • The UTEP Seal is reserved for use by the Prsident's Office ONLY. "The Presidential Seal or University Seal should not be used in web pages for individual departments regardless of the level of the department.  The official logo is the UTEP logo with the pick and that should be used consistently by everyone." - Quote from the President's office.
    •  "Pete" is only to be used by the Athletic Department.
    • The UTEP Logo comes in three sizes 50x50, 100x100, and 200x200. This might change in the future, but that has not been decided yet. Until a correctly colored University Logo is posted on the IT site, go to University Communications and request a correctly colored logo which is specified in the following University Communications Specification Document.
    • If you need a special size logo, AND that size has been approved by University Communications and the President's office, contact University communications directly to fill your request.
    • The University logo is not allowed to be stretched or distorted in any way. It is 'trade marked' and the distortion of it constitutes a violation of the trade mark.
    • The use of the UTEP logo on any site not sanctioned by the Office of the President is open to legal actions.
  • The information that had to be displayed during our SACS accreditation is no longer manditory and should be removed from general audience viewing. (request for compliance on this was made on 08/2007)
    • Back up all data from the last SACS review and store it in a secure place (not in your DNN portal) for future use. We will have another accreditation coming our way in a few years, so keep your data in a safe place.
      • SACS data is to be backed up on the University servers accessible by UTEP administration.
      • SACS data is to be backed up in mspace at the place designated by IT with the proper security precautions.
      • SACS data is not considered to be backed up if it exists in a local backup only. It must be backed up on the University mspace area.
      • Contact IT for information about access to mspace and the location where SACS data is to be backed up.
    • Do not use the SACS accreditation seal on any of your web pages; it is not to be used like the "Good Housekeeping Seal of Approval".
    • Mission and Vision statements are no longer required to be displayed. That is up to the creating entity. If your Mission and Vision statements are deemed important to your area, then by all means have them available. Your purpose should be apparent when the user has viewed your main web page. If that is not possible, then have your vision and mission statements available for reading.
  • Web Page Navigation:
    • For your area, and by that I mean at the VP or Dean level, choose a navigational scheme that will be used by all subordinate sites. For consistency's sake all navigational schemes should be parallel. This keeps the user from becoming consfused as they traverse your area's web pages.
    • How to choose a navigational scheme:
      • You should not have more than two navigational areas on a web page.
      • If you choose to use a two navigation area scheme, then there should be a Primary navigation area and a Secondary navigation area. The Primary area is for items specific to YOUR area, the Secondary are should be a global (University/VP wide) area. This does not prevent you from imbedding links in your written text, as that is very useful. A good example of a two navigation area scheme, visit the Intuit website within their corporate profile section; an excellent job.
      • Possible navigational areas are left, right and top. Global items should be considered for the top navigational area, as the user has navigated to your area from the main pages. The expectation of local navigation being on the left or right overrules stylistic preferences by designers.
      • Navigational areas should be proximate to each other; don't have one on the left and one on the right. Items which are visually proximate stay in the forefront of the users' attention.
      • Expanding navigational entries (like the library has) is a good idea, as it makes the need for a secondary navigational area redundant. The Department of Web Content has code for such a navigational scheme, but it is outside of DNN.
    • Always create a site map for your area as this helps people find things and is a part of the Federal requirements for Accessibility.
    • Navigation should be correct:
      • Example of bad navigation: The old parking website; there were currently 4 pathways to purchase a parking permit. That is confusing for the end user. Find one OBVIOUS way and stick to it.
      • Avoid going overboard on new navigation methods. A few years ago the use of tabs became popular. Don't do what amazon.com did when they implemented a "Tabs gone Wild" scheme.
      • Do not create pages which link back to themselves. Do not allow 'recursive' links on your web pages. Recursive links are defined as links that take you to the page at which you are currently located. It  provides no useful purpose except to confuse the end user.
      <>
    • On Deep web pages, navigation should include such useful aids as breadcrumbs. Another example of a navigation aid is a deactivated link in the navigation area showing the user where they are in the site, but still preventing recursive navigation.
  • Web Page Banners
    • When a new or infrequent user comes to the UTEP web site, one of the first things they see is the banner. The banner is the identification of  UTEP to the outside world. When a browser page begins to load the end user should immediately know or begin to associate our 'branding' with UTEP.
      • The banner consists of
        • The UTEP Logo
        • The exact words "THE UNIVERSITY OF TEXAS AT EL PASO"
        • The name of the higher owning entity. For example the department of computer science banner should include the parent organization, the College of Engineering.
        • The name of the Department or sub area. For example, all banners for the department of Computer Science should include their name most prominately in the banner.
      • A typical banner should look similar to:
Example of a Basic Banner
    • The look and feel of web page banners within a higher level area should be similar. The Dean or organization head should create the appropriate direction for all banners for their area within the scope of these branding requirements.
    • Subordinate web sites (within the larger area) should identify the superior organization as well as UTEP. Most areas do not have an org chart to show who belongs to who, so up front identification is important. Without an indentification the end user might not be able to figure out what college, school or university sub area they are navigating through.
    • Photos should not be used in web page banners, as that creates a visual jumble and is distracting. If you want photos on your pages depicting your area, building and purpose, consider a slide show or a collage on your main page. See the UTEP Kinesiology website.
    • Line art and visual enhancements are allowed (see: http://www.sahs.utmb.edu/dean/)
    • Good taste and sensibility are expected.
    • All Banners must be passed through the Department of Web Content and consequently the Office of the President before they can be used. There are no exceptions to this rule. The Prez has final word on how she wants this University "Branded" to the outside world.
    • * If you have noticed, there is no banner on this document, as this department does not yet have a web site and the parent organization does not yet have a web site. - It is more important to ensure that student and public areas have correctly created areaa at this point.
Proposed home page for the college of Engineering
An Example of a good layout. Clean, Crisp, interesting and uncluttered. Just enough graphics for interest, yet not detracting from the written material. Task and Topic based navigation along with major items of interest make this an excellent face  to the outside world.
  • Universal navigation:
      • UTEP is implementing a Universal navigation system to assist visitors' ability to navigate the entire UTEP site.
        • According to students and visitors the following navigational items should exist in the Universal Navigation area:
          • UTEP Home
          • <your area> Home
          • Directories
          • Maps
          • Library
          • my.utep login
          • additional space is available for descretional items.
        • View the universal navigational example located on the Enrollment Services page  http://webcontent.utep.edu/enrollmentservices/
  • Legal considerations:
  • All web pages should have the link "Required Links" in the footer of their pages, look to the UTEP home page for an example.
    • The link should refer to http://www.admin.utep.edu/Default.aspx?tabid=54275
    • This is not the only the only link that might be required, but this link must be present.
    • This is especially important with respect to major entry points to the University and legal requirements set forth by the state of Texas.
  • Other State legal requirements might apply to your site; check with our legal and/or our compliance areas for requirements.
  • UTEP is bound by the Texas Administrative Code (TAC) – The link to the TAC is located here: http://www.sos.state.tx.us/tac/index.shtml  It is quite a read, therefore I have condensed the relevant portions of it with relation to web sites at the end of this document. In order to test for TAC compliance the State Accessibility coordinator says to use 508 testing tools. Compliance applies to web pages and web applications in addition to any stand alone applications.
  • UTEP is bound by US Gov. 508 –   compliance for persons disabilities is not only required for buildings but also for electronic information. Failure to provide access to information on a state/federal site is considered discrimination. There are real penalties connected with non-compliance.
  • UTEP is required by the State of Texas to have all major entry points to the University marked with certain links at the bottom of the web pages. If you are in doubt as to what constitutes a major entry point, consider home pages, department pages, college main pages, school main pages and ANY page that is advertised to the public or any page that the university tells people to go to directly. Major entry points should have the same links that exist at the bottom of the UTEP Home Page. These are:   State Reports | UT System | Customer Service Statement | Site Feedback | Required Links |  CLERY Crime Statistics
  • UTEP is required by the State of Texas to have all public pages within the University that are not major entry points into the University  marked with certain links at the bottom of the web pages. Public pages do NOT include Professor Profiles, Professor/faculty/staff personal pages or pages created by students that are not used to conduct official business of the University. This requirement is for all official UTEP pages that are not major entry points. The required links are:
  • Official University documents which might or will expire after a certain period of time or are at a superior placement withing the UTEP website should contain the disclaimer:
    •  "This document replaces <or amends, if the document is an amendment> all prior versions. This document is considered to be officially superseded when a new version is created and posted within the www.utep.edu <http://www.utep.edu/>  domain."
      • The reasons for this are as follows:
        • 2008 obviously replaces 2005 and all prior versions
        • Since we don’t have a rotational schedule of when documents get replaced and don’t post that on the web, then a new version automatically replaces any old versions. But the new versions must have a referencing date, such as; “2012 UT System Compact”, or 2009-2010 course rotational schedule.. There is no need to state that a document is only valid for xx years, just that this is the date of inception and therefore implies that there is no superseding version available.
        • Amendments are handled without having to change the entire document.
        • Since documents sometimes end up in different places as the University changes, the umbrella is “within the www.utep.edu <http://www.utep.edu/>  domain”. This puts the burden on the user to ensure that there is no document more recent than the one they are viewing.
        • We must endeavor to neatly place documents in logical and organized areas in order to prevent confusion on the part of any reader who visits our website.
  • Web page layout & content
    • Horizontal scrolling is not allowed. Sometimes Vertical scrolling cannot be avoided. To prevent Horiztontal scrolling on a montor ensure that your total web page width is no wider than 760 pixels. Additional pixels are added by the browser for grab bars and borders.
      • There are several  ways to deal with the Horizontal scrolling issue:
        • Assume the max resolution the user will be using is 800x600 (not everyone has a high end monitor)
        • Assume that the user might want to print the page they are viewing (pages larger than 800x600 will have areas of the printed page cut off). If you don't implement the 800x600 rule, then you will HAVE TO have a "printable page" link which will require twice the work to keep it up to date. This goes for a "text only" page also. Keep it simple and don't make work for yourself.
    • Vertical scrolling sometimes cannot be avoided. Keep your most important information "above the fold". This is the newspaper concept where you immediately see the headlines on the front of your newspaper. All info on the front page is important, but the MOST important is 'above the fold'. This concept is described in detail in the reference links listed at the end of this document.
    • Have an editor check your pages for misspellings, typos and gosh darn just ain't right english.
    • People do not read web pages like they do with newspapers and books.
      • Keep the sentence structure simple and parallel. (No prose or "Disseration Syndrome" writing should be on high level pages; if someone wants to read your lofty writing about how to solve the problems of the world, give them a link to it, but don't put it in their face when they are trying to find specific information in order to complete a task.)
      • If you have important points, put them in a list with bullets
      • If you have a sequence of actions put them in an ordered list. (1. 2. 3. 4.)
      • Lots of graphics detract from the content of your site; keep it clean and "crisp".
        • If you have a photo album or a page of pictures, then provide a link to that page and do not force someone to view them while they are trying to complete a task.
        • Graphics have been proven to keep a user's attention for only an additional 15 seconds; this additional attention span is NOT additive. Too many graphics prevent the user from reading your message.
      • Photographs:
        • The need to supply "alt text" is just as important as the caption of a photograph, however, they are NOT the same thing and no alt text should be the same as the caption. The "alt" attribute only holds 80 characters, after which point has been reached use the "longdesc" attribute described in the next section. Hence the following:  - Jan '08 update
          • Descriptive or Supporting images, help the content succeed, but aren’t critical to it. One example would be an image of a house next to a real estate listing. For sighted web visitors, this image lends some minimal value.
            • Here are some examples of Descriptive Images: Artist's rendering of the new university bookstore (e-notes issue #1), Pre-med students taking a tour of El Paso hospital facilities (e-notes issue #2). These images add some value, but are not critical in any way to the success of the written content. IF the photo of the pre-med students had been "Photograph of UTEP's latest four pre-med students <name the students> being lectured on the use of neo-natal emergency equipment by Dr. Ernie Johnson, head of the XXX department at UTEP", then that photo would have been DEFINITIVE or a CONTENT image.
          • Definitive or Content images are part of the content. An example of this would be a location map for a retail store.
              • If the image in e-notes issue #2 (sports article) showed <name of basket ball player> just seconds before the critical throw which won the game for UTEP, then that photo would be part of the article along with <name of basket ball player> scored the most in the game (if that were the case). However, there was no information given that (1) identified the player (2) indicated the relative importance of the player to the team (3) indicated the game being played or (4) indicated meaning of the photo.  That photo could just as well be "alt="UTEP basketball player dribbling a ball"" which would make it a DESCRIPTIVE or SUPPORTING image and not at all critical to the success of the article.
          • When photographs are used in online documents, include text for the picture caption and the alt text for the image. The above explanations are solid guidelines for providing such text. If no informational value, either descriptive or definitive, is added by the use of photographs (it just makes it look really really purdy), then consider the writing as standing on its own merit.
        • The "Longdesc" attribute allows for a "long" description of an image. It is not always appropriate as it is to be used when the data in the "alt" attribute would contain more than 80 characters. Read more.
          • Examples:
            • Photo of cheering graduates; use "alt" attribute and say "Photo of cheering UTEP Graduates".
              • Longdesc would not need to be used and might be a hinderance to those using assistive technology if the longdesc were the same as either the caption or the alt text.
              • Caption might read "Photo of the 2007 graduating class cheering as commencement ends."
            • Photo of the Mona Lisa; use "alt" attribute to say "Photo of the Mona Lisa by DaVinci".
              • Longdesc should be used to fully describe the painting if it is a Definitive or Content Image and the text is over 80 characters. In the case that it is Definitive or Content then the longdesc would say "Photo of the Mona Lisa by Leonardo DaVinci showing the mysterious smile and over the shoulder lighting which has intrigued views for hundreds of years..blah...blah...blah.
              • Caption might read "Photo of DaVinci's Mona Lisa"
            • The point of the "Longdesc" attribute is to describe to those who cannot see it the Definitive or Content part of the image. You are describing the image to a person who cannot see it. Think of it as taking a blind friend to an art museum and then describing the different works to them.
          • You might be able to avoid this whole issue by either:
            • NOT assuming that a web page viewer will notice the information in the visual conveyed by the "longdesc" attribute. Therefore, the body of the document would fully describe the visual nuances of the image in relation to the Definitive or Content nature of the image. Hence, you would use "alt", a simple caption and have the graphic described in the body.
            • LIMIT the usage of Content images. In some cases this is not possible. Example: "Photo of Dr. Diana Natalicio conveying an honorary Ph.D. diploma to Ed Quinn for his work on the Sci-Fi hit series Eureka as a Dove suddenly appears and lands on her shoulders."
            • IF the caption of the graphic is NOT REALLY, REALLY long, put that information in the caption and use a simple "alt" description. The caption, in this case, would serve the same function as the "longdesc".
          • Remember that
            • The "longdesc" will be read to the user utilizing assistive technology
            • The Caption will be read to the user utilizing assistive technology
            • The "Alt" will be read to the user utilizing assistive technology.
            • The "Body" of the document will be read to the user utilizing assitive technology
            • Put yourself in the user's place and decide how many times you want to hear the same thing over and over again. Then do the right thing for the user.
        • Video / Multimedia: 
          • All training and informational video and multimedia productions which support UTEP's mission, regardless of format, that contain speech or other audio information necessary for the comprehension of the content, shall be open or closed captioned.
          • All training and informational video and multimedia productions that support the UTEP's mission, regardless of format, that contain visual information necessary for the comprehension of the content, shall be audio described.
          • What to do:
            • Close caption your video, if possible (best choice).
              • If the captioning needs to be synced with the video in order to best convey the proper and timely information to the user, then this MUST be done.
            • Sync the captioning with speaker's mouth movements and actions, if possible (best choice).
              • If the audio/captioning needs to be synced with the video in order to convey the proper and timely information to the user, then this MUST be done.
            • Provide transcripts with adequate description of actions on the video and exact words spoken in the video as a bare minimum. (minimum requirements) Plan ahead, if you are making a video for UTEP internal or external use.
            •  
      • If you have important news items that change, consider a "What's New" section.
      • Keep your content "Fresh", no one cares what you did last month if it doesn't impact them TODAY.
    • All content must be 508 compliant; as this is a Federal and State Mandate. See our Compliance Checklist for required adherance. Starting in late February, all sites will be scanned by an automated tool in order to check compliance. Sites failing compliance will be given an opportunity to correct the problem before being reported to the UTEP Compliance Office. Non-compliance reports will be sent to the President's office for review.
    • Web pages should "Link" and not "Copy" information off of other areas within any other website. If you "Copy" information then you have no idea when that information changes or how it changes.
    • If your information is out of date or in error and it is a direct link off of the UTEP home page, your link on the UTEP home page will be REMOVED. It will not be restored until you notify the Department of Web Content that the issue has been corrected. The UTEP home page is:  http://www.utep.edu
    • Content should be directed to the intended audience. For example, if you page is intended for professional & continuing students, it should promote those items the audience will be interested in. Think like your audience, what do they need to know, what do they want to know, what would you want to know if you were them?  Some non all-inclusive examples:
      • Professional Students: Night Classes/Degrees <-- Promote      Certificates <--Promote    Distance Learning  <-- Promote   Extended/special Semesters <--Promote
      • Military Students:  Leadership courses <-- Promote    Off Campus Courses <-- Promote
      • Donations:
        • For Donors:  Write ups about Donors <--Promote    Activities for Donors <--Promote   upcoming donation drives <-- Promote  
        • To get Donations: Write ups on achievements/accomplishments/students helped <--Promote    Benefits to the community <-- Promote
      • Potential Research Partners:  Research Facilties <-- Promote  Cost Effectiveness <--Promote
      • Potential Business Partners: Research affiliates <-- Promote  Cost Effectiveness <--Promote
      • Any Area: Outstanding Successes <-- Promote
  • Ownership and Responsibility:
    • Those of us in the Administrative areas of the University would rather work with web page owners to ensure compliance and minimize errors, so bear in mind that we are here to assist and guide. We are not here to throw a rule book in your lap and walk away. Contact us for assistance and we will be glad to help.
    • It has been put to the Department of Web Content, by the President's Office, that it doesn't matter WHO owns the page, WHO is responsible, or WHAT excuse someone might have with regards to inaccurate or incomprehensible web pages; The Department of Web Content has the responsibility to intervene and change it for the betterment of the University.  Fortunately, most page owners have come to us before there have been issues. This department would prefer that we all work together to come to an agreeable outcome.
    • Personnel within the President's Office and the Department of Web Content regularly spot check University pages. If an issue is found, then it will be reported to the owning area for immediate correction. If it is not immediately corrected, then the Department of Web Content will step in and ensure that it is corrected.
  • How to lay out web page forms:
    • Coming soon.....
  • Meta Content
    • Meta Content allows for the optimization of your listing within search engines. With the proper use of meta tags you can ensure that your web page will have a good chance of being in the "top ten" list of results when someone searches for content which appears on your page.
      • Recommended reference material:  <>
      • http://webnet77.com/webstuff/optimize.html,
      • http://www.w3schools.com/tags/tag_meta.asp
      • A quick overview of Meta tags for Search Engine Optimization

        When one thinks of Meta tags, more than likely two types come to mind. In actuality, there are a number of Meta tags that may be applied to the code of a webpage. The more popular ones include:

        • KEYWORDS - A repository for placing keywords relevant to the website in one place, to allow search engines to find and therefore cache the site appropriately.

        Should you choose to use this tag, choose keywords that are most relevant to your site and content. The mystery author may use his/her name as a search point and other relevant terms: mystery novels, mystery books, mystery fiction, thrillers, detective stories, Virginia authors, murder mysteries, and so forth. There is no set rule for minimum and maximum word counts in this tag - some websites rank high with three words in the Meta keyword tag, while others with 100 words may not do as well, and vice versa. Quality always trumps quantity where this tag is concerned.

        • DESCRIPTION - Working on the same principal of the KEYWORD tag, the DESCRIPTION tag allows the website owner to summarize the purpose of the site
        • ROBOTS - This tag gives instruction to the search engine spiders that visit the site, either allowing or forbidding them to cache the information on the page
        • COPYRIGHT - Affirms the ownership of the site, handy if copyrighted material is used
        • GENERATOR - Confirms the type of publishing tool used to create the page. HTML editors like Dreamweaver or FrontPage may automatically insert this tag when a new page is created
        • REVISIT - Instructs search engine spiders to visit the site at specific intervals, handy if you update often, though the validity of this tag has been debated

        Search engines also somewhat rely on the popularity of links clicked by way of their results page. For Example: If something really not relevant to UTEP is posted on the internet, but has the terms UTEP and The University of Texas at El Paso, and it is popular, then it will move up in the search results ranking. The search engine assumes that since so many people clicked on it, it must contain the information they need. (aka  The UTEP on the Mountain video that was posted)

         

        Additional items to consider:

        • INTERNAL LINKING - Use Site Maps so that search engines can find one or several places that totally map out your website.
        • EXTERNAL LINKING - Ensure that official external web postings have clickable URLs to your site. This goes for electronic newspapers, etc. Cross-traffic generates interest and therefore clicks.

         

  • How to create your own "skin" in DNN (the template that controls how you look and feel)
  • Color Usage and Contrast
    • Contrast: 

      To conform with Web Content Accessibility Guidelines 1.0, foreground and background color combinations should provide sufficient contrast when viewed by someone with low vision or colour blindness, or when viewed on a black and white screen. Use the Color Contrast Analyzer (Jan '08 update) to determine contrast compliance.

    • Usage:
      • Color should never be the only method by which to convey information. Redundantly code information so that color blind people can access that information.
      • Certain color combinations should not be used. For example a saturated red text on a saturated blue background is a big mistake.  Use the Color Contrast Analyzer to determine contrast compliance.
      • The concept of the "Web-safe" color palette is no longer applicable because well over 98% of users can support more than 256 colors.
  • "Passive" vs "Active" white space
    • White space is a design term that refers to space that isn't occupied by text, images, or other visible page elements. The amount and use of white space is a key component of a page's readability and legibility. There are two kinds:

      • Active white space: Space that's deliberately left blank to better structure the page and emphasize different areas of content.
      • Passive white space: Empty space around the outside of the page which frames the whole page like a picture frame. This also refers to empty 'blocks' or areas inside the content that result from a poor design.

Usability Misconceptions

  • The Two Click rule—The two click rule is an abused rule of thumb that assumes all websites should be as "flat" as sites were at the dawning of HTML. Research, since 1999, has indicated that:
    • Users don't start feeling the "Down the Rabbit Hole" effect until around 12 clicks.
    • Users do not mind multiple clicks as long as they feel they are making adequate progress. This, however, is based on "feeling" and therefore subject to the user's state of mind. Never "DEAD END" your user, or leave them feeling lost.
    Given that sites today are very complex, the architect should strive for minimal clicks, but not at the expense of an enjoyable experience or a logical layout.
  • It is impossible to make a website which is usable, interesting and ADA compliant—A good website requires knowledge, foresight and planning.
    • FLASH can be made compliant with forethought and planning
    • Video can be made compliant with forethought and planning
    • Image maps can be made compliant with planning and correct coding
    • Audio can be made compliant with the use of transcripts, if they are planned for at the onset of the project
  • ADA compliance (accessibility) and usability make a site boring—Lack of planning, ideas, and skilled knowledge of compliance, usability and web design contribute to a boring website.


Search Engine Optimization

A quick overview of Meta tags for Search Engine Optimization

When one thinks of Meta tags, more than likely two types come to mind. In actuality, there are a number of Meta tags that may be applied to the code of a webpage. The more popular ones include:

  • KEYWORDS - A repository for placing keywords relevant to the website in one place, to allow search engines to find and therefore cache the site appropriately.

Should you choose to use this tag, choose keywords that are most relevant to your site and content. The mystery author may use his/her name as a search point and other relevant terms: mystery novels, mystery books, mystery fiction, thrillers, detective stories, Virginia authors, murder mysteries, and so forth. There is no set rule for minimum and maximum word counts in this tag - some websites rank high with three words in the Meta keyword tag, while others with 100 words may not do as well, and vice versa. Quality always trumps quantity where this tag is concerned.

  • DESCRIPTION - Working on the same principal of the KEYWORD tag, the DESCRIPTION tag allows the website owner to summarize the purpose of the site
  • ROBOTS - This tag gives instruction to the search engine spiders that visit the site, either allowing or forbidding them to cache the information on the page
  • COPYRIGHT - Affirms the ownership of the site, handy if copyrighted material is used
  • GENERATOR - Confirms the type of publishing tool used to create the page. HTML editors like Dreamweaver or FrontPage may automatically insert this tag when a new page is created
  • REVISIT - Instructs search engine spiders to visit the site at specific intervals, handy if you update often, though the validity of this tag has been debated

Search engines also somewhat rely on the popularity of links clicked by way of their results page. For Example: If something really not relevant to UTEP is posted on the internet, but has the terms UTEP and The University of Texas at El Paso, and it is popular, then it will move up in the search results ranking. The search engine assumes that since so many people clicked on it, it must contain the information they need. (aka  The UTEP on the Mountain video that was posted)

 

Additional items to consider:

  • INTERNAL LINKING - Use Site Maps so that search engines can find one or several places that totally map out your website
  • .EXTERNAL LINKING - Ensure that official external web postings have clickable URLs to your site. This goes for electronic newspapers, etc. Cross-traffic generates interest and therefore clicks.


How to Write for the Web; prepping text for web publication and machine translation  (added 11/04/2008)

  • Limit sentence length. Sentences longer than 25 words often become ambiguous and too complex for MT to correctly translate. Keeping sentences to a minimum word length will improve the quality of the output.

  • Write for the 8th grade level; run the "Readability Statistics" option in MS word against any proposed text you wish to publish.
  • Avoid metaphors, jokes, slang, puns, idiomatic expressions and regional or national expressions. Since these are often translated literally, they tend to lose their meaning, creating an unintelligible translation. The literal translation of ‘break a leg’, for example, will not make sense to the target reader.

    Instead of: "You say that your sales will increase by 10 times by the end of this year? Don’t count your chickens before they hatch."

    Use: "You say that your sales will increase by 10 times by the end of the year? Do not be too confident. Wait until you get the final results."

    Instead of: "Don’t get me wrong; I love sports, but I hate basketball."

    Use: "Do not misunderstand me; I love sports, but I hate basketball."

  • Avoid abbreviations, acronyms, contractions, and common Latin terms (etc., i.e., e.g.) as these do not always have equivalents in different languages. Spell out the entire word instead. Machine Translations do not always recognize abbreviations and will leave them untranslated.

    Instead of: Sr, Jr, FDA, TV, etc.,

    Use: Senior, Junior, Food and Drug Administration (FDA), Television, et cetera

  • Keep pronouns to a minimum. The meaning of pronouns can be lost after translation because different languages use different word orders and gender-specific languages may use different genders for certain objects. For example, in French ‘il’ could mean ‘he’ or ‘it’, so your subject may be unclear to a French reader. Replace pronouns with nouns wherever possible.

    Instead of: He is interesting. It is interesting.
    When translated into French, this becomes: Il est intéressant. Il est intéressant.

    Use: Marc is interesting. The book is interesting.
    This avoids ambiguity when translated, becoming: Marc est intéressant. Il est intéressant.

  • Use simple, direct sentences with basic grammatical construction.Ensure that the sentence structure is grammatically correct and do not omit words.

    Instead of: Make sure you use grammatically correct sentence structure.

    Use: Make sure that you use grammatically correct sentence structure.

  • Avoid ambiguity. To produce a clear translation, reduce the amount of words and sentences with multiple meanings.

    Words: The word ‘right’ can mean ‘correct’ or ‘right’ in terms of direction (right or left).

    Sentences: The sentence ‘They fed her dog biscuits’ can be understood as ‘she was fed dog biscuits by them or ‘her dog was fed biscuits by them’.


    Instead of: ‘They fed her dog biscuits’ to mean ‘her dog was fed biscuits by them’

    Use: They fed biscuits to her dog.

    Instead of: ‘They fed her dog biscuits’ to mean ‘she was fed dog biscuits by them’

    Use: They fed her some dog biscuits.

  • Avoid compound verbs as they are often mistranslated. Use a thesaurus to simplify uncommon usages.
  • Use the International Standard Date Format (International Standard Date Format) for writing dates. Date order varies from country to country, but the standard numerical year-month-day (YYYY – MM – DD) format will eliminate problems arising from translating dates.
  • Use the infinitive form of the verb rather than present participles because present participles do not always have equivalents in all languages.

    Instead of: Click here for selecting the icons and viewing the images.

    Use: Click here to select the icons and to view the images.

  • List all words that should remain in the source language. These can be anything from proper names and titles to product or company names.
  • After completing the source document, run a draft through the machine translation and back into the source language to see where problems may be occurring.
    Following the above points will prevent many common translation problems from occurring.

Machine Translation, though useful in certain cases, is still not, and may never be the one-size-fits-all solution for translation needs, but a simplistic writing style (without being insulting to the reader) will benefit the native language speaker and any machine translation.

Don't Use "Click Here"

By the Annenberg School of Journalism, University of Southern California

Contextual hyperlinking: Online narratives should allow readers to "branch off" and click through to other, more detailed, supporting content, depending upon a reader's level of interest. Almost all journalism refers to other sources, but online, a writer has the ability to link readers directly to those supporting sources. Note the URLs of those sources when reporting, and work those into your piece with contextual hyperlinks.

Link  URLs to the relevant proper names, keywords and phrases, rather than to the URLs themselves written out, or worse, the over-used "click here."

<>URLs as a UI :  http://www.useit.com/alertbox/990321.html\
<>
<>How to use Link Text in Electronic Documents:   http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-text
Free OnLine Tools:
  • HTML Validator
    • Is your HTML valid or will it trip up assistive technologies?
  • CSS Validator
    • Is you CSS valid or will it cause problems with different browsers?
  • Broken Link Checker - Warning, this tool should be used sparingly or only during off hours in order to prevent excess traffic on the UTEP website. Ensure that you do no point this to an alais, otherwise it might check the whole UTEP site.
  • Color Contrast Analyzer Tool 
    • Will your color scheme cause human readable issues?
  • Total Validator   -  Total Validator is a free one-stop all-in-one validator comprising a HTML validator, an accessibility validator, a spelling validator, a broken links validator, and the ability to take screenshots with different browsers to see what your web pages really look like.  I would suggest downloading this tool and keeping updated on the upgrades, as it might well be purchased by some big company at some time in the future making it a 'for fee' service.
  • Take the time to read the instructions for Total Validator. Selecting an incorrect option will prevent accurate results.
Free OnLine Resources/Training:


Suggested Reference Books
:
  1. Web Style Guide 2nd Edition. Lynch, Patrick J & Horton, Sarah 2001 (can be found to be read on the web at www.styleguide.com) (good for introducing you to end-to-end web projects, A)
  2. **Research Based Web Design & Usability Guidelines Version #2. Leavitt & Shneiderman (can be found at www.usability.gov/pdfs/guidelines.html)  (Excellent reference book that is accepted as the standard for just about everything that touches web pages; it is written in easy to read and understandable every day language. A++)  This book is downloadable by chapter or in its entirety. It is also available for purchase at a very reasonable price.
  3. **Don't Make Me Think; A Common Sense Approach to Web Usability, 2nd Edition. Krug, Steve (very good for getting the mental direction for web usability, A+)
  4. The Essential Guide to User Interface Design. An introduction to GUI design principles and techniques. Galitz, Wilbert O 1996  (Only for those who are going to produce User Interfaces for a profession)
  5. The Handbook of Human Factors. Salvendy, Gavriel.  (There are several editions out there, try to get the latest)--Reader Warning:  This is the like an unabridged dictionary (only with mucho technical terms and concepts).  A good reference, but only if you're schooled in Psychology or Engineering.
** Great book, highly suggested reading.



Suggested URLs:

  1. Introduction to Web Accessibility  (http://www.webaim.org/intro/)
  2. UTEP Web Accessibility Checklist  (http://utminers.utep.edu/dmbatten/508webchecklist.html)
  3. An almost everything you need to know about web design from a Usability and Accessibility standpoint (http://www.webaim.org/articles/)
  4. Free online accessibility training by the Federal Government: 
    Free online 508 Training by the Federal Government
    http://www.section508.gov/index.cfm?FuseAction=Content&ID=5
  5. Examples of bad Usability:   www.baddesigns.com
  6. Really bad web page examples and why they are so bad:  http://www.webpagesthatsuck.com/
  7. A site designed by a professional usability design firm (Big $$$ paid here), but which falls way short: http://www.ncsu.edu/
  8. A site with too much information, excessive character density, very dense navigation and confusing audience focus:  http://www.utexas.edu/
  9. Examples of good sites, with appropriate focus on the audience with some marketing ‘glitz’ thrown in:
    1. http://oregonstate.edu/
    2. http://stanford.edu/
  10. A University Home Page that is really for visitors and self promotion and not for students:  http://www.gatech.edu/
  11. UTEP Accessiblity Checklist (Revised)
  12. Color Contrast Analyzer Tool (Free!)  http://www.accesskeys.org/tools/color-contrast.html   Use this free tool to check the contrast and color combinations of your web page.
  13. Learn to utilize CSS, see: http://www.w3schools.com/css/default.asp. 
  14. Texas Administrative Code:  http://www.sos.state.tx.us/tac/index.shtml 
  15. Discussion/tutorial on "Passive Space" and "Active Space"
  16. Making your written files on the web accessible:
    1. PDF accessibility
    2. MS Word accessibility
    3. Accessibility features in Acrobat Reader

---------------Synopsis of the TAC - Subject to change per their website -------------------------------

Note that Published Industry standards are required to be complied with including W3C, XHTL, CSS, etc

(1) A text equivalent for every non-text element (graphics / pictures) shall be provided (e.g., via "alt," "longdesc," or in element content).

(2) Based on a request for accommodation of a Web cast of a live/real time open meeting (Open Meetings Act, Texas Government Code, Chapter 551) or training and informational video productions which support the agency's mission, each state agency shall consider alternative forms of accommodation

(3) Web pages shall be designed so that all information conveyed with color is also available without color.

(4) Documents shall be organized so they are readable without requiring an associated style sheet.

(5) Redundant text links shall be provided for each active region of a server-side image map.

(6) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

(7) Row and column headers shall be identified for data tables.

(8) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

(9) Frames shall be titled with text that facilitates frame identification and navigation.

(10) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

(11) An alternative version page, with equivalent information or functionality, shall be provided to make a Web site comply with the provisions of this section, when compliance cannot be accomplished in any other way. The content of the alternative page shall be updated whenever the primary page changes.

(12) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(13) When a Web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the following:

(A) When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.

(B) Applications shall not disrupt or disable activated features of other products that are identified as accessibility features, where those features are developed and documented according to industry standards. Applications also shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer.

(C) A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.

(D) Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

(E) When bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance.

(F) Textual information shall be provided through operating system functions for displaying text. The minimum information that shall be made available is text content, text input caret location, and text attributes.

(G) Applications shall not override user selected contrast and color selections and other individual display attributes.

(H) When animation is displayed, the information shall be displayable in at least one non-animated presentation mode at the option of the user.

(I) Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

(J) When a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided.

(K) Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.

(L) When electronic forms are used, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

(14) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

(15) A method shall be provided that permits users to skip repetitive navigation links.

(16) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

------------------------------------------------End of TAC synopsis------------------------------------

All rights reserved, 2008, The University of Texas at El Paso,
Department of Web Content. 
email: webcontent@utep.edu

This page is for internal use only.
If special accommodations are needed, email the address above for assistance.

Required Links