Web Style Guide
Accessibility
All UNC-Chapel Hill websites should strive to give disabled users an experience comparable to other visitors. Nothing in the design or programming should impede the ability of disabled users to navigate and access content.
While creating websites, developers at UNC should adopt and exceed the web standards established by the Worldwide Web Consortium (W3C) for the creation of online content. Specifically consult the W3C’s page on accessibility.
Best practices
Auditory
- Provide transcripts of audio content where applicable.
Cognitive
- Do not using strobing content.
- Provide easy-to-use controls and navigation schemes.
- Employ consistency in labeling and navigation, where possible.
- Use the clearest, simplest language appropriate to the content.
- Provide control over all time-based media (i.e., slideshows).
Visual
- Use well-structured and semantic HTML.
- Use meaningful ALT attributes on images.
- Do not use tables for layout purposes.
- Properly linearize content, especially forms.
- Provide sufficient contrast between foreground and background elements.
- Avoid using pop-up windows.
- Label all form elements.
- Do not use Flash™ for navigation and avoid using it in other places, where possible.
- Provide access keys and “skip to content” links.
- Use WAI-ARIA landmarks where possible.
- Position hidden content off-screen instead of using “display:none.”
- Provide additional guidance and controls using off-screen content (i.e. descriptions of the page layout and available access keys).
- Provide transcripts of audio content where applicable.
- Do not using strobing content.
- Provide easy-to-use controls and navigation schemes.
- Employ consistency in labeling and navigation, where possible.
- Use the clearest, simplest language appropriate to the content.
- Provide control over all time-based media (i.e., slideshows).
Development tools
A number of plugins are available for the Firefox web browser that can help in testing your website’s compliance with accessibility guidelines:
- WAVE Toolbar: Overlays a page with embedded icons and indicators that reveal the accessibility of that page.
- Fangs Screen Reader Emulator: Renders a text version of your page similar to what a screen reader would output.
- WCAG Contrast checker: Tests to see if elements on your page provide enough contrast to be visible to those with impaired vision.
Screen reader demos
Watch/listen to a screen reader in action: