To be honest with you, I don’t spend a lot of time on Beyoncé.com. But, when I saw that Beyoncé’s entertainment company was getting hit with a lawsuit over the accessibility of her website, I thought I would check it out.
What did I see wrong? Well, a lot of things, unfortunately. From an accessibility standpoint, this site needs improvement. For a cursory evaluation, I checked out the site with a code validator first. Next, I did some manual testing using keyboard navigation and a screenreader. There were too many issues to cover in a short blog post, but here are some of the biggest ones.
No Visible Focus Using Keyboard
One of the easiest ways to check for basic accessibility is to tab through your site using your keyboard. Hitting the tab key should take you through every interactive element on a page . This is important for users who only navigate through sites with a keyboard. Often, these users have difficulty using a mouse or are using a special assistive technology. Regardless, they must be able to operate everything on a site just as a mouse user would. It turns out you can tab through all of the links on Beyoncé’s site, but you wouldn’t know it from looking at the screen as you do. As you hit tab, there is no visible marker, such as a border, outline, or underline, to show you which element you’ve landed on. Worse, it isn’t possible for a keyboard navigator to focus on the hamburger menu icon that reveals the menu, which means the user can’t operate it.
No ‘Skip to Content’ Link
Users navigating with keyboards or screenreaders will thank you for including a “Skip to Content” link on your website. That also means they might leave your site if you forget one. These links allow users to avoid clicking through your navigation and header links each time they load a new page. Instead, they can jump immediately to the page’s body content. Allowing these users to skip the navigation reduces their workload and helps them have a good experience on your site. No such option was available on Beyoncé.com.
Duplicate Link Text
Looking at Beyoncé’s “Music” page as a fully sighted user, I can see that it is arranged by album. Each section has links to songs, videos, and other related content for every album Beyoncé has released. It is clear to me that these links correspond to each album because of their visual relation. However, when I check out this same page using a screenreader, things become much more obscure. As a screenreader user, I may want to skip from link to link to find what I want. But the links in each section contain the same text. Suddenly, I’m confronted with multiple duplicate links. I can’t tell them apart. So I’m unable to find the links to songs from a specific album.
The same concept bodes true for videos. I would have no way of knowing that one link was to videos from Everything is Love instead of Lemonade.
Many Images Aren’t Described by Alt text
One of the issues included in the lawsuit is that Beyoncé’s site doesn’t use alt text to describe images for screenreader users. Looking closer, I do see some alt text on the site. For example, images on the Tour page do have alt text (though it is written in such a way that it’s mostly useless). With that said, there are certainly parts of the site which rely solely on images to convey information yet fail completely to accommodate screenreader users who rely on alt text. For example, the page called the “Vault.” This is an image gallery with many high quality photos of Beyoncé’s recent activities. For a sighted fan of Beyoncé , this is nice content. Unfortunately, for a screenreader user, this page is unusable. Each image is read in the screenreader as a link identified by the filename because the images do not have alt text. In practice, it sounds like this “Link – 1118-4, Link – 1118-3”. It isn’t a page that someone who can’t see the images could get any value out of.
Accessibility Matters
I’m sure that Beyoncé’s company will do the right thing and update the site so her fans can enjoy it, no matter how they happen to browse the internet. In fact, prominent web developers have already offered their help.
However, I can’t help but think that this all could have been avoided if the designers and developers had gotten things right the first time. There are many reasons to make websites accessible. I tend to split those reasons into two different categories: carrots and sticks. Carrots include increased audience and a better user experience. Lawsuits are the stick. Unfortunately, the team behind Beyoncé’s website ignored the carrots. Now they’re facing a very public and ugly problem. Regardless of the outcome, there is a great lesson here. I hope the lawsuit draws attention to the importance of creating accessible experiences. Accessibility shouldn’t be a scary topic for anyone. Rather, it’s something that we all need to incorporate into every stage of website design, development, and maintenance.
