A Developer's Guide to Accessible Software
A significant portion of Internet users are disabled in some way, either permanently or temporarily. They may be blind, unable to hear, unable to use a mouse, or otherwise need to use assistance tools to navigate the Internet. The heart of accessibility is recognizing that these users have specific needs and accommodating them. This lets all users access a website with ease. One of the easiest and fastest ways to improve accessibility is by using HTML attributes that a screen reader can see and read, helping the user to understand what's on the page and how to navigate it.
Keyboard navigation is very often used by those with motor impairments, such as Parkinson's disease, which make it difficult to use a mouse and click on particular spots on the page. It's also possible that a user might have a temporary issue, like a broken arm or even just a broken mouse. A good way to determine whether your page is accessible to those who rely on keyboard navigation is to simply try to navigate and interact with the page using the keyboard yourself, but there are a few things to focus on specifically.
- Make sure every input element can be reached using the tab key.
- When tabbing through the site, the organization should be logical and not jump all over the page.
- Test your site both with your keyboard and with a keyboard emulator, as emulators are commonly used by people who are not able to use a physical keyboard.
- Any input that requires clicking should also be able to be typed in, especially popup widgets and custom CSS elements.
- It should always be obvious which element is currently in focus.
Screen reader software is very common for those with visual impairments. They go down the page, often in the logical progression that the developer designed, and read every element out loud as it is encountered. This is another accessibility issue that requires organization, as screen readers will read the page in as logical of an order as they can determine. If your page has the bottom element on the top of the HTML, it may read that element first, even if it's meant to be read last.
- Test many different screen readers, including both those that follow the logical structure of the site and readers that follow your mouse pointer.
- Accessible Rich Internet Applications, or ARIA, is a group of special attributes attached to HTML tags. They cannot be seen by the user, but a screen reader will recognize them and read them. These are especially helpful when the HTML tag does not make it clear what the element actually is, such as with a div tag.
- HTML5 has also integrated many accessibility attributes, which should also be used properly.
There are many general best practices to keep in mind to make sure that a website is accessible to all. It's best to integrate these practices during the building of the site rather than after it's complete; for example, if you realize at the end of your work that your HTML tags are not semantic and are all simply divs, it would take a large effort to change it all. It's much less work to do it correctly the first time.
- Use semantic markup. Whenever possible, use an HTML tag that is specifically meant for the purpose you're trying to achieve.
- Add alternate text for any elements that are not already text. This allows users that cannot see those elements to understand what they are.
- Make sure your page follows a logical flow in the HTML so it's clear which parts to read in which order.
Sometimes, a developer can make an aesthetic choice that isn't ideal for accessibility. A good example of this is removing the focus indicator from input boxes for aesthetic reasons; although the page may look good, someone navigating with a keyboard will have no idea which element they're currently focused on.
- Do not add content through CSS. Screen readers do not read that content.
- Do not hide labels for content off the side of the screen. If a screen reader is reading a right-to-left language, this will cause issues. If it reads based on cursor position, it will never be read at all.
- Do not modify the tabIndex to make the focusable elements work in the right order. If you need to do this, just restructure your page.