Forem: Sara Franjul

What is web accessibility adjustment and where to start? Start thinking about everybody.

Sara Franjul — Fri, 30 Oct 2020 11:57:51 +0000

I got an assignment to make accessibility adjustments to the existing project. My initial reaction was – oh, ok what exactly do I need to do? The response was vague. Well, you need to make a web page accessible for people with disabilities. Every kind of disability. Everybody needs an easy way to get to every information on the page.

''Oh, ok but tell me what I need to do exactly?'' ''...well start with having a toggle button for bigger font size.''

So, I started with that ...

Dark mode

Next step - the latest tech design trend - dark mode. After the initial implementation of the ability to change the font size on the web page, I implemented a dark mode option. My research leads to contrast levels. How readable are the color combinations on the web page and what is the best shade of black for the background?

And now we had this cool feature that is very trending, and more and more users choose to use the dark option in their apps. Of course, our main goal in this project was to help people with various vision and eye impairments.

Finally, after the initial review from the Association of Visually Impaired People, we received a proposal to make the following combinations: white on black, yellow on black, red on black, and green on black. So the final product in the widget has the following options:

The implementation was not very difficult. In Lloyds design, we use Vue.js and Nuxt.js. Therefore, the @nuxtjs/color-mode is a great option.

Were these adjustments enough? Most of the sites have only these two options, but then I started to google more deeply.

A11Y

A11Y is something that is appearing when you start to research web accessibility. The A11Y Project is a community-driven effort to make digital accessibility easier. This is the right thing to google when starting to explore web accessibility. It refers to a global movement to make web content and computer systems more accessible.

In the beginning, it was hard finding the right resources. It was a lot of information and still, I couldn’t find the answer to what exactly I should implement into this project.

I found out it is hard to please everybody's needs but you should at least try! The things that I learned and that I will implement (and fix) in the project are keyboard navigation adjustment, screen reader adjustment, letter-spacing change, font-size change, and of course, a readable font option.

Why is this important – who are the users?

“According to WHO, there are 285 million people worldwide who, due to some disability (i.e. they are suffering from low vision), cannot read all content on a website. 39 million of those people are blind and cannot access any of the content via sight.” https://www.sitepoint.com/how-many-users-need-accessible-websites/

I found out a lot about how many users can't get to the information as easily as they should, considering we are in the 21st century.

The adjustment you can make as a developer

The first thing to do is to test your page navigation with the TAB key. When I started testing it, I found out I was making a big mistake in all of the projects I have ever made.

For keyboard navigation, users need to have a focus on the element they are on. This focus is, of course, not very pretty and it ruins the design concept of the page. The first thing that I did, I disabled focus on buttons. In fact, it was even disabled in my default CSS that I put in every project.

This is nicely solved with a little script I found in a blog with the title that says it all “Removing that ugly: focus ring (and keeping it too)”. This little script enables focus if the user is using TAB keys and disabling focus if the user is using the mouse.

Ok, this is solved. Let’s move on ...

alt=""

The image alt attribute provides alternative information for an image. Just please write that alt, it is not just for the errors in screening, it is for the users that are using screen readers.

Also, a big mistake, if you think that an image is not important, then do not put just alt, you have to put alt="". That is something I have seen a lot. alt="" will tell the screen reader that it can skip that part.

Semantics, keyboard-enter

Structural, semantic HTML is the key starting point toward good accessibility practices. Use HTML Elements the way they’re intended. The best way is to research how the screen-reader user and the only-keyboard user moves on the page. Then you will understand why is that so important. For example, never use a div or span for a button when you could use a semantically meaningful button element.

If you have an element like SVG that is a call to action on your web page, then you have to give that element keyboard-enter function. In this way, a keyboard user can make that specific possible action.

Tabindex=”0”

When you already made some semantic mistakes or the design of the page makes it difficult to arrange everything in the right order, tabindex can be very helpful. If you give an element tabindex="0" it means that the element should be focusable in sequential keyboard navigation. If you don’t want to have a focus on the element, or you think for example the screen reader can skip this element because it will only confuse the flow of the page then use tabindex="-1".

Don’t use carousels

