Embracing Accessibility: 20 Tips for Web Accessibility

By January 8, 2020Blog Posts, Services & Products
Embracing Accessibility 20 Tips for Web Accessibility

Even though it seems that the term has been in circulation  for recent decades, the first known use of “inaccessible” was in the 15th century, according to Merriam-Webster Dictionary. After having this information, maybe, it will not be so ridiculous to say that the effort to fix inaccessibility, at least for English speaking humanity, is as old as 500 years.

In my first article, my aim was to convince the reader to embrace accessibility in all phases of what he/she is doing, persuading him/her to take accessibility as a necessity not only for disabled people but also for a business wishing to be more inclusive and competitive. This time, my focus will mainly be on helping readers already embraced accessibility as a must. Let’s start with the subfield of accessibility on which we’ve accumulated unprecedented words and experiences as humanity, that is, web accessibility.

20 Web Accessibility Tips for 2020

First of all, I should say that the intention of the list below is not to replace or map to formal standards such as the World Wide Web Consortium’s (W3C’s) Web Content Accessibility Guidelines. Even so, I hope it will be used by web designers, developers, or content authors to guide them in creating or deploying web-based resources that are fully accessible to all users.

  1. Provide proper and short alt text for images. Use alt text to facilitate access to the image contents for individuals who don’t or can’t use vision to grab them, including people using screen readers or Braille output devices. Alt text is supported by most document formats.
  2. Use headings properly. Benefit the headings and subheadings to form an outline of the page. They help non-visual users, as well as the search engines, to understand how the page is organized, and make it easier for screen reader users to navigate. Headings should form an outline of the page (H1 = the main page heading, H2 = secondary headings, etc.).
  3. Apply ARIA landmarks. The new Accessible Rich Internet Applications (ARIA) W3C specification makes it possible to produce accessible interactive web applications. One easy entry into ARIA is landmark roles. Simply add an HTML feature for landmark roles (e.g., role=”navigation,” role=”main”), and users will be able to skip directly to that section of the page with a shortcut. You can check this site to learn how to use ARIA.
  4. Add labels to form fields. In HTML, use tooltips for non-visual users to know which labels or prompts are associated with form fields. Explicitly associate labels/prompts with the fields they indicate.
  5. Markup tables appropriately. Include markup that clearly relates table headers and the cells within their scope.
  6. Identify text language. Since some screen readers are multi-lingual, use markup to identify the default language of a document and of any text that deviates from the default.
  7. Use a color contrast checker. Make sure that the foreground and background have adequate contrast. Many free tools can help handle this.
  8. Provide visible indication for focus, especially for keyboard users. In CSS, use :hover to make the page come alive, responding to user’s mouse movements. For people who aren’t using a mouse, provide the same functionality using :focus.
  9. Use text, not text in picture formats. Use text instead of pictures of text and control its appearance using CSS. Pictures of text become blurry when enlarged, take longer to download, and are inefficient for the website author to edit.
  10. Think twice about the words you choose. Keep your content simple to read and understand. Often web authors use larger words and longer sentences than it really necessitates.
  11. Caption your videos. Captions provide benefits to all users. There are many free, easy-to-use tools available that support the process of transcribing and captioning videos. In this context, you may also consider getting help from speech recognition
  12. Describe your videos. For people who don’t or can’t use vision to grab the content of the videos, create a script that includes brief descriptions of important visual content, then provide that as a separate description track, either as timed text or recorded narrative.
  13. Choose media players that support accessibility. Ask questions like: Does this player support closed captions? Does it support description? Can it be operated with a mouse? Are buttons and controls accessible to keyboard-only or screen reader users?
  14. Choose a dropdown menu system that works for all users. Ask questions like: Can this menu be operated by keyboard alone? If so, is doing so efficient, or does it require dozens or hundreds of keystrokes?
  15. Choose JavaScript widgets that compatible with accessibility requirements. An accessible interactive widget is one that can be operated with the keyboard alone, uses ARIA to communicate with assistive technology (AT), and degrades gracefully for users who don’t have the latest AT.
  16. Choose Learning Management Systems (LMS) and Content Management Systems (CMS) that subordinate accessibility. Make sure that your organization’s LMS or CMS support accessibility. Make sure there are accessible themes, plug-ins, and modules available that will meet your needs.
  17. Test web pages with a keyboard. Try navigating the web page and controlling all its features using the tab key or arrow keys on a keyboard; don’t touch the mouse. This simple test is typically a good indicator of accessibility.
  18. Test pages with high contrast color schemes. All major operating systems have high contrast color schemes available. When it is enabled, make sure that all important page content is still visible.
  19. Test pages with assistive technologies. There are free screen readers and other AT available that can be used for testing. You don’t have to become an expert user, but simple tests with AT can provide valuable insights into whether certain features in a document might present accessibility problems.
  20. Test pages on mobile devices. Growing numbers of users, including users with disabilities, are accessing the web using phones, tablets, and other mobile devices. Test your website using several mobile devices.

The list above can be extended or collapsed by grouping the items related to each other but, regardless of item count, is based on only one basic principle: when creating, designing, or developing web applications, consider as many different human situations as possible.

Author: Çağrı Doğan, Accessible Products Consultant, Sestek

Author Hilal Bakanay

Senior Marketing Specialist, Sestek https://www.linkedin.com/in/hilalbakanay/

More posts by Hilal Bakanay