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.
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…).
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.
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.
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.
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.
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 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.
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.
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.
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.
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?
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 »