<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Eystein Mack Alnæs</title>
    <description>The latest articles on DEV Community by Eystein Mack Alnæs (@eys).</description>
    <link>https://dev.to/eys</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F139580%2Fb9495564-c52a-4d88-932d-9c14f7588d28.JPG</url>
      <title>DEV Community: Eystein Mack Alnæs</title>
      <link>https://dev.to/eys</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/eys"/>
    <language>en</language>
    <item>
      <title>Write an awesome CV</title>
      <dc:creator>Eystein Mack Alnæs</dc:creator>
      <pubDate>Tue, 21 May 2019 00:00:00 +0000</pubDate>
      <link>https://dev.to/eys/write-an-awesome-cv-98o</link>
      <guid>https://dev.to/eys/write-an-awesome-cv-98o</guid>
      <description>&lt;p&gt;My CV in its previous iteration was decent enough. Out of my 8 last applications I got 4 interviews, which from what I gather is pretty good.&lt;/p&gt;

&lt;p&gt;But then I came across a job in an amazing organisation. For this I really wanted to do my very best applying.&lt;/p&gt;

&lt;p&gt;So I did a lot of research, both about how to write a CV in general, and the more culturally specific issues that might come up in this particular country, and the organisation itself of course. I wrote it on Google Docs so I could get feedback from family and others I trust, and after 2 weeks I had something I felt was a new level of good enough.&lt;/p&gt;

&lt;p&gt;Then the next week, out of the blue, my wife is told about an upcoming position that could be great for her, and us. However the deadline had passed, but they said she could apply that very day. A slightly stressful afternoon followed, but I got to make good use of what I'd learned working on my own CV, and realised I'd actually learned quite a bit!&lt;/p&gt;

&lt;p&gt;Based on my comments to her old CV, I've put together this overview of what's needed to make a good CV.&lt;/p&gt;

&lt;h2&gt;
  
  
  First impression
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Keep it short
&lt;/h3&gt;

&lt;p&gt;Recruiters must often read 100s of applications for a single position. That means they're not going to read through your CV word by word. Most likely they'll scan through it in less than 3 minutes. Come to think of it, this is the main reason for most of the tips that follows.&lt;/p&gt;

&lt;h4&gt;
  
  
  Aim for 2 pages
&lt;/h4&gt;

&lt;p&gt;Two pages, plus a 1 page cover letter should be enough. That means &lt;em&gt;kill your darlings!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Remove cruft that isn't relevant for this position. And yeah, that means potentially rewriting the CV for each new job. But after a few rounds you'll have a few different templates that don't need that much work to fit whatever you're applying for. I've got one for UX, one for Accessibility, and one for front-end dev.&lt;/p&gt;

&lt;h3&gt;
  
  
  Avoid the wall of text
&lt;/h3&gt;

&lt;p&gt;Keeping it short doesn't mean cram as much as possible into the 2 pages. A friend of mine, a recruiter in a different industry, told me it's not unusual to receive 7 pages(!) with wall to wall text and no margins. It doesn't matter how skilled you are at your job, nobody is ever going to read through that.&lt;/p&gt;

&lt;h4&gt;
  
  
  Everything is a list
&lt;/h4&gt;

&lt;p&gt;I'm a huge fan of lists, both in my HTML and at home, so adjusting my CV for that wasn't very hard.&lt;/p&gt;

&lt;p&gt;Bullet points makes it easier to scan the whole document. It might make some sections longer, as each bullet point can be less than one line-length. Which again makes the total length longer. And whops! -suddenly it's more than two pages again.&lt;/p&gt;

&lt;p&gt;So this is another challenge to shorten down the text even further, and be even more specific.&lt;/p&gt;

&lt;h3&gt;
  
  
  Design
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Use whitespace
&lt;/h4&gt;

&lt;p&gt;Whitespace is your friend. Have a generous line-height, spacious page margins, and just in case - more whitespace.&lt;/p&gt;

&lt;p&gt;Whitespace is luxury, and Good Design™️. It's enough to make your CV stand out from the pack. It makes it easier to read, or rather scannable, allowing the reader to quickly find (and come back to) the key information.&lt;/p&gt;

&lt;p&gt;And yes, this will also make the total length longer. You know the drill now: Keep on optimising that text!&lt;/p&gt;

&lt;p&gt;I let my CV overflow to 2.5 pages just in order to have enough whitespace. Remember I said to &lt;em&gt;aim&lt;/em&gt; for 2 pages. It's not a fixed rule. Better have it a little longer and much easier to read, than just short enough, but harder to read.&lt;/p&gt;

