But I'm not a designer...How to Code with Accessibility

But I'm not a designer...How to Code with Accessibility

You don't have to be a good designer, but you do need to be a good developer to have an accessible website. Here's how.

·

6 min read

Hello, my name is Sylvia. I am a self-taught software developer. I write articles in hopes to help others who might be struggling with similar things that I've struggled with. One of those things happened to be design. I think the hardest part about design is not your personal taste being put into question, but how you can keep the user in mind when creating. I realized this, unfortunately when my website's color and accent color failed to meet the accessibility requirements. Now there are no true "requirements" or "rules" on accessibility installed into languages, frameworks and it won't "break" your code, but there is a silent rule (common courtesy) that everyone teaches and follows. It is important that all websites be inclusive. We as a whole need to strive better to be more accessible to all members of society. When my own website failed this, I was embarrassed but at the same time, extremely determined to get it done right.

So, how do I get it right?

86.4% of home pages have low contrast text. Low contrast text, which falls below the WCAG 2 AA thresholds, is the most commonly-detected accessibility issue. (WebAIM, 2021)

design2.png

I am going to air out everything I did wrong because I think it's important for this article for me to be transparent with what I did wrong and why it's wrong. Also, key point, there's more ways to "fail" the accessibility requirements, but these are just where I happened to have failed.

  1. My images did not have an alt attribute.
  2. My text and color of my website had low contrast.
  3. The structure of my information was not optimally designed.

One way to fix my mistakes is to delve deep into research and learn how to do better. Here is a quick rundown on what to consider when writing your code that I learned. Another key point, this might be extremely obvious to some people, but to some it may not, so please keep that in mind.

In a study of the home pages for the top 1,000,000 web sites, over 51 million distinct accessibility errors were detected. This is an average of 51.4 errors per home page. (WebAIM, 2021)

Untitled design-7.png

The P.O.U.R Method.

Based on the WCAG 2.0 guidelines, it's best to follow these four principles.

  • P = Perceivable
  • O = Operable
  • U = Understandable
  • R = Robust

Perceivable:

To have a perceivable website means to have text alternatives for any non-text content. This typically includes time-based media (video and sound artworks, film, slides), controls (user input), specific sensory experiences (music, works of visual art), CAPTCHA, and decorations that are strictly put there for decor purposes that would need to be ignored by assistive technology.

We need to provide alternatives, have information and a structure that presents your website the way you want it to be perceived, and make sure everything is distinguishable (use of color, text contrast, contrast in general, background audio).

Operable:

To have an operable website means to make sure everything included in your website can be accessible via keyboard, have enough time for users to read and or use the content within, make it seizure friendly (no bright flashes), and provide ways to make sure that your website is easy to navigate.

Understandable:

To have an understandable website, I find it best to ask myself these questions every time I try to implement a code, function, design, etc. Can your content be read and understood? Can everything be easily identifiable, meaning does the functions within my code make sense to the user and can they identify the reasoning behind that function? When you have user input, can everyone understand it's purpose and usage?

And my favorite question to ask, can you catch an error? This can be it's own separate section but I will try to keep it simple. Do you have implementations for all errors possible? Do you have tools where you can help users avoid any errors but if they happen to, can you help them correct it? This, to me, is one of the most notable features to get familiar with because errors can be a security risk. For example, in one of the discord groups that I belong in, a member talked about their father who has ET (essential tremor), and how they'd like an application that allows their father to use their phone without the risk that comes with accidentally clicking yes, agree, allows to dial the right phone number, or input the right password, and overall decreases the risk of accidentally doing something they did not want to do. The way to decrease risk is to have submissions be reversible, have a confirmation before submission, and have an input error function that allows the user to check to see if their data that they put in is correctly filled.

Robust:

For a website to be considered robust, your website must be easily interpreted across a variety of user agents and assistive technologies. It must work across all browsers and not break down or be easily affected by all technologies a user might use or end up using. How do you do this? Mozilla has a wonderful guide, creating a certain criterion to make sure you have a robust website that can handle current and future user agents. I will give an overview in case you did not want to read their article, even though I highly recommend you do.

  • Parse your website successfully by having well-formed content. This gives users the ability to use any browsers and screen readers.

  • User interface components, especially customized components, should be interpreted and used as intended. Don't try to Willy Wonka your website and or think being clever will get you any brownie points. Be simple and straight-forward to give user's (all users) the best experience.

  • And lastly, allow assistive technology to be aware of new status messages. Status messages are when you inform the user of any changes in the content. For example, a page loading, information on all errors, progress updates, success and or results of an action, waiting state of any action, etc.

Untitled design-8.png

Overview:

I made my mistakes and I probably will continue to make more mistakes as I progress, but the key factor in making mistakes is to learn from them. Each time a mistake comes my way in programming, I will take it as a learning opportunity and I hope you do too. Because of this, I learned what it means to think beyond myself and to think for all, what it truly means to have an accessible website, and how badly we are failing at this. My website is still not up to par with WCAG guidelines and I am still learning and working on it, it may take time, but I understand its worth and I hope after reading this article, you do too.

Listed below is a list of resources that I used for this article and my website:

WCAG20 Accessibility Guidelines

Mozilla's Robust article

Statistics On Accessibility

Color Contrast Checker

Link to check if your website is accessible

Any and all misinformation, grammar, and spelling I apologize for. I continue to strive to bring forth my best and will try harder as I learn. Thank you.