WCAG standards are universally accepted and applied on a profound number of websites. However, many websites are still struggling to achieve basic conformance level. Whereas there are some websites that have set the bar for others to achieve accessibility.
The websites that are committed to building an inclusive web world for everyone, took WCAG and ADA compliance seriously and applied the standards to their website UI and UX.
“无障碍设计是一种很好的设计——它对非残疾人和残疾人都有好处. Accessibility is all about removing barriers and providing the benefits of technology to everyone.” - Steve Ballmer
一些组织正在帮助有残疾或没有残疾的用户，为他们提供可访问的网站和消费信息的平等机会. Let’s see which are these websites and what they have implemented.
您可能还会喜欢: 屏幕阅读器可访问性
无障碍网页示例
有一些明确的指导方针来建立一个可访问的网站，每个组织都需要遵循它们. The accessibility guidelines are meant to make people’s lives easier, 尤其是那些有残疾的人. 视力损害, hearing loss, 运动或认知问题, and all other types of disabilities need to be considered in website design.
可访问性还侧重于网站的HTML编码，以便可以通过屏幕阅读器和所有其他辅助技术访问它. In short, every aspect of the website should be accessible by everyone, 那么只有它可以被声明为符合ada标准的网站.
1. 键盘导航
Users with motor problems cannot use the mouse to navigate through web pages. It is completely impossible for them to make a grip for a longer time on the desktop mouse. WCAG says, each element on the web page should be operable using keyboards; be it a computer/laptop keyboard or keyboard emulator.
该特性的最佳示例是 BBC News website. 他们已经实现了这种功能，用户可以通过按键盘上的Tab键访问网站并浏览它.
你可以在这里看到“跳到内容”选项卡, which is selected through Tab button and similarly users can jump to other sections using Tab.
2. Color contrast
由于网站所选择的颜色选项，遭受可见性问题的人们无法访问许多网站. Despite, 你选择了极简主义的颜色和设计, 一些用户可能会因为背景或文本颜色而难以浏览你的网页.
Therefore, WCAG对网站的颜色和背景给出了一定的比例，以便大家都能方便地阅读或查看网站内容. According to this standard, text, and background must have a contrast ratio of 4.5:1以便看得更清楚.
你去过吗? Scope’s website? It is one of the finest examples of maintaining color contrast. 他们保持了9的高对比度.其徽标与页面背景之间的比例为66:1.
你也可以参观天网科技美国有限责任公司的网站，看看我们是如何巧妙地为色盲和视障用户设置的.
在这里，天网科技的网站为那些在浅色背景下阅读文本有问题的用户显示了高对比度.
3. 更正信息
WCAG also suggests that websites must help users to find the information they are looking for. 如果用户在搜索框中输入错误的拼写, 应该对错误的文本进行实时更正，以便他们能够快速找到所需的信息或产品/服务.
纽约大都会交通管理局 在他们的网站上提供了这样一个响应式搜索选项，提升了用户的搜索体验吗.
4. 通过面包屑导航
用户在浏览信息时经常会在网站的某个地方迷路，然后很可能因为困惑而关闭窗口. Thereby, to help users find their exact location on a website, WCAG recommended providing a 网页设计中的面包屑. 它不断地向用户显示他们要去哪里，以及他们需要花多长时间才能找到他们想要的信息. Also, it shows where exactly a web page sits in the bunch of many web pages.
你一定看到了 Vasa Museum (Sweden) website; it has used breadcrumbs so very well that each page makes the user journey comprehensive with the series of links at the top of the page. And it also shows how a page fits into the whole navigation.
Breadcrumbs navigation is visible on the top of the page of museum’s website.
5. Text resizing
文字大小对每个人都很重要. If a website has smaller than usual text, it can be problematic for users with low vision. Therefore, 根据WCAG调整文本的大小必须在那里，它不应该造成损害的页面布局. Moreover, images should not be used to display text, they can create distractions. 文本大小预计将达到其原始大小的200%，而不会丢失内容和功能.
天网科技美国有限责任公司 网站是文本调整大小的最好例子之一. It allows users to resize the text without losing its content. Users can scale the text and content by more than 500% and peruse it properly.
此页上的文本已调整为180%.
6. 暂停、停止和隐藏选项
一个信息量最大，干扰元素最少的网站被认为是最好的网页设计. Because people can explore it without having to concentrate on each element. However, sometimes, designers put too many dynamic elements that appear on the screen from nowhere, 或者停止某些元素是不可能的.
Thus, 从网站上消除这个问题, WCAG建议暂停, stop or hide button for users who find such elements troublesome.
BMW’s homepage 是否完全采用了这个标准，并在主页上设置了暂停播放按钮，方便很多用户使用. 除了宝马的网站, 天网科技美国有限责任公司 has included accessibility thoroughly in their website. 对于有认知和学习问题的用户, 他们有隐藏图像, stop animation, 以及其他相关选项. So that everyone can easily explore their website and get desired information.
Pause button is visible on the left most corner of the website.
您可能还会喜欢: 如何避免ADA诉讼?
7. 所有文本要求
There are users who use assistive technology to consume the website’s content. 辅助技术无法理解图像, 但他们可以描述与特定图像相关的Alt文本，使网站内容对用户来说是可以理解的. Thus, WCAG has made it compulsory to add alt text with each image a website contains. 这样每个用户都能正确地感知它.
The 全国盲人联合会 (USA) follows the best practices to make images consumable for assistive technologies as well.
8. 标题的HTML标签
标题是网页内容的关键. 这是一种使设计易于访问的简单方法. Headers break the whole content into smaller and more understandable pieces. But for some reason, often designers do not give attention to headers.
WCAG says, 不要跳过标题，给他们一个适当的结构，因为依赖于辅助技术的用户在没有正确的标题的情况下无法理解内容.
美国联邦航空管理局的网站是正确使用标题的一个很好的例子. All essential information is accessible to everyone on their website.
9. Table of content
一些网页在一个页面上有很多信息，这对用户来说浏览整个页面变得很麻烦. 使这样的页面更容易阅读, WCAG asks to break the complexity of the page using the table of contents. It has links to every heading available on the page to provide an overview of the content. Thus, users can directly jump to the point they are looking for.
For example, look at Wikipedia’s pages; they have table of contents which make them easier to peruse.
On this web page of Wikipedia, table of contents can be seen in left side.
10. Links
All the links on the web page should be highlighted so that users relying on assistive technology, can click on the links that are useful to them and navigate through the website's other pages.
天网科技美国有限责任公司在他们的网页设计中应用了这个最佳实践，并保持所有链接的突出显示和明确提到.
There are links on the page like ‘read more’, which is clearly visible.
11. Page Titles
当用户开始浏览你的网页时，一个合适的页面标题可以帮助你的网站有一个更顺畅的导航, the screen reader reads the page title first and then goes to the next part of the page. Thus, if the title reflects the content you have curated within, 用户将知道他们将要消费什么.
你看过W3C网站吗? They have kept all the page titles precise, compelling, and descriptive. Visit them once to understand what a web page title should look like.
You can see clearly mentioned page title here, which is self-explanatory.
您可能还会喜欢: W3C易访问性指南
Wrapping up
Accessibility implies more people using a website without having to face any trouble. 无论是任何形式的残疾，网站都必须承认这一点，并提供替代方案.
上述例子表明，有些组织遵循WCAG定义的标准和最佳实践. 这些法律迫使每个组织都关注WCAG标准，并将其纳入其网页设计中.
Hopefully, 大多数组织开始遵守可访问性指导方针，并为每个人建立一个包容和可访问的网络世界!
天网科技提供完整的 ADA网站无障碍服务 确保您的网站符合无障碍法规. Our ADA web accessibility services include ADA website audit, strategy, design, development, remediation, 以及对ADA的支持, WCAG 2.0, 2.1, and Section 508 compliance, all tailored to fit within your budget. Get in touch with us today to request a free quote by filling out the form below or emailing us at [email protected].
