Web accessibility: reach more people online

Accessibility on the internet ensures that users with a wide variety of limitations and needs can use websites without being restricted or needing further help. The purpose of accessible web design is therefore to prevent certain groups from being excluded online. In addition, an accessible website complies with web accessibility laws and policies in the USA. It’s important for companies to know that accessible websites reach more potential customers because they are accessible to more people than sites that aren’t optimized properly. Furthermore, you can also improve your search engine ranking by having an accessible web design.

Generally speaking, obstacles prevent us from making process – they make participation difficult. They are often set up unknowingly on the net. There have been cases where certain groups of people have been prevented from using web content or service terminals because the website has been so badly structured.

For example, websites that use captchas for verification purposes are hard for people with impaired vision to decipher since the signs and images aren’t very clear on purpose to distinguish humans from robots. Website operators began receiving complaints, and many hadn’t even heard of web accessibility before. One of the main ideas of Tim Berners-Lee (founder of the World Wide Web Consortium (W3)) was that websites should be usable for as many visitors as possible. The first published website was relatively simple and included the objectives of the W3 project as follows:

• It’s a way of showing corporate social responsibility. This can be used for PR measures.
• It reduces the risk of image damage due to discrimination.
• Search engine optimization and website usability are positively influenced.
• The number of potential users is increasing and, as a result, market share and profits are also growing.
• The company enables more participation from employees with disabilities.

