WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tried to make it accessible; now it doesn't look good

for

From: JP Jamous
Date: Oct 13, 2018 5:37PM

See my notes below.



--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Haim Roman
Sent: Saturday, October 13, 2018 1:12 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] Tried to make it accessible; now it doesn't look good

The site I'm working on has been using complex tables-within-tables for layout. I'm trying to get rid of them to make the site more accessible.
NOTE: I used chrome on a PC.


1. One possibility is to use CSS "display:table*" to simulate table
layout without table semantics. Except that I read that s*ome screen
readers will interpret such CSS as actual tables*. Is this still true?

Bad call. Stay away from that. Use data tables and make your life easier if you are presenting data. For layout purposes, you can use the divs, you mentioned, that will be fine. However, make sure that their layout in the DOM is sequential and not the way you intent to display it via CSS. For example, you want to show first name and last name in column 1 row 1 and row 2, when in column 2 row 1 you want to show date of birth and row 2 gender. Your markup in the DOM should be layed out as such.
<div>
First name
</div>
<div>
Last Name
</div>
<div>
<Date of Birth
</div>
<div>
Gender
</div>

This is what we call visual versus programmatic layout. So visually, you make it look like a table however screen readers, for the most part, are blind to what is included in CSS. They only read the DOM and based on its structure report that to users.

2. I'm working on the icons to change the language. They're currently
icons within BUTTON tags (type "submit") that are within a FORM tag. When
I try to position this form via CSS, I discovered that the icons occupy
only the *top half* of the form's box. The bottom half is empty. I
don't see any CSS causing that. This means I need extra CSS code to
vertically align the icons in the middle. Is this true, or am I missing
something?

Definitely, this is a CSS layout issue. It does not impact screen reader users, but you better be careful for low vision and color-blind users. You want your icons clear and adding text description along to the icon, it would help your users big time. For example, add the icon which includes a question mark and next to it have the word "help". Don't expect that all of your users will understand what the question mark means by itself.

Another way you can work around your CSS problem is by using <<img>> inside the <button> That will help you position things much better. Just make sure that the <img> has an alt attribute.

<<img> alt="Francais" dir="ltr" lang="fr" src="http://icon.png" />


3. I thought about implementing as A HREF links instead of a form (with
the desired language in the link). But I read that *there is no real
way to disable* an A HREF element. Is that true? There are hacks, but
I don't know how screen readers will interpret them.

You stated earlier that you were using buttons. If you are switching a language and not redirecting the user to a different URL, then you need to stick with buttons. Remember that buttons fire actions on the page, but links redirect the user to a different page or place on the page.

As Glen mentioned, make sure that your buttons use dir="ltr" or dir="rtl" along with lang="fr" for French or lang="ar" for Arabic.

I have witnessed many sites that use lang="ar" for Arabic but they do not set the dir="rtl". So the Arabic is written from left to right rather from right to left as it should be. That tends to confuse sighted and screen reader users, because the output becomes all screwed up. The same applies to Hebrew.

Thanks

Howard (Haim) Roman -- <EMAIL REMOVED> -- 052-8-592-599 -- חיים רומן
LinkedIn: https://www.linkedin.com/in/haimroman