How to Make a Website Accessible

More than 60 million Americans have either hearing or visual troubles. Assistive technologies can help them use the web. Web accessibility is also important for users with a temporary impairment. If you sell products or offer services on the web, we offer the following crucial reasons why you should make your website accessible and tips on how to design, code, and present content for people with disabilities. monitor with accessibility features

The importance of an accessible website

Creating and maintaining an accessible website is advantageous for every site visitor, not just those with permanent disabilities. For example, if your mouse is broken, you need to be able to order a new device using only a keyboard. Or, if your arm is injured, a screen reader will allow you to continue browsing. Thus, assistive technologies can be beneficial for all users. However, websites and applications must be built properly from the onset for these technologies to work effectively.

According to the experts at the W3C Web Accessibility Initiative (WAI), web accessibility also helps mobile users and older users, by optimizing site content for search engines to index. The WAI brings together people from industry, disability organizations, government, and research labs from around the world.

The WAI has developed a series of accessibility standards and guidelines. Web Accessibility Content Guidelines were first published in 1999, and the second edition appeared in 2008. These guidelines are intended to make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, etc.requiements on how to make a website accessibleEnsuring web accessibility requires proper coding, the creation of an accessible design, and optimization of the site content. Common standards of web accessibility include several specific points. Images and animations should contain an alternative text (the alt attribute). Multimedia is supposed to have an alternative format (captioning and transcripts of audio, descriptions of video). Hypertext links need a descriptive text that makes sense (avoid “Click Here”). Proper page organization (headings, lists, and a consistent structure) and sufficient contrast between text and background are crucial.

The Web Accessibility Initiative provides more tips for developing a user interface, visual design, coding, and writing content for the disabled. We have illustrated some of the requirements with different pieces of code – inaccessible and accessible.

1. Structure content using HTML5. For example, use the navigation section element <nav> to help users of screen readers.

A screen reader understands the next code as “Link, Home”.

A screen reader understands the next code as “Navigation. A list, the first of three. Link, Home”.

2. Provide accessible and more efficient navigation marking up headings with <h1> … <h6>.

Inaccessible coding:

Accessible coding:

3. Describe images with an alternative text and provide transcripts for video and audio. The alt attribute should be informative. Compare:

4. Group related elements in a form using the <fieldset> tag that adapts your code to the user’s technology.

A screen reader understands the next code as “Black is chosen. Radio button. The first of two”.

A screen reader understands the next code as “Black is chosen. Radio button. The first of two”.

5. Use meaningful links that describe the content of the link target. Avoid uninformative and ambiguous text, such as “click here” or “read more”.

Inaccessible example:

Accessible example:

6. Consider the contrast between text and background to make a user interface accessible. Readable font size is important too.

screenshot of kkw beauty website

Because of the low contrast between text and background, the KKW Beauty website is inaccessible for users with low vision.

7. Develop for keyboard use only to let users of screen readers navigate your website.

screenshot of aliexpress website

Using only a keyboard, it’s impossible to navigate the Aliexpress website. Their developers switched off the default browser focus. Instead of it, they could create a more attractive one. We manually added the default focus to our browser for this screenshot.

screenshot of wikipedia website

Wikipedia is at the top of accessible websites. You can easily navigate the website using only a keyboard.

The web developers at Dizzain say that it’s easier to build websites and applications according to the accessibility standards from the very beginning than to try to modify existing sites or apps. Since the beginning of 2018, all of the new websites we have started to work on have been coded according to the WAI guidelines. We can also make improvements to accessibility as separate projects for those who need it.  Just contact us

How to check a website’s accessibility

While you may not be a web developer, you might be a website owner or a regular site visitor who knows a little about alt attributes, div tags, CSS for layouts, etc. You can check a website for accessibility. Try to navigate the site using only a keyboard. Does it work? Download a screen reader such as VoiceOver, NVDA, or JAWS, and test whether potential visitors with little or no vision could browse the website.

Special tools can also be used to check website accessibility. For example, Lighthouse is an open-source, automated tool for improving the quality of web pages. For a deeper and professional inspection, use Pa11y, accessibilityjs, or other accessibility testing tools.

Benefits of website accessibility

Website accessibility offers commercial, ethical, and other benefits.

First, web accessibility leads to an increase in the number of potential and actual customers. According to data from the CDC, almost one-in-six American adults have hearing troubles and almost one-in-ten adults have vision troubles. All of these people are potential customers for your goods or services.

Second, you strengthen your brand identity. An accessible website is an opportunity to enhance your company’s public image.

Finally, web accessibility is important for providing equal access and equal opportunity to people with disabilities and let them more actively participate in society. World-famous brands such as Wikipedia and Google embrace web accessibility. On the other hand, some companies have been sued because their websites offered poor accessibility.