The past few weeks, we’ve been discussing accessibility, including a brief overview of what accessibility is and why it’s important, tips to make your content more accessible, and how to make multimedia more accessible.
Even if you follow all of these tips and tricks, if your website isn’t coded properly, you may still find that your website isn’t fully accessible to those who need to use accessibility tools.
If you’re doing your website yourself this is typically where you would need to work with a web designer or developer. Here are a few things that you’re going to consider to make your website fully accessible (each website is different and may require additional things to consider):
Responsive Web Design
There are some people who need to zoom in on a website in order to read it properly – this is going to become the case more often as our population gets older. One way to make sure that you are displaying your content in a way that makes sense to your viewers, that allows them for the easiest way to read your content in the way that you want it to, is to make sure that your website is responsive. (Responsive web design means that your desktop website will change the way that it displays information dependent on the device or browser size that it’s being shown on.) This can be really beneficial for accessibility because it means that your website will resize itself and rearrange itself when someone zooms in on their website browser, allowing for elements to be displayed in a better order for your visitors.
This means that someone who doesn’t have the ability to use a mouse or touchpad can still get through your website. Some items that you need to consider are making repeated content on every page can be skippable (such as top navigation), having the ability to tab in and out of all elements, navigating through elements in a logical manner, and having a visual way to tell visitors what element they have navigated to.
One area where this can be particularly challenging is the dropdown menus that are often used as main website navigation. For example, when a visitor tabs through navigation that includes dropdown menus, you want to consider:
- how to show what element is selected
- how to open up dropdown elements
- how to not be able to tab when a dropdown menu isn’t open
- how to close dropdown elements when someone navigates out of the element
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)
WAI-ARIA is additional information that you place in each element to tell accessibility tools how elements interact with each other, what elements are related to each other, how information is supposed to be presented to the user, etc. Some of this information may need to change dynamically dependant on what the element is doing at any given moment. This has become more important as websites are no longer static elements and have included more interactive elements.
Continuing on with the example that we had for keyboard navigation, you would want to consider:
- how to communicate to the user that the menu is a large navigational group, and not individual links that aren’t related to each other
- which elements have dropdown menus, and whether the menu is expanded or collapsed at any given moment
- which elements belong to a dropdown menu, and whether the items are visible or hidden at any given moment
So you can see, as far as what needs to go on in the background, there are a lot of elements that you need to consider to make your website truly accessible. But it’s definitely something that you want to work towards achieving – not only will it mean that you aren’t alienating a percentage of your potential client and customers who may depend on assistive technology, but in some regions it’s becoming law that your websites are fully accessible.