&lt;h4&gt;
  
  
  Consistent typography
&lt;/h4&gt;

&lt;p&gt;Make sure you use the same font-family, font-weight, font-size and line-height for all the body copy, as well as the the different sized header levels and all other repeating copy.&lt;/p&gt;

&lt;p&gt;This helps setting up the information architecture. The information architecture shows where a section starts and ends, how sections are related to each other, and divided within, which ultimately makes it easer to read and find key information.&lt;/p&gt;

&lt;h4&gt;
  
  
  Templates
&lt;/h4&gt;

&lt;p&gt;Ok, so you're not a graphic designer. There are tons of free and paid templates online, in various formats (psd, docx, indesign etc.). Grab one that you like, and you've saved yourself a lot of time.&lt;/p&gt;

&lt;p&gt;I avoid using anything with coloured backgrounds. There's a good chance the recruiter is printing out your CV, so there's no need to use all their ink, and it makes it harder to read.&lt;/p&gt;

&lt;h3&gt;
  
  
  Include keywords
&lt;/h3&gt;

&lt;p&gt;Use the words and language used in the job brief throughout the CV. Often companies use automatic scanners to filter the applications based on keywords before sending it on to a human.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Don't&lt;/strong&gt; spam your CV with every single keyword.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Do&lt;/strong&gt; keep it relevant to what you actually know. You'll have to answer questions about these things in the interview.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;If you're going to spend extra time on the copywriting of anything, this is it! This is your chance to make the all-important First Impression.&lt;/p&gt;

&lt;p&gt;Some recommend not having a intro, others do. Again, it also makes the total length longer. But this is our chance of grabbing someone's attention with only one or two short sentences.&lt;/p&gt;

&lt;p&gt;These sentences will have to show how exactly &lt;em&gt;you&lt;/em&gt; are especially well suited for this position and this company. Try to get across what you will do for the company. Why do they need exactly you?&lt;/p&gt;

&lt;p&gt;And while bigging yourself up, also rub their egos a bit. Find something exceptional about the company, and use that.&lt;/p&gt;

&lt;h3&gt;
  
  
  Show, don't tell
&lt;/h3&gt;

&lt;p&gt;Avoid fraises such as "I'm a passionate developer". Instead provide some evidence of your passion. Mention an award you won, pro-bono work you've done, or a particularly successful project you've worked on. A teaser is enough, and you can include more details under the relevant job history section.&lt;/p&gt;




&lt;p&gt;Oh yeah, and if you're making more than one point: Use a list ;-)&lt;/p&gt;

&lt;p&gt;Case in point:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Write one thing that you will do for Job Place. Why does Job Place need you?&lt;/li&gt;
&lt;li&gt;Be passionate/stoked about why you want to be at Job Place.&lt;/li&gt;
&lt;li&gt;Name one Big Project/Feather in your hat. This gives them a hook: &lt;strong&gt;One Thing to Remember&lt;/strong&gt;, even if they don’t read the rest. This is possibly the thing they’ll ask about in the interview as well. So make it relevant to the position.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Job history
&lt;/h2&gt;

&lt;p&gt;This is the main bulk of the CV. It's not enough to say "My responsibilities where database design, website management, cleaning dishes...". We need to include something about &lt;em&gt;how good we were&lt;/em&gt; at these tasks. Which means providing some kind of evidence of this.&lt;/p&gt;

&lt;p&gt;Start by briefly introducing the client or project's goal. List what and how you achieved that, and provide evidence of its success.&lt;/p&gt;

&lt;p&gt;If you're a developer like me, you might not have been that involved in those parts of projects, so a bit of research might be necessary.&lt;/p&gt;

&lt;p&gt;See if the company you worked for have some press releases, a blog post, or a case study of the project. They are good places to find this kind of information. E.g.“Visitors increased by 12% for the duration of the campaign.”&lt;/p&gt;

&lt;p&gt;For each position:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Change blocks of texts into bullet points.&lt;/li&gt;
&lt;li&gt;Have each bullet point name One Project or Client.&lt;/li&gt;
&lt;li&gt;Include outcomes and hard data for each job/project if possible.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Delete or compress old history
&lt;/h3&gt;

&lt;p&gt;If you've had a long career, or changed places often, the list of places you've worked might be very long.&lt;/p&gt;

&lt;p&gt;Delete those that aren't relevant to the job you're applying for now. Then compress those early, yet relevant, jobs under one sub-header, and only include the most impressive projects.  &lt;/p&gt;

&lt;p&gt;If you're new, there's still no point including those non-relevant jobs. I have a long series of jobs that aren't on my CV: security guard, mail carrier, parking inspector, shop assistant, data entry etc.&lt;/p&gt;

