Awakening Awareness: Accessibility as a Humanitarian Call

Initially, I acknowledged that accessibility in the world of web development was not my primary concern. I was apathetic, focusing on technical and aesthetic aspects, without realizing the depth of meaning behind the design of a website.

However, life led me to explore design systems from major technology companies such as Microsoft, IBM, and Meta, which surprised me. Why do such large companies prioritize accessibility in their web design?

In this exploration journey, I was astonished by the fact that the population of people with disabilities in my homeland, Indonesia, reaches 22 million out of a total of 278 million inhabitants. This is not just a statistic but evidence that disabilities are no longer a minority but a significant part of society.

The biggest surprise came when I interacted with visually impaired individuals facing difficulties operating websites and applications, especially on mobile apps for payments. They experienced barriers due to developers not providing accurate labels or neglecting semantic HTML, making screen readers unable to accurately read messages.

Through this experience, my understanding of accessibility deepened. Accessibility is not just about assisting people with disabilities but also about creating a better experience for all.

I also recently learned that in the world of web development, the term "accessibility" is commonly abbreviated as A11y. The term "A11y" is derived from the word "accessibility," where the number "11" represents the omitted characters between the first and last letters, emphasizing the eleven letters within the word. This abbreviation is used to simplify communication and text, making it more concise and efficient, aligning with the principles of accessibility itself – ensuring information is clear and easily comprehensible for all.

I am convinced that supporting accessibility is answering the call of humanity. Every individual, without exception, may potentially face a disability over time. Now is the time to collectively build an inclusive foundation for our future.

The importance of accessibility in the digital world is demonstrated by the Web Content Accessibility Guidelines (WCAG) and the POUR principles (Perceivable, Operable, Understandable, Robust) from the World Wide Web Consortium (W3C). POUR is a practical guide summarizing four key principles:

1. Perceivable: Content must be presented in a way that can be perceived by all users, including those using assistive technologies like screen readers.

2. Operable: All interactive elements and navigation must be operable through various methods, including keyboard or other assistive devices.

3. Understandable: Information and operations must be clear and understandable for all users, including those with varying levels of comprehension.

4. Robust: Content must be accessible by various technologies, including those that may not exist currently.

As fellow developers, consider the following questions to initiate the implementation of POUR principles in your projects:

Perceivable

1. Have you provided alternative text ('alt text') for non-text content?
   Answer: Yes / No

2. Have you provided transcripts for audio and video?
   Answer: Yes / No

3. Have you provided text on videos (captions)?
   Answer: Yes / No

4. Is your content logically structured and navigable, readable by screen readers – including when stylesheets are disabled?
   Answer: Yes / No

5. Have you used proper markup for each feature (e.g., forms and data tables), ensuring correct content relationships are defined?
   Answer: Yes / No

6. Have you not relied on color as the only way to distinguish something?
   Answer: Yes / No

7. Can each feature be used when text size is increased to 200%, and content can flow into a single column when increased to 400%?
   Answer: Yes / No

8. Have you not placed important text within images so that people with disabilities can easily read it through a screen reader?
   Answer: Yes / No

9. Is your service responsive – for example, to user devices, page orientation, and their preferred font size?
   Answer: Yes / No

10. Does your service function well with assistive technologies – for instance, are important messages marked in a way that screen readers recognize as crucial?
    Answer: Yes / No

Operable

1. Have you ensured that everything functions for users who only use a keyboard?
   Answer: Yes / No

2. Does it allow users to play, pause, and stop moving content?
   Answer: Yes / No

3. Have you avoided using flashing or blinking content – or allowed users to disable animations?
   Answer: Yes / No

4. Have you provided a 'skip to content' link or equivalent?
   Answer: Yes / No

5. Have you used descriptive headings for pages and frames?
   Answer: Yes / No

6. Have you ensured users can navigate through content in a logical manner?
   Answer: Yes / No

7. Have you used descriptive links so users know where the link will take them or what content can be downloaded from the link?
   Answer: Yes / No

8. Have you used meaningful headings and labels, ensuring accessible labels match or are similar to the labels you use in the interface?
   Answer: Yes / No

9. Does it make it easy for keyboard users to see which item is currently focused – known as 'active focus'?
   Answer: Yes / No

10. Have you only used mouse events or dynamic interactions (like dragging or pulling) when absolutely necessary – or allowed users to disable them and interact with the interface in a different way?
    Answer: Yes / No

11. Does it make it easy for users to disable and change shortcut keys?
    Answer: Yes / No

12. Have you ensured interactive elements like buttons are large enough or separated far enough to facilitate accurate selection?
    Answer: Yes / No

Understandable

1. Is it made clear in which language the content is written, and is it indicated if there is a change in language?
   Answer: Yes / No

2. Have you ensured features look consistent and behave in a way that can be predicted, including help mechanisms?
   Answer: Yes / No

3. Have you ensured all form fields have visible and meaningful labels – and that they are properly marked?
   Answer: Yes / No

4. Does it make it easy for people to identify and correct errors in forms – you can find best practices for form design in the GOV.UK Design System?
   Answer: Yes / No

5. Does it make it easy for people to re-enter information they have previously entered into a form?
   Answer: Yes / No

6. Does it make it easy for people to log in without having to remember information or solve problems?
   Answer: Yes / No

Robust

1. Have you ensured your code informs assistive technologies about the purpose of each user interface component, the current state, and if there are changes?
   Answer: Yes / No

2. Have you ensured important status messages or modal dialogs are marked in a way that informs users of their presence and purpose, allowing interaction with their assistive technology?
   Answer: Yes / No

These questions are the starting point, guiding us toward a path of continuous improvement in making technology more accessible and inclusive for everyone.

By understanding and implementing the POUR principles, we can shape a digital world that is friendly and inclusive. Let us collectively face the future with empathy, welcoming the diversity of humanity in every step of technological development.