My take on how to improve the performance and accessibility of our website with React? (2) Accessibility
The topic of creating a more accessible internet environment has been raised a lot more in recent years, especially in web development. Making webpage available to read for the disabled people is almost a required skill for frontend engineers.
How could we improve the accessibility of our website?
Use semantice HTML tags and add AIRA attributes
By using HTML tags, the type of content that is highlighted would be readed out by the screen readers. These are build-in features that are interactive elements with keyboard support. For example, <a>, <button>,<input type="type">, <select> are the most used ones.
Disabled people could use Taband Shift + Tabnavigate through each element.
Basically, each element tag would have one or more of the following 4 properties:
- type. Describe its type such as a button, an input area.
- name. Describe its name or title. Mostly, its is the computed label. If there are no title or placeholder attribute, we could use AIRA attributes such as
aria-labelandaria-labelledby. - value. Usually associate with
<input>. What has the user typed in the textfield. - state. For example,
<select>can be expanded or collapsed.
Color and contrast accessibility
Unlike sight impaired people, some people may see things with low vision but have difficulty perceive colors. Color and contrast accessibility are another important part we need to consider adding to our website.
The WebAIM guidelines give the following standards for developers to follow:
Level A is a basic requirement for some users with disabilities to be able to access and use web content.
Level AA indicates overall accessibility and removal of significant barriers to accessing content.
Level AAA provides improvements and enhancements to web accessibility for some users with disabilities.
Typically, Level AA is the minimum recommendation with the following critria:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes
Text that is part of a logo or brand name has no contrast requirement.
These color and contrast ratio can be confusing since these are usually taking into account by the UI and UX engineers. But as front end developers, playing a role in the web development process, we should at least know that what they are and how they work.
After puting these standards into practice, I tested my personal portfolio website with Google Lighthouse, and here is my result.
If we look through the report, I did pretty well on the naming and labeling part, but still lack the experience in getting the correct contrast ratio correct. However, Google Lighthouse can guide me to improve the accessibility each time, and each time my accessibility score went up.
With these accessbility features, more people could access the endless web world. The developer community differ vastly from other working communities as it is friendly and inclusive, and it is one of the prior reason why I choose front end engineer as my career path. I hope that after reading this article, more developers would understand the importance of making our website more accessible to the disabled community.
Let’s connect:
Portfolio | Github | Medium| LinkedIn