&lt;h3&gt;
  
  
  Name-dropping
&lt;/h3&gt;

&lt;p&gt;You can also do some name-dropping if you've worked for any large or impressive sounding clients.&lt;/p&gt;

&lt;p&gt;For example "I developed HTML templates" is ok, but "I developed templates used by MegaCorp in 24 countries" is better.&lt;/p&gt;

&lt;h2&gt;
  
  
  Skills
&lt;/h2&gt;

&lt;p&gt;Skills/Competencies/Tools/Methodologies... call it what you want. This can be a useful dumping ground for all those things that you want to include in your long paragraphs, but need to delete in order to keep it short.&lt;/p&gt;

&lt;p&gt;But of course, having an endless list of keywords listed as your skillset is probably not the best idea either. For my CV I first entered everything I could think of that was relevant, which ended up being 69 items. That seemed rather excessive, so after a lot of pruning I got it down to 24, divided into three categories.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bonus tips
&lt;/h2&gt;

&lt;p&gt;That sums up the writing of the CV itself. I still have couple other small tips that I learned along the way.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you have to apply through an online form, click through the form and enter dummy data to check what questions you may have to answer. I got caught out by this, and had to spend an extra day rewriting and writing.&lt;/li&gt;
&lt;li&gt;Check if the company has info about their recruiting process on the website. If they have a preferred way of receiving/reading/structuring CVs, you want to at least follow that baseline.&lt;/li&gt;
&lt;li&gt;Check if you have any connections in common on LinkedIn or Twitter that you can ask for insider tips before sending your application.&lt;/li&gt;
&lt;li&gt;Try to use something you have in common as a intro. This is hard. But going to meetups and not being afraid of handing out your business card helps. If you can't go to meetups, join slack groups. Lots of jobs gets posted by members there, and they are usually happy to provide feedback. Being able to write "so-and-so recomended I apply for this position" in your email or cover letter gives you a good step ahead.&lt;/li&gt;
&lt;li&gt;Use google docs or similar to get feedback from friends, family, and peers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Header photo by &lt;a href="https://unsplash.com/@sebastian_unrau"&gt;Sebastian Unrau&lt;/a&gt; on Unsplash.&lt;/p&gt;

</description>
      <category>resume</category>
      <category>cv</category>
      <category>jobs</category>
    </item>
    <item>
      <title>How to empower women in a digital world</title>
      <dc:creator>Eystein Mack Alnæs</dc:creator>
      <pubDate>Wed, 01 May 2019 00:00:00 +0000</pubDate>
      <link>https://dev.to/eys/how-to-empower-women-in-a-digital-world-500m</link>
      <guid>https://dev.to/eys/how-to-empower-women-in-a-digital-world-500m</guid>
      <description>&lt;p&gt;Last week I had the chance to visit the United Nations Office in Geneva for the first time. The reason for my visit was the "Closing the Gender Gap in the Digital World" event organised by ITU and Facebook Developer Circles.&lt;/p&gt;

&lt;p&gt;Michal Švácha, a Senior Software Engineer from Developer Circles Facebook posed a question for each of the panelists:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“What is one thing that men can do to help close the gap and make the tech world better for women?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The panelists all provided well thought out changes that we can make to combat inequality at home and at work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Say “I need to pick up my child”
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://twitter.com/gajdoczki"&gt;Natacha Gajdoczki&lt;/a&gt;, &lt;a href="https://www.womenindigitalswitzerland.com/"&gt;Women in Digital&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Take the lead to pick up the children from school. So when men and women are being hired, the employers will think that it’s the same.&lt;/p&gt;

&lt;p&gt;(Plus it gives your partner a bit of extra time, and you some extra quality time with your child. Bonus!)&lt;/p&gt;

&lt;h2&gt;
  
  
  Promote women in STEM by making them visible
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://twitter.com/m_ambrozowicz"&gt;Monika Ambrozowicz&lt;/a&gt;, &lt;a href="https://rightstech.org/"&gt;RightsTech Women&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Write about women and talk about women. Allow them to show up in data-sets and search results.&lt;/p&gt;

&lt;p&gt;Amazon used an AI for evaluating prospective employees, and the AI automatically thought women were less good, because that's what the (biased) dataset told it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sponsor a woman that I know is doing good
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://twitter.com/floo_bar"&gt;Flora Barriele&lt;/a&gt;, &lt;a href="https://gocarrots.org/"&gt;Geek Girls Carrots&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Tell your boss and people you know that you know this woman is doing amazing work and deserve a promotion.&lt;/p&gt;

