The Do’s and Don’ts of Creating Accessible Websites

Ashish Jain October 20, 2020
With various anti-discriminatory laws coming into action globally, website accessibility is no longer a choice, rather mandatory! It is a prime legal requirement for web developers as the spotlight is now fixed on providing digital content and interfaces that can be used by all sections of society. “The one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives.”  ― Steve Krug, author and consultant on usability testing. But what is Accessibility? Why has it come to the forefront in recent years? According to Wikipedia, accessibility is defined as the design of products, devices, services, or environments for people with disabilities. In a world where digital content reigns supreme, accessibility means focusing on websites that include functionalities that are inclusive and supportive. Here’s a less-known fact –57 million Americans suffer from a disability that can impact how they interact with websites, online applications, and documents. This highlights the relevance of web accessibility in the current digital dependent world. Accessibility has to be driven right at the beginning of projects, and each team member needs to be committed to providing an inclusive user experience. Top-leadership buy-in is imperative to develop products that follow universal WCAG guidelines along with other mandatory compliances. Here are the top do’s and don’ts that can help organizations design webpages and applications that are truly accessible in design and functionality:

DO’s:

  • DOM Order to Match the Visual Order: DOM order is a term used to describe a meaningful reading sequence of a page that can aid people with disabilities. Web developers need to ensure that the order of digital content in source code is the same as the visual presentation. This will prevent any confusion for readers using assistive technologies and help everyone interact with the content in the same order.
  • Skip Links or Bypass Blocks: It is a good idea to add a ‘skip to the main content’ link in the DOM view as users can sequentially navigate to gain direct access to the home page content. This provides users a mechanism to bypass large blocks of repetitive digital content and get to the important part of your website by jumping menus.
  • Design Visible Focus For Keyboard Users: It is quite challenging for keyboard users to discern which element has the keyboard focus. Web designers should ensure clear and visible keyboard focus by creating borders or outlines around elements in use such as links, menus, or form fields.
  • Include Alt Text To Images: It is important to describe images that convey important information in digital content. Designers can also use a caption or title attribute in case of a long description – this will deliver a more inclusive experience for users with visual disabilities.
  • Usage of Landmarks: Including landmarks is a smart way to enhance the navigation of digital content. It facilitates assistive technology users to orient themselves on a web page and interact with various sections. HTML and WAI-ARIA landmarks notify users of the programmatic structure of the page for better usability.
  • Usage of meaningful Semantics: Provide appropriate role and semantics for any control on the page according to the functionality; i.e if user connect from one web resource to another, use links and if they stays on  the same page, use button as a role for it with descriptive and user friendly label which provide a better user experience.

DON’Ts

  • Ensure not to define landmarks on the page with the same label or with no label, as it can confuse readers.
  • The lack of visual indication of the skip to content links can lead to navigation problems and disrupt the user experience.
  • A common error is using a larger text size to show semantic markups’ usage – avoid this by keeping a size within the average range.
  • Avoid mixing the link functionality with button styling. Keep the design simple, and make buttons descriptive, for example: attach files.
  • Do not forget to add text for images to provide an inclusive design. If an image element contains important information, then the text should be added to the “alt” attribute.
  • Make sure not to use incorrect ARIA properties or attributes for roles that are not supported to improve user agents’ compatibility.
  These do’s and don’ts are general guidelines that should be followed to build digital resources for accessibility. We need to be mindful of not designing digital content that only caters to our immediate needs. Implement the best design practices and optimize coding processes to design for the future, with the correct moral and legal implications.    

Ashish Jain

Working as a Lead Consultant Accessibility with the Content Engineering team to make the product more accessible for the community.