Although COCC's web site has a long way to go before we can consider it meeting accessibility requirements, a few important steps have been taken over the past few months and more are being planned.
Since ownership for much of COCC's web content is distributed it is very important that everyone contributing content learn about web accessibility and help to make the needed improvements.
Accessibility Recommendations
Navigation
All content on our web needs to be accessible without the use of a mouse. The roll-overs (pop-up menus) will not “appear” if a mouse is not involved… BUT, this should not be a problem. The way things are designed allows users to navigate without the roll-overs by clicking on the top level link for the “menu”. Once doing so, the content of the resulting page should include any links that the user may need and would have been shown on the roll-over menu. Therefore, the “roll-over” menus are not required for navigating the web site and the accessibility of our web site navigation should function properly.
- You can try this yourself by simply avoiding the roll-overs and clicking on links across your page. If you can’t find content that your roll-overs include then there is a problem and the content on your pages should be modified to properly include all important links.
- You can also try not using your mouse and only using the keyboard (tab and enter keys... you’ll be glad you have a mouse!), but this is interesting to try. Some useful tips are available through the “Accessibility” link shown at the bottom of every page.
- As a side note, it is also smart to minimize the number of roll-over items and especially levels as this will help make them easier to use for everyone!
Images
Every image should have descriptive Alt text. If the image does not convey any information it should still have blank Alt tag (alt=""). More information about managing images in your COCC community web.
Link text
Ensure link text makes sense out of context. Web links should be descriptive by themselves in case a user is browsing a list of links instead of receiving the link with the context of your page. Example: creating links that say “click here” is a bad practice. More information about managing hyperlinks in your COCC community web.
Colors
Although color is a convenient formatting option for web pages, be careful of how you use it.
- Colors should not be used as an exclusive way to convey information since not everyone is likely to be able to see the colors you select.
- Color should also be used carefully as it can greatly affect the usability/readability of a web page. Especially when you consider the percentage of the population that has some form of color blindness.
- Be conscious about maintaining a high contrast between text and the background.
- Using too many colors is often distracting and reduces readability.
Fonts
Keep in mind how not everyone has all of the fonts that you do. In general sticking to the most common fonts like Arial, Times New Roman, and Courier New is best. Verdana and Tahoma are also common, but for all of the above fonts keep in mind that they may get replaced when viewed if the user does not have the specified font.
Font sizes
Whenever possible do not set an explicit size for the text on your web pages. By not specifying an explicit font size in pixels you will make it easier on users that need to enlarge the font. Let’s look at how font scaling differs between Internet Explorer and other browsers.
Use Paragraph Styles
Most importantly this includes using <H1>, <H2>, etc heading styles whenever possible as text readers use these styles to help users navigate through a web page. In the COCC web page editor these paragraph styles are available on the Editor's toolbar at the left hand side.
Tables
When avoidable don’t use tables as they are often not necessary. This is important to consider since tables can often cause unexpected results for users using a text reader. For example, tables can cause a text reader to read the information on your web page in a different order than intended due to the organization implied by the table.
- Image alignment: If you want an image aligned to the right of your text consider changing the alignment property on the image instead of creating a table and placing the image in the right column.
- Custom page layout tables: If applicable, try using a custom page layout table rather than creating your own. Details about COCC's page layout table are available here.
- Define a row header: If your table communicates a long list of data the table should have a header row that is appropriately formatted as such. A detailed guide for creating accessible web tables is available here.
Copying content from Microsoft Word
When copying content from Microsoft Word a lot of the extra (most unnecessary) formatting codes are brought with the text that you copy. Instructions for how to more cleanly copy text from Microsoft word are available here.
In addition to removing unnecessary formatting codes, it is important that your Word document follow many of the guidelines discussed previously regarding paragraph styles, alt tags, etc. Otherwise after pasting your document for use on the web you will want to go back and make these changes. A detailed guide for creating accessible Word documents is available here.
More Resources
Below is a list of online accessibility resources that relate to COCC's web content.