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 accessibility specialist, I discuss the criteria that cannot be tested by automated tools and common misconceptions in this page, by providing clear examples of false positives.
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="" />

For the "Meaningful Sequence" criterion to apply, the content sequence must affect the meaning in the first place

Meaningful Sequence — Level A

What is not

When it makes no difference when some content is presented first and some other second, this does not apply.
From WCAG
This describes the failure condition that results when CSS, rather than structural markup, is used to modify the visual layout of the content, and the modified layout changes the meaning of the content.

Imagine 3 articles on one page, about "Birds", "Dogs" and "Cats" subsequently.
When CSS is disabled, the reading order becomes "Dogs", "Cats", and "Birds". The actual DOM structure is what you see after disabling the CSS and the styling was distorting the order; but there is no 1.3.2 failure here, as there is no change in the meaning of anything.
Show me that page described above with a button that disables the styles and I will understand why the page WILL NOT fail 1.3.2 even when the sequence changes due to disabled styles

Consider again the same page about the 3 animals.
When CSS is disabled, the captions under the animal pictures are incorrectly assigned. The actual DOM structure is what you see after disabling the CSS and the correct order you saw was assigned by styling; there is a 1.3.2 failure here, as the meaning changed.
Show me that page described above with a button that disables the styles and I will understand why the page DOES FAIL 1.3.2 when the sequence changes due to disabled styles

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

A common false positive: 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 required

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; }

Lots of parsing errors found? Do not be quick to report that there were parsing errors under 4.1.1, without having checked what errors they were: not all parsing errors are WCAG errors

Parsing — Level A

4.1.1 specifies exactly which type of parsing errors are considered failures; therefore, apart from the specified, no other error should be reported.

Of course "Fully conforming to specifications", as says, does guarantee that the web page passes 4.1.1, but this is more than "sufficient". In fact, the first 3 sufficient techniques are too sufficient. Since any fool can run an HTML validator to see whether it reads "Document checking completed. No errors or warnings to show," there would be no need for WCAG testers. Just don't expect today's Power Apps, on which many of the websites based, to generate fully conforming codes. (Check the web giants' websites and see how many parsing errors they have. There is no such website as "fully conformant".)

The true WCAG errors are listed and explained below.

  1. "Elements have complete start and end tags, attribute markup has been correctly authored." In other words, missing any or all of these 3 <, /, > or errors in usages of = and " or '. WCAG testing procedure says "Check whether any opening tags, closing tags or attributes are malformed". "What exactly and how?" you say?
    • <span>Dummy text<span> (Forward slash has been forgotten in the closing tag.)
    • <strong>Dummy text<p> (No closing tag in sight; a new paragraph begins.)
    • <divDummy text</div> (Opening tag misses this → >)
    • <label for="name class=myLabel">Name:</label> (The closing and opening quotes of the values missed.)
    • <label for="name"class="myLabel">Name:</label> (There should be white space between attributes, boundary becomes unclear.)
    • <label for=family name>Family name:</label> (Attribute value with a white space and without quotes confuses the parser, makes it think name is an attribute.)
    • <label for="family name">Family name:</label> (Attribute value with a white space gives a "bad value" error.)
    • <label for"name">Name:</label> (= sign forgotten, causing 2 errors about unmatching quotes and one attribute error.)
    • <label for="name'>Name:</label> (The single quote after the value "name" that was intended to close the quotation, makes the parser think the closing of the attribute is yet to come.)
  2. "Elements are nested according to their specifications." How does incorrect nesting look like?

    Example 1

    <span><strong>Dummy text</span></strong> (The closing tag for the strong element comes after that of its parent element.)

    Example 2

    <ul>
     <li>Dummy list item 1</li>
     <li>Dummy list item 2</li> ← Oops! The list item should not have been closed here...
      <ul>
       <li>Dummy nested list item 1</li>
       <li>Dummy nested list item 2</li>
      </ul>
    </li> ← ...the closing of the list item should have been here instead.
    </ul>
  3. "Elements do not contain duplicate attributes." WCAG testing procedure says "Check that no attribute occurs more than once on any element".
    The following are 4.1.1 error examples.
    • <p class="class1" class="class2">Dummy text</p> (Don't do this.)
      <p class="class1 class2">Dummy text</p> (Do this instead.)
    • <img src="the-photo.jpg" src="the-photo.jpg" alt="" /> (Don't do this.)
      <img src="the-photo.jpg" alt="" /> (Do this instead.)
  4. "IDs are unique." WCAG testing procedure says "Check that all values of type ID are unique in the Web page".
    The following are 4.1.1 error examples.

    Example 1

    <p id="name">Enter Your name:</p>
    <input id="name" />

    Example 2

    Question: What is wrong with this table?
    Animals Plants
    Cats Flowers
    Dogs Vegetables

    Answer: Its IDs and headers. Reading its code below, the screen reader will say cats, dogs, flowers and vegetables are all both plants and animals. Whereas, all that the validator says is "Duplicate ID".
    <table>
     <tr>
      <th id="ID1">Animals</th>
      <th id="ID1">Plants</th>
     </tr>
     <tr>
      <td headers="ID1">Cats</td>
      <td headers="ID1">Flowers</td>
     </tr>
     <tr>
      <td headers="ID1">Dogs</td>
      <td headers="ID1">Vegetables</td>
     </tr>
    </table>