Accessibility features are designed to help those with disabilities use technology more easily. For example, a text-to-speech feature could read text out loud for people with impaired vision, while a speech-recognition feature lets users with limited mobility control their computer with their voice.
When a website is designed with accessibility principles in mind and built to work properly with assistive technology, it is accessible to most people. So, what are website accessibility features and how can they be used to make your website more accessible?
Organize the structure of your content using headings.
Screen reader users are able to use the heading structure to navigate your website content. By using headings (<h1>, <h2>, etc.) properly and strategically, the content of your site will be organized and easily interpreted by screen readers.
Examples of proper use of headings:
- Only use <h1> for the primary title of the page. Avoid using an <h1> for anything other than website and individual page titles.
- Use headings to specify and organize your content structure.
- Don’t skip heading levels. For example, don’t go from an <h1> to an <h3>, screen reader users will wonder if content is missing.
Always include proper alt text for images.
Screen reader users rely on the alt text provided for images so they can understand the message conveyed by images on the page. This is crucial for informative images like infographics. When writing alt text, it should contain the message you want to communicate with that image, and if the image includes text, the text should also be included in the alt text.
There is an exception to this rule: when an image is used purely for decoration. When this is the case, the alt text can be left empty so that the screen reader user is not distracted from the actual important content on the page.
Always remember to provide alt text for images that are used as links; if the image is the only content of a link, the screen reader will read the file name if it is not provided.
Give links unique and descriptive names.
When including links in your website content, use text that properly describes where the link will take a user. For example, "Click Here" is not considered descriptive, and is ineffective for a screen reader user.
Just like sighted users scan the page for linked text, visually impaired users rely on their screen readers to scan for links. Because of this, screen reader users often don’t read the link within the context of the rest of the page. By using descriptive text properly, you ensure the context of links is explained to the screen reader user.
For example, if you are directing visitors to your site’s About Us page: Rather than say "Click here to read about our company.", try something like "To learn more about our company, read About Us."
Use color carefully.
The most common form of color blindness/ deficiency is the red-green color deficiency, which affects approximately 8% of the population. Using only these types of colors (particularly to indicate required fields in a form, for example) can prevent these individuals from fully understanding your message. Other user groups, particularly users with learning disabilities, benefit greatly from color when it is used to differentiate and organize your content.
When thinking of these user types and using color, be sure to use other visual indicators, like asterisks or question marks. It’s also important to distinguish blocks of content from one another using visual separation like whitespace or borders.
At Provisio, we design sites that make all pages as visually usable as possible to individuals with low vision or varying levels of color blindness.
Create content that can be accessed logically if only using a keyboard.
Users with mobility disabilities, particularly those with repetitive stress injuries, may not be able to use a mouse or trackpad. They are able to access content by using their keyboard to press the "tab" or "arrow" keys, or through the use of alternative input devices like a single-switch input or mouth stick. Because of this, the tab order should match the visual order, so keyboard-only users are able to logically navigate through your site’s content.
Long pages with a lot of content should be divided with anchor links, allowing keyboard-only users to skip to relevant portions of the page.
For pages with local menus and multiple levels and sub-items, the menus should be configured so that all menu items can be accessed with the keyboard. Avoid using elements that only activate when a user hovers over them with a mouse, as keyboard-only or screen readers users won’t be able to activate them.
Make dynamic content accessible.
When content on your site updates dynamically (without a page refresh), screen readers may not be aware. This can include things like screen overlays, lightboxes, section-specific updates, and popups. Keyboard-only users may get stuck in page overlays, or a magnification software user could be zoomed in on the wrong area of the page.
Make sure that video players do not auto-play and that the player can be used with a keyboard. Furthermore, all videos need to have options for closed captioning and transcripts for the hearing-impaired.
If your site contains a slideshow, make sure that the photos all have alt text and can be navigated via the keyboard.
At Provisio, we design and develop your site so it is usable by all visitors and that any barriers to accessibility are addressed. We are experts when it comes to current accessibility features, and how they should be built into your site. We take the guesswork out of creating accessible sites to take your business further, faster. Unsure about your website’s accessibility? Interested in an accessibility review of your current site? Let’s connect!