Usability and Accessibility

Even today, some people confuse the terms usability and accessibility. Others might think that having a usable website is accessible by default. But, there are differences in the terms usability and accessibility that need to be understood.

Accessibility is described by Jeremy J. Sydik as “designing content that is reachable by the largest number of users possible” (Sydik 2007) and also he states that accessibility means that the content should be “tailored” for a large range of people including those with physical, mental and sensory abilities (Sydik 2007). By those descriptions, I can say that accessibility is a dependency of Usability that ensures that people with disabilities can use the system. In my opinion, accessibility is providing content to people with disabilities while usability is providing content, not only to people with disabilities but also to those who do not have any type of physical limitations.

Ensuring Your Site is Accessible

Accessible websites also help people without disabilities to do their tasks more easily. A person could be watching a video in a very loud environment but by having subtitles available, he does not need the actual sound of the video to understand.

Having an accessible site is required by law in a lot of countries. Also, accessibility means business and can affect your bottom line. I already shared some of the reasons you must consider people with disabilities and there are steps to take to make your applications accessible. For example:

  • Provide “alt” in all images containing a brief description of the important images because users with screen readers or text-based browsers will not see the images but they will get a description of what the image is about (Galitz 2007).
  • Presenting the main content at the top because screen readers and text-only browsers will present the main content first to the users (Pilgrim 2002). This will benefit the user because the screen readers do not have to read the unnecessary content until it gets to the main one (Pilgrim 2002).
  • Having a “skip to content” link that allows users to go directly to the main content without having to navigate all the links in the header and navigation.
  • Make sure that there is a good contrast ratio between text and background so the text is readable by all audiences. Also, make the text large enough for the same reasons.
  • Try keeping decorative images outside of the content using the background CSS property. In case the image needs to be embedded in the page, use an empty string for the alt attribute alt=””. This keeps it hidden from the screen readers on purpose.
  • Use Responsive Web Design so the user interface adapts to the size of the device instead of having a fixed width and height that shrinks everything on the screen.
  • Validate your pages with the W3C HTML validator. This is a very old technique but you can find issues in your code that can be easily fixed and improve the usability of your site. Unfortunately, new developers are not doing the HTML validation as they should.
  • Use the right tag for the job. In the 2000s the term divitis was coined. This term refers to the use of div tags everywhere instead of using the proper HTML tag. For example, today you could use the header tag for the header of the website. However, there are still developers using div for most of the tags used on the page.
  • Use aria where needed. If you use nonsemantic elements, you must include aria roles and attributes to make the content accessible. For example, role=”banner” on divs is used as the header of a page. However, it is better to use semantically correct elements instead of the aria tags.
  • Ensure your pages are accessible and usable without a mouse. Also, make sure that the elements on the page are large enough for people to click on them. Some users might have had tremors that don’t let them click on elements on the page with ease (Gay, 2019).

There are more things that you can do and I suggest visiting the Web Accessibility Initiative site to learn more so you can apply this in your work.

References

  • Galitz, Wilbert O. The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. Indianapolis, Indiana: Wiley Publishing, 2007.
  • Gay, Greg. Introduction to Web Accessibility. Ryerson University, 2019.
  • Pilgrim, Mark. Dive Into Accessibility. USA: Mark Pilgrim, 2002.
  • Sydik, Jeremy J. Design Accessible Web Sites: Thirty-six Keys to Creating Content for All Audiences and Platforms. United States of America: Pragmatic Programmers, 2002.
Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 182