Rücksichtnahme bei der Erstellung Barrierefreier Web-InhalteLessons from Everyday Life
Preparing our surroundings for ease of use and practicality in our own day-to-day lives usually comes naturally to us. However, in the field of web development, achieving a similar accessibility for ourselves and the people around us is often overlooked. Consider the implications: would it be a good idea for a business to turn away almost a third of their clients? Probably not. Even so, according to consilium.europa.eu, a third of Europe’s population has some form of disability. Many of them cannot access basic digital services on the web simply because accessibility standards are ignored. If you have a website and operate within the EU, ensuring that your website meets accessibility standards is now a requirement, as defined in the European Accessibility Act. The bad news is that many websites do not meet most accessibility standards and might end up having to pay a hefty fine if they do not get up to speed soon.
The good news is that improving a website’s usability does not necessarily require extensive technical skills. Often, all we need is a bit of common sense and compassion. This post will demonstrate small ways to enhance web accessibility, drawing parallels to everyday life.
A Simple Analogy: Let’s Make A Cup of Tea
Imagine the process of making a cup of tea. In many cases, you’d find most of the tools and ingredients within close proximity in the same room - often, that room will be a kitchen. Likely there will be a window and a lamp, so you can make a cup of tea by day or by night. Making tea is generally a simple process: open the cupboard, get a teabag and a mug. Put the teabag in the mug. Then fetch a pot, add some water, heat it up and pour it into the mug and wait. Simple!
Generally, the process will be similar, regardless of where the tea is made - a friend’s house or at the office. There might be minor variations, but most of the time, you’ll manage without having to ask for assistance.
Now consider guests coming to your home and you have no idea who is coming. Because you are a considerate person, you will make some preparations to be a gracious host to as broad a demographic as possible. You might hang up a sign, pointing your guests towards the kitchen, the bathroom and living room. For guests in wheelchairs, you would ensure there are no obstructions on the floor and that all they need for preparing a cup of tea is within their reach. For shorter guests, you might provide a stool or stepladder to forward them the same courtesy. You might even add labels and icons to your drawers and cupboards in large, clearly legible letters so your guests can easily find their way around your kitchen to make a cup of tea independently and don’t have to ask where to find what. So now, the introverts, the deaf, the illiterate and people with poor vision can also get a nice hot beverage without much fuss or assistance. And that flickering lightbulb will be replaced, naturally. We want to make sure that a person with photo-sensitive epilepsy will be safe, right?
With these very small and affordable measures, you have already made your kitchen accessible to many, who would have otherwise have had to ask for help. You didn’t have to build anything special and you did not break the bank. All that was needed was a bit of forethought and consideration.
Applying the Analogy to a Web Page
Sure. We do not typically invite a horde of complete strangers into the privacy of our home. And no, we cannot use a web page to brew a cup of tea. But complete strangers do visit our websites every single day. Just like not everyone has the budget to make their entire house accessible to every special need, not everyone has the budget or technical know-how to perform the same on their website. But just like hosting guests at home for tea, we can make an effort, and even on the web, it does not cost much. Even a small considerate adjustment can go a long way in letting a person feel acknowledged, respected and welcomed.
So what are some common mistakes that are made and some basic considerations to bear in mind to improve the accessibility on a web page:
Navigation
Make sure that your visitors can easily find what they need by adding a clear navigation block as one of the first elements on your page. Make sure your links are not broken and that they are labeled correctly. You wouldn’t want someone looking for the bathroom getting lost and ending up in your bedroom instead, right? By adding a “scroll to top” link and including a breadcrumb navigation, you can further enhance the navigability of your site. Imagine being able to teleport to the exit in IKEA, rather than having to stumble through each department each time you wanted to buy a flower pot. Wouldn’t that be nice?
Descriptors on Interactive Elements
Have you ever had an appointment in a high-rise building and were in a rush, entered the elevator and none of the buttons had labels on them? Well have fun getting to that appointment on time. I’m sure you would curse that building manager from here to Sunday if you would have to deal with that. Unfortunately, many websites completely ignore adding discernible text to their interactive elements, which ensures that a screen-reader can understand that this social media icon, when clicked, will take you to that social media site. A good WYSIWYG (What You See Is What You Get) editor will provide an interface for editing links, buttons or input elements, allowing you to add the corresponding descriptor. If you are developing manually in HTML (Hyper Text Markup Language), please make sure to use the aria-label attribute. Please don’t create elevators with unlabelled buttons.
Sensible Content Structure
Novice content-creators will use a headline (the <h1> to <h6> tag) as a styling choice. Please avoid this. Your page should have only one <h1> tag. In analogous terms, this would correspond to the title on the cover of a book or a newspaper. On a single web page, your h-tags should be in the corresponding order of hierarchy - so h2, then h3, then h4… If you are jumbling them up, you are basically forcing a person who relies on a screen reader to read a book that starts with chapter 3.2 and then moves on to chapter 1.1.3, and so on. Please don’t make a visit to your web page a nightmare for someone, just because you do not like the font-size of your h2-tag. You can simply change that using your cascading style sheet.
Focusable Content
Ensure that interactive elements such as links, buttons and form elements can be focused using a keyboard, and that the focus-state is noticeable. By default, there will be a thick ring around such an element, but some web-designers like to remove it. You can test this by opening your website, and using your tab-key on the keyboard to check. For each item, can you see which element is being focused? If not, some styling adjustments may be needed. For some people, using a tab-based navigation is their only way around the web. Denying them the ability to see where they are going or what they are doing is an unnecessary barrier.
Legible Content
Ensure that your text is large enough to read and has a high enough contrast in relation to the background color. Anyone with poor vision will thank you for it. Dark gray text on a black background might look cool, but it is a pain to read. Just like tiny text might look nice and compact and suit a design better, but increasing the size of text on a screen is an additional step and requires a measure of technological skill which not everyone possesses. Perhaps anyone with elderly parents or grandparents can confirm how helpless they feel if text is not legible to them and they spend time squinting at their screen, trying to figure out what those blurry blobs mean.
Logical Content Placement
Why are the socks in the dishwasher? This is something anyone in a respectable household should never have to ask. Yet somehow there is an “about us” section introducing the company’s HR-team randomly displayed between a black friday sales banner and a list of products on sale on a web page titled “Great Deals Today”. Seems a bit out of place, right? Identifying the purpose of a specific landing page and ensuring that the content on display there belongs there is as simple as keeping socks out of the dishwasher. Let’s try to not confuse our guests.
Descriptive Alt Text for Images
Provide a clear description of what images are depicted on your website - especially if the image bears significance to the content on the page. There are many benefits to adding the alt-text, but in the scope of accessibility, the alt-text will be used by screen readers to inform anyone who relies on them about the contents of that image. It would not be quite fair for Mr. Jones to get 10% off on his next purchase, just because his eyes are working and Mr. Smith must pay full price because he’s blind.
Conclusion
Improving web accessibility is an achievable goal that benefits everyone. By applying simple principles—clear navigation, logical content structure, visible focus states, readable text, and descriptive texts for focusable elements and images—you can make your website more inclusive. These steps demonstrate empathy and consideration for all users, ensuring that your website is welcoming and functional for everyone. Take these lessons from everyday life and apply them to your web presence to create a more accessible digital environment.