Tips On Making Your Website More Accessible

You've probably made sure that your website content is accessible to search engines. But can site visitors who are visually impaired or color-blind use your site? What about people whose physical limitations make navigating by mouse difficult? Your site may also be less than accessible to some people with hearing or cognitive disabilities.

Websites that are accessible to people with disabilities offer a win-win situation. More people can use them, and if the sites are business websites, their owners have more potential customers. It often takes just a few simple changes to improve website accessibility.

Your website content is accessible to search engines, but what about accessibility and web hosting tips about web design?

Website navigation

Use skip links for navigation. Useful but not common, skip links allow people who use screen readers to skip reading the navigation except when they want to read it. People are less likely to stay at a site if they have to listen to every link being read each time they go to a new page. The skip link is useful for visually impaired people and for people with mobility difficulties who navigate with the keyboard rather than a mouse. With skip links in place, people who tab their way through links can save time when they reach "skip navigation" or "skip to main content."

Skip links can be visible or invisible via CSS. The article "Skip Navigation" Links explains how to create different types of skip links.

Include breadcrumb links. For example, at the top of a page about purple widgets, have links that show the path to that page, such as Home -> Products -> Widgets -> Purple Widgets. Breadcrumb links are helpful to everyone, not only those with disabilities.

Use proper heading markup. At some sites, font size, bolding, and color are used to format headings instead of header tags. While the page may appear the same as if the correct formatting had been used, screen readers recognize the difference. When a page has header tags (<h1>, <h2>, etc.) for text headings, screen readers can list the headers on the page, and users can decide where on the page to go. Without header tags, screen reader users have to read the whole page to find the section they're looking for.

Make links readable. If you underline or bold your links within text, they will be recognizable as links. But if you differentiate them by color only, color-blind people may not be able to see links.

Make links user-friendly. Use a long word or a phrase as link anchor text so that people without the motor skills to point the mouse precisely will be able to click the link easily. In addition, choose meaningful anchor text. "Click here" doesn't help people decide if they want to click the link. In contrast, if you make "purple widgets" into a link, users will know that the link will take them to a page about purple widgets.

Website content

Use plain English. Not everyone has good reading skills. Those who don't often have to read word for word. Keep your words and sentences simple. Non-native English users who aren't fluent in English will also benefit from simpler language.

Group links in categories. Long lists of links, whether for navigation or other purposes, can be difficult to work through. Group them by similar content and use headings for each group.

Website text appearance

Make the text size adjustable. Not everyone with vision problems is blind. Some can read website text if they can enlarge it enough for their needs. Other people need to enlarge text just a little to read it. Start with a text size that's readable for the majority of people, and specify proportional rather than fixed font sizes in CSS. This will allow people using various browsers to enlarge the text for their view.

Provide good contrast between text and background. A popular combination at some sites is gray or beige text on a black background. Or gray on white. Poor contrasts make it difficult for even those with good vision to read. Busy backgrounds are another problem to avoid.

Website non-text

Provide alt text for images. Screen readers can't read graphics. If a graphic is a picture, describe it briefly in the alt text. If a graphic has text in it, put the text in the alt text. This step helps not only those using screen readers but also people who view Web pages without graphics. In addition, it can help with search engine optimization.

Avoid fast-moving animated graphics. Animated graphics that blink or change from dark to light quickly can trigger seizures in some people.

Provide transcripts and closed captioning of audio or video. Without these, hearing-impaired people can't access your audio content. People who use computers without sound (by choice, because they don't have speakers, or because they're in a public location) will also appreciate having text with audio.

Window navigation

Don't break the Back button. Everyone knows how to use the Back button. But when you force a link to open in a new window (or tab), the Back button doesn't work because there's no history in the new window. This leaves all users unable to navigate their way backwards from the window they're in. Screen reader users in particular have difficulty because they can't see where they were.

Avoid the deprecated target attribute for external links (target="_blank"). Instead, use links that open in the same window. Or if you must have links open in a new window, include "link opens in a new window" in the link title so that users will know that they're leaving the window they're in.

Online forms

These tips will improve accessibility for all your users:

Taken from

More all disability articles.