Why You Need to Care About Web Accessibility
Accessibility and Making the Internet Fun for Everyone
Working in web design goes so much deeper than nailing down the perfect font and color palette, finding ways to show off gorgeous imagery, deepening the online presence of awesome brands, and—in general—making the internet beautiful.
Don’t get us wrong; it’s important to think about and aspire to all those things. But it’s just as critical to make sure that great design is available to everyone surfing the internet—not just people born with a steady hand and 20/20 vision.
It’s sometimes easy to forget that not everyone sees, hears, and feels things in the same way (although the recent social media fiascos of gold versus blue dress and "laurel" versus "yanny" should act as reminders). This is why at efelle creative, we prioritize accessibility—ie, making our websites usable for all users—and ensure our site builds go above and beyond compliance with government-mandated web standards.
Interview with an Accessibility Expert
I recently sat down with Mat Harris—front-end web developer and resident accessibility nerd—to discuss the ins and outs of accessibility, including what grinds his gears, what his priorities are for website builds, and things that the average user may not think about when navigating the web.
Check it out below, and make sure to reach out to our team if you have any further questions about how we can help make your site a rich experience for every single visitor.
What about accessibility drove you to want to take a deeper dive into the subject?
Accessibility, for me, is something that supports social inclusion and something that I feel like technology—or the tech industry—has not always done a very good job of accommodating. Digging into the subject is one of the ways I felt I could help make a difference.
To be honest, I didn't know a lot about accessibility concerns before getting the job here. Once I was introduced to it, it was something I knew I wanted to learn more about and actively include in my development work—to think about all sorts of users. Like, who will be using my websites and making sure different features are available to everyone. Does everyone have the ability to access the site and the content and get something out of it?
So, for me it was that social-good aspect.
What kinds of things—when not done well—make you cringe from an accessibility stand point?
Designs that don’t keep blind or visually impaired users in mind. It can be something as simple as there’s not enough contrast on the screen for certain users to differentiate between elements. Or the letters are small and light against a dark background.
A big one is navigation. Can someone who only uses the keyboard access every page and link by tabbing through the site? Big, huge menus tend to cause headaches for visitors using the tab button to navigate.
Things like that really make you cringe because the thing about accessibility that is interesting is that it's an active process that should never have to be thought of during development. Accessibility is something that should be considered throughout the entire design phase. There are things we definitely do on the development side, but thinking about accessibility starts with the designs.
On the development side, especially on some old sites, I notice images without “alt” tags. These days, alt tags seem so basic, so it's things like that make very clear the people working on the site are not taking these kinds of concerns to heart or thinking about all their users.
Can you expand on the importance of alt tags?
Including alt tags is something that’s super easy to do and has a lot of use for visually impaired users: It gives them the ability to understand the images on your page. When an internet reader is running through a web page and comes across an image with a descriptive alt tag, that user will be able to understand what that image is providing to the page content, making it easier for them to “see it.”
To be sure, not all images need descriptive alt tags. Sometimes images can just be there for flair and don’t need a value attached. That said, it's always good practice to have alt text, even if it's just an empty string or a filename. If something breaks—if something’s wrong with the source code—and the image doesn't work, then you’ll still have an alternate tag show up on the screen and you'll have some context for what was supposed to be there before it broke.
You mentioned problems with big menus—aren’t these usually an easy way for visitors to see all the content available on your site at a glance?
Sure. The problem is a lot of so-called mega-menus are built without providing the option to skip to main content. Just think—as a visually impaired user it would be very annoying to have to tab through everything in order to understand your options and get to where you want to go.
Including a way to jump down the page is a huge help, and so it’s a good practice for designers to think about how the menu should function for all users so they can communicate these specifics to developers as early in the build process as possible.
What are your top “must dos” when it comes to developing accessibility into your sites?
Properly managing hidden content is a big one. Anything that is hidden from view but has some action that causes it to be shown—like expanding a menu or tabbed content—should come with some kind of ARIA [Accessible Rich Internet Applications] tag. What this allows screen readers to do—or users to do as they’re running through the site on their keyboard—is let users know when that collapsible content is open or not. You can build it so that the open/closed state is set to true or false, making it work with the browsers and screen readers to accurately convey what is being shown at any time.
Another thing we do is run our sites through accessibility tests. There are a lot of really good tests available online that can help you assess whether you’re meeting accessibility standards. It’s good to keep up on the latest from WCAG [Web Content Accessibility Guidelines]. The WCAG sets different levels of compliance—A, AA, AAA—and running tests that use these principles as their basis will help make sure you’re successful in your accessibility goals.
As a general rule of thumb, we aim for at least AA. But we have also built to AAA standards for clients that request super detailed builds to accommodate screen readers and voiceover and other devices. Regardless of the level of compliance you think is best for your website, it’s important to run your site through one of these tests before launch to make sure there’s nothing glaring that you may have missed.
Just keep in mind that you don't know who might be visiting your site so you want to make sure that they have full ability to get and read content and process the site. If you’re not doing that then you're doing something wrong.
Before the project even starts it’s important to think of how users are going to use the site. I think that it's easy for us to go from design to dev and everything looks good and everything is there that’s supposed to be there. But then when you actually bring it to the user, so many more things come up.
Functionality QA [quality assurance testing] is often the first time someone goes through the site as the user. This is a critical time. Even doing something as simple as using only your keyboard to tab through the site in order to check and see all the links show up helps big time.
One big thing that gets missed a lot of the time is the main navigation and being able to access any of those drop-down menus that are hidden until you hover over it; not all users are able to hover, so it’s important to make sure there’s a fallback for those users, otherwise they will never be able to access that content.
Another thing to test for related to hidden content are tags that may cause elements to get overlooked by screen readers. If anything is set to “display none,” it is completely skipped over by a screen reader. There are a lot of resources online to help identify different ways in which you can make something visible to screen readers that are not visible to sighted users. You can use CSS to do things like place some descriptive text off screen or have its opacity set to zero, so that it’s there on the page but not technically hidden.
How do you see accessibility standards evolving over time?
I hope that people are getting better at thinking about accessibility as they’re building things out. I know people working in tech are typically working in a fast-paced environment so it’s easy for a lot of things to get overlooked. But still, when we take the time to go through all these things, it makes websites better for everyone.
One thing that I've been seeing a lot lately is that the browsers themselves are taking on a lot of removing the guesswork for some items; they'll add certain functions that make it easier for users to interact with sites. You may notice in Firefox versus Chrome, for example, that 'focus' is a little different, like when you’re looking at a button, different styles may be automatically applied. This is why one of the most important things we do here is cross-browser functionality QA to see if one browser renders different elements and functionality different than the others.
And I think sites are getting more and more complicated—which is a good thing and a bad thing. It's cool from a technology perspective—like we're moving forward—but we need to be sure that if there’s something that is a cool feature or if your site is just completely built on video or has fancy scrolling animations and things like that, whatever the content is that you’re trying to convey should be available to all users trying to experience it.
I have seen that there are definitely more regulations—and more consolidation of regulations—aimed at improving user experience from an accessibility standpoint. When I started doing the research, there wasn't a lot of consensus on what the standards should be. Since then I've seen a lot of different pieces of legislation that have come through that say "we're going to start using this as our basis for internet standards for accessibility."
So, we should be seeing more of that, which would be great.
I mean, we've seen even in the banking industry that they had potential lawsuits hitting banks because their sites were not accessibility friendly. So, there are definitely some legal concerns coming up which is not a bad thing; if that trend continues, there will be more focus given to ensuring that all users have equal rights online.
Do you follow any social media accounts or blogs that focus on this topic?
Yeah, actually. I follow a lot of developers who are themselves users of accessibility features.
I follow a blind woman on Twitter and she always tweets about how frustrating it is even just using it as a platform—there are a number of different accessibility things promoted as good, but then to actually use them and experience unanticipated behavior...that can be really annoying. Like, for example, special character in user names; those get read out—fully—every single time these users are going through the tweets with their screen readers.
For these things that people don't really think about, it's really interesting to see someone give a firsthand perspective who you know is actually using the internet in a different way and see them being able to experience it—or not being able to experience it.
In general, accessibility is an interesting thing because, again, oftentimes when you try to start talking about it with another developer or a designer, you kind of see their eyes glaze over because we’ve had this conversation before. But the reality is it’s a constant thing that needs to be in the back of our minds—thinking how users interact with our websites. Not only is it good for the social implications, but it's also good for SEO, making sure that your site has all those meta tags and all those fields. Google sees those things and sees that you're trying to make things more accessible and it will reward you for that.
Mat’s Recommended Links and Social Media Accounts
Understanding and Accommodating Accessibility Standards
Articles About Accessibility
Accessibility Tests
Twitter Accounts Featuring Posts About Accessibility
Looking for a Web Design and Development Company that Keeps Accessibility at the Heart of Its Work?
efelle creative believes in making the internet a great place for everyone. Our design and development process is highly collaborative, meaning that not only will you get a great design you love, we’ll also work together on our end to ensure that your site is up to date on accessibility and other web standards. Reach out today to learn more about how we can modernize you web presence and make sure your content is engaging for all users.