Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Improving Web Accessibility with Semantic HTML and Testing Techniques and Tools

Improving Web Accessibility with Semantic HTML and Testing Techniques and Tools

This item in japanese

Web accessibility benefits all of us. Designers, developers, and testers can check for web accessibility and can make the web and services more inclusive, for instance by using semantic HTML, following web standards when coding, and testing for web accessibility. Countries are introducing regulations to enforce inclusive standards.

Josefine Schaefer will give a talk about web accessibility at the Romanian Testing Conference 2023. This conference will be held June 6-8, 2023, in Cluj-Napoca.

According to Schaefer, there are good reasons to care about web accessibility. It’s a basic human right as defined by the United Nations to have access to information and communications technologies, including on the web. And web accessibility benefits all of us, not only the people who experience some form of disability:

If you look at your phone in bright sunlight, you will benefit from sufficient color contrast, if you are in an environment where you can’t turn up the volume, captions will help you understand the content of a video - there are so many examples just like this.

Schaefer will talk about using semantic HTML and the benefits that it can bring. Semantic HTML means using the HTML elements for their given purpose - like using an H1 for the most important headline, or the button element when using a button. It provides context for users of assistive tech and as an added benefit, native HTML elements bring a lot of inherit functionality that you would otherwise have to add manually:

This could mean adding the correct type to an input element, making sure the headline structures are hierarchical, and reflecting on the usage of divs.

According to Schaefer, there are tools to help you when testing for web accessibility. You can test keyboard accessibility by manually tabbing through a page, but you could also use tools like for example taba11y to visualize the tab flow. There are also more general tools like the axe dev tools which will help you audit your page and guide you through points that could be improved. For color contrast, there are many different tools as well helping you evaluate the contrast ratio between your foreground and background.

InfoQ interviewed Josefine Schaefer about improving web accessibility

InfoQ: What are the different aspects of web accessibility?

Josefine Schaefer: One of the most common issues is related to color contrast. This means providing enough contrast between the background and the foreground so that content is perceivable.

Another important aspect is keyboard accessibility: we want to make sure that websites can not only be used with a mouse or a trackpad, but users can also navigate with a keyboard or assistive technology.

InfoQ: How can we improve keyboard accessibility?

Schaefer: Make sure that all interactive elements like links or buttons are reachable with the keyboard as well - not only with the mouse or trackpad. Check whether the focus on the active element is visible and has enough color contrast. If you are working with hover styles, be sure that the information is also conveyed for people who might not hover but tab through a page. And of course, check that you are not "trapping" your users anywhere. There shouldn’t be any points of an application that can not be exited without a keyboard.

InfoQ: What will the future bring us in web accessibility?

Schaefer: I am hopeful that the future will bring even more awareness of the importance of web accessibility and the many different aspects that it includes. Ideally, this will mean a shift towards completely normalizing testing for web accessibility in software & web development. More and more countries are introducing regulations to enforce inclusive standards, which is one of many steps toward making it the norm. I also hope that awareness for so-called "invisible disabilities" will increase, shedding a light, among others, on neurodivergent folks and their experiences.

InfoQ: If InfoQ readers want to learn more about web accessibility, where can they go?

Schaefer: W3 provides a very detailed overview of the web accessibility fundamentals. There are also community-driven projects like the a11y project, which lists many resources and great articles on different accessibility-related topics. A11ycasts with Rob Dodson is also a great resource to learn more about web accessibility.

About the Author

Rate this Article