Tips for Making Your Web Site Accessible

The Web offers independence and freedom and provides so many new opportunities to learners. However, these independence, freedom and opportunities will be become reality for all learners unless all educational Web sites are created with Web accessibility in mind. As educators, we need to make our educational Web sites accessible for all of our students. Furthermore, we need to commit to accessibility and provide for accountability, training, and technical assistance to ensure the Web’s full potential for all people.

The World Wide Web Consortium (W3C) established the Web Access Initiative (WAI) to promote and achieve Web functionality for people with disabilities. In 1999, the WAI published the Web Content Accessibility Guidelines 1.0 (WCAG) which consists of fourteen guidelines, each with three checkpoint levels for Web developers to meet.

In addition to a set of fourteen guidelines for assisting Web developers to create accessible Web sites, WAI published a list of ten quick tips to accessible design (W3C, 2003).

  • Images and animations. Use the ALT attribute to describe the function of each visual. ALT text can be used to provide the information about the image. Also, ALT text can be read by a screen reader that tells the visually impaired user about the image.
  • Image Maps. Use client-side map and text for hotspots. Always include a text alternative to the image map since some browsers do not support image maps.
  • Multimedia. Provide captioning, transcripts of audio, and descriptions of video to the users. Deaf users will need video to be captioned and other audio be transcribed.
  • Hypertext links. Use text that makes sense when read out of context. It is important to provide enough descriptive text within the link itself to adequately describe the link destination. Non-descriptive hyperlinks such as “click here” do not help users find information. The blind user will lack adequate understanding of the link if it does not convey needed information. Also, choose colors for the links and text carefully. Colorblind users will have difficulty reading the links and text.
  • Page organization. Use headings, lists, and consistent structure. Use CSS (cascading style sheets) for layout and style where possible. When site text is formatted with CSS, users can override styles to format text to meet their needs. This allows users with limited vision or colorblindness to change color or the size of text. Also, build the same look and feel for navigation wherever possible.
  • Graphs and charts. Summarize or use the longdesc attribute. A long description can be used for graphs and charts requiring ALT text longer than 50 characters. Graphs can be confusing to many disabled users. A text summary can be helpful.
  • Scripts, applets, and plug-ins. Provide alternative content in case active features are inaccessible or unsupported. Older browsers have problems with some scripts, applets, and plug-ins. It is important to provide the information in an alternative format presented by the script or applet.
  • Frames. Use the noframes element and label with the title or name attribute. Some screen readers have difficulty distinguishing between frames. A user with a screen reader may lack the context to understand the frame’s function, and a title or name can clarify that.
  • Tables. Make column by column reading sensible. Summarize data presented in table form and use caption tags to help present the information. Avoid using tables for column layout. Most screen readers can only read text left to right across each row on the screen, and tables can be very confusing.
  • Check your work. Validate the HTML. Use evaluation tools and text-only browsers to verify accessibility and ease of use.

Also, the following tips would be helpful for getting started in designing accessible Web pages. They are based on the WAI guidelines and the Section 508 standards for Web content (Comden & Burgstahler, 2002; Waring, 2004):

General Page Design

  • Maintain a simple, consistent page layout throughout your Web site.
  • Keep the page background simple. Make sure the page has enough contrast.
  • Use standard HTML.
  • Make links descriptive so that they are understood out of context.
  • Use frames sparingly and consider alternatives.
  • Include a note about accessibility on your Web site to notify visitors your concerns about the accessibility and your efforts for compliance.
  • Create a Web page that has a flexible design so the users can customize the page to meet their needs.
  • A Web page degrades gracefully if it can still be used without JavaScript, frames, and multimedia.

Navigation

  • Design logical, usable, and consistent navigation menus.
  • Use consistent headings and titles throughout the site.
  • Name icons and files appropriately by using simple and direct language.

Color

  • Use high contrasting colors.
  • Color should not be the only means of conveying important information. Consider other alternatives.
  • Allow users to adapt color with the browser preferences.
  • Visit the Vischeck [www.vischeck.com] to check what a color blind person would see on a Web page.

Fonts

  • Fonts should be easy to read. Use sans serif fonts such as Arial, Helvetica, Comic Sans, and Tahoma.
  • Avoid <BLINK>…</BLINK> and <FONT> tags.
  • Clear definable letter shapes; clear spacing between letter combinations.
  • Use a minimum of text size 12pt or 14pt.
  • Avoid underlining except for hyperlinks.
  • Use bold for emphasis.

