Accessibility and reality: the horror gallery (first part)

It happens that I read on the web a bit too often, statements of web-designers ( or presumed) that say that they get paid separately  for the compatibilty with browsers  like Internet Explorer 6 and even the accessibilty of the site.

If you have read my articles,it should be clear my position : accesssibility is a “state of mind” and using this  approach to work, making a site accessible or not involves the same time, because the modifications are done long the way and not at the end, actually they are done automatically. In case a job is processed in this order, you can say that one earns a kind of additional value, for which you can ask for a higher payment,whether or not the “accessibillity” item is on the budget. And the compatibility comes as a consenquence (yes, even with IE6).

Among the other things, to be informed, you don’t need to spend a fortune on training courses: it’s all online , for free, all you need is just a little time and good will.

But now I want to shift my attention to the sites of big companies, in some cases also multinationals and see how much they take in consideration accessibility.

I already don’t agree with the attitude  of  those who as freelancers don’t have the time to update and improve themselves (especially if  they anticipate  a bit too fast the time of HTML5 and CSS3, which at the moment are only drafts, instead of focusing their attention on things that should have been learned a long time ago); but certainly there ‘re companies that really don’t have excuses, for which  making their sites accessible would surely be a small investment compared to the  turnover… and if it’s not like this, the problem is something else.

But no more chitchat, I selected some of the sites less accessible of  big companies…

A small premise

Most all of the these sites use flash.  This article doesn’t want to be a crusade against Flash in general (Apple is already doing it;)), but it’s against its improper use.

Brosway

Homepage Brosway

The site of Brosway is completely created in Flash, with no alternative content, in fact on the IPad screen you visualize a totally black  frame (set by an inline CSS string) without the usual written invitation to download the latest version of Flash Player… not to mention the lack of alternative text for non- and ipo-sighted users, since it is impossible to enlarge text and in some cases make difficult the reading for anyone, not respecting the WCAG recommendations for the color contrast between text and background ( read more about it);besides most of the text is not selectable.

The menu is correctly positioned at the top (almost invisible and hard to read when the background changes in clear), but on background there’re thumbnails of the jewels of the Brosway collection, (which get enlarged when the mouse passes over it in Dock Mac style) that to be visible require an available  minimum height of 550px. Instead the minimum width  to not to bring up the horizontal scroll-bar is more canonical: 960px (resolution 1024×768), pity though that the small form for the subscription to the newsletter (mistakenly called by them mailing list) overlaps the menu (moreover, I think that it’s not positioned optimally even under normal conditions, but I don’t know if it’s intentional…).

Trovare un punto vendita Brosway

To find Brosway stores one has to fill a request form and afterwards the list of the sales points in the province of the applicant will be sent via e-mail: this is a serious problem of usability, since information of this kind should be given directly, besides  the form (also in flash) doesn’t allow to use keyboard commands (Tab key, type the first letter to select an item in the multiple choice) and the “wheel” of the mouse: the only way to reach one’s choice is to click on the arrows of the scrollbar and scroll down the list until one finds the answer.

Carrefour

Homepage del sito di Carrefour

The homepage of Carrefour is full: it seems that you can reach every part of the site from here, but many things aren’t what they seem. In fact we find a “miscarriage” of a pop-up menu, which remained as is only in the inside pages: the  “Products & services” button  still has the required connection to open the menu below, which is already “opened”. Immediately on the right of  the button there’s an input field that seems a label for the research.

The use of Flash isn’t massive like in many other cases, even if there’s a lack of alternative contents (there’s only a writing in French, probably a reminder for them: “Contenu alternatif ( pas de plugin flash, pas de javascript…)”) and jQuery could have replaced it very well (see the slide on the right). Moreover not giving the height and width to the div  related  to the swf film, when this is not read (Flash disabled, IPad and so on), the layout topples, with the contents that rise to fill up the hole, getting overlapped by the left menu (which has  a z-index higher than the rest of the layout and a position: absolute;).

Sito del Carrefour senza Flash

Most all of the texts can be enlarged, even if at the first zoom the layout starts to wobble and with at the second it almost collapses. Regarding the layout, it’s formed by div elements, yes… but used as table cells!

Who links to this site,  probably needs to know the  Carrefour sales point or the current promotions: while the research of the stores doesn’t give problems (even if  they could have detailed the Google map with some markers), the visualization of the leaflets is badly managed  since it’s possible only after the registration.

The fact that they offer a service in exchange of the registration is a very common and ethical practice,but requesting the registration to view (badly) the online leaflet in advance, when I would just  like to see the current one that is usually found in every mailbox (also in contravention with the law), is definitely a wrong choice in terms of usability, considering the wide target of users, not necessarily experts.

