Accessibility – More Important than Ever in Today’s Challenging Environment

Having an accessible web site is a necessary component of your digital presence. Being able to order online groceries, prescriptions, and other essential products can be a challenge for people with disabilities in the best of times. With the COVID-19 pandemic, the need for an inclusive, accessible presence becomes more critical. You need to be able to engage, communicate, and support those customers who can no longer visit a physical store.

Here are a few items you can check to see if your existing site is accessible. Many of these fixes are quite simple and can be implemented to your site with minimal disruption.

1. Alternative Text

• Make sure your images have alternative text. Alternative text provides textual context to images. Screen readers read the alternative text and announce it to the user. “Alt Text” allows the screen reader user to understand the context of the image on the page.
  • Work with your content team to determine the appropriate strategy.
  • From a mark-up perspective, all images must have an alt attribute. If the image does not provide context, is redundant or is a background image, use alt=””. The screen reader looks for the “alt tag” and reads the text. If it sees an empty tag, it will skip the image and move to the next item on the page.

2. Focus Indication

• When using a keyboard, a user should always know where they are on the page. Focus indication provides a visual reference of where current focus is on the page. Without a visual cue, it becomes extremely difficult and sometimes impossible for a user to know where they are.
  • The focus indicator must always be visible.
    • Browsers have default focus indication. Never turn this off.
    • You can enhance the focus indication to match your design and make it easier to see. When doing this:
      • Make sure proper color contrast ratios are used following Web Content Accessibility Guidelines
      • Adjust the size of the border outline
  • All actionable items must receive visible focus. Actionable items include buttons, links, checkboxes, and radio buttons.
  • The focus indicator should not fall on hidden content (for example, a closed dialog).

3. Keyboard

• The general rule is whatever you can do with a mouse, you should be able to do with a keyboard. Screen Reader users use a keyboard to navigate through a page. Also, individuals with motor and cognitive disabilities may find it difficult to use a mouse and prefer and/or require a keyboard. Make sure all actionable items with a mouse can also be accessed with a keyboard.
  • Focus must move through the page in a logical order. It typically follows the visual order of the page content left to right, top to bottom.
  • Non-actionable items should NOT receive focus (container elements, non-clickable text). If you cannot click it with a mouse, then it should not receive focus.
  • If custom widgets are being used or semantic mark-up language is not used, you may need to add a tabindex attribute to the element to receive focus
  • There should be no unexpected changes in focus when interacting with actionable items (e.g., focus should not reset to the top of the page randomly, or move unexpectedly)
  • Focus should remain in the dialog until the dialog is closed. Focus should not slip into the underlying page while the dialog is open.

4. Zoom

• People with certain low-vision disabilities will often increase the magnification of the page to be able to view the content. A common issue is the page will lose functionality or becomes harder to understand when magnification is increased.
  • Per Web Content Accessibility Guidelines, a page or screen must be functional and readable when magnified up to 200% of the original size. This is accomplished without the use of screen magnification tools.
  • Make sure zooming and scaling is not turned off.

These are just a few points to consider for your accessible site. At Perficient, we can provide accessibility insights at the design, development, build, and test phases. We have a perspective on catering to the needs of all your end-users during this pandemic. In addition, we can provide insights on the impact COVID-19 is having on your digital channels, and we can help you know what to do — now and tomorrow. Our perspectives on COVID-19 and its impact in our digital world can help, and we implore you to reach out if you need guidance.