The guidelines your organization uses to ensure the accessibility of your website may live separately from your coding standards. They would be much more comprehensive than the example shown here because they should also cover markup, JavaScript, and content. We have repeated some items from the coding standards document so that the two documents work as separate entities.
Introduction and conventions
General rules
Typography
Links
Color
These Accessibility Guidelines are applicable to all websites created and managed by Igloo Refrigerator Parts Inc. and under the igloorefrigeratorparts.com domain.
The keywords used in this guide have the following significance:
MUST: This rule must be followed at all times, with no exceptions.
MUST NOT: This rule means an absolute prohibition, with no exceptions.
SHOULD: This rule should be followed at all times unless there is an acceptable reason not to that has been justified.
SHOULD NOT: This rule should be avoided at all times unless there is an acceptable reason to that has been justified.
MAY: This rule gives permission to implement a particular measure under certain circumstances.
For coding standards, please read the CSS Standards Guide.
You can access the necessary templates and files to start a new project from the "Templates and Assets" section.
Please refer to the Browser Support Guidelines for information on browser support, QA, and tips on how to avoid some common rendering bugs.
2.1 The site MUST satisfy Priority 1 WCAG checkpoints (http://www.w3.org/TR/WCAG10/full-checklist.html).
2.2 The site SHOULD satisfy Priority 2 WCAG checkpoints.
2.3 The site SHOULD satisfy Priority 3 WCAG checkpoints.
2.4 You MUST NOT use !important. It may prevent the good use of user style sheets and makes it hard for other authors to override that CSS declaration.
2.5 You MUST place a consistent class on the body element for every page on the site to give user style sheets a hook. For example:
<body class="iglooRefrigeratorSite">
2.6 You SHOULD avoid any flickering content.
2.7 You SHOULD check the site with a screen reader such as JAWS (http://www.freedomscientific.com/products/fs/jaws-product-page.asp), NVDA (http://www.nvda-project.org/) or Mac OS X Voiceover (http://www.apple.com/accessibility/voiceover/).
2.8 You MAY use alternate style sheets, but if you do, you MUST provide an in-page method of switching rather than relying on the browser.
2.9 You MUST NOT rely on hover states or animations to convey information.
3.1 The default font size MUST NOT be less than 12px.
3.2 The websites MUST be tested for font size increases and decreases of at least two steps (in each direction).
3.3 Fonts SHOULD be sized using ems, but MAY be sized in % or keyword values. They MUST NOT be sized in pixels because this would break text-only zooming in some browsers.
3.4 Where you are displaying text in uppercase, you MUST convert the text via the text-transform property. This avoids screen readers spelling out words as if they were acronyms.
4.1 Links SHOULD always have a style defined for their visited, hovered, active, and focused states in the following order: :link, :visited, :hover, :active, :focus.
4.2 You MUST NOT underline text that is not a link because this is confusing to the user.
4.3 Links SHOULD have large clickable areas.
5.1 The color of visited links SHOULD be different from the color of unvisited links. This color difference MUST be evident to colorblind users.
5.2 Color contrast between text and backgrounds MUST have at least 125 brightness difference and at least 400 color difference. Use Jonathan Snook's Colour Contrast Check (http://snook.ca/technical/colour_contrast/colour.html) to confirm.
5.3 You MUST NOT use any color combinations that will be indistinguishable by people with a form of colorblindness.
5.4 You MUST NOT convey information with color alone.
5.5 Navigation MUST be identifiable by means other than color.
5.6 Elements with an image background MUST have a defined fallback background color. This makes the page easier to use while images are loading and avoids a jarring change of color.
5.7 You SHOULD test the website's color combinations with a colorblindness simulator, such as Color Oracle (http://colororacle.cartography.ch/index.html).