SkillDisplay - Web Should Be Accessible to Everyone

It was the 5th of May, 1999, when the World Wide Web Consortium (W3C) published the first version of the Web Content Accessibility Guidelines WCAG 1.0. From this point on developers, designers, and contributors had official guidelines to make the web accessible to everyone who has acute or chronic difficulties with seeing, hearing, and moving. Also people who are epileptic, have difficulties with learning, or keeping attention need to be considered here.

As I am not an expert in the field of “a11y”, I got a lot of help from

• Lena Chandelier, accessibility expert and front-end developer from Switzerland.

• Matthias Hinner from earlybird, digital agency in Austria which focuses on TYPO3 websites.

• Annett Farnetani from mindscreen, a German digital agency with a strong focus on web accessibility.

Thank you to all of them for giving interviews, recommending resources, and sharing their tips and tricks of the accessible world. Therefore, the blog post covers:

• Accessible for everyone, everywhere
• Start with little steps
• More advanced: Gold Verification
• Web accessibility and our favourite CMS
• Tools for testing your website
• Learn more and verify your skill

By getting all the information, I realized, web accessibility is not only about disabled people, it’s about you, me, and the stranger you met on the street yesterday. Using the web should be possible everywhere under any condition. Annett made it very clear that web accessibility is about the whole of society and recommended Microsofts’ inclusive design page. 

There are lots of examples under which conditions it’s hard to use every feature the web offers, I wrote some together:

• Ears: Like in a club where they play loud music, or in public transport when you forgot to bring your headphones - a website should be accessible without the ability of hearing. 

• Eyes: The most used example is colour blind people - according to statistics around 180 million people have difficulties with seeing colours worldwide therefore colour contrasts is a big topic. Another example would be, if you have a headache but you still need to work, the computer could read a website for you, so a website should be accessible without the ability of seeing perfectly. 

• Hands: What if you had an accident while playing volleyball and therefore can just use one arm, even if just for a short period, you still want to use the web. Websites should be accessible to people with limited motorical abilities. Using a website just with a keyboard here is important regarding Matthias.

So now we know why we follow the standards of web accessibility, we can continue with the basics, that every web developer, even without a lot of pre-knowledge is able to implement.

Annett gave the tip to focus on goals that are easy to reach, but have a big impact. For example, here we have the contrast of colours. Read more about colours and contrasts. For everyone who wants to expand their knowledge in this area, we refer to the article about colour blindness.

Something that I learned during writing this post and want to further improve is link text. When a screen reader is reading just the links to a visually disabled person, links who are announced by “the blogpost”, and “here” are not very helpful. The screen reader or any other person would need to read the whole paragraph to understand where the link leads to. Therefore the next resource is about the usage of link text.

Matthias told me, that image description has a big potential for improvement. Editors should get familiar on how to do them right. This tutorial is all about images and learning difficulties.

Lena encourages web developers to use semantic HTML. Use tags like header, footer, section, nav, and article to highlight and outline the sections of online media for the browser in order to help the user clearly navigate the content. Also, it’s very important to implement the usage of the heading tags h1-h6.

To further improve your website, you can follow the WCAG 2.1 (Web Content Accessibility Guidelines). Lena recommended AcceDe web, which offers code examples and explains web accessibility in easy language to designers, contributors, and developers in English and French. Annett suggested the resource fundamentals of web accessibility.

Matthias is on his way to get the first website which is gold verified by OCG (Austrian Computer Society). The Web Accessibility Certificate Austria should show that we are an open-minded, democratic, and integrative society and is available in bronze, silver, and gold. We wish him good luck and are proud that this website is developed with our favourite CMS. The website is created for Niederösterreichischer Landtag and you can see it here.

Our favourite content management system is of course TYPO3. TYPO3 already has a lot of build in web accessibility in the front end - use everything the CMS offers.

Rich Text Editor

Firstly, there is the RTE, which helps with semantic headlines. The Rich Text Editor is part of the TYPO3 CMS Certified Editor v9 - get more information about the skill: Rich Text Editor.

Templates, Layouts, Partials

Integrators can help, when creating a template and make it necessary to fill in a description when using images. The skill of the TYPO3 CMS Certified Integrator is available here: Templates, Layouts, Partials.

Extensions and Plugins

Plugins like sliders should always be tested in the front end. Tabulator and arrow keys should work to navigate through the slider. The skill Using Extensions in TYPO3 is about functionality that can be added to the website with the help of extensions.

TYPO3 Accessibility Initiative

Not only in the frontend, but also in the backend, web accessibility is important. Restarted in September 2019, accessibility should become a big topic in the backend of TYPO3. If you are interested in this topic and want to get involved, contact Michael Telgkamp and Patrick Broens via Slack or get more information on typo3.org.

Thanks to some tools recommended by Matthias, you can test your website on accessibility.

• WAVE Browser Extensions
  WAVE detects accessibility errors for you directly in your browser. The Chrome and Firefox extension displays the web accessibility in three ways: Styles, No Styles, and Contrast. 

• VoiceOver
  By using Apples’ VoiceOver, you can test how your website sounds. VoiceOver reads the website for you. There are alternatives for PCs too!

• aXe
  aXe, recommended by Lena, is a browser extension, a mobile app, and also a node package for the accessibility of development teams.

There are several web accessibility related events, you can attend to learn more! Or take a look on the SkillDisplay platform - the Web Accessibility skill covers the following goals:

• I know what web accessibility is and who defines the rules for web accessibility.

• I know how to improve the use of web pages for people with disabilities.

• I know how to handle content and structure for people with disabilities properly.

Learn more about web accessibility to make the web a better place! The Web Accessibility skill on SkillDisplay will help you and if you think you have the skill, verify it with the learner-verification!