What is an Accordion?
In the world of music, an accordion is a box-shaped keyboard instrument with a bellows in the middle. The player pulls and pushes the instrument to make air go in and out. The air vibrates reeds that make sound according to keys and buttons the player is pushing at the same time.
In websites, an accordion opens and closes something, analogous to the widening and narrowing of the musical instrument. Rather than just a single section, most website accordions have multiple panels that open and close according to which panel heading the user clicks on (or tabs to and then presses the Enter or Down Arrow key on). It normally operates very similarly to how a menu with submenus operates, except that the “submenu” may not be a menu at all, but just regular text, perhaps with associated images or other media.
When the page first opens, the accordion can be completely closed, showing only the panel headings; completely open, showing all the text under all panels; or closed except for the first panel, which is open. From there, it is up to the user to open or close panels as desired.
Usability Must Accompany Artistry
Some designers devise a more flashy accordion that draws the user to it by its automatic movement. Users see one or more accordion sections open while they watch. While this may be fun for some, it may be annoying or even unusable for others, depending upon whether the user can override the movement or not.
One such flashy accordion had a predetermined amount of time that each panel would be open, after which it would close as the next panel opened. While I had time to read the paragraph in each panel, I did not have time to study the picture to the right that appeared when the panel was open. I tried clicking a heading for a closed panel and found that it did open, but the countdown began again, giving me the same amount of time as before, then moving on to the next panel. While I have no mobility problems and my visual issues are easily overcome with cheap reading glasses, many users would have more difficulty with this accordion. People whose first language is not the same as what they are reading will require more time, as will slow readers. Keyboard-only users will not be able to control the opening and closing of the according at all, because there is no way to tab to the accordion headings.
(I found this irritating enough to do see how accessible the website menu was, only to find that most of it was completely inaccessible to keyboard-only users, leading me to conclude that the website developer(s) either knew nothing about accessibility or didn’t care.)
Here is the accordion-related text that I entered in the website’s “Contact Us” form:
I was very annoyed at the time limits on the automatically-opening and closing accordion. While I could read what was there, I did not have time to re-read it or study the associated picture. I tried clicking on one heading to reopen it, and it did, but the timer did not stop and it closed again before I was done with it. This violates Web Content Accessibility Guidelines (WCAG) 2.1 standards: 2.2.1 Timing Adjustable, 2.2.2 Pause, Stop, Hide, 3.2.1 On Focus and 3.2.2 On Input.
I also mentioned the menu problems, and closed with this:
I strongly advise that you find someone who can fix these issues, as well as test for and fix whatever else may make your website unusable.
While your business may not yet be large enough to attract any lawsuits, expect them to come if your business takes off and patients are referred to your site, only to find they can’t use it. CVS, Target, the California university system, and others have already faced lawsuits – and either settled or lost. But don’t fix it for fear of lawsuits. Fix it because it’s the right thing to do. Besides, it will bring you more business.
Why Bother Making Sure You Website is Accessible?
Do you really want your website to turn away people because they (or their friends) cannot use it effectively or at all? Of course not!
I have seen estimates that 15 percent of the world’s population is disabled. For the United States, that figure is about 26 percent. I suspect the higher US number is due to differences in diagnosis as well as care. In any case, not all disabilities affect a person’s use of the computer, but many do, including blindness, low vision, neurological issues and cognitive issues. Furthermore, many people with such disabilities have greater challenges relating to travel, and so rely on their computers for shopping and communication even more than many more able-bodied folks do. Finally, as some advocates have pointed out, people with disabilities have friends and relatives who may form opinions about businesses based on the experiences of those with disabilities.
One of the easiest and most effective tests for accessibility on any Web page is simply to try to navigate it using the Tab, Space and Enter keys without using a mouse. Any problems you encounter with that could mean lost customers. Test this way for any new plugin your install. And get it fixed! (Contact the plugin author when appropriate or try a different plugin.)
There are many other tests for accessibility, such as for adequate contrast, alternative text for images and videos, form labels, and more, but automated testing software can pick up some of those. SImply by tabbing through, you will find issues that most automated testers miss, and these issues can completely break your site for some users.
I can help you fix your website. Just contact me.