Good accessibility starts with the design. It is important to learn the fundamentals and principles behind accessible design. After your research, you will find that it is better not to use a carousel if you want to have the best accessible web page. But if I need to improve an existing project to be accessible you can put a carousel in the tabindex="-1" and explain the content in some other way.

aria-label

The aria-label attribute is used to define a string that labels the current element. The best example is:

When you have an element like this, a screen reader is not going to be able to read what exactly it represents, you give it an aria-label with an explanation. Without the aria-label in this example screen reader would read “button x”, on the other hand using it in this way would be read as “button close”. We can also use aria-roles to define the different roles of elements.

Skip navigation links

When users navigate through the page with a tab button it is good to help them with navigation. Skip links are very helpful, those are links that will be shown only to the keyboard users when they start going through the page. They will help in skipping all the links in the navigation and in going directly to the main part of that page. You can set navigation links for anything that you think will be useful for only-keyboard users.

Imagine that you have to go through all 20 links in navigation every time you enter a new subpage. Help and make skip navigation links. In my project, I have made two.

OpenDyslexic

Regarding readability, it is also important which fonts are being used. There are some widely used fonts that are more readable than others for people that have symptoms of dyslexia. OpenDyslexic is an open-sourced font created to increase the readability for readers with dyslexia.
The great implementation of the project is to give users the possibilities to read content with different fonts.

So what have I done and learned at the end?

Here you can see a final widget for the project I have been working on (Zadar Travel)

As you can see, I have implemented a toggle for changing the font to Open Dyslexic, 5 different color modes, two different font sizing, line height adjustment, letter-spacing adjustment, all preparation for screen readers users, and all adjustment for keyboard users.

It is hard to make your project perfect and accessible in the best way for people with all kinds of disabilities. But we need to try to put our best effort. I have seen that a lot of projects that have implemented web accessibility have made very small adjustments. Although this is a very positive thing, it will be more helpful for many users that we step up and do more of these adjustments.

The best way to see your project through different eyes is to test. Accessibility testing is best if you try to put yourself in somebody else's shoes. Turn on the screen reader and close your eyes, can you find all the information you need? Use only a keyboard and see if it is easy for you or you get frustrated.

So, this is my experience and first encounter with web accessibility implementation. It is definitely easier if you try to prepare everything at the design stage of the project but you can make changes and adjustments to every existing project.

The best thing I learned is that there are so many of us and why not make everything accessible for EVERYBODY.

All comments, suggestions, questions, and critiques are more than welcome. Let’s try to build a better future and increase the standards together.

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄 , and of course, share and comment on your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.

Also, don’t forget to follow us on Instagram and Facebook!

Want to find yourself in web development? Is it too late to start learning how to code?

Sara Franjul — Tue, 07 Jul 2020 06:26:10 +0000

This is a topic for all those who are wondering how hard it is to make that big step of changing profession and entering this exciting world of programming languages and endless lines of code.

This is written by a person that went through that process and wants to help everybody that currently doesn't have a clear picture of all the elements that are needed to make good and beautiful projects. In the end, maybe it will at least help you with the next google search or you will have something to send to that friend who is asking all the questions about web development.

Where to start? Learn about the process and find yourself in it.

UX/UI

First thing is to get familiar with all different fields there are out there. Analyze yourself, your best features, your interests, and knowledge about web design.

Do you get frustrated when you can’t find the link you are looking for because the web page isn't user friendly and you have an idea of what will work better? Do you know that is the job of a UX/UI designer?

Do you know what UX/UI is and what does it stands for? UX stands for user experience design, while UI stands for user interface design. It is the first step in creating a good web page/ mobile application. UX/UI designer makes the wireframes of all the screens there are going to be in your future project. He/she is there to think about user-friendly aspects, instincts, and goes deeper into the psychology of people. UX designer is going to solve user problems by thinking ahead.

In companies like lloyds digital, there is a UX/UI department that is focused on different approaches to solve user problems and choosing which one is that project going to use.

The user interface design is the next step and, to put it simply, it is adding color to the wireframes. You get to see what project is going to look like and it is a perfect stage to discuss with the client what changes need to be done. It is a lot simpler and cheaper than to do it in the coding stage.

In this stage of the project, the UX/UI designer will discuss his ideas with the frontend and backend developer to see what is possible in the estimated time and budget of the project. Backend developers will also make data modeling if needed.