These are just some of the advantages of digital inclusion. Learn more about the positive aspects of accessibility on the internet in the article entitled Developing a Web Accessibility Business Case for Your Organization (Shawn Lawton Henry and Andrew Arch, eds. Copyright © 2012 W3C® (MIT, ERCIM, Keio). If you would like to learn more about the general accessibility standards online, read our article WCAG – Guidelines for easily accessible web content.

Unrestricted participation on the internet is a given for most people. But there are groups of people who cannot use certain websites for various reasons. The W3C has identified five factors that are important for users to participate fully online. The corresponding keywords are: perception, understanding, navigation, interaction, and contribution. Below, we explain the terms in more detail:

Many websites contain flashing ads, have comment columns filled with small text, and sometimes even background music to support the mood or theme of the website. However, depending on the nature and degree of limitation, some of your website visitors might not be able to perceive these elements properly, or maybe not at all. For example, visually impaired people navigate the internet without visual stimuli, since a screen reader reads the website out to them instead. The device transmits the readable data to so-called assistive technology. A braille display, for example, can convert the text into braille. Therefore, the person experiences your website via touch. A text-to-speech tool plays the content in audio format. With this technology, users use their hearing to process website content. In the example above, however, the background music would be very distracting. 

People with a slight visual impairment, including many seniors, may see the content of your website, but would prefer the images to be larger. On the other hand, colorblind people do not recognize warnings that are only expressed in color. Deaf people, on the other hand, can’t benefit from pure audio file information and can’t make the most of video files.

Very young users, seniors, or people with cognitive impairments sometimes have difficulty understanding a text that’s full of modern technical terms or unexplained abbreviations. If a website displays content (that belongs together thematically) far away from each other, it makes it difficult for many people to recognize the connection.

As more and more people now visit websites via smartphones, it becomes increasingly annoying if the links are difficult to click on. If the website isn’t optimized for smartphones and links are placed too closely together, it makes it harder to click on them. For people with physical disabilities, however, numerous tools have been developed to make computers easier to use: For this purpose, some tools capture eye movements while other technologies use the keyboard. In principle, the website should be designed in such a way that it can be read using assistive technologies: If your internet presence can’t be navigated properly, potential customers, who have been directed to your site, won’t be able to take full advantage of it.

If users are asked to fill out a form (e.g. to register for a newsletter), they often make mistakes. The password is too short or the date of birth doesn’t fit the parameters. Therefore, formulate clear instructions on how a visitor can correct this error. Website interaction also includes navigation. Users who surf on devices with small displays or work with screen readers need customized navigation paths and depend on the website to have a clear structure.

Comment fields enable your users to give feedback. They can use them to express their opinions on a product or content, or to exchange views with other users. People with visual impairments often use a screen magnifier when writing. This means that the elements appear much larger and the distance between the text and the input field increases. Arrange the elements in such a way that they are visually close together, therefore making it easier for your visitors to exchange information.

You receive feedback or orders from your customers via forms. Integrated spell checkers often indicate errors by highlighting misspelled words in red. Colorblind people often can’t differentiate the colored text from the main text. For this reason, you should always think of other ways for highlighting important information i.e. underlining certain words.

If you remove any obstacles, this improves your website’s usability as well as your Google ranking. Accessible web design therefore pays off economically and doesn’t require much additional effort. W3C recommends several test tools to check your website’s accessibility. However, the W3C test scores are only awarded by experienced human testers who check the website thoroughly. They scrutinize the entire website and certify different levels of accessibility: From A ('low accessibility') to AAA ('high accessibility').

Structure your website clearly and use user-friendly language. This way, you will attract more readers and improve your Google ranking at the same time (because search engines also evaluate the readability of texts). If you want to continue to ensure good SEO and make the structure of your website comprehensible and clear, then pay attention to the following aspects:

• Clear naming of URLs and content: The orientation and basic theme of the website should be easily recognizable on each subpage.
• Comprehensiblestructure: Users should always know where they are on the website.
• Flat hierarchy: Few clicks needed to reach the content.
• Separation of layout and content: Use CSS for the design.
• User-friendly categories: Subpages have an intuitive semantic link to the parent page.
• Web-compatible presentation of all content.
• User-friendly language: Formulations are easy to understand or are explained in more detail.
• Important website areas such as contact, imprint, search field, or homepage should be reached with one click.
• Navigation elements are clearly visible and structured the same way on each page.
• Larger websites should provide a site map and FAQs section.
• Scalable fonts, colors, and an adaptable layout facilitate how the content looks on different devices and in different browsers. Ideally, they are compatible with assistive technology.
• The website can be operated with mouse and keyboard.
• Alternative texts for images: They are necessary because screen readers and search bots can only process text content.

People who suffer from epilepsy are at risk when website graphics flicker more than three times a second. Scientist have also found that static images can also trigger seizures, so it’s worthwhile looking into which images and graphics are best to use.

Consider accessible web design in your daily workflow. For search engine optimization, PR purposes, or to present new sales offers, you should upload new content daily. Make it easier for your visitors to access it by tailoring the information to their needs. A fundamental component of an accessible website, which also plays a role in search engine optimization, is assigning alternative text to images. Crawlers and screen readers cannot see image content, which is also the case for visually impaired users. The alternative text therefore tells them what the image is about. But even visitors with a poor internet connection, whose images are slow or not loaded at all, also benefit from alt-texts.

What’s a little bit more time consuming is creating transcripts and subtitles. With these, you can transcribe audio content for the hard of hearing. The transcript, which changes spoken word as well as sounds and noises into text form, should be placed as close as possible to the respective audio content e.g. via a button linking to the document. Subtitles make it considerably easier for deaf people to understand video content. Users who don’t want to use the sound function (for example, because they are in a quiet environment) can also benefit from videos with subtitles. People with cognitive impairments or behavioral disorders such as ADHD are also more likely to pick up information transmitted by videos if they can eliminate background noise.

People with a visual acuity of less than 30% are considered visually impaired, and if it’s as low as 2% they’re legally classed as blind. They perceive visual stimuli to a limited extent or not at all. To help people understand video content, you should add an additional audio track. Through these tracks, you provide explanations of visual components such as location, landscape, and people, and briefly describe visible actions. Place these explanations during the pauses in the original audio recording so that the audio tracks don’t overlap.

The following video shows a short introduction on audio explanation and how to integrate it into a video. The enclosed closed captions are also an example of how to prepare content for the hard of hearing.

Easy language explains content in a simple way. It helps people with cognitive disabilities to understand more complex issues better e.g. it avoids the subjunctive, synonyms, and negations. Sentences in easy language are short and only contain one statement.

People with cognitive disabilities have the same right to information as everyone else. That’s why many daily newspapers are starting to provide easier versions of their articles online. One example is The Times newspaper. Public institutions are also increasing their use of easy language for their information texts.

Screen readers and other assistive technologies make websites accessible on the internet. The programs completely process web documents from left to right and from top to bottom. They work strictly linear. Therefore, you should separate layout and design from one another. Otherwise, screen readers will process the site incorrectly. Help ensure that users can effectively navigate your website by following these basic rules.

Framesets are a popular tool for website designers. The missing content of the underlying frameset documents, however, causes a problem: Crawlers read the 'empty' start page and place the site low down in the search engine rankings. The very first screen readers couldn’t recognize frames. They were only compatible with text browsers that indicated a frame. However, new versions of screen readers can be used with almost all browsers.

Screen readers transfer text information to speech output software and braille displays. To do this, you read the page from top to bottom – this also includes recurring elements such as the navigation bar, icons, or links to subpages. To prevent the reader from repeating this information unnecessarily with every opened page, you should use skip navigation links (also known as 'skip links'). Users who navigate with keyboard only, possibly with a mouthpiece, have a lot of trouble when they have to click through several elements. Your site will benefit from a skip link at the top of the page, which should be as visible as possible.

There are skip links that are invisible in the layout, but the screen reader sends the alternative text: 'skip navigation' message to the user if the code looks like this:

It is important that skip links are placed at the start of the code, if possible. Place the anchor text at the beginning of the main content:

Use skip links sparingly, as too many of these links have the opposite effect, since it means that users have to click through many elements. A more elegant solution is to use ARIA landmarks and to structure the documents in a good way. WebAIM recommends using HTML5 elements. However, current browsers don’t yet fully support this method. Further assistance could include a table of contents at the beginning of the document, which directs users to the respective sections via links. Modern screen readers read the corresponding headlines. If you work with meaningful, well-structured headlines, you increase readability for both search engines and assistive technologies.

Ideally, you should use only data tables for accessible websites according to W3C guidelines. Screen readers have fewer problems with this format, since they can reproduce the information meaningfully after converting it. Layout tables, on the other hand, give the site an optical structure, but make it more difficult for screen readers to reproduce the content in an understandable way. This type of website design is still quite popular, but with the latest versions of Netscape it isn’t necessary.

W3C gives tips on accessible web design. Other advice includes only defining layout tables (if necessary) with simple elements: TABLE, TR, and TD (Table, Row, Cell). If you use structuring elements to create cell connections, the screen reader reads the layout table like a data table. You do this directly by removing certain table elements from the accessibility tree. For your accessible website, use the code role=“none“, like in the example. This applies to the table and its child elements. If you pack tables into tables, you must define both elements.

Example:

This is how it is displayed in the interface: