let’s dev GmbH & Co. KG - The brand for groundbreaking custom software

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Accessibility in web development
by Sarah
31. October 2023

Accessibility in web development

Driven by digitalization, an ever-increasing part of everyday life is shifting to the world in front of the screen. What should actually be an advantage for people with disabilities often becomes a disadvantage due to barriers.

Who benefits from accessibility?

For people with disabilities, accessibility is indispensable to be able to use offerings on the internet. Whether people with visual impairments, motor impairments or hard od hearing or deaf: They all have different requirements and needs that should be taken into consideration. However, it's not only people with permanent disabilities who benefit from it. Even in the case of situational or temporary limitations – such as strong sunlight, forgotten headphones or a broken arm – accessibility makes using a website easier. Furthermore, it is associated with good usability and user experience, thus bringing advantages for people without disabilities as well.

How can I make my web offering accessible?

Perceptibility, usability, intelligibility and robustness: the four principles of accessibility should be considered when implementing accessible web offerings. To adhere to these principles, there are various criteria that can be used as guidelines. A small selection is presented below. For those seeking more detailed information, a comprehensive list of criteria can be found in the WCAG (Web Content Accessibility Guidelines) and further details in the BITV 2.0 (Barrier-Free Information Technology Regulation).

Keyboard usability

An important aspect regarding the design of accessible web offerings is keyboard usability. Especially for blind individuals or people with motor impairments, it is crucial that all interactive elements can be accessed using the keyboard (tab or arrow keys). The focused element should be clearly indicated, for instance, by an outline. Additionally, attention should be paid to a coherent and in an expected order in which the elements are focused

High contrast

High contrasts between foreground and background colors should be used to facilitate access to content for people with visual impairments. The WCAG provides guidelines on when a contrast is sufficient and when it is not. The contrast ratio can be checked, for example, using the Colour Contrast Analyser."

Colour Contrast Analyser in use

Figure 1: The Color Contrast Analyzer shows that the color contrast between blue background and white font for large text in the compliance level AAA is sufficient.

Display in high contrast mode

Windows operating systems offer a high contrast mode that can be used by people with visual impairments. Windows operating systems offer a high contrast mode that can be used by people with visual impairments. For instance, this might give the page a black background, white text, and yellow links. It is important to check, for example, whether logos or icons are recognizable and if focus indicators are visible.

Scalability

For people who need to enlarge the content of a webpage to perceive it, adequate scalability is essential. Texts should not get cut off and unintended horizontal scrolling should be avoided. If responsiveness is a priority in implementing a web offering, this point is usually automatically addressed."

Correct syntax and semantics

People with impairments often rely on assistive technologies to access web offerings. These technologies interpret the code and present the content in a way understandable to the person. An example of this is a screen reader, which reads out the web content through speech output or a Braille display, making it perceivable for the user. Using correct syntax and semantics is necessary for the screen reader to interpret the content correctly. For instance, suitable HTML tags should be used for a button, a list or navigation elements.


Negative example:

         <div class=„button-primary“>Start test</div>
         

Positive example:

         <button type=„button“ class=„button-primary“>Start test</button>
         

Additionally, images and graphics that are relevant to the content require meaningful alternative text.

Example:

          <img src="swing.jpg" alt="Girl sitting on a swing">
           

A correct heading hierarchy is equally important: Each page should contain only one <h1>-heading. An <h1> is followed by an <h2>, followed by an <h3> and so on. No level should be skipped.

Negative example:

            
        <h2></h2>
            <h4></h4>
            <h4></h4>
            
        

Positive example:

            
        <h1></h1>
            <h2></h2>
                <h3></h3>
            <h2></h2>
                <h3></h3>
            
        

Using browser extensions such as Google Lighthouse, Axe DevTools, or WAVE allows criteria such as HTML structure to be checked. To test if the website is optimized for assistive technologies, screen readers like NVDA (Windows) or VoiceOver (Mac) can be used.

Conclusion

As the points described above demonstrate, many barriers in your own web offering can be eliminated with minimal effort. This not only enables accessibility for people with disabilities, but also enhances the user experience.

More articles from our blog

let’s dev Blog | Sustainable UX Design (SUX)

Technical

Sustainable UX Design (SUX)

by Nadine B.

2024-10-30

Read more
let’s dev Blog | AI, enhanced performance and improved privacy: The Android 15 Update

Technical

AI, enhanced performance and improved privacy: The Android 15 Update

by Julian

2024-10-09

Read more
let’s dev Blog | Important accessibility standards for websites from 2025

Technical

Important accessibility standards for websites from 2025

by Nadine

2024-08-06

Read more
let’s dev Blog | Automated Workflows: Maximum Productivity thanks to Zapier

Technical

Automated Workflows: Maximum Productivity thanks to Zapier

by Antonia

2024-07-18

Read more
let’s dev Blog | Apple Intelligence and ChatGPT: The highlights of WWDC24

Technical

Apple Intelligence and ChatGPT: The highlights of WWDC24

by Julian

2024-06-13

Read more
let’s dev Blog | Big, bigger, OMR: let's dev and Kortpress at the OMR Festival 2024

Corporate

Big, bigger, OMR: let's dev and Kortpress at the OMR Festival 2024

by Julian

2024-05-24

Read more
let’s dev Blog | Discover Dynamic Island: another innovation in the world of iOS

Technical

Discover Dynamic Island: another innovation in the world of iOS

by Nico

2024-04-05

Read more
let’s dev Blog |  The World Usability Day 2023

Corporate

The World Usability Day 2023

by Sina

2023-11-10

Read more
let’s dev Blog | Adobe Max 2023

Corporate

Adobe Max 2023

by Julia

2023-10-13

Read more
let’s dev Blog | Digital wallet cards: Strengthening customer engagement in the digital age

Corporate

Digital wallet cards: Strengthening customer engagement in the digital age

by Julian

2023-07-07

Read more
let’s dev Blog | Kortpress at the OMR Festival 2023 in Hamburg

Corporate

Kortpress at the OMR Festival 2023 in Hamburg

by Julian

2023-05-31

Read more
let’s dev Blog | Recap 2022: Smart Devices, Platform Business and innovative Research Projects

Corporate

Recap 2022: Smart Devices, Platform Business and innovative Research Projects

by Julian

2023-01-31

Read more
let’s dev Blog | Creating animations for websites using LottieFiles

Corporate

Creating animations for websites using LottieFiles

by Julian

2022-12-15

Read more
let’s dev Blog | Lean in Software Development

Technical

Lean in Software Development

by Sabrina

2022-12-08

Read more
let’s dev Blog | Adobe Max - Live from LA

Corporate

Adobe Max - Live from LA

by Jessica

2022-10-28

Read more
let’s dev Blog | Mensch und Computer 2022 - Facing Realities

Corporate

Mensch und Computer 2022 - Facing Realities

by Kerstin

2022-09-12

Read more
let’s dev Blog | EUREKA Innovation Award

Corporate

EUREKA Innovation Award

by Karl

2022-06-23

Read more
let’s dev Blog | WWDC 2022: Our update on Apple's new operating systems

Technical

WWDC 2022: Our update on Apple's new operating systems

by Julian

2022-06-08

Read more
let’s dev Blog | Docker and the hidden security hole

Technical

Docker and the hidden security hole

by Martin

2022-02-17

Read more
let’s dev Blog | The Christmas holidays are just around the corner - We are looking forward to the next year 2022!

Corporate

The Christmas holidays are just around the corner - We are looking forward to the next year 2022!

by Julian

2021-12-22

Read more
let’s dev Blog | Production and assembly of stacks and electro­lysers for hydrogen production

Corporate

Production and assembly of stacks and electro­lysers for hydrogen production

by Anton

2021-12-21

Read more
let’s dev Blog | Adobe Max 2021 - A global celebration of creativity

Corporate

Adobe Max 2021 - A global celebration of creativity

by Julia

2021-11-02

Read more
let’s dev Blog | Relational databases compared to object-oriented databases

Technical

Relational databases compared to object-oriented databases

by Julian

2021-10-14

Read more
let’s dev Blog | Apple Developer Program: What is it used for and what content does it offer me as a member?

Corporate

Apple Developer Program: What is it used for and what content does it offer me as a member?

by Julian

2021-09-30

Read more
let’s dev Blog | Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

Corporate

Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

by Ellen

2021-07-15

Read more
let’s dev Blog | Tailwind: An innovative project for the future use of old wind turbines

Corporate

Tailwind: An innovative project for the future use of old wind turbines

by Karl

2021-06-24

Read more
let’s dev Blog | Features, Fixes and Functions - A WWDC 2021 Sumup

Corporate

Features, Fixes and Functions - A WWDC 2021 Sumup

by Julian

2021-06-10

Read more
let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Read more
let’s dev Blog | Dasoman - Data-Sovereignty-Manager

Corporate

Dasoman - Data-Sovereignty-Manager

by Karl

2021-01-11

Read more
let’s dev Blog | We look back on the past months - And wish all the best for the coming year 2021!

Corporate

We look back on the past months - And wish all the best for the coming year 2021!

by Julian

2020-12-17

Read more
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Read more
let’s dev Blog | Adobe Max - Online for the first time

Corporate

Adobe Max - Online for the first time

by Julia

2020-10-29

Read more
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Read more
let’s dev Blog | Mensch und Computer 2020 - Digital Change in the Flow of Time

Corporate

Mensch und Computer 2020 - Digital Change in the Flow of Time

by UX Team

2020-09-18

Read more
let’s dev Blog | Neumorphism – A new era of user interface design?

Technical

Neumorphism – A new era of user interface design?

by Julian

2020-08-13

Read more
let’s dev Blog | UX Research Part 3 - UX Methods

Technical

UX Research Part 3 - UX Methods

by Elena

2020-05-28

Read more
let’s dev Blog | UX Research Part 2 - What is UCD and what does User Research have to do with it?

Technical

UX Research Part 2 - What is UCD and what does User Research have to do with it?

by Elena

2020-04-23

Read more
let’s dev Blog | go-digital promotes establishment of home office workstations

Corporate

go-digital promotes establishment of home office workstations

by Karl

2020-03-19

Read more
let’s dev Blog | Google Passes - Card Management on Android Devices

Technical

Google Passes - Card Management on Android Devices

by Michelle

2020-03-12

Read more
let’s dev Blog | 100% code coverage in software testing - a reasonable goal?

Technical

100% code coverage in software testing - a reasonable goal?

by Raphael

2020-03-06

Read more
let’s dev Blog | Swift UI - Simple and fast implementation of user interfaces

Technical

Swift UI - Simple and fast implementation of user interfaces

by Tobias

2020-03-02

Read more
let’s dev Blog | In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

Corporate

In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

by Julian

2020-02-27

Read more
let’s dev Blog | Simplified testing of iOS push notifications in the simulator with Xcode 11.4

Technical

Simplified testing of iOS push notifications in the simulator with Xcode 11.4

by Manuel

2020-02-26

Read more
let’s dev Blog | National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

Corporate

National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

by Karl

2020-01-27

Read more
let’s dev Blog | UX Research Part 1 - Why User Research is so important

Technical

UX Research Part 1 - Why User Research is so important

by Elena

2020-01-23

Read more
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Read more
let’s dev Blog | We wish you a Merry Christmas - And a Happy New Year!

Corporate

We wish you a Merry Christmas - And a Happy New Year!

by Julian

2019-12-20

Read more
let’s dev Blog | Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

Corporate

Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

by Karl

2019-12-17

Read more
let’s dev Blog | DaSoMan at the Internet+ Expo in Foshan (China)

Corporate

DaSoMan at the Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Read more
let’s dev Blog | Google Play Console: Pre-Launch Reports

Technical

Google Play Console: Pre-Launch Reports

by Fabian

2019-12-11

Read more
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Read more
let’s dev Blog | Vernissage digital art in the media theater of the Humboldt University Berlin

