2
\$\begingroup\$

I'm attempting to make a nice-looking UI where a user views current items in a list and can add/edit/delete.

For each item, i've included an edit and delete link, but I'm trying to do so in such a way as to gracefully degrade/progressively enhance:

<li>My Course Name 
  <div class="tools">
    <a class="tool" href="/edit/id">✎ Edit</a>
    <a class="tool" href="/delete/id">✕ Remove</a>
  </div>
</li>

The idea is that for accessibility users/css-haters/lynx-users/really-really old browsers, the link displays as "✎ Edit" - clear and obvious as to the meaning:

Without Styling

Then, with CSS, I tweak it so only the ✎ and ✕ is visible, in a sort of iconic format:

enter image description here

My Question: is this a good approach to graceful degradation and progressive enhancement, and/or could it be improved?

P.S: I have a tiny feeling this might not be 100% appropriate for Code Review - so apologies if its not; we can always migrate/close, right?

Also, CSS:

.tools {
        float:right;
        clear:both; 
        height:1em;
        overflow:hidden;
        margin:0;
        width:auto;
        border:none;
    }
    .tool {
        float:left;
        width:1em;
        height:1em;
        overflow:hidden;
        color:black;
        text-decoration:none;
    }
\$\endgroup\$
  • \$\begingroup\$ One thing to note is that you have a block-level element (div) within an inline element (li), which is considered a no-no. \$\endgroup\$ – Colin Brock Feb 26 '12 at 19:16
  • \$\begingroup\$ @Colin actually, li is a block element because it is part of the "list" category of html elements, all of which are block-level. Also, you'll see (try it) that it does indeed validate. \$\endgroup\$ – Thomas Shields Feb 27 '12 at 2:18
  • \$\begingroup\$ My apologies - you're absolutely correct. It's been one of those days... \$\endgroup\$ – Colin Brock Feb 27 '12 at 3:34
  • \$\begingroup\$ While I disagree with Colin's argument, I agree with his position; I would use a span instead. @Colin, those are called "Monday mornings". :) \$\endgroup\$ – ANeves Feb 27 '12 at 10:11
2
\$\begingroup\$

I believe this is more trouble than it is worth. You may be shooting yourself in the foot since your complicated solution might not work as you expect for the different configurations you want to support. Designing for accessibility is not only "turn off CSS and JS and see how it works out", but "test that my code works for all these settings". I believe you're doing it wrong here.

A simple proposal

Did you consider the simplest approach?

<li>My Course Name
  <span class="tools"><a title="Edit" href="/edit/id">✎</a> <a title="Remove" href="/delete/id">✕</a></span>
</li>

CSS:

.tools { float: right }
  • This is going to work for CSS haters (?), old browsers and lynx. As for "accessibility users", most of them use real browsers, but need bigger fonts or high contrast designs. This means that my solution will not work only for speech synthesis (the speech synthesis of Google Translate skips complicated Unicode characters) but will work on any normal browser (even if the old-old browsers doesn't understand "float", the Unicode symbols will be displayed next to the course title).
  • The title attribute (thanks to ANeves) will help confused users hovering on the icons! I do this all the time for StackOverflow icons. This is great accessibility for normal users, but probably won't help for speech synthesis and the like.
  • Extra bonus: the CSS is simple to understand

I don't know how well your width:1em trick is going to work on browsers. It might be perfect, but it might not work as you expect at all.

If you really care about speech synthesis and make sure that your website really supports it (eg. do you follow the Web Content Accessibility Guidelines?), then go on with your solution as long as it doesn't hurt other users.

(Also note that you're using a multiplication mark, why not using something like "BALLOT X" which I feel has better semantics and might be rendered in a way that might make it look better http://en.wikipedia.org/wiki/X_mark ?)

Update: added a title attribute, as ANeves proposed in comments.

\$\endgroup\$
  • \$\begingroup\$ Good answer! It could be improved with a title in the a, for confused users. \$\endgroup\$ – ANeves Feb 27 '12 at 10:20
  • \$\begingroup\$ Indeed, I had missed that. Thanks! Edited my answer. \$\endgroup\$ – Quentin Pradet Feb 27 '12 at 10:31
  • \$\begingroup\$ I think you've nailed it. I think I was hung up on the possibility that there might be screenreaders, but I know for a fact that there won't be, so this is a great solution. (thanks also for the 'ballot x' tip) :) \$\endgroup\$ – Thomas Shields Feb 27 '12 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.