Accessibility
MDC websites strives to be compliant with WCAG 2.0 standards and Section 508 of the Rehabilitation Act of 1973
The following information is adapted from WebAim.org, Web Accessibility Principles.
Principles of Accessibility
- Perceivable - Available through sight, hearing, or touch.
- Operable - Compatible with keyboard or mouse.
- Understandable - User-friendly, easy to comprehend.
- Robust - Works across browsers, assistive technologies, mobile devices, old devices/browsers, etc. Follows standards.
Provide appropriate alternative text
- Every non-text element needs a text alternative (alt text) that provides an equivalent to the image content.
- Alt text should present the content and function, not necessarily a description, of an image.
- If an image has no relevant content or function, is decorative, or the alternative text is provided in nearby text, then the image should have an empty alternative text value (
alt=""
).
- If an image is a link (or hotspot), the alt text must describe the link’s function.
- Avoid words like "picture of," "image of," or "link to."
- Use the fewest number of words necessary.
Content is well structured and clearly written
- Use the simplest language appropriate for your content.
- Organize your content using true headings (e.g.,
<h1>
) and lists.
- Use empty (white) space to improve readability.
- Use illustrations, icons, etc. to supplement text.
- Check spelling, grammar, and readability.
Help users navigate to relevant content
- Provide a link that allows the user to skip over navigation to the main content in the page.
- Use true headings to organize content.
Do not rely on color alone to convey meaning
- The use of color can enhance comprehension, but do not use color alone to convey information. Be especially cautious of red/green color combinations.
- Make sure that color contrast is strong, especially between text and background.
Ensure users can complete and submit all forms
- Put form labels adjacent to or near their controls, so the labels are associated visually.
- Use the
<label>
element to associate labels and controls.
- Group similar elements (such as checkboxes or radio buttons) together using
<fieldset>
.
- Clearly identify required form elements. Don't make a field required if it is not necessary. Ensure all directions and cues are readily accessible.
- If there are errors in a form that has been submitted, alert the user in an accessible way (especially to a screen reader user) and make it easy to fix the incorrect information and resubmit the form.
Ensure links make sense out of context
- Avoid phrases like "Click here", "Here", "More", "More information", "Read more", and "Continue."
- URL's as link text should usually be avoided, unless the URL is relevant content.
Caption and/or provide transcripts for media
- Videos and live audio must have captions and a transcript. A transcript is sufficient for archived audio.
- Captions should be synchronized, equivalent, and accessible.
Ensure accessibility of non-HTML content
- HTML content will almost always be more accessible than content in any other format.
- PDF, Microsoft Word and PowerPoint files, OpenOffice.org, and Adobe Flash provide basic accessibility features.
- Provide accessible alternatives when non-HTML content cannot be made fully accessible.
- Test the accessibility of non-HTML content in assistive technologies.