Bringing a project to life.

The next step is in the hands of developers. Frontend developers, backend developers, mobile application developers, all kinds of developers. They all use different programs, program languages, frameworks, libraries, etc. that are helping them bring that design to life and fulfill their purpose.

In some projects, there is no need for backend developers. If the project is simple like a landing page for some small businesses, frontend developers can do it on their own. But on more complex web pages both backend and frontend developers are needed.

Frontend

Frontend developers develop as the name says, everything at the front of the web page, the things you see. They are there to implement web designs through coding languages. Frontend developers need to have a better knowledge of HTML, CSS, and JavaScript. HTML is there to make the construction of the pages and screens. You are defining the content of the pages. Then with the CSS, you are describing how the HTML elements should be displayed. In the end, you will use JavaScript to determine how the page and its elements should behave.

There are many ways to build user interfaces, some are a bit old school, some are new and trendy. It is important to stay up to date with all the new technologies and possibilities and to find the one that suits you the best. But do not forget from time to time to step out of your comfort zone and try building something the other way around.

In lloyds digital, we are using the Vue.js JavaScript framework that we find great for building user interfaces. Vue.js is very helpful but you must have a bit of knowledge in HTML, CSS, and JavaScript before you start learning it. We are also using Nuxt.js framework for the framework (Vue.js) but I am not going to go deeper into that right now.

The thing is, many libraries/frameworks are very helpful and easy to learn and you should explore all the options to see what you can use in your next project.

Backend

If we can say that frontend developers code how a website looks, backend developers code how a website works. They use server-side languages like PHP, Python, .Net, Java, C++, and also databases like MySQL and SQL Server. Backend developers will store and organize data and make data architecture. In lloyds digital our backend developers use the Laravel PHP framework for web applications.

Backend developers create the logic of the website and make sure all the data is there for frontend developers to control and show in a way that the designer imagined.

Choosing your path.

So, now when you learned who is involved in the process it is time for you to see what is best for you. Why do you want to learn how to code? Do you have an idea of the application you would like to make or you just want to look on that black displays all day long and know what those lines of code mean? Do you like Mr. Robot too much?

Are you a more logical or creative kind of person? Do you want to code or you want to design and draw how everything should look?
If you don’t want to choose colors for all the buttons or think about the user perspective of the page. You want to learn how everything works and why? It's time to explore the first steps for a backend developer.

If you want to think about cool animations on the page and try to put on screen everything that you (or designer) imagined. Explore steps for the frontend developer path.

Of course, you can always learn every aspect of the web development and there is even a name for those great people - they are called full-stack developers. But to become a good full-stack developer there are many years of learning and a lot of projects to complete.

You should always learn a bit from every field but have a clear focus and try to be the best in one field, and then the rest will follow.

So? Is it late?

If you have motivation and energy and you are not afraid of a lot of headaches on the way (believe me, there are going to be a lot of them), I do not see a reason why not to try.

There are so many great resources online that can teach you how to code for free or for very little money. You can get 30h of tutorials for less than $15. Go set yourself a little goal, make some projects so you can have something to show somebody that is going to be interested to mentor you, or even hire you. But be aware that they are going to do so only if they see the potential in you. You should show them what you have learned and how hard are you trying to learn more.

If you are afraid that you don’t have a proper degree, believe me, it is not going to matter if you have projects to show and you prove yourself as a fast learner. You can show them what you've learned all by yourself, without anybody’s help, and it matters.

Step up

Of course, going to another level can be really hard if you don't have any help. From my experience, great mentors make a difference. It will mean a lot for your learning process if you have somebody to ask for help after you have been stuck for a few hours on the same problem. Having someone who tells you a better way about how you could've made something or how you can have cleaner code, means the world.

Enjoy the process of learning. It is going to be hard. Stack Overflow will become your best friend. But if you are prepared, a year will pass and you will look back and see how much you have learned and how far you came. After one year, you will realize that sometimes you miss some basic JavaScript skill or that you have gone the harder way, and if you could do it all over again you would do it better. But that’s just the way it is.

So, let's sum everything up. Learn all the steps of the process, find yourself in it, set your little goals, and be proud when you achieve them, do not give up. If you have energy and will, it is not too late. Start learning how to code and before you know it you will be making some beautiful projects.