Readability

  • Use short simple sentences and avoid long sentences of explanation.
  • Give clear instructions.
  • Use concise paragraphs with clear topic headings.
  • Use bullet points or numbering for lists.
  • Use graphics to explain complex text.
  • Consider short pages to reduce the need to scroll.

Multimedia

  • Include appropriate ALT/LONGDESC attributes for graphical elements on your page.
  • Use a NULL value for unimportant graphics.
  • Include descriptive captions or other options for making graphical features accessible.
  • Provide captioning and transcripts for audio and video clips.
  • Provide alternatives for content in applets and plug-ins.
  • Provide meaningful alternatives for learners who cannot access certain media formats.

Forms

  • Provide alternatives for forms and databases. Some combinations of browsers and screen readers encounter errors with non-standard or complex forms.
  • Always test forms and databases with a text-based browser.

Others

  • Provide several alternative formats of the same documents.
  • Include notes that describe how to handle downloadable files.
  • Provide an accessible alternative or a d-link to describe the content of a Flash file since Flash is accessible to only a few screen readers.
  • Make Acrobat PDF files and PowerPoint files accessible.
  • Convert PDF files to accessible HTML or Word RTF file. Tagged Acrobat 5.0, 6.0 and 7.0 PDF files are accessible with screen readers whereas Acrobat 4.0 or earlier PDF files are not.
  • Create a text outline version of PowerPoint by saving the presentation as Outline/RTF.
  • Make Microsoft Word and PowerPoint files accessible.
  • Use Accessible Web Publishing Wizard for Microsoft Office [cita.disability.uiuc.edu/software/office/] to convert Microsoft Office documents to accessible HTML formats.
  • Create a text outline version of PowerPoint by saving the presentation as Outline/RTF.
Advertisements

About Steve Yuen

I am a Professor Emeritus of Instructional Technology and Design at The University of Southern Mississippi in Hattiesburg, Mississippi, United States.
This entry was posted in Web Accessibility. Bookmark the permalink.

