Web Accessibility♿: Code Detectors (or Linter)

Google Maps contribution stories
1

As part of our advocacy, #OneAccessibility, we will share information about differently able and profile one location with accessible trails. Look out every week for this enlightening post.

Hello all! How are we doing where we’re at? It’s that time again, and I particularly like this series as it touches both on a need in the community and a passion of mine. @Jesi made a good point in her article that “good contrast has to have sufficient contrast foreveryone to distinguish the content clearly.”

When we talk about web accessibility, we know that there are certain Web Content Accessibility Guidelines (WCAG) that are organized around four main principles, which state that content must be POUR: Perceivable, Operable, Understandable, and Robust. Knowing what you know now, is your content, service or product POUR? Not sure?

ChinonsoOnukwugha_1-1637683738362.png
ChinonsoOnukwugha_1-1637683738362.png931×391 57.7 KB

Fortunately for most of us, there are Code Detectors that make sure said principles are being met. Code detectors, also known as Lint or a linter, is an automated tool used to flag programming and structural errors. They analyze the website to detect if there are any violations to WCAG from the backend. Code detectors essentially enforce a certain standard for websites. These software programs are evaluation tools that help you determine if web content meets accessibility guidelines.

How Code Detectors Work

— Use eslint to pass the path of source code (for example)

— Plug the linter into custom web code like $ eslint src/**/*.js

— If there is an error, the output might look like this:

> eslint src/**/*.js

home/jeromewu/repos/app/src/App.js

10:61 error ‘undefinedVar’ is not defined no-undef

:heavy_multiplication_x: 1 problem (1 error, 0 warnings)

— Now you can work from the backend to fix any errors shown! You can also plug in various accessibility specifications depending on which you deem fit.

Some benefits that this type of tool can provide include:

— Codes that are consistent, more accessible, and sustainable for user experience.

— Maintaining a certain web standard across sites.

— Fewer errors with display and visuals.

Whether you integrate this custom code in your site or outsource the service, code detectors are effective and a step forward towards accessibility. What other software can you think of that detects errors in WCAG? Share below!

If you have a question, suggestion, or contribution, feel free to comment below. You can read last week’s roundup article here a**nd check the list of our other articles under "Accessibility Uncovered".

16 Likes
2

Thanks for this post @ChinonsoOnukwugha .

I believe it is difficult for a person that is not visually impaired (or blind) to give an opinion about that.

However in the past I suggested a few improvement in Connect itself. Our community has been designed to be fully accessible but a blind user had a lot of difficult in writing a post. For this reason I wrote these three ideas on her behalf, after a long conversation with her.

I would love to have some feedback from the expert, and see if I can improve my suggestions. Here below the links:

Just to give you another example, your photo is a black box for a blind, because there is no caption in there, so your photo would not be approved by an analysis tool. This is not a criticism, so please forgive me is i am giving this idea, but a simple example about how difficult is to apply a principle.

I’m tagging @KattyGeltmeyer for a more detailed feedback

2 Likes
3

The problem with such automated methods is that they won’t find really issues: they will check the code but not if a website or app is really accessible for the users with reading disabilities or not. check www.anysurfer.be (there’s an English version too) for more tips and info. But in fact the basics are simple: if the structure is uniform and distinctive, if you can find out where a link brings you to before clicking on it, … you took a big step forward. Be aware that people with reading disabilities are often viewing things in a fragmented way, they lack the total view of the website or page. You would encounter the same situation if you would visit a town or big city without having the possibility to check a good map before entering the city. You stand in the middle of the city without knowing you are in the center, you don’t know where you are, … As soon as you can lay your hands on a good map or can climb the nearby tower and have a view from above, you can orientate. Well, people with reading disabilities (not only the blind, visually impaired, … but also the dyslectic people) never could find such map or tower. So, they need a good structure, a good guide to help them find their way. I really hope some of my acquaintances who are accessibility experts also will react. But that’s the advise I can give: think about a good structure, make it clear where a link will lead you to, provide alt-tags for visual elements, provide textual content for fisual content.

3 Likes
4

Hi, @ChinonsoOnukwugha

Just curious, how is Google Maps (or Connect) in the term of Code Detectors/Linter? Would you please elaborate more?

Thanks for sharing

5

Thank you for the resources @ermest! I agree that it can be tricky to talk on a subject when you’re not affected and glad we’re bringing awareness to various topics surrounding accessibility. Researching and learning a lot! Oh no I appreciate it - re your idea suggestion and will check it out. Though code detectors/linters are a bit different than screen readers as they’re more of preventive tools than an assistive tech.

@KattyGeltmeyer Thanks for the insight and the advice! Even with automated tools, a human touch is still much needed aha.

You’re welcome @iorikun301. I can’t speak on that as that’s something more internal, but I know Google is fantastic with catering to accessibility needs.

1 Like
6

@ChinonsoOnukwugha : if you need testers that have accessibility needs for testing the accessibility of google’s products, don’t trust automated accessibility scanners like linters etc. but mail to accessible@googlegroups.com and ask for real people to test things out. Not every blind person has the same skills or needs, every person is different and the more testers you find (not only in the USA and Canada, but all over the world), the more feedback you will get that can be usefull. Hope this tip can be of any help.

1 Like
7

- The original message is redacted due to off topic -