Notes about Web Accessibility – Part 3

Status: Work in progress.
Last update: June 24, 2015

Lesson 3: Never rely only on color or images!

Web pages shall be designed so that all the information conveyed with color is also available without it.

Bad use of color examples:

  • Mark required fields on a form with red color.
  • Refers to a button only by it’s color “Click on the green button to continue”
  • Include text content on an image

How to use color on text elements:

The default contrast ratio of text and background has to be at least 5:1

Large scale text can allow a contrast ratio of at least 3:1 (18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio).

Incidental text, (text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content) or logotypes has no minimum contrast requirement.

Tools to check contrast ratio:

Lesson 3.1: Design and build web pages in a way that users can change the size of the text

  • Allow text to flow naturally at larger sizes.
  • Avoid defining text size in explicit units, like pixels or points, use relative values instead.
  • Again, don’t text inside of images. Use text!
  • You can add an “Adjust font size widget”.
  • Avoid moving, scrolling or flashing text. It could be extremely difficult to read.

Notes about Web Accessibility- Part 2

Status: Work in progress.
Last update: June 18, 2015

Lesson 2: Navigation

Rule: A method shall be provide that permits the user to skip repetitive navigation links. Specially when navigation is repeated in all pages or included in a page template.

User goal: Navigate to relevant content.


  1. Include a links that allow the user to skip over the navigation and go straight to the main content in the page.
    These links can be visible or invisible for non-disable users.
    Example: “Jump to main content” or “Skip navigation”
  2. Use HTML Headings properly. Screen readers and some browsers allow users to move from heading to heading announcing the headings at the corresponding level (h1, h2, h3, h4, h5).

Some options of how to implement this:

  • Text link at the top (visible)
  • Text link positioned off the screen and move it in on focus
  • Use tiny image links (1x1px) of the same color of the background
  • Use text links of the same color of the background

Alert! Do not use display: none to hide navigation links. Screen readers respect display: none interpreting it to mean don’t display in any medium including speech.

TIPS: How to improve your navigation links (or any kind of links)

  1. Choose wording on your links so the user can understand what the link will do.
  2. Organize your content using true headings (h1, h2, h3, h4, h5) and lists.
  3. Make sure content is well structure and clearly written. Check spelling, grammar and readability.

Notes about Web Accessibility – Part 1

I’m studying about Accessibility standards and best practices for the web. I decided to share my notes here, I hope you find them useful and we can improve the web together.

Status: Work in progress.
Last update: June 17, 2015

Lesson 1: Add AlternativesText for Images. 

Alternative text  is a text equivalent for a non-text element on the page.

Add alt attribute to images and input type=”image”


<img src=”mydog.jg” alt=”My dog” />
<input alt=”Submit” src=”img-submitbutton.jpg” type=”image” />

When an image is not a link, and carries no information or is redundant, use null alternative text ( alt=”” ). Images with null alternative text will be ignore by screen readers.

The alternative text should be consistent, clear and, most important, useful.

Alt-text is required for all images.

  • If the image is active (link, button, area) the text alternative should describe the link’s function.
  • if the image is not active but conveys information, the text alternative conveys the same information.
  • if the image is redundant or conveys no information use alt=”” for the text alternative.
  • If the image is text then the alt-text should (usually) be the same as the text in the image.

TIPS: How to write better alternative text.

  1. Write the function of the image, not its description.
  2. If the image is a link, or it’s inside a link tag, do not reference to the fact that it is a link. Screen readers will mention this anyways.
  3. Avoid words like “picture of…”, “image of…” or “link to…”
  4. Use the fewest number of words necessary.
  5. Use CSS to create graphic custom bullets. If you can not use CSS use null or “bullet” as alternative text.
  6. Include the image related to a link inside the link tag. And use null as alternative text.
  7. Use a text-only browser or hide the images on your browser to review your alternative text. You can also use an screen reader to check the page before publishing it.

UXDi at General Assembly. Project One: Sketching a mobile app