&lt;h2&gt;
  
  
  Ask girls and women in my family if they want a career in ICT
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Dr. &lt;a href="https://twitter.com/hananeITU"&gt;Hanane Naciri&lt;/a&gt;, &lt;a href="https://www.itu.int"&gt;International Telecommunication Union&lt;/a&gt; (ITU)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Simply by talking about working in Information and Communications Technology (ICT) we convey the idea that it's perfectly normal for women to work there as well. Role models matter!&lt;/p&gt;

&lt;h2&gt;
  
  
  Combat gender stereotypes at all levels
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://twitter.com/hannahshort08"&gt;Hannah Short&lt;/a&gt;, Women in Technology, CERN&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Don’t just give “boy’s toys” (cars, machines etc.) to girls, but give typical “girl’s toys” to boys as well. Yes, boys like playing with dolls too!&lt;/p&gt;

&lt;p&gt;Don’t default to making the woman in a meeting taking the minutes, bringing coffee etc. Ask a man to do it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reflect on your own bias, and your own gender roles
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Dr. &lt;a href="https://twitter.com/electrobabe"&gt;Barbara Ondrisek&lt;/a&gt;, &lt;a href="https://womenandcode.org/"&gt;Woman &amp;amp;&amp;amp; Code&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Dr. Ondrisek provided not just one, but a whole list of suggestions:&lt;/p&gt;

&lt;h3&gt;
  
  
  For your children
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Ask what do you want to &lt;strong&gt;do&lt;/strong&gt; when you grow up? (Asking &lt;em&gt;do&lt;/em&gt;, not &lt;em&gt;be&lt;/em&gt;, can provide a great difference in the answers you get.)&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.theguardian.com/books/2011/may/06/gender-imbalance-children-s-literature"&gt;Expose kids to non-gender-conform stories/literature/movies.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.nytimes.com/2015/10/31/upshot/boys-and-girls-constrained-by-toys-and-costumes.html"&gt;Avoid gendered toys.&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What can men do?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Read books, watch films, listen to music &lt;em&gt;by women&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;Have a female &lt;em&gt;role model&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;Inform yourself about pink tax, menstruation, TSS, and the clitoris.&lt;/li&gt;
&lt;li&gt;Promote women.&lt;/li&gt;
&lt;li&gt;Be a &lt;em&gt;stay-at-home dad&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Interrupt men&lt;/em&gt; who interrupt women.&lt;/li&gt;
&lt;li&gt;Don’t laugh about &lt;em&gt;misogyn jokes&lt;/em&gt; of your friends.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Most technologies are developed by men, for men
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://twitter.com/moruganribieru"&gt;Morgan Rivière&lt;/a&gt;, AI Research Engineer at Facebook&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;When you are designing software, you design it in a certain way.&lt;/p&gt;

&lt;p&gt;A facial recognition AI had a +90% success rate identifying young white men, but single digit success rate for women of colour&lt;sup&gt;﹡&lt;/sup&gt;. There clearly is room for improvement.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;﹡ Unfortunately I didn't note down the exact numbers.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>feminism</category>
      <category>gender</category>
      <category>stem</category>
      <category>ict</category>
    </item>
    <item>
      <title>Why and how to use the alt attribute</title>
      <dc:creator>Eystein Mack Alnæs</dc:creator>
      <pubDate>Wed, 17 Apr 2019 10:04:04 +0000</pubDate>
      <link>https://dev.to/eys/why-and-how-to-use-the-alt-attribute-428j</link>
      <guid>https://dev.to/eys/why-and-how-to-use-the-alt-attribute-428j</guid>
      <description>&lt;p&gt;On July 18th, 1992 the first image was posted on the web. There's been a few more since then. But an incredibly high number of these images are not equally easy to see for everyone online.&lt;/p&gt;

&lt;p&gt;I’ve taken it for granted that everybody knew that this can be fixed by using the &lt;code&gt;alt&lt;/code&gt; attribute, but I realise that’s not the case.&lt;/p&gt;

&lt;h2&gt;
  
  
  What does the &lt;code&gt;alt&lt;/code&gt; attribute do?
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;alt&lt;/code&gt; attribute defines an alternative text description of the image, and allows us to pass the &lt;a href="https://www.w3.org/WAI/WCAG21/quickref/#non-text-content"&gt;WCAG success criteria for non-text content&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why? Who doesn’t see images?
&lt;/h2&gt;