Divani&Divani

Homepage di Divani&Divani

Full screen of  a brown frame, two horizontal menu at the top (with little contrast) and another, the main one, in the background but always visible; in the center an animation (obviously in Flash) that informs us that the video is uploading: once uploaded, an overview of the  photos begins (that could have been done with jQuery  and surely would be less heavier than 630kb) with the latest innovations  in Natuzzi home, the sofa with  speakers… that obviously play. So a loop begins ( badly cutted) that cannot be stopped till the end of the animation (in contravention of the WCAG recommendations), where it stops on the presentation of the collection 2011, with texts obviously not selectable and not zoomable and no alternative content in case Flash is disabled or textual browser.

Apart  the central box in Flash, we can find on the bottom, immediately above the main menu, the images and the headings of the news that slide thanks to a jQuery plug-in. These texts and menu are sensible to the zoom, but zooming a second time the main menu disappears.

The minimum height of the active area of the browser has to be at least 630px, otherwise an unpleasant scroll-bar  appears in Flash undermining the usability: at least they had the foresight to make operative the mouse scroll.

In the inside pages the required height increases and in fact it’s almost impossible to avoid to view the Flash-scroll-bar.

Some pages don’t seem to work, having  those that seem to be inland areas but at the  click they simply  reload the page in which you already are: a painful operation, because the site is very slow and heavy.

il modulo per cercare un negozio Divani&Divani è "camaleontico"

And searching for the stores,  really looks like a treasure hunt where you don’t have the instructions!…Actually one has to wait (with nothing that informs you) until a module, almost invisible, appears .

Vodafone

L'homepage di Vodafone

Vodafone has chosen to create two sites: one accessible and one …not
Avoiding to make comments on the accessible one (even if, for example, the “listen” function doesn’t work; if the link opens in a new window at the expense of usability)and it seems that the only problems of accessibility, for them, are to be ascribed to blindness or almost, on the other hand they selected to overdo: a bit of Flash with no alternative text, fixed-size boxes that if you try to enlarge the fonts everything overlaps the other making everything unreadable.

Also here, many of the videos in Flash are simple sliders that would have yield more with jQuery o in a few cases also as simple images, being in fact, often, only static images.

Il frame interno di Vodafone live! sembra un altro sito.

The pet hate is “Vodafone live!”, without doubts. This section houses within  a frame(!) with a fixed height(!!) another page with a design definitely different from the rest of the site (!!!), from the more articulated Flash animations  to the colors and  the distribution of the layout; a clear example: the big box (of the same width of the Flash animation) with a gradient dark gray background and the writings mostly in white and then in a variety of other colors.

Lete

La splash-page dell'Acqua Lete

The index of this site simply shows the logo, the invitation to enter in the site, a video of charities and the advices about the resolution (1024x768px) and the recommendations to turn the speakers on. Usually this is when I turn them off.

Besides this, our beautiful splash page, with very little content and too much weight, is paginated with the div placed in a very nice table.
Not being intimated, we enter in the site: a 1024x692px pop-up gets opened accompanied by a melody in loop and the rustling of the water, while also the video in the background repeats itself showing us the bottle that comes in, that goes out, that dissolves, Napoli soccer players alternated with a happy family and with the famous Sodium Particle, with the related slogans (where  the family one overlaps the text of the menu).

Needless to say, the site is completely in Flash and for obvious reasons is entirely in shades of light blue, sky blue and blue.

The mix of non scalable texts and colors with little contrasts, make reading difficult even for those with a good eyesight.

I testi del sito Lete sono difficilmente leggibili

The boxes that contain a lot of information have two style buttons that scroll the contents simply passing over with the mouse , but don’t allow the scroll of the mouse or of the keyboard.

Ultimately, obviously, the alternative contents are absolutely missing and the site seems “invisible” with Flash or javascript disabled.

Conclusions

All this is an obstacle in finding the information that you’re probably searching on the sites you’re visiting, so is for me, for you  and for the users of our sites. It’s for this reason that the problem is important and it’s vital to know which mistakes to avoid. Have you ever found yourself  on the user’s side and don’t  know where to go or what to do to find what you’re looking for? Why don’t you tell me your experience?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Passionate and professional web-designer, she knows deeply (x)HTML/CSS, loves to experiment PHP & js scripts and is always ready to learn new practices and techniques. She prefers a sober design for web-sites, with particular attention on usability and accessibility, moreover on what is under the shell: the code, strictly standard.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

6 comments

Trackback e pingback

  1. How can we create an accessible form and with an optimized code? « Codingbird
    [...] a lot of theory and examples on what not to do, today we’re finally going to put our hands on …

Leave a Reply

Current day month ye@r *