DEV Community: Farhia Muse

Is your web app accessible for all?

Farhia Muse — Fri, 12 Apr 2019 18:42:51 +0000

Hi everyone! English is not my first language so please ignore any spelling or grammatical error. 😊

The web gives people opportunities to take part in a world full of information without discrimination, this assuming that it's implemented correctly.

Accessibility can have a big impact on the services you provide and the people using it. By including accessibility into your web development process, prerequisites are created so that as many people as possible can use your web and mobile applications.

That being said, it's easy for some not to prioritize web accessibility...

When talking about accessibly in web applications, we talk about a web that can be used by all..people with a wide range of disabilities such as blindness, deafness, low vision, limited movement, speech disabilities and photosensitivity.

Some backstory about web accessibility..

Web Content Accessibility Guidelines (WCAG) is an international web accessibility guideline that covers a wide range of topics that make up a more inclusive web. Last summer, WCAG 2.1 was released that focused more on accessibility in mobile applications. I strongly recommend you to read through these guidelines!

These guidelines can be broken down into three levels:

Level A should be your lowest ambition level. (These are the most important things to implement)
Level AA is the most basic level that has to be implemented into you web and mobile application. In EU, these are mandatory and should be combined with level A.
Level AAA is the highest ambition level. You should consider these guidelines.

Tips and tricks

Here are the things I think about when I develop and test the accessibility of an application:

Autoplaying sounds and videos

How many times have you entered a website and videos/sounds start playing automatically. Distracting right?

Autoplaying videos and sounds when a user enters your website can make it hard for people with attention and learning disabilities to focus.

Autoplaying sounds and videos

Don't forget to add a language attribute to your HTML document. This enables the screen reader to read text with the correct pronunciation.

<html lang="en">
......
</html>

Rank in headers

Make sure your headers are ranked in levels. When using a website with a screen recorder, people with vision impairment tend to skip through the page and use the headers as navigation to know where in the page they are located. Having unstructured and unranked headers makes it hard for people with vision impairment to get an overview of what's displayed on the webpage.

<h1>Heder 1</h1>
<h2>Heder 2</h2>
<h4>Heder 4</h4>

Clickable actions - Aria button role

When you want an element that looks or acts like a button but don't want to use the button element, make sure that the appropriate behavior of the element is read by the screen reader. You can make sure that the element is read out as a button in voice over mode by simply adding the role 'button' into the tag.

<div id="saveChanges" role="button" aria-pressed="false">Save changes</div>

Images

Avoid putting any important information in an image without making sure there is an alternative way for the voice-over to read what's in the image. Make sure you use the appropriate [alt] text for any image you upload to a webpage.

Links

Try to make it clear for someone using a screen reader where a link leads them to. Formulate the links with text and write the most important things first. Avoid giving too much distracting information in the link. The user must be able to understand what happens when clicking the link.

Is the link leading to an external website?

Is a new tab opening when you click the link?

Colors and color blindness

Think about the colors being used in your web application. Don't solely rely on colors to convey important information to the user. One example in error messages in input fields that are usually denoted by a red text that pops up when users input wrong data in a field. How easy is it to see the color contrast? Maybe try using icons together with the text when displaying error messages.

Try out Colorblind Web Page Filter and see what users with different color blindness see when they enter your website.

Bonus tips

Think about the abbreviations you use in your text, how does a screen reader handle your abbreviations? Is it easy to understand?
Offer different navigation methods to the user. Can a user get through and use your website by only using tab?
If your webpage has videos, do you offer any alternative for people with hearing loss?
Make sure you have enough contrast between text and background colors.
Is there any way for a person that doesn't use a mouse due to shakiness to solely use the keyboard to navigate through your site?

Good links and tools

ChromeVox - A screen reader chrome extension
Funkify - A chrome extension and a disability simulator for the web (let's you simulate dyslexia, cognition, vision loss, motor loss and color blindness)
W3 tutorials on web accessibility

Accessibility in web development is a very big topic. I covered some of the things I think about when I code and test. What are some things you do when you code with accessibility in mind? Comment down below! 😊

My second attempt at a hackathon! (and my first blog post ever!)

Farhia Muse — Sun, 07 Apr 2019 14:04:13 +0000

Hi everyone! English is not my first language so please ignore any spelling or grammatical error. 😊

For my first blog post ever, I thought it was the perfect time to talk about my experience doing hackathons!

Last year, I anxiously sent out an application to participate in Hack for Sweden, Swedens biggest annual hackathon. Hack for Swedens mission is to increase the awareness and use of open data and is organized by government agencies. Last year, I entered the hackathon solo and was match-made with a group of strangers. It turned out to be one of the best experiences ever, we even made it to the finale!

Fast-forward to this year, me and a friend of mine decided to apply together as a group. This year, Hack for Sweden was bigger than ever, doubling the number of hackers since last year.

Before the hackathon..

A couple of weeks before the hack, the challenges were released online. Each team had to pick 1 challenge and 1 problem to solve. Since this hackathon is organized by government agencies, we had to use at least 1 government open data source. During our brainstorming session, we looked at all the open data provided by swedish government agencies. The challenges consisted of 6 categories:

Mobility
Business Sector
Environment
Health Sector
Labor Market
Education & Science

After the brainstorming session, we went ahead with mobility. The problem we were solving was

How can we make personal transport safer and simpler with a clear sustainable perspective?

Arriving at the hackathon and the opening ceremony..

This year, Hack for Sweden was held at Stockholmsmässan. The registration was quick and simple. We got our badges printed and were provided with H4S t-shirts to wear during the hackathon. Inside the venue, we were provided with a hackers-kit consisting of earplugs, pens, papers and last but certainly not lear, strong wifi!

There we lots of inspiring talks in the opening cermony, but my favorite was
astropreneur Karin Nilsdotter. Karin talked about the future of space and all the new and exciting things that are happening in space technology.

40 hours of hacking and the pitch..

Once the countdown started, the hack was official on! Over 400 hackers sat in the venue and started coding. There were more girls this year than before, which I was very excited about! 👩‍💻

We were provided with breakfast, lunch and dinner as well as free and unlimited coffee and snacks!

We also met so many amazing and smart people that were ready to help if any team had questions.

40 hours later, the pitching started. Preparing for the pitch was nerve-racking. We had 3 minutes to pitch and 2 minutes to answer questions from the jury. We prepared a keynote presentation as well a demo of out solution. Our jury consisted of:

Sara Selldahl, Head of Nordics Marketing, Google Cloud
Annica Wallenbro Stojcevski, Business Group Lead Data & AI, Microsoft
Elias Arnestrand, Project Manager Mobility, Nordic Innovation House Silicon Valley
Fredrik Lemon, Senior Advisor IT, Swedish Transport Administration
Fredric Skargren, Digital Strategist, Swedish Transport Agency
Jesper Johansson, Sustainable Mobility Expert, Swedish Incubators and Science Parks

The pitch went really well! We kept it at under 3 minutes and answered the jurys questions.

The finale..

Our team made it to the finale and was nominated as the top three in our category!!! 🎉🎉 Although we did not win, we had so much fun!! 🎉🎉

Doing hackathons was always something I thought would be very scary. I didn't know if I was good enough, or I was creative enough. Making it to the finale twice showed me how I don't have to fit into the hackathon stereotype to be good at it.

I can just be me! 🧕🏾

My name is Farhia and I'm a junior developer from Stockholm, Sweden.

Follow me and twitter and connect with me!