Tech Standards for Accessibility Best Practices

WebAIM’s Principles of Accessible Design has laid out a thorough guide for technical standards in terms of defining the best accessibility practices. We’ve taken what we feel to be the twelve fundamental elements and listed them in this section.
While this is by no means an exhaustive list, it is a solid foundation that will vastly improve your website accessibility—even if you only stick to these twelve points. Almost all of them are incredibly simple to implement, and won’t impact your site’s overall look or feel in any major way. However, the difference these technical standards will make for your users who have disabilities will be huge, and in the right way.

Alternative Text

Also known as alt tags, alternative text gives users an understanding of what visual content (images in particular) are showing when they fail to load. Not only is this good for SEO, as they give website crawlers context, but they are hugely beneficial to accessibility for users who are blind or otherwise severely visually impaired. Such visitors typically rely on a screen reader to experience your online content. Make sure you have short, descriptive alt tags for all of your visual content.

Appropriate Document Structure

Make use of headings and subheadings, and take advantage of the h1, h2, and h3 (et cetera) tags to clearly define them. This is highly important for UX (usability experience) in general, as it allows readers to scan your content to catch the main points in a glance, as well as clearly defining and dividing separate sections of the page. In the same way, lists and other structural elements, such as tables, help to break up larger bodies of text, making them easier to read for users in general. This is especially important for users who have cognitive or learning disabilities, as it breaks text into “bite-sized” chunks that are much easier to read and understand. Furthermore, using proper document structure on your site assists with keyboard navigation, an important factor for the visually impaired who are unable to use a mouse.

Tables

Tables do fall under document structure, but warrant a separate point as well. Avoid confusing users by limiting your use of tables to display tabular data rather than for layout purposes. When using tables in your documents and online posts, make sure that the rows and columns have proper headings, as well as summary tags. Once again, these make comprehending the data provided easier for the visually impaired. Table headers are defined by the HTML tag
.

All Forms Should be Easy to Complete and Submit 

This is something that a lot of sites overlook. You should limit the number of fields required (especially for contact forms), as this immediately makes them easier to complete. Furthermore, visitors to your site are more likely to submit a completed form when they aren’t expected to fill out too many fields. So limiting the amount of information you want your users to submit doesn’t only make them immediately more accessible, but such forms are better optimized for SEO and have a higher capture rate.
When you do need to provide an online form, make sure the tag is in use so that elements such as the text field, checkboxes, a dropdown list, and so on, can be recognized by users working with a screen reader. (Bonus tip: it isn’t only the visually impaired who make use of assistive technology like a screen reader. Users with dyslexia often use them too, as it makes receiving and processing the text much easier for them.) As far as possible, ensure that there are measures in place to make submission easier and to allow users to quickly recover from any errors.

iFrames

You may not have heard of them before, but iFrames are used to embed elements such as YouTube videos, Google Calendar, and so on. iFrame coding should always include a title, using the tag title=“Your Title”.

Links

When you add links (internal or external) to your content, you should always strive to have the link text make sense when read by itself by using proper anchor text. For example, a link to the previous article should read “Previous Article” and have the hyperlink embedded. Never use phrases such as “click here” or “more” unless it’s absolutely unavoidable. If a link opens the new page in a new window, you should also indicate so by adding something like “(link opens a new window)” so that readers relying on a screen reader are fully aware of what is happening.

Caption and/or Transcript Media

If your page has an audio file or video embedded, then these elements should include a caption and/or (preferably “and”) a transcript. This allows for users with hearing impairments (being hard of hearing or fully deaf) to access information contained in the audio file or video.

Non-HTML Content

This includes PDF files, Adobe Flash content, Microsoft Word documents, and PowerPoint presentations. To make such content accessible, you can add a series of tags, which won’t affect the visual effect on-screen but will allow screen reader users to access the data contained. If you’re unable to make the content accessible, either provide an accessible alternative (clearly captioned as “screen reader friendly” or something similar) or consider using an HTML format instead.

Repetitive Elements

While you generally want to avoid including these in the first place, it is sometimes necessary to include repetitive elements such as a navigation section at the top of the page. If you do need to make use of such elements, you’ll need to give users a link that allows them to “skip to main content” (you can phrase it differently, of course, so long as the meaning is clear). Otherwise, screen readers will automatically render the repetitive elements as audio, which can be frustrating and time-consuming for users reliant on the assistive technology.

Don’t Rely on Color Alone

While color can be a wonderful means of visually conveying meaning, it automatically excludes the visually impaired (and this can include colorblind users) from fully experiencing the intention of your content. To make sure all visitors on your site are able to access the content properly, don’t rely on color alone when you want or need to convey meaning.

Clear Writing Style

Don’t use unnecessarily complex words or sentence structures when creating content. Your writing style should also include making use of proper document structure. Favor clear, easy to read fonts over decorative alternatives.

JavaScript

Any and all JavaScript event handlers that appear on your site are device independent, so that keyboard navigation is possible. You should also ensure that your pages are not JavaScript reliant.

Original article:
https://dynomapper.com/blog/27-accessibility-testing/446-website-accessibility-best-practices