Studio Gri Fare
-- epic emigration to Cyberland

Presentation Page About Armagan Tekdoner

Accessibility by Design — WCAG

Understanding Web Content Accessibility Guidelines requires high degree of empathy first

As a web accessibilty specialist, I will discuss the criteria that cannot be tested by automated tools and common misconceptions in this page.
Comprehensive updates are on the way.

What are decorative images and how to correctly code a decorative image?

Non-text Content — Level A

1.1.1 covers a wide range of topics. A tricky one is handling the images that are decorative. There are tonnes of information readily available and I would like to share my own take in case someone might find them useful.
I describe a decorative image as an image the user can do without. In other words, remove the image and see whether there is any information missing. Decorative images are sometimes obvious, such as a paragraph spacer. However, sometimes they look like normal images that need alt attributes to describe them. Generally, such images take the form of photographs, used from stock photography agencies, not giving a clue about the actual matter.
"A picture is worth a thousand words", as the saying may go. Here are example cases in which no picture is worth even a single word and the image can safely be ignored by the assistive technology. The demo itself as a whole, is worth a thousand words though.

Decorative images

This is the first paragraph about something.

And this is the second paragraph separated from the first one by the image above.
Decorative. No alternative text. This is an image you can immediately understand you can do without.



This is a paragraph explaining the arrival procedures in detail, at Toronto airport, preceded by the image above.
Decorative. No alternative text. This is an image you can easily understand you can do without.



This is a paragraph explaining the arrival procedures in detail, at Toronto airport, preceded by the photo above.
Decorative. No alternative text. This is a photo that looks like relevant at first glance but it adds no value to the text or provides no information whatsoever.

Incorrect alt attributes commonly used for decorative images

  • <img src="paragraph-spacer.jpg" alt="null" />
  • <img src="paragraph-spacer.jpg" alt="NULL" />
  • <img src="paragraph-spacer.jpg" alt="decorative" />
  • <img src="paragraph-spacer.jpg" alt="decorative paragraph spacer" />
  • <img src="paragraph-spacer.jpg" alt="spacer" />
  • <img src="paragraph-spacer.jpg" alt=" " />
  • <img src="paragraph-spacer.jpg" />

One and only correct alt attribute for decorative images

  • <img src="paragraph-spacer.jpg" alt="" />

How to create a basic, CSS-only "Skip to Main Content" link?

Bypass Blocks — Level A

Keyboard-only users have to use the tab key to navigate. They must tab through a lot of links just to get to the main content. A skip to main content link allows them to bypass blocks such as menus.

Show the "Skip to Main Content" link example
Show the

Common false positives: link purpose should not be used to fail broken links

Link Purpose (In Context) — Level A

"Learn more", "read more" or "click here" type of text links, are not automatic failures either. It is all about understanding the purpose of the link without needing additional context: not a quality control mechanism nor a sort of keyword hunting.

2 common incorrectly-reported failures:

  1. See an site. (Link is broken. This is not an accessibility problem that excludes only a group of people, everyone is equally impacted. Broken links are not included under any of WCAG criteria.)
  2. about what is not considered a 2.4.4 error. (How can anyone not understand what is to be learnt more here?)

Coming soon to a theatre near you: Focus outline

Focus Visible (Enhanced) — Level AA

The keyboard focus is where it all begins. Go to any website and start tabbing. Do you see the elements that receive focus? Try this website too.
It only takes one simple line of CSS code, as exemplified below. Please make sure that there is no background colour matching the outline colour you chose!

:focus{ outline: 2px solid #bb0000; }