Web Accessibility for designers: An AMA session with Ire Aderinokun

Just for context, The Figma Africa “AMA Session” is a 60-minutes Q&A session similar to a fireside chat except this happens virtually on the Figma Africa Slack group and just like an everyday fireside chat we get to have fun and learn at the same time.

Here are the key highlights from the questions asked by different members of the community:

IRE: Hello everyone 😃.

My name is Ire Aderinokun and I’m a frontend developer and user interface designer based here in Lagos, Nigeria. I’m currently the COO and VP Engineering of BuyCoins, a cryptocurrency exchange for Africa.

In addition to my job, I love to teach (and learn) through writing technical articles on my blog (https://bitsofco.de) and giving talks in Nigeria and globally. The topics I am most passionate about are the intricacies of the core front-end technologies (HTML, CSS, JS) as well as topics such as progressive enhancement and the topic I’m here to discuss today, web accessibility!

To give a brief introduction to the topic, web accessibility is all about creating experiences that work for all kinds of people. It’s about building a website that is flexible and adequately takes into account how different people may choose or need to access your site. This includes everything from the devices people use to how they use it.

QUESTION — Really great having you with us Ire. What differentiates Web Accessibility from Web Usability and Inclusion? Because oftentimes they are used interchangeably?

IRE: So they are all words that are essentially talking about the same thing, but approaching it in different ways. The term “accessibility” has connotations with disability, so people may use the term “web accessibility” when they are specifically referring to making web experiences usable for people with disabilities. Web usability and inclusion, on the other hand, are a bit more general. All the terms are to do with making the web usable for all kinds of people.

QUESTION — In environments where the value of design isn’t fully understood and functionality is everything, how can web accessibility be introduced to existing products?

IRE: Great question! And this is definitely something I still struggle with myself, because it can be hard to make the case for accessibility when people are still focused on just “making the product work”.

The way I approach this is to explain and demonstrate the value of creating accessible experiences. One common misconception is that making an “accessible” website is just about making it work for screen readers, but it goes way beyond that. Creating an accessible website ultimately benefits everyone, which is why some people may prefer terms like “usable” or “inclusive”.

Taking Nigeria as an example, a significant portion of the population uses browsers like Opera Mini to visit websites. A lot of the things we need to do to make websites accessible will also be beneficial for those users. So it’s really about building sites that can work in as many places as possible, and not just looking at the top/latest browsers alone.

QUESTION — Which should we prioritize first web design or Web usability?

IRE: Effective web design needs to incorporate web usability! It’s not one or the other. Trying to design a website without paying attention to usability would be like trying to design a car without paying attention to how people drive!

QUESTION — Also to add to that, are there certain perspectives or user needs one has to understand or be aware of as a Designer in order to create web-accessible products?

IRE: Yes, and this is why user research is important! Seeing how your users actually interact with your site is key to understand how to make an accessible experience. However, you can also look at the research that other people have done to get an idea of the important things. For example, the Web Content Accessibility Guidelines offer a handbook that outlines all the important things you need to take into consideration to make an accessible website.

I summarized these guidelines in this blog post too 😄.

QUESTION — Welcome Ire, what are the major benefits of web usability?

IRE: The benefit is that your users will have a better experience on your website. If you’re building a business online, this is of course incredibly important. You don’t want to lose out on money you could have had because your website isn’t usable by a percentage of the population.

There’s a great blog post about this showing how Chipotle could be losing out one $4.4m because of an inaccessible HTML attribute. https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/

QUESTION — what area of web accessibility/inclusivity do you think hasn’t been addressed or been given enough attention?

IRE: I’m not sure I have a good answer to this. I think the topic of web accessibility/inclusivity as a whole doesn’t get enough attention or support. I don’t think I can pick out a specific area within the topic to call out though.

QUESTION — When u say usability are u referring to user research(UX)?

IRE: See my first question! But no, User Research != Web Usability

QUESTION — In a practical sense, if I’m about to start designing a new product, what steps should I take to ensure my product is fully accessible?

IRE: The first thing I would say is it’s almost impossible to make a product “100% accessible”. That’s like saying your website is “100% bug-free” 😅 😝 And it’s always better to make incremental improvements than to try and “fix everything” in one go.

What I would suggest is you start with some automated tools that can give you an idea of how your site is doing. One tool I really like is pa11y, which is a command-line tool that will take a given URL and give you a complete audit of the site. You can then even setup things like continuous integration with it to make sure that your site never goes below a certain threshold, the same way you would do for regular tests.

I wrote an article about how to get started using pa11y 👉 here

QUESTION — Where in the design process should checking for accessibility fall in and how exactly does one make sure their designs can be accessible to all?

IRE: Great question! Accessibility/Usability/etc should be incorporated from the very beginning. A lot of the problems people have with creating accessible websites is because they tend to finish designing, then try to add it at the end. Accessibility should be a topic of discussion from the initial stages of design.

QUESTION — How do you align web usability goals with user interface goals? This might be a myth and I want to be wrong, but it would seem focusing on creating accessible products greatly limit the flare and extra “sauce” a UI designer can build into a product’s interface and with the market competition today, products with the best UIs seem to outperform others in the same space?

IRE: Well, in my opinion, web accessibility should be more important to the business of the website than a purely design goal. I gave the example of an inaccessible website costing a company $4.4m in lost revenue, whereas that doesn’t happen if a website is missing a “flare” or “sauce”. For example, Reddit is one of the most popular sites in the world, and we can all agree it’s also one of the ugliest 😆

The way I see it, part of being a good designer is in being able to add that extra flare/sauce to a site while staying within the constraints of what makes it usable. Anyone can create something that looks nice alone, but the job of the designer is to create something beautiful AND usable.

QUESTION — Please do you have any materials on colors or how to use them properly because I’m having a huge problem with that.

IRE: If you’re referring to how to use colors in a way that is accessible, the Web Content Accessibility Guidelines have information on that. If you mean using colors in an aesthetically pleasing way, this is something you have to learn with practice. I don’t have any specific resources to share, but I think this is something you can learn through observation.

QUESTION — Hello Ire, Please how best do you think we can overcome our personal bias when it comes to making products accessible as possible?

IRE: It’ll always be difficult to overcome personal biases, but that is why user research is important. Let the people using your website show you what works or doesn’t work, so you’re relying on objective information.

QUESTION — Is there a possibility of covering all areas of accessibility on a single website or would there always be limitations?

IRE: As I mentioned, it’s almost impossible to be 100% accessible because that is like being 100% bug-free. It’s about trying to make constant improvements, not necessarily aiming for perfection.

QUESTION — One last question Ire, asides the WCAG checklist, are there other Frameworks and/or tools we can use in evaluating and testing how accessible our products are?

IRE: The WCAG is the only “official” document. I’m sure there are other resources, but none that I can reference right now. Also, usability is about looking at your specific users. So I would encourage you to find out what would make your site more accessible for your users. Just because it isn’t in the WCAG doesn’t mean it isn’t important!

QUESTION — What is the best practice in designing for the web in terms of modals? For example, I click a button on a website and a window pops up, and on that window another button that opens another modal on top of that modal window. Is this usable?

IRE: I have an 👉 article about that 😄.

QUESTION — One more Question, I’m sorry this is a bit off track here, but it’s regarding career goals, You were a UI Designer first.. then a Front-End Engineer.. which is very much like the career path I envisage for myself.

1. Do you think Designers should learn to code?
2. Can I double as a Designer and Engineer effectively
3. How does a designer make such a transition?

IRE: 1. It’s entirely up to you. They are different jobs, you can do both if you wish or not.

2. Yes

3. Just start learning! It’s no different to how anyone else learns how to code.

QUESTION — In terms of accessibility based products you have interacted with or used are there any that has done a good job in making their product globally accessible, and one can also learn from?

IRE: Oh okay, I think https://css-tricks.com/ is a good one.

Thank you for having me! ❤️

Join Figma Africa on SLACK

TWITTER: https://twitter.com/figmaafrica

INSTAGRAM: https://instagram.com/figmaafrica

MEETUP: https://www.meetup.com/figma-africa

DRIBBBLE: https://www.dribbble.com/figmaafrica