&lt;p&gt;The most obvious, and often least cared about, are screen readers. “We don’t have any blind users” is a fraise I dread hearing. If I don’t have the chance to argue the point, I just quietly include the alt attribute on all images on all projects I work on. That's all it takes – one attribute. And voilà! The site is considerably more accessible :)&lt;/p&gt;

&lt;p&gt;Search engines also benefits from them, as they now get a textual description of the image, rather than relying on a dodgy AI to interpret it.&lt;/p&gt;

&lt;p&gt;Non-graphical browsers are becoming more common among the sighted as well, though we don’t think of them as browsers. Voice Assistants as they’re commonly known as, such as Google Assistant, Apple Siri, Amazon Echo, and whatever your next car has installed might not display images, but should be able to describe them.&lt;/p&gt;

&lt;p&gt;And last, but not least, the image might not load at all. This can happen for a number of reasons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The wrong URL was put in to start with. (CMS’ can be hard, ever seen a webpage with URLs pointing to &lt;code&gt;file:///&lt;/code&gt;?)&lt;/li&gt;
&lt;li&gt;The image file has been moved on the server, but the &lt;code&gt;src&lt;/code&gt; URL hasn’t been updated.&lt;/li&gt;
&lt;li&gt;The visitor is abroad, and have blocked images from loading when data-roaming.&lt;/li&gt;
&lt;li&gt;A visitor loses internet connection just as the train drives into a tunnel, managing to download the markup in time, but not load images (nor JavaScript or CSS, but that’s another story).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How to fix it!
&lt;/h2&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"file021477.jpg"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"A black and white kitten sleeping in a cardboard box"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;If I was to post an image of cute kitten, but not include the &lt;code&gt;alt&lt;/code&gt; description, the browser will just show the “broken image” icon, like the following image shows.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9zXwxaa8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/m3lag2uecjfaq4cbk932.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9zXwxaa8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/m3lag2uecjfaq4cbk932.png" alt="Broken image icon showing instead of missing image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But if I included a nice proper description, everybody can appreciate that there is a black and white kitten sleeping in a cardboard box.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--g90X1In8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/s2blqn2jhjbdvstis7eu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--g90X1In8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/s2blqn2jhjbdvstis7eu.png" alt="Text description showing in stead of missing image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Image concepts
&lt;/h3&gt;

&lt;p&gt;It gets a little bit tricky in terms of &lt;em&gt;what&lt;/em&gt; to put in the description, as there are many different types of images. Here’s a short list covering the most common ones, I’ll cover them in more detail below.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Informative images&lt;/li&gt;
&lt;li&gt;Decorative images&lt;/li&gt;
&lt;li&gt;Functional images&lt;/li&gt;
&lt;li&gt;Images of text&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Informative images
&lt;/h4&gt;

&lt;p&gt;Images that displays concepts and information, such as illustrations, photos, and pictures. The &lt;code&gt;alt&lt;/code&gt; text should convey the essential information in the image, like in the kitten example above.&lt;/p&gt;

&lt;h4&gt;
  
  
  Decorative images
&lt;/h4&gt;

&lt;p&gt;If an image is only decorative, set the attribute text to be empty&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"page-background-pattern.jpg"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;You could also consider including the image with CSS as a &lt;code&gt;background-image&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;NB: Don’t leave out the &lt;code&gt;alt&lt;/code&gt; attribute altogether if an image is used only for decorative purposes. The browser will assume an image without the attribute is an informative image.&lt;/p&gt;

&lt;h4&gt;
  
  
  Functional images
&lt;/h4&gt;

&lt;p&gt;Often images will be wrapped in a anchor link element (&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;) or a &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt;. The text alternative sfor the function should then be used in the description. For example if a printer icon is used on a button to print the page, the text should read “Print”, rather than “A monotone icon of a printer”.&lt;/p&gt;

&lt;h4&gt;
  
  
  Images of text
&lt;/h4&gt;

&lt;p&gt;Sometimes text is presented within an image. If that is the case, the text alternative should be the same as the words in the image.&lt;/p&gt;

&lt;h2&gt;
  
  
  Takeaways
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;alt&lt;/code&gt; attribute should be included on all images.&lt;/p&gt;

&lt;p&gt;It’s fine to leave an empty attribute value if the image is decorative. If the image adds information we must include a description.   &lt;/p&gt;

&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.w3.org/WAI/tutorials/images/"&gt;W3C WAI image tutorial&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"&gt;MDN web docs: The Image Embed element&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://musiclub.web.cern.ch/MusiClub/bands/cernettes/press_info.html"&gt;Les Horribles Cernettes&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>a11y</category>
      <category>alt</category>
      <category>html</category>
    </item>
  </channel>
</rss>
