[vc_row row_type=”row_xxxl”][vc_column][dynamic dynamic_dynamic_content=”” template=”5006″ dynamic_content=”5006::content|textarea_html|Lesedauer|%3Cp%3E%3Cstrong%3EReading%20duration%3C%2Fstrong%3E%3A%207%20minutes%3C%2Fp%3E”][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_column_text dynamic_content=””]To this day, accessibility seems to be unpopular among web designers and agencies, because they’re often uncertain about what needs to be considered.
However, there are many valid reasons for making one’s online presence accessible to everyone.
We’ve created this article to help you meet all the requirements for website accessibility.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_headlines dynamic_title=”” h=”h2″ dynamic_h_tag=”” title=”What is an Accessible Website Anyway?”][vc_column_text dynamic_content=””]Similar to an accessible apartment, a barrier-free website should make it easier for people with disabilities to access or use it. This is why it’s called web design accessibility.
In Germany alone, there are around 7.5 million severely disabled people and 2.7 million people with minor disabilities. It’s important to make websites accessible to everyone.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_icons dynamic_icon=”” dynamic_placeholder=”” icon=”11840″][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_column_text dynamic_content=””]The clear advantage of creating an accessible website is that it can be used by everyone. Also, it can show that your business cares about social issues. Lastly, you’re expanding your market share, because people with visual or hearing impairments can become customers.
Search engines are becoming more and more aware of the topic of accessibility. In other words: Better accessibility can lead to better Google rankings.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”Is Web Accessibility mandatory by law?”][vc_column_text dynamic_content=””]Yes, if your website is the website or mobile app of a public body – then you must provide accessibility for all users.
According to the regulation of the European Directive 2016/2102, Germany implemented these requirements in the Disability Equality Act (BGG) and in the Barrier-Free Information Technology Ordinance (BITV 2.0).
This is why so many websites of municipalities or cities are already barrier-free (you can find an example of this further down in the article).
Of course, this doesn’t mean that you shouldn’t consider accessibility with your business website![/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h2″ dynamic_h_tag=”” title=”Principles for Accessible Web Content”][vc_column_text dynamic_content=””]There are several ways to make your website’s content more accessible. From text and images to contact forms, there is a lot to consider in terms of accessibility.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”Text”][vc_column_text dynamic_content=””]To make your text easily digestible for all users, high contrast is important. Black text on a white background is popular because it’s the most comfortable to read for everyone.
You, as a web designer, might want to get really creative and work with a variety of bright colors. But, if you do so, please be aware that it is at the expense of a limited minority.
The size and style of your website’s font are also important. People with visual impairment will find it difficult to read your text if the font is too small or too squiggly.
Our recommendation: Choose a font size of at least 16px on your website. Also, sans-serif fonts (e.g. Arial or Verdana) are recommended for digital products.
Various web design trends show that serif fonts are becoming more and more popular on the web. Please only use those kinds of fonts for headlines with bigger font sizes.
Comprehensive language is another major factor for accessibility. It’s probably safe to say that most of your website visitors aren’t linguists that have an enormous vocabulary.
Statistically, quite the opposite is the case.
Considering that about every 6th German adult reads like a ten-year-old, it is more than advisable to write your texts in a way that is easy to understand.
Keeping your words and sentences precise is a good start.
The so-called Flesch reading ease score lets you calculate the readability of your text. This analyzes the length of the sentences and the number of syllables. A high Flesch reading ease score indicates that your text is readable and accessible.
It’s best to always assume that you’re writing for children who can’t read very well yet. Then you’re on the safe side.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”Images”][vc_column_text dynamic_content=””]Even the images on a website can be accessible by adding so-called alternative text – often abbreviated as “alt text”.
Alternative text may be a term you’re familiar with if you’ve ever dealt with search engine optimization. They come into play when relevant keywords are placed in the alternative text of the images.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_icons dynamic_icon=”” dynamic_placeholder=”” icon=”11842″][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_column_text dynamic_content=””]However, in the context of an accessible website, alt text is intended to describe the particular image. This helps give blind people an understanding of what is displayed on a particular website.
The alternative text does not have to be extremely long. It is enough if you explain what is visible in the image in a short phrase.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”Videos”][vc_column_text dynamic_content=””]A video’s sound can help people with visual impairments process the video. For deaf users or hearing impaired people, things are a little different.
Make sure that subtitles are available for all videos. If subtitles are generated automatically, like when you’re uploading videos to YouTube, you will probably have to correct them afterward.
Artificial intelligence is already quite good, but not yet perfect.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”Structure”][vc_column_text dynamic_content=””]The structure of a website starts with accessible text. If your visitors are greeted by a huge wall of text, they will quickly leave your site.
To avoid this, please work with paragraphs that are not longer than 4 lines and break up the text into smaller units with other elements.
These could be…
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_list vc_list_type=”web”][vc_list_item dynamic_content=””]bullet Points[/vc_list_item][vc_list_item dynamic_content=””]tables[/vc_list_item][vc_list_item dynamic_content=””]images[/vc_list_item][vc_list_item dynamic_content=””]videos[/vc_list_item][vc_list_item dynamic_content=””]buttons[/vc_list_item][vc_list_item dynamic_content=””]forms[/vc_list_item][/vc_list][vc_column_text dynamic_content=””]You can also add a little whitespace between these elements to give the content more room and further aid with accessibility.
Forms can be tricky. They can be a real hurdle for users with limitations, and your business will miss out on valuable leads. Take a detailed look at the contact forms on your website and make sure that they are easy to use for all users.
By the way:
Dark mode is becoming increasingly popular with many users because it is easy on the eyes. For people with a visual impairment, however, it is counterproductive. Therefore, do not force dark mode on your website. If you do want to use it, make sure people can activate it themselves if they want to.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”Checklist for Creating Accessible Websites”][vc_column_text dynamic_content=””]Here’s our practical checklist for you, so that you don’t forget anything when creating an accessible website: [/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_list vc_list_type=”img” vc_list_icon_size=”30px” list_icon_align_y=”first” vc_list_image=”5036″][vc_list_item dynamic_content=””]Choose a font size that is at least 16px large
[/vc_list_item][vc_list_item dynamic_content=””]Use sans-serif fonts
[/vc_list_item][vc_list_item dynamic_content=””]Choose a high contrast between text and background
[/vc_list_item][vc_list_item dynamic_content=””]Keep your sentences short and easy to understand
[/vc_list_item][vc_list_item dynamic_content=””]Add alternative text to images
[/vc_list_item][vc_list_item dynamic_content=””]Add subtitles to videos
[/vc_list_item][vc_list_item dynamic_content=””]Write paragraphs with a maximum of 4 lines
[/vc_list_item][vc_list_item dynamic_content=””]Use different elements to structure your text[/vc_list_item][/vc_list][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_column_text dynamic_content=””]If you are not quite sure to what extent your existing website already meets the accessibility requirements, there are ways to find out.
Providers such as Siteimprove help you test a website for accessibility. Chrome’s Lighthouse Report also analyzes pages for accessibility and shows possible flaws.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h2″ dynamic_h_tag=”” title=”How Does Accessible Reading Work on a Website?”][vc_column_text dynamic_content=””]To enable blind and visually impaired people to read an accessible website, they use a screen reader.
An example of this would be Nonvisual Desktop Access (NVDA). This software is available for download free of charge and converts all contents of a website so that they are accessible for blind users.
This goes beyond just reading the website out aloud – which is a bit misleading when you use the term “screen reader” – because NVDA makes menus easy to use and aids in all interactions with a website for visually impaired people.
The bottom line is that an accessible website must be operable exclusively with the keyboard.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h2″ dynamic_h_tag=”” title=”Examples of accessible websites”][vc_column_text dynamic_content=””]To show you how this all works in practice, we have summarized a few examples of accessible websites for you.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”nachrichtenleicht”][vc_column_text dynamic_content=””]Nachrichtenleicht.de is a perfect example of what easy-to-understand language looks like on a website. If you are used to more advanced writing, the sentences of nachrichtenleicht.de seem a bit childish.
However, for people whose native language is not German or who have problems with complicated formulations, the site is perfect.
If you want to make your text accessible as well, you can follow this best practice.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”iBoB”][vc_column_text dynamic_content=””]iBoB is a platform for further education for blind and visually impaired people. In this sense, it is already somehow clear that, regarding the target group, the website MUST be barrier-free.
This quickly becomes apparent by looking at the very large font, good contrast, and colors that are suitable for people with dyschromatopsia (deficiency in the perception of colors).
For each link over which you move the mouse cursor, it is immediately apparent that it is a clickable element. In general, the entire operation of the website is very simple and therefore accessible to all people.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_headlines dynamic_title=”” h=”h3″ dynamic_h_tag=”” title=”City of Bonn”][vc_column_text dynamic_content=””]The website of the city of Bonn is just one example of many municipalities that have already made their websites as accessible as possible. There is even a separate section on the website for people with disabilities who rely on barrier-free information.
Modern responsive web design (when the website automatically adapts to smaller screens) is a good example of how accessibility works online.
The easy navigation also helps users move around the website smoothly.[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h2″ dynamic_h_tag=”” title=”Designing Accessible Websites with WordPress”][vc_column_text dynamic_content=””]Is web accessibility even possible with WordPress?
Of course!
An accessible website is mainly defined by the design and the presentation of the content. All these points are easy to implement with WordPress.
All that matters is that you’re working with a WordPress theme that allows you to easily implement the most important settings for accessibility.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][vc_list vc_list_type=”web”][vc_list_item dynamic_content=””]Are the color combinations easily recognizable?[/vc_list_item][vc_list_item dynamic_content=””]Is the font large enough, and is the typeface user-friendly?[/vc_list_item][vc_list_item dynamic_content=””]Can you incorporate different elements easily?[/vc_list_item][vc_list_item dynamic_content=””]Do all images have an alternative text?
[/vc_list_item][vc_list_item dynamic_content=””]Is there a strong contrast between the text and the background?[/vc_list_item][/vc_list][vc_column_text dynamic_content=””]These are all questions you should ask yourself when creating an accessible website with WordPress.
Especially with the technical aspects that have a great influence on the accessibility of a website, things can quickly become complex.
Choosing the right WordPress theme that meets all technical requirements (e.g. properly created menus, or how form fields are attributed) is essential.
[/vc_column_text][vc_content_box dynamic_vc_content_box_link=”” vc_content_box_type=”vc_content_box_color” vc_content_box_padding_top_sm=”15″ vc_content_box_padding_right_sm=”15″ vc_content_box_margin_top_sm=”15″ vc_content_box_padding_top_lg=”30″ vc_content_box_padding_right_lg=”30″ vc_content_box_margin_top_lg=”30″ vc_content_box_text_colorselect=”color_62″ vc_content_box_text_colorselect_hover=”color_62″ vc_content_box_colorselect=”color_13″ vc_content_box_colorselect_hover=”color_13″][vc_row_inner][vc_column_inner width=”1/3″][vc_icons dynamic_icon=”” dynamic_placeholder=”” icon=”7655″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text dynamic_content=””]To make creating your accessible website a breeze, we recommend GREYD.SUITE.
With the all-in-one WordPress tool, you can make any homepage accessible in no time and reach even more users.
You only have to click on the button to see it for yourself – testing is of course free of charge![/vc_column_text][vc_cbutton dynamic_linkk=”” mode=”_button _sec” css=”.vc_custom_1636041545525{margin-top: 2em !important;}” linkk=”url:https%3A%2F%2Fgreyd.de%2Fen%2Ftest%2F|title:test%20now%20for%20free”][/vc_cbutton][/vc_column_inner][/vc_row_inner][/vc_content_box][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][vc_headlines dynamic_title=”” h=”h2″ dynamic_h_tag=”” title=”Bottom Line
“][vc_column_text dynamic_content=””]Accessible websites are relevant for all businesses.
They make it possible for all people to have easy access to your offer. This article and the checklist will help you to make your website accessible.
If in doubt, hire an agency to create your accessible website. Professional web designers can help you make your website more accessible for everyone.
[/vc_column_text][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][/vc_column][/vc_row][vc_row row_type=”row_xxxl”][vc_column][dynamic dynamic_dynamic_content=”” template=”3211″ dynamic_content=”3211″][dynamic dynamic_dynamic_content=”” template=”8198″ dynamic_content=”8198::title|textarea|%C3%9Cber%20den%20Autor|About%20the%20author::icon|file_picker|Bild%20(Format%201%3A1)|8656::title|textarea|Autor|Patrick%20Mitter::h_tag|dropdown_h|Autor%20H-Tag|::content|textarea_html|Kurzvita|%3Cp%3E%3Ca%20href%3D%22https%3A%2F%2Fwww.pm-copywriting.at%22%20target%3D%22_blank%22%20rel%3D%22noopener%22%3EPatrick%3C%2Fa%3E%20loves%20good%20texts.%20Preferably%20about%20topics%20concerning%20online%20marketing%20and%20WordPress.%20Having%20built%20websites%20by%20using%20well-known%20page%20builders%20on%20his%20own%20and%20being%20very%20experienced%20in%20the%20SEO%20industry%2C%20he%20is%20very%20familiar%20with%20any%20kind%20of%20problems%20regarding%20those%20plugins.%20This%20is%20the%20reason%20why%20he%20adopted%20GREYD’s%20mission%20to%20simplify%20work%20for%20web%20designers%20as%20well%20as%20agencies.%3Cp%3E”][/vc_column][/vc_row]