Studio Gri Fare
-- epic emigration to Cyberland

Presentation Page About Armagan Tekdoner

Armagan Tekdoner IAAP certified Web Accessibility Specialist

fascinates me, mostly because there is nothing self-explanatory there

As a web accessibility analyst, I discuss the criteria that cannot be reliably tested by automated tools and common misconceptions in this page, by providing clear examples of false positives.
Comprehensive updates are on the way.

Here is a document providing easy tips for avoiding many accessibility errors during development: Developer-friendly WCAG checklist

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 the picture is not worth even a single word and it can safely be ignored by the assistive technology. (The demo itself as a whole, may 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

What a page title is, where it is located, what it is for, and most importantly, how it should be authored

Page Titled — Level A

I assume almost all web practitioners know whats and wheres part of the above heading, I am simply refreshing minds first

It is the title element residing in the head section of the HTML document.

This is where it shows up and how the entire text is displayed on mouse over event:
Screenshot showing title tag as it appears at the top of a browser window along with the tooltip

What is it for?

  • When many tabs are open, it right away reminds a user which page belonged to what website
    Screenshot showing title tags as they appear in multiple tabs
  • In a lengthy bookmarks list, thanks to properly-authored titles, a user can immediately understand what page a shortcut belongs to without the need for opening it
    Screenshot showing title tags they appear in bookmarks list
  • Search engines display what you write as titles in their results (Try limiting them to 55-60 characters)
    Screenshot showing title tag as it appears in Google search results

Rules:

  • It must be located in the head block
  • Make sure to correctly open and close it: <title>text text text</title>
  • It can contain nothing but text, no markup inside it is allowed
  • All pages must have their own unique titles
  • Leaving it empty is not an option
  • One screen cannot have more than one title
  • No aria role permitted

What I want to talk about is the "how it should be" part of the heading

The ideal title text must at least provide 2 details:

  • Which website it belongs to
  • Which screen/process/page it is about

More failure examples in addition to the clear ones shown in :

  • <title>Home page</title> — fails 2.4.2 as it is not telling the user which website it belongs to
  • <title>Contact us</title> — fails 2.4.2 as it is not telling the user which website it belongs to
  • <title>BBC</title> — fails 2.4.2 as it is too broad, not telling the user what the page is about
  • <title>NEWS</title> — fails 2.4.2 as it is not telling the user which website it belongs to
  • <title>BBC NEWS</title> — still fails 2.4.2 if it is an article, as it is not telling the user which article it is
  • <title>The training that helps your dog lead a better life</title> — also fails 2.4.2 as it is not telling the user where that article is from
  • <title>very year at Crufts, the UK's largest dog show, canines and their people can participate in all manner of exciting competitions. Whether heelwork-to-music (essentially dancing with dogs) or obedience, or the high-speed relay races of flyball, it can be a marvellous feast of fun for performance dogs.</title> — fails 2.4.2: just too long
  • <title>future,ARTICLE,story,domestic-animal</title> — fails 2.4.2 as it is the list of keywords, not a title
  • <title>The training that helps your dog lead a better life - BBC Future</title> — PASSES 2.4.2, which is the original title

The article used for the examples is By Jacqueline Boyd, retrieved on 14th April 2022

This is how I authored it for this page:

<title>WCAG - A Web Coding Showcase | Armagan TEKDONER</title>

The tabindex global attribute

Focus Order — Level A

One of the 2 failures specified by WCAG is
The meaning and the operability are explained in detail in the official resources. Here, I want to address the frequently-misunderstood tabindex usage.

  • Rule number 1 is that the tabindex attribute is not normally needed: properly coded HTML5 takes care of the focus order matter
  • There are only 2 reasons why it can be used and there are only 2 correct values it can take
    1. Reason: Some natively not tabbable element needs to be inserted into the tab order, such as a scripted div that works as a link, but does not receive keyboard focus
      Correct value: 0
    2. Reason: Some natively tabbable element needs to be removed from the tab order, such as a hidden element that receives focus by default
      Correct value: -1
  • No values apart from 0 and -1 should be used and anything higher than 0 alters the tab order.
    Using positive values is allowed (the maximum value for tabindex is 32767), but it is a very bad practice. And please let me state the obvious: using anything lower than -1 (the minimum value for tabindex is -32768) will not better remove an already removed element 😀

The tab order is set by the tabindex attribute as follows:

  • tabindex='1' (The highest priority)
  • tabindex='2' (The second highest priority. 3,4,5 ... 32767 — in that order)
  • tabindex='32767' (The lowest priority)
  • tabindex='0' (The natural order, default value, when no priority is assigned)
  • tabindex='-1' (Not in tab order)
  • tabindex='-32768' (Not in tab order)

Here is a tabindex demo

Click here and start tabbing to see for yourself.

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?)

Focus outline shows which element has the keybaord focus

Focus Visible — 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; }

Out of sight, out of mind: don't lose the focus

Focus Not Obscured (Minimum) — Level AA

EXPLANATION COMING SOON!

Not all parsing errors are WCAG errors. The section below is for WCAG 2.1.

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>