Corporate

Vernissage digital art in the media theater of the Humboldt University Berlin

by Karl

2019-11-21

Read more
let’s dev Blog | World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

Corporate

World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

by Aileen

2019-11-11

Read more
let’s dev Blog | Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

Corporate

Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Read more
let’s dev Blog | Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

Corporate

Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

by Elena

2019-09-17

Read more
let’s dev Blog | Business and Enterprise App Distribution on iOS

Technical

Business and Enterprise App Distribution on iOS

by Aileen

2019-08-05

Read more
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Read more
let’s dev Blog | let's dev supports runners at the 7th KIT Championship

Corporate

let's dev supports runners at the 7th KIT Championship

by Karl

2019-07-05

Read more
let’s dev Blog | Automated testing of C++ code with Google Test and Google Mock - Part 2

Technical

Automated testing of C++ code with Google Test and Google Mock - Part 2

by Arne

2019-06-13

Read more
let’s dev Blog | Apple WWDC 2019: These are the highlights of the keynote

Technical

Apple WWDC 2019: These are the highlights of the keynote

by Nicolas

2019-06-05

Read more
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Read more
let’s dev Blog | Official opening of the Consolidation and Expansion Center (FUX)

Corporate

Official opening of the Consolidation and Expansion Center (FUX)

by Helena

2019-04-15

Read more
let’s dev Blog | Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

Corporate

Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

by Helena

2019-04-14

Read more
let’s dev Blog | The time has come: We are moving!

Corporate

The time has come: We are moving!

by Helena

2019-03-26

Read more
let’s dev Blog | Automated testing of C++ code with frameworks - part 1

Technical

Automated testing of C++ code with frameworks - part 1

by Arne

2019-02-20

Read more
let’s dev Blog | The app in the Google Play Store

Technical

The app in the Google Play Store

by Elisa

2019-01-24

Read more
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Read more
let’s dev Blog | let's dev supports SG Siemens volleyball players from Karlsruhe

Corporate

let's dev supports SG Siemens volleyball players from Karlsruhe

by Helena

2018-12-04

Read more
let’s dev Blog | SMEs shape digitalization - SME Conference 2018

Corporate

SMEs shape digitalization - SME Conference 2018

by Helena

2018-11-12

Read more
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Read more
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Read more
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Read more
let’s dev Blog | let's dev is an authorized consulting company in the „go-digital“ funding program

Corporate

let's dev is an authorized consulting company in the „go-digital“ funding program

by Helena

2018-09-01

Read more
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Read more
let’s dev Blog | iOS 12: The top new features at a glance

Technical

iOS 12: The top new features at a glance

by Nicolas

2018-07-17

Read more
let’s dev Blog | let's dev at CEBIT

Corporate

let's dev at CEBIT

by Karl

2018-06-11

Read more
let’s dev Blog | Introduction to User Interface (UI) Testing with Espresso

Technical

Introduction to User Interface (UI) Testing with Espresso

by Raphael

2018-06-07

Read more
let’s dev Blog | The app in the Apple App Store: what information is needed?

Technical

The app in the Apple App Store: what information is needed?

by Aileen

2018-04-27

Read more
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Read more
let’s dev Blog | User interface design for iPhone X: all innovations at a glance

Technical

User interface design for iPhone X: all innovations at a glance

by Helena

2018-02-07

Read more
let’s dev Blog | WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

Technical

WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

by Judith

2018-01-10

Read more
let’s dev Blog | Deutsche Bahn Open Data Hackathon

Corporate

Deutsche Bahn Open Data Hackathon

by Karl

2015-03-31

Read more
let’s dev Blog | Blur effects under iOS 7

Technical

Blur effects under iOS 7

by Katja

2014-04-24

Read more
let’s dev Blog | Beyond App Store - iOS application distribution

Technical

Beyond App Store - iOS application distribution

by Karl

2012-08-27

Read more
let’s dev Blog | Front-end architecture - Model View Presenter and Message Bus

Technical

Front-end architecture - Model View Presenter and Message Bus

by Karl

2011-03-08

Read more