6 Responses to Tips for Making Your Web Site Accessible

  1. James M. Thompson says:

    The first paragraph says it all based on the word “commitment.” Organizations should make it a top priority towards accountability. In the era of accountability, it is mandatory that organizations are in full compliance. How can organizations become compliant? It simply goes back to education and training. If individuals are not familiar with various regulations, policies, or federal mandates, then it is easy for them to become non-compliant. Since ignorance of the law would not hold up in the court of law, organizations must facilitate training workshops.

    I have found this article to be very helpful in providing a summary for readers to understand the guidelines and tips for helping organizations to become compliant in developing their websites. After reading the tips, it appears that it is common sense, i.e., “most screen readers can only read text left to right across.” I think that for some individuals common sense is not so common. Therefore, there must be regulations to help organizations to avoid making
    assumptions that could become costly in the long run.

    The article has a general theme which is being clear and concise. For instance, the suggestive font to use is sans serifs, such as Arial, which is clear and easy on the eyes because the ends of the letters are well-defined. Another example is the suggestion regarding readability. Once again, it stated that the sentences should be “concise.” I believe that overall, organizations should be direct and to the point when designing a website. Additionally, they should avoid creating a website that is too busy.

  2. Madelon Gruich says:

    This blog provides succinct and well-defined methods of ensuring the accessibility of Web sites to all users. No matter who develops the Web site, all users should be able to access the site and take advantage of the materials and comments on the site. Only after a recent course did I understand the full implications of people being discriminated against when it comes to Web site usage. That people were not able to access certain parts or areas of Web sites never occurred to me, at least not in the sense that I was equipped to rectify the problems.

    The Web Access Initiative’s list of ten quick tips to accessible design will be very helpful when planning and designing a Web site. An abundance of solutions to potential access issues are provided as well as suggestions for creating the content to be included in Web sites. The solution to potential problems is easy if addressed on the front end of the development rather than regretting mistakes after the site has been completed. The requirements necessary to make a site accessible to a large number of disabilities is fairly straightforward once the issues are recognized.

    This blog will be a great source of reminders of concerns to address when developing Web sites, including those used in classrooms. To limit the access to anyone limits the overall good of the site. Addressing the needs of all groups of individuals ensures that the Web site is easy for all to use. In today’s society, the Internet plays an important role in conducting business and participating in personal entertainment. We must keep in mind that all individuals, regardless of the nature of use or specific disabilities, must have access if the sites developed serve the purpose for which they were intended.

  3. Jil Wright says:

    This is a great post. I believe that making not only web content, but course content in general, accessible should be the goal of every educator. In fact, providing accessible content should be considered a responsibility since all publicly funded schools and universities must be 508 compliant.

    By generating content in several formats, not only do educators supply students with disabilities with resources they need, but they also supply the diverse student population with different ways to learn. People learn differently, we all have very different brains, and learning styles of all students should be taken into consideration when courses are being developed.

    I don’t think many people think about what screen readers do. Online material must be kept concise. If you have large headers with information that isn’t relevant to the course material, it may take a screen reader 15 minutes to read a webpage header! It’s really important to describe graphs and charts in a way that’s easily understood. Content authors should really think, “What if my sight or hearing abilities vanished today? Would I be able to learn from the information I have here?”

    I would guess that the majority of higher education faculty are not aware that accessibility is federally mandated. Most have never given thought to accessibility unless they have received a notice from Disability Accommodations that a student that will take their course will require accommodations. Most don’t know that it is their responsibility to provide accommodations and wouldn’t know where to start to provide accessible materials.

    I try my best to make my online courses as accessible as possible. I will definitely keep this post handy. It’s a great reminder and resource to keep on hand when creating sites.

  4. Roslyn Warren says:

    This article is very informative in addressing a growing issue with technology, accessibility. Most tools are created with mainly one user in mine, that is, those without disabilities. This is most likely unintentional as new small business owners and novice designers create websites for a variety of purposes. However, in order to compete we must consider these methods to reach ALL internet users. On the contrary, it may seem a hassle to make sure that your site is accessible but there are websites that assist developers in the transition.

    I am looking forward to taking the course on web accessiblility. Since I am interested in a securing a position with the federal government, who requires that all sites and projects are accessible to everyone, this is very valuable information to learn. There are so many components to ensuring that your site is accesible, many designers can benefit from tutorials or other applications that “check” their website.

    Additionally, I like the mention of http://www.vischeck.com which demonstrates how a site would look to someone who is colorblind. These resources again make it easier to make the accomodations.

  5. Hope Drummonds says:

    As this post states there are several elements of web design that are important for teaching and learning. Websites created for educational purposes should be well organized and logical. All information required to successfully complete a web course should be easily accessible. The design needs to be free of errors and be able to load quickly and completely. Any documents students need to download such as syllabus, notes and course schedule should be in a format that will be easy to download or print out.

    In compiling the site’s content the information selected should present multiple viewpoints with no bias. The site should present facts rather attempt to persuade the user. The content should also be correct and meaningful to the course on which the site is based, exceeding all instructional objectives. Proper citation of sources used to create the site is a requirement. When creating a site it is important to include links and citations for materials on the site.

    Features such as site maps and search engines should also be incorporated into the sites’ design to increase it’s navigability. Keeping the styles and names of navigation buttons consistent will also increase navigability. Webpages should include multimedia functions such as graphics , audio and video that will appeal to a variety of learning styles. Animations should be used sparingly , adding interest but not overwhelming the intended message. The site also needs to be handicapped accessible. To be handicapped accessible the site will need to include handicapped options on all pages with links to support software.

  6. apayne31 says:

    This is a very beneficial post for the web developer community along with educators who may teach or post information online. I had never really considered the differences in accessibility in the classroom versus online. Throughout my career I have had numerous students requiring accommodations be made in the classroom, but only recently were my eyes opened to the varying ways professionals can make web material accessible for everyone.

    Recently I have learned how screen readers work and was alarmed at how little I was doing to make my courses accessible for a vision impaired student. I was not aware of how one should include tags to describe a picture, because the screen reader would not be able to convey what was in the picture if the code did not. Honestly I had never considered this concept.

    Some other changes I am making in my online courses are including a text narrative of any videos I show my students. This will provide the same information to someone with limited vision as an individual who watches the movie. Additionally for movies/videos I have included in my course they now all included closed captioning. As I add these materials I am using these accessibility features and not waiting until I may have a student in my class that needs the accommodations.

    The alarming part of accessibility is how little it is done and talked about. If changes and modifications are made in the development phase of the web site accessibility is much easier and less time consuming. WAI’s Quick Ten Tips is a valuable reference and will definitely use this in the future in developing and using my online course management system.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s