Website Accessibility
Our goal is to promote an ADA accessible web environment for our users to help ensure that as broad a population as possible may access and benefit from our services. |
Quick Reference
These tips are meant to help web developers get a quick start. They address the most important considerations for web page accessibility.
|
|
|
What is WCAG 2.1?
The Web Content Accessibility Guidelines (WCAG) are a set of guidelines that specify how to make content accessible. It was created by the World Wide Web Consortium (W3C), an international community that develops open standards to ensure the long-term growth of the Web.
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible.
Anyone who wants to use the Web must have content that is:
- Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
- Operable - User interface components and navigation must be operable.
- Understandable - Information and the operation of user interface must be understandable.
- Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Testing at 老澳门资料
For web content published by the 老澳门资料, it is our goal to comply with WCAG level A & AA success criteria.
The following tools are used to test and audit web content at 老澳门资料:
- Screen readers – &
- Contrast Checker – &
- Zoom your page to 200%
Document Compliance
Headings
A proper hierachy allows assistive technologies to quickly identify the headings on the page. Without heading markup, users of screen readers are not able to skip through content and navigate the page effectively.
Heading level order and arrangement
Well-designed web pages will form an outline of the page’s content.
Higher numbers indicate subsections. Taken together, the headings should form a well-structured hierarchy. For example:
- Heading 1
- Heading 2
- Heading 3
- Heading 3
- Heading 2
- Heading 3
- Heading 4
- Heading 4
- Heading 3
- Heading 2
Best practices
- Check for at least one heading 1 on every page.
- Any text that looks like a heading should be marked appropriately.
- Begin every page section or topic with a heading.
- Verify that all text marked up as HTML headings serves a proper function and are not simply used for appearance.
- Arrange the heading hierarchy in a meaningful order:
- Headings should not skip levels.
- Each heading level should correctly indicate its relationship to other sections.
Image Alts
- Alt text - Describe your images
- No images of text: All text must be readable by a screen reader
- Avoid graphics/images with text
Example
|
Multimedia
- Closed captioning - All videos on your website must have closed captioning
- Text transcripts - Add a text transcript beneath all video-only and audio-only files
- iFrame – Provide a title
- <iframe> width="560" height="314" allowfullscreen="allowfullscreen" src="//www.youtube.com/embed/20SHvU2PKsM" title="Introduction to Web Accessibility"</iframe>
- Need to be able to navigate using keyboard and screen reader
- User should have the ability to pause, stop and hide pop-ups, scrolling and blinking content
Links
Be obvious in linking to or setting up content so that users know what to expect.
- Link text must describe what the user will see when they click on it
- It should be descriptive and clear
- Bad:
- Better: Learn more about the
- Link text should be unique
Color Contrast
- Color Ratio - All font should sharply contrast from its background color
- Too little contrast makes it very hard for people to read
- The font should contrast from the background by at least 4.5:1 for normal text and 3:1 for larger text.
- Rules apply to graphics such as banners, infographics, charts and text heavy images.