I’m currently student at the User Experience Design immersive program at General Assembly San Francisco. This is a full-time 10 weeks program to learn the basics and best practices of user experience design.

What I’m enjoying the most of the program is being with a group of people that is passion about design and so excited to learn that it’s impossible not to be engaged.

Time flies! We already completed 2 weeks in the program and we are already working on our second project. I’ll get to that later when it’s ready for sharing.

For my first project I worked on a mobile app that intends to reduce the food wasting at home by keeping track of the perishable food in your kitchen and their expiration dates. It also help users to discover delicious new recipes.

Story board


After a couple of interviews with users and defining the problem I wanted to solved. I started creating user flows and sketching the main screens of the app.

User flow


First sketches


After some some drawings I was ready to build my first paper prototype. And I decided to make a video. Paper prototypes are fun to make. I think it’s a great resource, but it’s messy and it’s easy to lost track of changes. Anyway paper prototypes are very useful at the early stage of the design process to understand better the user flow.

Paper prototype video

After testing with paper prototypes, we moved to the screen using POP Prototyping on paper to create a tappable prototype. The biggest discovery on tappable prototypes it’s that even if you don’t test the app with any user, your sketches come to life and you can see the layout on the actual screen.

See my tappable prototype

POP paper prototype

We didn’t move forward with this project. But it was a great practice of user research and early stage prototyping. And the best part, it was really fun!

‘Labeling’, the worst enemy of makers

Moving from being a “business person” to become a “technology person” has been harsh. Specially because of prejudices we have about people and careers. If you think that business people don’t like technology or that marketing people can’t understand technology, let me tell you: you are wrong.

I studied Marketing and my whole career I have been working with technology, developing technology products, comparing technical specifications and analyzing marketing strategies for them.

Making the decision to learn how to code and start building by my own was really difficult. I remember when I started my first coding class and the instructor asked me why I was there. I was really shy and I felt I didn’t belong there. Coding was for engineers, so I replied nervously: “I’m here just to try to understand technology, I want to make a landing page, that’s it.” I used to feel I was not good enough or smart enough to become an developer.

I started learning how to code about a year ago. By this time last year I was having headaches trying to make a simple app with PHP and it seems like it was a very long time ago. I have learned a lot and I’m still a beginner, but I now know that I’m capable of building stuff. I know I’m not an engineer, but I’m a maker. So I’ll learn anything I need to make things happen.

Today, I still have doubts about what I will become at the end of this journey. Getting a job has been hard and I know finding the right position and the right company for me won’t be easy. But I’m happy and I’m learning new things everyday.

This is not the end of the story, I will continue searching for new challenges. But there are two things I have already learned in the past year and I want to share today.

The first one it’s that everyone can code. It doesn’t matter if you are a business person, a history major or an educator. Everyone can learn to code if they want to do it.

The second one, labels suck! I know it’s hard to stop labeling people by their career or education. But people shouldn’t discourage anyone to learn something new just because they are not from a technical career. So please stop doing it, specially to yourself. Throw away all the labels you have for yourself and go try something new. 

Lifetime memories, thanks and 580 days in California

I just watched a video about how being grateful makes you happy and it made me remember a lot of great memories. And I feel thankful and happy.

I learned that being grateful is important many years ago from a great mentor and friend, José Adolfo López Sampsom Félix, who I call just Josefo. And he taught us it’s important not only to feel it, but say it. It’s important to say thank you to all the people that gave you something big or small along your life.

Now, I don’t remember if I said “thanks” to him for this lesson and I think this is a good opportunity to do it. Almost 10 years later, thank you Josefo! Thanks for teaching us to be thankful among a lot of other things.

I can’t count all the people that have taught me something. I can’t count all the people that have given me their time and attention and love. But I want to send big thanks and big love to all of you. I hope sometime I can thank you personally all of you.

And please, people who is reading this… I really recommend you saying thanks the most you can. It feels right and it’s proved it helps you be happier! And it’s free.

Finally, just saying, I have been living in California 580 days (1 year and 7 months exactly). It’s quite a long time, right?