tag:blogger.com,1999:blog-10092470480404571722024-03-13T22:10:24.221+01:00Web for alleOm tilgjengelighet på netttwidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.comBlogger13125tag:blogger.com,1999:blog-1009247048040457172.post-17246956100523719312017-03-08T10:12:00.000+01:002017-03-08T10:12:22.972+01:00Hurra for kvinner som koder!<div class="p1">
<br /></div>
<div class="p1">
<br /></div>
<div class="p2">
I anledning kvinnedagen er det lansert en topp 50 liste over kvinner i teknologi. Det er få av disse jeg kjenner, så jeg kan ta feil i mine antakelser, men inntrykket mitt er at disse først og fremst jobber med ledelse og design. Hvis du gir noen to sekunder på å si hva de tror folk i teknologibransjen gjør, så tror jeg få svarer design og ledelse. </div>
<div class="p1">
<br /></div>
<div class="p2">
Ikke at design og ledelse ikke er viktig, men hva hadde teknologibransjen vært uten de som faktisk sitter og koder? Jeg vil benytte dagen til å hylle de kvinner som har fullført sin IT-utdannelse uten å la seg friste inn i ledelse. Jeg kunne ha nevnt en haug fra min egen arbeidsplass, men fremhever heller noen som har gjort seg bemerket utenom min egen omgangskrets. </div>
<div class="p1">
<br /></div>
<h3>
Nicole Sullivan</h3>
<div class="p2">
Utviklet konseptet Object Oriented CSS (OOCSS), et rammeverk som blant annet har inspirert stilrammeverket til FINN.no. <a href="https://twitter.com/stubbornella" target="_blank">@stubbornella</a></div>
<div class="p1">
<br /></div>
<h3>
Lea Verou</h3>
<div class="p2">
Vanligvis er jeg skeptisk til live-koding på konferanser, men det glemmer jeg når jeg ser denne greske dama demonstrere sine CSS-triks på scenen. <a href="https://twitter.com/LeaVerou" target="_blank">@LeaVerou</a></div>
<div class="p1">
<br /></div>
<h3>
Sara Soueidan</h3>
<div class="p2">
Det finnes knapt en front end konferanse hvor denne libanesiske dama ikke står på scenen. Har ikke sett henne selv ennå, men etter å ha fulgt henne på Twitter har jeg forstått at hun bidrar med langt mer enn ambisjonene om mangfold på konferansene. <a href="https://twitter.com/SaraSoueidan" target="_blank">@SaraSoueidan</a></div>
<div class="p1">
<br /></div>
<h3>
Leonie Watson</h3>
<div class="p2">
Startet som noe så sjelden som en blind webdesigner. Jobber nå for The Paciello Group og er blant fyrtårnene innen universell utforming, i tillegg til å være involvert i utarbeidelsen av web-standarder hos W3C. <a href="https://twitter.com/LeonieWatson" target="_blank">@LeonieWatson</a></div>
<div class="p1">
<br /></div>
<h3>
Karianne Berg</h3>
<div class="p2">
Må jo ha en nordkvinne på listen også, og da vil jeg trekke frem dette fyrverkeriet av ei dame som er fast innslag på alle smidig-konferanser. <a href="https://twitter.com/karianneberg" target="_blank">@karianneberg</a></div>
<div class="p1">
<br /></div>
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545; min-height: 14.0px}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Neue'; color: #454545}
</style>
<br />
<div class="p2">
Listen er satt opp i full fart og røper nok også hvilken del av koden jeg selv jobber i. Bruk gjerne kommentarfeltet hvis du mener noen mangler i listen. </div>
twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-17801180650080319352016-11-23T08:14:00.001+01:002017-06-11T21:54:16.791+02:00Web analytics in service of accessibillity<div lang="en">
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-Y6mI3LjP99k/WT2YAzTEI9I/AAAAAAAATFI/nfFV0ua0P7sPEZ-dgGSrn09NWRaBvaTvQCLcB/s1600/analytics_zoom.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Screen shot from Blogger analytics, partially magnified" border="0" data-original-height="478" data-original-width="800" height="380" lang="en" src="https://4.bp.blogspot.com/-Y6mI3LjP99k/WT2YAzTEI9I/AAAAAAAATFI/nfFV0ua0P7sPEZ-dgGSrn09NWRaBvaTvQCLcB/s640/analytics_zoom.png" title="" width="640" /></a></td></tr>
<tr><td class="tr-caption" lang="en" style="text-align: center;">Web analytics tools are not ment to tell us anything about users with disabilities</td></tr>
</tbody></table>
<div lang="en">
<br />
Web analytics is a well known tool for better user experience. If we couldn't see how our users use our site, we would be quite lost in knowing how it works.<br />
<br /></div>
<div lang="en">
For a long time I have been playing with the idea of filtering users who use assistive technology to see how their behavior is compared to those who don't. Are they using more time on each page? Do they have the same amount of page views? Maybe we even can detect barriers by doing this. But assistive technologies don't make this easy because they don't identify themselves to the server. I find it strange that web analytics tools can tell me see how big screens the users have or which versions of Windows they are running, but I can't know if they actually read or hear the content.</div>
<div lang="en">
<br />
It's hard to believe that I am the first person to think about this, so I started googling web analytics and accessibility. What I found was a wall of scepticism about identifying people with disabilities. Many of the arguments are well-founded, but it seems like many people think they know the intentions without really listening. <a href="http://www.karlgroves.com/2013/05/13/can-we-track-how-many-users-with-disabilities-access-our-site/" target="_blank" title="">This article wraps it up quite well.</a> </div>
<div lang="en">
<br />
These are the arguments I find:<br />
<br /></div>
<h2 lang="en">
My disability is not your business</h2>
<div lang="en">
People don't want "dyslexia" written on their forehead. I can understand that. I don't want everyone to know every detail about me either. People also fear this information can be used for commercial purposes like advertising. I still see ads for cycling glasses everywhere after I bought a pair several months ago, so I get their point. People want to protect their privacy.</div>
<div lang="en">
<br />
But to be honest, I don't care about you. Not when I analyse web traffic. I care about you as a group, not as individuals. I want to find out how a representative group of users who use screen readers or high contrast mode handle our pages. If I discover that their conversion rate is lower than average, maybe there is an accessibility barrier somewhere.</div>
<div lang="en">
<br />
We are living in the age of Edward Snowden. Even if I swear that my intentions are pure, others may misuse the same information. But how new is this really? If you are blind, I suspect that Google's and Facebook's algorithms already have figured this out.<br />
<br /></div>
<h2 lang="en">
I don't want to be treated differently</h2>
<div lang="en">
Some web sites have separate "accessible pages" in addition to the fancy pages for "normal" people. Nobody wants to be sent here. They want to play on main pages with the cool kids. </div>
<div lang="en">
<br />
I don't like to separate the users either. I don't want twice as many pages to maintain. I'm a fan of universal design. One web to rule them all! <br />
<br /></div>
<h2 lang="en">
The numbers will be wrong anyway</h2>
When assistive technologies don't identify themselves to the servers, it gets difficult to track them in web analytics. It is possible with some creativity, but it takes different measures for different tools and some will possibly not be logged. Besides, detecting a screen reader does not necessarily mean that there is a blind person on the client. I have tested plenty of sites with VoiceOver, but I'm definitely not blind. I have also seen my uncle holding a magnifier in front of the screen. How can we detect that? We will never get the numbers right.<br />
<div lang="en">
<br />
But web analytics is not about exact numbers. It's about trends. We want to see if a change is for better or worse, how long the users stay on a page, how many pages they see per visit etc. And now I want to see if these data are different for users with disabilities. All I need is a representative group. It doesn't need to be complete, as long as the deviations in the data are noticeable. However, we need to keep in mind that we are logging specific events, not users with disabilities. We also need to treat the data as what they are.<br />
<br /></div>
<h2 lang="en">
I don't want to be counted</h2>
<div lang="en">
People are not always happy to be a part of some home made statistics of the users' abilities. When I advocate accessibility, I'm almost always asked how many blind users we have. I must admit that this was the first thing I was thinking when I got the idea of using web analytics for accessibility, but those numbers would not convince anyone anyway. As mentioned before: web analytics is not about counting, but analyzing users' behaviors.</div>
<div lang="en">
<br />
I doubt many people find anything suspicious in my intentions. If they do, there is a bigger problem with web analytics in general. The challenge is that the same identification also can be used for other, more dubious purposes. It's hard to make people count if they don't want to be counted. </div>
</div>
twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-34725260156560672432016-11-13T19:23:00.000+01:002016-11-16T00:46:23.698+01:00How do blind people use a camera?<div lang="en">
When I did some research prior to a speach I was holding with a colleague at <a href="http://mobileera.rocks/" target="_blank">Mobile Era Conference</a>, I came accross a cool film on <a href="http://www.apple.com/accessibility/" target="_blank" title="">Apple's accessibility page</a>. It simply shows a blind man taking a picture of a family with an iPhone, and VoiceOver told him how many people there were in the picture.<br />
<br />
This is not breaking new science. Most modern cameras have features that automaticly focuses on the faces. The new thing here is that someone got the brilliant idea of combining this with a screen reader. <br />
<br />
I had to test this, and it worked great! Simply turn on VoiceOver on your iPhone when you use the camera.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dy70WOXVV2NZn7iREGQWbJeYrZMsraIWJ68ps_hMnBLgfVnXgduno3rgvGtV_ZhvTuLhUT74fJCcFXrupN2Ng' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div>
<br /></div>
twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-42525872448644241702016-11-06T12:57:00.000+01:002016-11-06T12:57:31.132+01:00How to make your colleagues think accessibility<br />
<article lang="en"><br />
<h1 style="-webkit-text-size-adjust: 100%; box-sizing: inherit; color: #04253c; font-family: finnmain, Arial, Helvetica, sans-serif; font-size: 35px; font-weight: 300; line-height: 1.25; margin: 10px 20px; padding: 0px;">
</h1>
<div class="post-content r-margin" style="-webkit-text-size-adjust: 100%; box-sizing: inherit; color: #04253c; font-family: finnmain, Arial, Helvetica, sans-serif; font-size: 16px; margin: 10px 20px;">
<i> This post was originally published on <a href="http://tech.finn.no/2016/06/13/how-to-make-your-colleagues-think-accessibility/" target="_blank" title="">FINN.no's tech blog.</a></i></div>
<br />
<figure style="box-sizing: inherit; margin: 1em 40px;"><a href="https://lh3.googleusercontent.com/-CoHUBluIJZo/V2aF91EoFJI/AAAAAAAASWs/4BRtlp56zdk/s2048/Photo%25252020160619134556126.jpg" target="_blank"><img alt="Colleagues walking around with black painted goggles. " class="alignnone" height="329" id="blogsy-1466336845486.5105" src="https://lh3.googleusercontent.com/-CoHUBluIJZo/V2aF91EoFJI/AAAAAAAASWs/4BRtlp56zdk/s400/Photo%25252020160619134556126.jpg" width="400" /></a></figure><figure style="box-sizing: inherit; margin: 1em 40px;"><figcaption class="b1" style="box-sizing: inherit; font-size: 14px;">What to do when your colleagues don't make accessible products.</figcaption></figure><br />
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
When developing a website which affects the life of almost every person in Norway, accessibility should be a main priority. Norwegians who are not able to use FINN.no are unable to find a home without assistance. Accessibility considerations are too often an afterthought, and this can have profound effects.<br />
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
In the Spring of 2014, a small group of employees got together to find out how to make our colleagues care more about accessibility. After two years, the measures we think work best are workshops, user tests, and automatic validation.</div>
<h2 style="box-sizing: inherit; font-size: 25px; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
Workshops</h2>
<br />
<br />
<figure style="box-sizing: inherit; margin: 1em 40px;"><a href="https://lh3.googleusercontent.com/-9sN_IaoKUWU/V2aF-wkz1vI/AAAAAAAASW0/oOJXGKLOewk/s2048/Photo%25252020160619134556186.jpg" target="_blank"><img alt="Notes beeing put on the wall on a workshop" class="alignnone" height="300" id="blogsy-1466336845482.1675" src="https://lh3.googleusercontent.com/-9sN_IaoKUWU/V2aF-wkz1vI/AAAAAAAASW0/oOJXGKLOewk/s400/Photo%25252020160619134556186.jpg" width="400" /></a><figcaption class="b1" style="box-sizing: inherit; font-size: 14px;">On a workshop we reveal accessibility issues and discuss how to solve them.</figcaption></figure><br />
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
At our workshops we demonstrate how FINN.no works for people with disabilities before we let the team members test it the same way themselves. People find this a lot more inspiring than memorising WCAG 2.0 recommendations and running automatic validations locally.<br />
<h3>
How to test</h3>
<h4 style="box-sizing: inherit; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
Scaling Pages</h4>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
The simplest thing to test for is page scalability, both for fonts and for the entire page. Most desktop browsers make it possible to scale both fonts and page no matter how poorly coded the pages are, but on mobile phones it’s still quite common to lock page size to screen size. It must be possible to pinch zoom every page on mobile phones.</div>
<h4 style="box-sizing: inherit; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
The Straw Test</h4>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Another simple method is to pretend that you are looking at the page through a straw. This simulates how the page will appear for partially sighted people who either have a limited field of vision or need to magnify the page to read it. This reveals relevant elements spaced too far apart in a way that will make it difficult to navigate the page.</div>
<h4 style="box-sizing: inherit; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
Keyboard Navigation</h4>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Most pages are designed and coded with mouse click and touch screens in mind, and we easily forget about people with broken arms, motor disabilities, or other reasons for not being able to use a mouse. By navigating the page with only a keyboard, we test that focus on links and buttons appears in a logical order.</div>
<h4 style="box-sizing: inherit; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
High Contrast</h4>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Many partially sighted people are sensitive to bright light or struggle to see the contrasts on a page. They often invert the colors on the screen or switch to high contrast mode. Check that your pages are still readable in these modes. If you are using sprites or in other ways put relevant information in a background image, you may notice that this disappears on computers running Windows.</div>
<h4 style="box-sizing: inherit; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
Screen Reader</h4>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Blind people depend on a screen reader to use a computer. Most cell phones have a screen reader built in by default. On Apple devices this is called VoiceOver and on Android it’s called TalkBack. You can turn this on in the accessibility settings. It takes some practice to use a screen reader, but when you handle it, you are likely to uncover a huge number of accessibility flaws.</div>
<br />
<br />
<figure style="box-sizing: inherit; margin: 1em 40px;"><a href="https://lh3.googleusercontent.com/-He4gTY8z5dE/V2aGTM4utsI/AAAAAAAASW8/ZjfyFvaUQ6w/s2048/Photo%25252020160619134720304.jpg" target="_blank"><img alt="Looking at a page through a straw" class="alignnone" height="300" id="blogsy-1466336845454.363" src="https://lh3.googleusercontent.com/-He4gTY8z5dE/V2aGTM4utsI/AAAAAAAASW8/ZjfyFvaUQ6w/s400/Photo%25252020160619134720304.jpg" width="400" /></a><figcaption class="b1" style="box-sizing: inherit; font-size: 14px;">Devopers actually think accessibility testing is fun (but you don't really have to use a straw).</figcaption></figure><br />
<h2 style="box-sizing: inherit; font-size: 25px; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
User Tests</h2>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
By testing our site during the workshops, we uncover the most obvious bugs. However, we cannot know how it actually feels for users with disabilities to use our site. That’s why we run user tests with blind and partially sighted users. We have people who run user tests at FINN, but because we don’t know what it’s like to be blind, we don’t always understand why they react as they do. Therefore, we need some external expertise to assist us. We are cooperating with Blindeforbundet (The National Association of Blind and Partially sighted, NABP) who run these tests for us.</div>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Designers, developers, and product managers watch the tests, which are also videotaped for further analysis. After the tests, NABP hands over the videotapes with a commented report and recommended improvements.</div>
<h2 style="box-sizing: inherit; font-size: 25px; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
Automatic Validation</h2>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Our next step is to include WCAG validation as a part of our automated tests. There are several tools offering this, including Pa11y and Tenon.io. We are likely to use Pa11y in our first effort, because it’s free.</div>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Automatic validation gives an overview over detectable WCAG violations, and may work as a KPI for accessibility awareness or even break builds with new violations. If all developers and designers pay attention to this, we hopefully will stop deploying code with new WCAG violations.</div>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Read more about <a href="http://pa11y.org/" style="box-sizing: inherit; color: #0077ee; text-decoration: none !important;" target="_blank">Pa11y</a> and <a href="https://tenon.io/" style="box-sizing: inherit; color: #0077ee; text-decoration: none !important;" target="_blank">Tenon.io</a>.</div>
<h2 style="box-sizing: inherit; font-size: 25px; font-weight: 300; line-height: 1.25; margin: 10px 0px; padding: 0px;">
Is It Working?</h2>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Accessibility used to be looked on as some kind of geeky pedantry for something that otherwise works fine. This attitude has changed over the past few years, and people take complaints about accessibility more seriously. In an internal speech I once mentioned that many of our pages weren’t scaleable on mobile. The next day, three teams had fixed that. A blind user complained that our iPhone app didn’t work with VoiceOver. This was fixed before the next release (several hours later). Another user complained that our banner ads caused epileptic seizure. This resulted in a huge debate on our forums, but sadly we still haven’t found a perfect way to use banners in a way that make both users and advertisers happy.</div>
<div style="box-sizing: inherit; margin-bottom: 20px; margin-top: 10px; padding: 0px;">
Whatever we do, the most effective way to get our accessibility flaws fixed is feedback from the users. We are not perfect yet, and we don’t always find accessible solutions that make everyone satisfied. Knowing that a user is unable to use FINN.no is far more convincing to our managers than being told that they have a WCAG violation. So please, if you have disabilities that make FINN.no hard to use, contact our service desk. It takes only one complaint to put your problem on our agenda.</div>
</div>
</div>
</article>twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-51930008097754188942016-03-29T17:15:00.001+02:002016-03-30T08:41:39.944+02:00Referat fra CSUN Conference<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-dD-NroHMqoQ/VvqcE7z5HwI/AAAAAAAASSU/tMCwpObQHJc/s2048/Photo%25252020160329171523207.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-dD-NroHMqoQ/VvqcE7z5HwI/AAAAAAAASSU/tMCwpObQHJc/s400/Photo%25252020160329171523207.jpg" id="blogsy-1459320088582.4597" class="aligncenter" alt="Inngang til en sal banneret til konferansen rundt inngangen. " width="400" height="300"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Inngangen til utstillingshallen. </td></tr></tbody></table><p>I skrivende stund sitter jeg på flyet hjem fra San Diego, hvor jeg har deltatt på verdens største konferanse om teknologi for mennesker med nedsatt funksjonsevne, The International Conference for Technology and People with Disabilities, heretter kalt CSUN, som forvirrende nok er forkortelsen for universitetet som arrangerer konferansen, California State University Northridge. "Alle" de store var med og sponset konferansen, inkludert, men ikke utelukkende, Google, Adobe, Microsoft og Amazon. </p><p>En del av årsaken til jeg deltok var at jeg også holdt et foredrag på konferansen sammen med FINN-kollega Lotte Johansen, og en konsulent fra Vision2Access, Stein Erik Skotkjerra, som har assistert oss mye gjennom Blindeforbundets prosjekt Teknologi for alle. Tema for foredraget vårt var hvordan vi sammen har jobbet for å bygge en sterkere kultur for universell utforming i FINN. Mottakelsen av foredraget var veldig god, da det var mange som kjente seg igjen i situasjonen og var veldig interesserte i å prøve samme fremgangsmåte selv. </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-UWQFasteZNo/VvqcGuUUIjI/AAAAAAAASSY/NBpJ3pYeI6A/s2048/Photo%25252020160329171523261.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-UWQFasteZNo/VvqcGuUUIjI/AAAAAAAASSY/NBpJ3pYeI6A/s400/Photo%25252020160329171523261.jpg" id="blogsy-1459320088653.9526" class="aligncenter" alt="Fra en utstillingshall med mange boder. " width="400" height="300"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Fra utstillingshallen. </td></tr></tbody></table><p>Dette var kun ett av nesten 500 foredrag i løpet av tre dager, så jeg har ikke først og fremst tenkt å skrive så mye om hva vi kom dit for å si, men heller hva vi lærte. Allerede på flyet fra London til San Diego kunne vi se at de var mange som var på vei til samme konferanse. Blinde mennesker med stokk er enkle å få øye på. </p><p>Ikke minst på Manchester Grand Hyatt Hotell, hvor konferansen holdes, kunne man føle seg omringet av blinde mennesker. Man må se hvor man går for å ikke snuble i stokkene deres. Kommer de fra flere kanter samtidig kan man fort føle seg omringet. Det er kanskje ikke pent å le av dette, men når Stein Erik, som selv er blind, med glimt i øyet kunne fortelle om at omvisningen for blinde på hotellet stadig måtte avbrytes av leteaksjoner etter folk som hadde kommet bort fra flokken og gått seg vil, så må vi kunne smile litt av dette vi også. </p><p>Konferansen ble gjennomført på en litt annen måte enn jeg er vant til. Foruten en egentlig ganske intetsigende Keynote kvelden før selve konferansen brøt løs, var det lite som ellers samlet alle deltakerne. Det var ingen felles lunsj under konferansen, og verst av alt, det var knapt kaffe å oppdrive uten å stå i lang kø i hotellets butikk eller løpe til nærmeste Starbucks. Dagene i forveien hadde det vært noen workshops for de som hadde betalt ekstra for å være med på dette, og dagen etter var det atter noen workshops som skulle løse noen spesifikke problemstillinger. Om kveldene ble det arrangert tweetup, <em>accessible karaoke</em> og andre nettverkingstiltak. </p><p>Ved hotellets lobby var det en stor utstillingshall hvor bransjen kunne presentere det nyeste av teknologiske hjelpemidler. Det sies at også Stevie Wonder tok turen innom denne messen for å shoppe. Selv fikk jeg med meg et elektrisk massasjeapparat som jeg håper jeg får til å virke like bra som jeg fikk den demonstrert. </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-D1mc0t5RfY8/VvqcHh687nI/AAAAAAAASSc/jgA_iZ8ousg/s1136/Photo%25252020160329171523333.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-D1mc0t5RfY8/VvqcHh687nI/AAAAAAAASSc/jgA_iZ8ousg/s400/Photo%25252020160329171523333.jpg" id="blogsy-1459320088674.084" class="aligncenter" alt="Twittermelding og bilde om at Stevie Wonder besøkte konferansen. " width="225" height="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Celebert besøk skaper begeistring </td></tr></tbody></table><p>Men hovedingrediensen var de nesten 500 foredragene som det var 15 til 20 av hver time. Det var med andre ord litt av en jobb å finne ut hvilke foredrag man ville høre. Jeg skal ikke skrive om noen foredrag enkeltvis, men noen trender pekte seg ut. Mest interessant er det kanskje at det jobbes med en utvidelse av WCAG 2.0 med tanke på mobiltelefoner og andre trykkskjermer. Dette var også en del av budskapet til konferansens store rockestjerner: Karl Groves og Billy Gregory, populært kalt The Viking and The Lumberjack. Deres foredrag handlet egentlig om alt som er galt med WCAG, men at det ikke finnes noen bedre løsning heller. Noe av problemet var at det nye tillegget skal være valgfritt, ikke obligatorisk. </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-VJlZXVqnu9I/VvqcI_co2MI/AAAAAAAASSg/-XyredAXMQc/s2048/Photo%25252020160329171523383.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-VJlZXVqnu9I/VvqcI_co2MI/AAAAAAAASSg/-XyredAXMQc/s400/Photo%25252020160329171523383.jpg" id="blogsy-1459320088647.987" class="aligncenter" alt="Bilde som viser en papirbunk like høy som CN Tower i Toronto, Canada. " width="400" height="300"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">The Viking and The Lumberjack illustrerer hvor mye tekst det er i WCAG 2.0. </td></tr></tbody></table><p>Vikingen Karl Groves lanserte også et nytt uttrykk: <em>extreme accessibility</em>. Dette låner prinsippene fra <em>extreme programming</em>, men med fokus på tilgjengelighet. Flere pratet om at de hadde laget universelt utformede mediaspillere, deriblant BBC. Andre hadde laget javascript eller add-ons som "reparer" sider som ikke er tilgjengelige. Atter andre hadde bygget WCAG validering inn i testrammeverket sitt, blant annet med Pa11y, som vi håper vi snart kommer i gang med også hos FINN. Og så var det noen foredrag som overlappet vårt eget, nemlig hvordan man kan bygge en kultur for tilgjengelighet innad i organisasjonen. Stein Erik hadde dessuten enda et et foredrag i tillegg til vårt, som handlet om at brukertester blir mer effektive hvis man passer på å inkludere testpersoner med nedsatt funksjonsevne. </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/--HdVHDbQNkU/VvqcJlDHOCI/AAAAAAAASSk/CsYB2MnZ2nw/s1024/Photo%25252020160329171523413.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/--HdVHDbQNkU/VvqcJlDHOCI/AAAAAAAASSk/CsYB2MnZ2nw/s400/Photo%25252020160329171523413.jpg" id="blogsy-1459320088632.2498" class="aligncenter" alt="Bilde av Lotte Johansen, Tom Widerøe og Stein Erik Skotkjerra, meget smilende. " width="400" height="225"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Fornøyde etter et vellykket foredrag. </td></tr></tbody></table><p>Foredragholderne er for det meste folk som oss, som jobber med utvikling eller har en dedikert rolle som <em>accessibillity manager </em>eller liknende. Det betyr at nivået på foredragsholderne varierer fra vårt nivå (kanskje enda lavere) til alfahanner som The Viking and The Lumberjack, som tilsynelatende holder foredrag like ofte som Bruce Spingsteen holder konserter. </p><p>Hvis dette alene ikke er nok til å friste deg til å delta på CSUN neste år, så kan det også nevnes at San Diego er en veldig fin by. Dette kan du lese om i <a href="http://reisenotater.blogspot.no/search/label/san%20diego?menu=sandiego" target="_self" title="">reisebloggen</a> min. </p><p> </p>twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-36809933322447882322015-06-07T20:41:00.001+02:002015-06-07T20:54:30.408+02:00With a little pelp to my friends<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-dAWc9-kIstg/VXSQEG5xMfI/AAAAAAAALRw/SVdHpnZYSH0/s1525/Photo%25252020150607204001298.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-dAWc9-kIstg/VXSQEG5xMfI/AAAAAAAALRw/SVdHpnZYSH0/s400/Photo%25252020150607204001298.jpg" id="blogsy-1433703033406.9934" class="aligncenter" alt="Utsnitt av temasiden til pelp.no." width="400" height="348"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">På pelp.no kan du få tips om alt.</td></tr></tbody></table><p>En gruppe med tidligere kolleger sluttet i FINN.no for å realisere de drømmer som ikke fikk oppfylt på gamlejobben. Resultatet ble pelp.no, hvor folk skal kunne spørre andre brukere om forbukertips eller dele sin visdom med andre. Jeg var en av de heldige inviterte som har fått leke meg her mens de har testet konseptet, men nå er produktet endelig sluppet fritt for alle.</p><p>Alle? La oss se på det. La oss se om pelp er universelt utformet. Jeg skal gjøre de samme testene på pelp.no som vi i uu-gruppa har fått de ulike teamene i finn.no til å gjøre på sine egne sider. Jeg skal teste om sidene er skalerbare, om det er enkelt å finne frem når sidene er forstørret, om det er mulig å finne frem med høykontrast-modus, om de kan navigeres med bare tastaturet, og om de funker med en skjermleser. Resultatet skal jeg publisere i all offentlighet til alle mine 86 månedlige brukere.</p><p>Denne testen er ingen skuddsikker garanti for at sidene oppfyller alle kravene i tilgjengelighetsloven. Det kan også hende at jeg henger meg opp i ting som ikke bryter med kravene. Men det er en nyttig test for å få en pekepinn på hvordan sidene oppleves for folk med ulike funksjonsnedsettelser.</p><h2>Skalerbarhet</h2><p>Den første testen avdekker den mest irriterende feilen, men den er kjapp å utføre og, hvis man full kontroll over eget rammeverk, enkel å fikse. Dette trenger man kun å teste på mobil fordi nettlesere på pc'er tvinger gjennom skalering av alle sider uansett. På mobiltelefoner derimot, er det mulig å låse sidens høyde og bredde til skjermen (noe som dessverre også er gjort på Bloggers mobilmaler, og dermed også denne bloggen). Dermed får man ingen hjelp hvis man synes teksten på siden er for liten.</p><p>Testen er såre enkel. Finn frem mobilen, gå inn på pelp.no og prøv å pinch-zoome siden for å gjøre den større. På pelp funker dette som en drøm. Bestått.</p><p> </p><h2>Sugerørstesten</h2><p>Svaksynte mennesker må zoome mye for å kunne lese innholdet, og da må det også være mulig å finne frem med sterk zoom. Testen har fått navn etter det å se på sidene gjennom et sugerør, slik at man bare ser en liten del av siden av gangen. Det er flere måter å gjøre denne testen på. Man kan f.eks. lage et kikkehull gjennom knyttneven eller se gjennom et hull i et papirark. Det mest realistiske er å bruke operativsystemenes forstørringsverktøy, for det er det de svaksynte bruker. Selv foretrekker jeg å zoome maksimalt på mobilen.</p><p>Det er lov å jukse litt når man gjør denne testen, for det gjør de svaksynte også. Man kan zoome ut for å orientere seg om hvor elementene ligger, men så må man zoome inn igjen for å lese teksten. Denne testen er likevel en av de vanskeligste å tilfredsstille, særlig hvis man ønsker å opprettholde vennskapet med designeren.</p><p> Jeg synes Pelp kommer greit unna her også. Det er ikke til å unngå at man må zoome seg ut i blant for å orientere seg når man bruker skjermens fulle bredde, men de elementene som hører sammen er organisert vertikalt, slik at det er lett å gjøre det man skal selv om man kun ser en liten del av skjermen. De minimalistiske sidene viser deg ikke mer informasjon enn du trenger, og krever heller ikke mer informasjon enn de må ha. Da unngår de også å gjøre det vanskelig for seg selv når de skal lage et tilgjengelig design. Bestått. </p><p> </p><h2> Høykontrast</h2><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-DMHx1smVrjM/VXSQM2NbZAI/AAAAAAAALR4/ZZ80kg9aQPw/s2048/Photo%25252020150607204001389.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-DMHx1smVrjM/VXSQM2NbZAI/AAAAAAAALR4/ZZ80kg9aQPw/s400/Photo%25252020150607204001389.jpg" id="blogsy-1433703033411.6091" class="aligncenter" alt="2 bilder av temasiden til pelp.no. En vanlig og en med inverterte farger." width="400" height="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Bildebakgrunnen gjør det vanskelig å lese teksten, særlig med inverterte farger.</td></tr></tbody></table><p>Svaksynte er ofte ømfintlige for lys, noe som gjør hvit bakgrunn slitsomt. For andre kan det rett og slett være enklere å se på siden med andre farger, f.eks. når man sitter med iPad'en ute i sola. Det er flere typer høykontrastfiltre man kan bruke på ulike operativsystemer. Det enkleste, synes jeg, er å invertere fargene.</p><p>Invertering av farger på pelp.no gir et par avsløringer. Det første som slår en er at det som normalt er lysegrå tekst på hvit bakgrunn plutselig blir veldig vanskelig å lese. Kontrasten ser ikke ut til å bli mindre med inverterte farger enn normale, men kontrasten er ikke veldig stor i utgangspunktet. Om kontrastene er i tråd med wcag-kravene har jeg ikke sjekket. </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-4gnUbYjhXWk/VXSQTILIjKI/AAAAAAAALSA/m4brHOjjbcY/s2048/Photo%25252020150607204001459.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-4gnUbYjhXWk/VXSQTILIjKI/AAAAAAAALSA/m4brHOjjbcY/s400/Photo%25252020150607204001459.jpg" id="blogsy-1433703033483.0657" class="aligncenter" alt="Skjermbilde av en dialog på pelp i inverterte farger. Noe av teksten er lilla på sort bakgrunn." width="233" height="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Deler av teksten blir vanskelig å lese med inverterte farger.</td></tr></tbody></table><p> </p><p>I store trekk er det fortsatt enkelt å finne frem. De har gjennomgående valgt mørk tekst på lys bakgrunn, og da unngår de å legge ut feller for seg selv. Unntaket er den siden hvor man velger kategorier. Her er kategoriene skrevet med hvit tekst over et bilde. Dette er alltid en risiko å ta, for da kan teksten fort bli vanskelig å lese. Jeg har ingen alvorlige problemer med å lese kategoriene med normale farger, men når jeg inverterer dem blir det vanskeligere.</p><p>Bakgrunnsbildene på temasiden fikk meg til å sjekke denne siden ekstra nøye. Når man bruker Internet Explorer i høykontrastmodus på en windows-pc blir nemlig alle bakgrunnsbilder fjernet, noe som kan skape problemer for mange sider. Men pelp slipper unna her også. Bildene er ikke implementert med background-taggen, men som vanlige bilder med tekst som er stylet til å plassere seg over bildet. Dermed vises fortsatt bildene, og fordi tekstbakgrunnen gjøres svart, blir den likevel enklere å lese enn uten høykontrastmodus.</p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-XVsFZrMdVpQ/VXSQatKmFZI/AAAAAAAALSI/eqa_Ph7JiD8/s2048/Photo%25252020150607204001517.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-XVsFZrMdVpQ/VXSQatKmFZI/AAAAAAAALSI/eqa_Ph7JiD8/s400/Photo%25252020150607204001517.jpg" id="blogsy-1433703033432.9165" class="aligncenter" alt="Skjermbilder av temasiden i Internet Explorer i vanlig modus og med høykontrastmodus. Der tekst ligger over et bilde bli bakgrunnen svart i høykontrastmodus." width="500" height="500"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Vanlig modus og høykontrast i Internet Explorer. Bildene i høykontrast blir kanskje ikke pene, men det er mulig å lese teksten. </td></tr></tbody></table><p> </p><p>Jeg gir pelp.no bestått også i høykontrast, men ville gjort en ny vurdering av den lysegrå teksten. Og med tekst over bildene på temasiden gjør de det litt vanskelig for seg selv. Jeg vil anbefale at de legger et halvtransperent lag mellom tekst og bilde for å unngå at teksten "blander seg" med bildet. Ved å gjøre teksten større og/eller fetere vil den også bli enklere å lese.</p><p> </p><h2><span style="line-height: 32.76000213623047px;">Tastenavigering</span></h2><p>Når man skal lagre noe i Word eller et annet ikke web-basert program bruker man normalt ctrl+s når man først har lært seg kombinasjonen. Tilsvarende gjelder når man veksler mellom programmer, blar seg nedover dokumenter eller tilsvarende. Man lar musa ligge når man kan, så slipper man musearm i tillegg til at det går raskere. Pussig nok har man ikke de samme forventningene med websider, muligens fordi fordi for mange utviklere har klusset det til.</p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/-cG3g22PLUlg/VXSQbkDAgII/AAAAAAAALSQ/P7ySoBfEI-4/s486/Photo%25252020150607204001531.jpg" target="_blank" style=" "><img src="https://lh3.googleusercontent.com/-cG3g22PLUlg/VXSQbkDAgII/AAAAAAAALSQ/P7ySoBfEI-4/s400/Photo%25252020150607204001531.jpg" id="blogsy-1433703033475.242" class="aligncenter" alt="Utsnitt av headeren, hvor et av valgene er markert." width="486" height="232"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Her ser vi at snarveien til spørsmålene er i fokus, men fargen er ganske lik bakgrunnsfargene på deler av siden.</td></tr></tbody></table><p><span style="line-height: 32.76000213623047px;"></span></p><p> </p><p>Når jeg begynner å navigere med tastaturet på forsiden til pelp.no begynner det bra. Logoen, som er det naturlige startpunktet på denne siden, markeres etter første trykk på tab. Men når jeg trykker for å komme til neste link forvinner markøren. Først 5 trykk senere dukker den opp igjen ved snarveien til spørsmålene. Det samme gjentar seg når jeg kommer til "Tema jeg følger". De har lagt en blå ramme rundt klikkbare elementer som er i fokus, men har ikke vært konsekvente i bruken. Markeringen burde også vært i en farge som ikke så lett går i ett med bakgrunnsfargene der hvor bakgrunnen er en annen enn hvit.</p><p>Også på temasiden får jeg problemer. På temaene med bildebakgrunn blir det veldig vanskelig å se markeringen, og selv om du aner hvilket tema markøren er på er det vanskelig å vite om du klikker på linken til temaet eller på følg-ikonet.</p><p>For å konkludere med det positive først: Tab-rekkefølgen på sidene er bra. De har ikke gjort noen grep for å kunne hoppe over headinger og komme raskere til innholdet, men på en såpass minimalistisk side savnes ikke dette. Det viktigste er at markøren hopper fra link til link i en forutsigbar rekkefølge, noe som også vitner om en ryddig markup bak siden. Men fargen på markøren bør de revurdere, samt sørge for at samtlige klikkbare elementer markeres.</p><p> </p><h2>Skjermleser</h2><p>Svaksynte og blinde er helt avhengige av skjermlesere for å kunne lese en nettside. Her fant jeg frem telefon og headsett, og skrudde på VoiceOver.</p><p>Uffda, her snubler Pelp allerede på startstreken. Når jeg trykker på logoen sier damen i telefonen hva pelp.no er, men de har visst glemt å skrive navnet på tjenesten i alt-teksten sin.</p><p>Bortsett fra dette har jeg egentlig veldig lite problemer. Damen i telefonen leser opp den teksten som er relevant og unngår elementer som ikke er relevante, som f.eks. pilen ved siden av "Still spørsmål"-linken. Det største problemet er kanskje når knappen "Se alle" leses opp før overskriften "Nyeste spørsmål". Den motsatte rekkefølgen hadde vært mer naturlig. En annen ting de bør tenke over er når alt-teksten til bilder kan være blank, særlig på temasiden. Navnene på temaene leses opp veldig ofte når man skal velge et tema. Bestått likevel.</p><p> </p><h2>Konklusjon</h2><p>Folk med nedsatt funksjonevne vil ha det mye enklere på pelp.no enn på de fleste andre sider. Om universell utforming er noe de har hatt spesielt fokus på vet jeg ikke, men jeg kjenner dem godt nok til å vite at de vet hva det er. Ved å lage sidene minimalistiske og kun fokusere på hva brukerne faktisk trenger har de gjort det enkelt for seg selv å lage en universelt utformet tjeneste. De har unngått feil som krever store, strukturelle endringer. De problemene jeg fant, som for det meste har å gjøre med fargevalg, bør det ikke ta mye tid å rette opp.</p><p> </p><p> </p>twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-32844412006101892522015-02-19T11:28:00.000+01:002015-02-19T11:28:34.216+01:00Det kunne vært vanskeligere<div class="separator" style="clear: both; text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Bilde av en rullestolvennlig trapp på St. Olavs Hospital." height="236" src="http://doga.no/images/_articleImage/Innovasjonsprisen-St-Olavs-Hospital-foto-Trond-Heggem.jpg" style="margin-left: auto; margin-right: auto;" title="" width="400" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">St. Olavs Hospital har klart å få en rullestolvennlig trapp til å se stilig ut. (Foto: Trond-Heggem, sakset fra doga.no)</td></tr>
</tbody></table>
</div>
<div style="margin-left: 1em; margin-right: 1em;">
<br /></div>
<br />
<br />
Jeg var på en prisutdeling i går. Innovasjonsprisen for universell utforming. Vi hadde dristet oss til å melde på m.finn.no. Vi vant ikke, men fikk såkalt "hederlig omtale", hvilket i praksis vil bety andreplass i vår kategori.<br />
Vinneren i kategorien informasjons- og interaksjonsdesign gikk til Skatteetaten. De hadde gjennomført et spennende prosjekt spesielt rettet mot folk med kognitive utfordringer, en målgruppe som har få WCAG 2.0 krav som taler deres sak, men som likevel kanskje er den største gruppen av dem alle. Det finnes mange synonymer for <i>kognitivt utfordret, </i>og få av dem bør komme på trykk, men det kan vel oppsummeres med folk som har konsentrasjons- og læringsvansker. Og det å gjøre skattereglene enkle å forstå for absolutt alle, er ingen liten utfordring. Vi kan finne oss i å bli slått av Skatteetaten. (men neste år...)<br />
<br />
Hovedprisen gikk til St. Olavs Hospital. Etter beskrivelsen av prosjektet skulle man tro de hadde gjort halve Trondheim sentrum universelt utformet. Planleggingen hadde startet midt på nittitallet, og ombyggingen er nettopp ferdig. Fra starten av hadde universell utforming vært et overordnet krav fra oppdragsgiver og vært en rød tråd gjennom alle ledd av prosjektet.<br />
<br />
La gå at det ikke er noen bombe at et sykehus bør være universelt utformet, men her har de tenkt på det i absolutt alle områder. De har til og med sørget for utsikt over Nidarosdomen og tilgang til Nidelva med rullestol.<br />
<br />
Det er da det slår meg hvor enkelt det egentlig er å lage universelt utformede nettløsninger. Vi trenger ikke noen overordnede krav fra ledelsen eller lang tids planlegging for at en nettside skal kunne brukes av en skjermleser eller navigeres med tastaturet. Hvilken som helst utvikler kan gjøre den kodeendringen som trengs og få det ut på nettet samme dag.<br />
<br />
Likevel er det så vanskelig. Hvorfor? Det er jo de stadige små kampene. Diskusjonen med sjefene for å få den ekstra tiden hvis det ikke lar seg fikse i en håndvending. Diskusjonen med designere for å gjøre den tilsynelatende overflødige OK-knappen synlig. Kampen med seg selv for å innse at jobben ikke ble gjort riktig første gang. Irritasjonen over at man heller ikke denne gangen klarte å tenke universell utforming allerede i starten av prosjektet.<br />
<br />
Men vi trenger ihvertfall ikke å rive et sykehus og bygge det på nytt.<br />
<br />
twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0Hausmanns gate 16, 0182 Oslo, Norge59.9187905 10.75484280000000634.396755999999996 -30.553751199999994 85.440825 52.063436800000005tag:blogger.com,1999:blog-1009247048040457172.post-49749538649738550812014-12-01T00:37:00.000+01:002014-12-01T00:42:14.519+01:005 tiltak for et tilgjengelig finn.noDet ble nylig avholdt en intern <i>tech dag</i> for utviklerne i finn.no. Der holdt jeg en lyntale hvor jeg nevnte 5 tiltak som ble gjort på m.finn.no for å gjøre tjenesten mer universelt utformet. Dette er sånn cirka hva jeg sa:<br />
<br />
Jeg hadde egentlig tenkt å prate om alt som er feil på finn, men etter at vi hadde Blindeforbundet på besøk i forrige uke, hvor en blind og en sterkt svaksynt demonstrerte hvordan de brukte finn og vi så at de stort sett klarte det de skulle gjøre, gikk det opp for meg at vi egentlig ikke er så aller verst. Tilbakemeldingen fra dem var at mye av det som gjenstår er å regne som pirk. Ikke dermed sagt at vi er i mål, men jeg synes vi for en gangs skyld kan være litt positive og se noen eksempler på problemer vi har tatt tak i, og hvordan de er løst.<br />
<br />
<h3>
Zoom</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-dRHcE4teSro/VHujCl0e8iI/AAAAAAAAISA/60hrjFMYX5w/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-2-638.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Metataggen viewport med maximum.scale=1 og user-scaleable=no strøket over" border="0" src="http://2.bp.blogspot.com/-dRHcE4teSro/VHujCl0e8iI/AAAAAAAAISA/60hrjFMYX5w/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-2-638.jpg" height="35" title="" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Denne metaggen nekter brukere på mobil å forstørre sidene, en slem ting å gjøre.</td></tr>
</tbody></table>
<br />
Den mest alvorlige feilen vi hadde på m.finn i våres var at det ikke var mulig å forstørre bildet. For svært mange blir teksten på en mobilskjerm for liten slik at det er greit å kunne zoome inn litt, i tillegg til at folk også kan studere bildene nærmere. Det ble fikset ganske enkelt ved å fjerne de to parametre det er satt en rød strek over på denne metatagen som nektet brukerne å zoome. Det er fortsatt noen sider på finn hvor man ikke kan forstørre sidene, så test deres egne sider med en gang og fjern disse parameterne. (Dagen etter at dette ble sagt hadde 3 nye markeder på finn blitt skalerbare)<br />
<br />
Fotnote: Hvis du leser dette på mobil, så har du sikkert allerede avslørt at sidene på min blogg <b>ikke </b>lar seg forstørre. Akk, så ironisk. Årsaken til dette er at <i>Blogger </i>har nettopp disse forbannede parametrene i sine mobilmaler, og jeg har ikke funnet ut hvordan jeg fjerner. Så mitt tips til deg som ønsker en universelt utformet blogg er inntil videre: ikke velg <i>Blogger</i>!<br />
<br />
<h3>
Ikoner</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-9nmiYSnE0PQ/VHukijHPHhI/AAAAAAAAISM/ZOfY-gM1On8/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-3-638.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Annonse på finn.no med vanlig visning og i høykontrastmodus." border="0" src="http://4.bp.blogspot.com/-9nmiYSnE0PQ/VHukijHPHhI/AAAAAAAAISM/ZOfY-gM1On8/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-3-638.jpg" height="185" title="" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Bildet til høyre er en annonse på finn.no i høykontrastmodus. Flere funksjoner blir borte fordi ikonene ligger som bakgrunnsbilder.</td></tr>
</tbody></table>
<br />
Ikoner er noe som har gjennomgått mye forandring gjennom årene. I gamle dager var et ikon en grafikkfil, og det var greit nok, bortsett fra at det ble mange requests mot serveren og dermed dårlig for ytelsen. Derfor gikk vi over til å bruke sprites, hvor flere ikoner ble trikset inn på samme bakgrunnsbilde. Det fikk fart på ytelsen, men vi brøt en grunnleggende lov med webdesign, nemlig at innhold ikke skal blandes med styling. Dermed fikk vi det vi ser på høyre side, som er en annonseside i høykontrastmodus, noe som er veldig nyttig for mange svaksynte. Den fjerner bakgrunnsbildene fordi den ikke anser det som vesentlig innhold. Der ser dere at logoen er borte. Ille nok, men kan noen fortelle meg hvordan man printer ut denne siden? Senere gikk vi over til å bruke font-ikoner, som f.eks. viser et hus når vi skriver utropstegn, men problemet er at skjermlesere fortsatt leser dette som utropstegn. Det har vi også klart å kode oss bort i fra, men enda bedre blir det når vi snart går over til å bruke svg til ikoner, dermed får vi både bedre ytelse, skalerbarhet og ikoner som ikke utgir seg for å være noe annet enn nettopp det.<br />
<br />
<h3>
Tastenavigering</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-zyMvUd0RzBg/VHulwYsaSeI/AAAAAAAAISc/YETqrTJi83U/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-4-638.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="En resultatlise på m.finn.no hvor annonsen i fokus er markert med en rød kantlinje." border="0" src="http://3.bp.blogspot.com/-zyMvUd0RzBg/VHulwYsaSeI/AAAAAAAAISc/YETqrTJi83U/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-4-638.jpg" height="320" title="" width="316" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I resultatlistene på m.finn.no markerer vi linkene i fokus med en rød kantlinje.</td></tr>
</tbody></table>
<br />
En annen ting er tastenavigering. Hvor mange er det som foretrekker å bruke tastekombinasjoner på desktop applikasjoner fremfor å bruke musa? Og hvor mange er det som gjør det samme på web? Hvorfor ikke? Vi har egentlig aldri vært spesielt dårlig på tastenavigasjon, men på m.finn har vi blitt gode, bla ved å tydelig markere hvilken link vi er på. Når vi navigerer er det mulig å hoppe over toppmenyen hvis man vil gå rett på sak, og på resultatsiden kan man også velge om man vil hoppe til filteret eller resultatet.<br />
<br />
<h3>
Tastevennlige filtre</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-rsM6vbdtUx4/VHum7mKhtQI/AAAAAAAAISk/ecSKpTFdO4k/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-5-638.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Søkesiden på m.finn.no som viser et vindu for inntasting av beløp som alternativ til slidere." border="0" src="http://4.bp.blogspot.com/-rsM6vbdtUx4/VHum7mKhtQI/AAAAAAAAISk/ecSKpTFdO4k/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-5-638.jpg" height="320" title="" width="286" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Slidere eller tekstbokser for å begrense prisfilteret? Ja takk, begge deler! </td></tr>
</tbody></table>
<br />
I filtrene bruker vi slides når vi skal velge f.eks. en pris. Det er jo veldig kjapt å bruke på mobil og brett, men sitter man på en humpete buss kan det være vanskelig å treffe riktig beløp. Så nå har vi også gjort det mulig å taste inn beløpet hvis vi skulle ønske det. Dessuten, den slideren går ikke lavere enn en million, og for noen er det fortsatt veldig mye penger.<br />
<br />
<h3>
Skjermleservennlig informasjon</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-54biFuvZ274/VHuoqcZsLBI/AAAAAAAAIS0/3OevM0vxZ20/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-6-638.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="En søkeside på m.finn.no som sier "5 treff" i stedet for bare "5", fordi teksten har attributtet "title=5 treff"." border="0" src="http://4.bp.blogspot.com/-54biFuvZ274/VHuoqcZsLBI/AAAAAAAAIS0/3OevM0vxZ20/s1600/universell-utforming-p-mfinnno-hva-har-skjedd-6-638.jpg" height="277" title="" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Ved å legge til attributtet "title=5 treff" klarer skjermleseren å lese mer meningsfylt informasjon for brukeren.</td></tr>
</tbody></table>
<br />
Når man gjør et søk med skjermleser på, følg med på hva den sier om hvor mange treff vi har. Hadde den bare sagt tallet, så hadde det vært vanskelig å putte det inn i kontekst. Men her sier den "5 treff". Dette er små ting vi kan gjøre som kan gjøre finn mye enklere å bruke.<br />
<br />
Jeg sa innledningsvis at det som gjenstår av universell utforming på finn er å regne som pirk. Det betyr ikke at vi er i mål. Prøv å zoome skjermen til tredobbel størrelse i høykontrastmodus, eller naviger med tastene med skjermleseren på, så vil du fortsatt oppleve merkelige ting. Men hvis vi alle tenker på disse eksemplene når vi utvikler, vil vi fortsette å lage løsninger som er superbra - for alle!twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-47377809440339119712014-07-28T20:27:00.000+02:002014-07-28T20:27:29.634+02:00E-bok + VoiceOver = Lydbok<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-d4uEp0nuZlI/U9aVHRJu8sI/AAAAAAAAGco/9J8fqMc_MKA/s1600/IMG_0140.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Bilde av en iPad med iBook og øreplugger" border="0" src="http://4.bp.blogspot.com/-d4uEp0nuZlI/U9aVHRJu8sI/AAAAAAAAGco/9J8fqMc_MKA/s1600/IMG_0140.JPG" height="240" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Orker du ikke lese selv kan du få telefonen eller brettet ditt til å gjøre det for deg.</td></tr>
</tbody></table>
<br />
E-bokmarkedet har fortsatt ikke tatt helt av her til lands. Samtidig har lydbøker blitt mer populært. Kjører man bil eller gjør andre ting som krever øynenes oppmerksomhet kan det være vel så greit å høre Kim Haugen lese boka for deg.<br />
<br />
Men så er det ikke alltid Kim Haugen eller noen andre som er flinke til å lese har rukket å lese inn akkurat den boka du er interessert i. Da skal du vite at så lenge boka finnes som e-bok, så kan du få VoiceOver eller TalkBack til å lese boka for deg i stedet.<br />
<br />
For å ha noe lesestoff til sommerens hytteferie lastet jeg ned <i>Alexander - Skjebnens sønn</i> av Valerio Massimo Valfredi for å fordrive noen timer i solen. Men den sterke solen og varmen gjorde det slitsomt å myse mot telefonen, selv om skjermen faktisk var ganske lesbar i lyset. Det var da jeg tok frem ørepluggene og skrudde på VoiceOver. Ved å bla til riktig side, skru på VoiceOver og dra ned skjermen med to fingre, leste VoiceOver boken for meg, side for side.<br />
<br />
Men jeg skal ikke forsøke å lure noen til å tro at VoiceOver sin syntetiske stemme leser med mer innlevelse enn Kim Haugen. Tvert i mot, VoiceOver har dessuten en del merkelige talefeil som burde lukes bort ved neste oppdatering. Fordelen er at utvalget er så mye større! Dessuten, når sola har gått ned eller bilen er parkert, så kan du legge bort ørepluggene og lese videre i den samme boka på gamlemåten.twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-85520702257782044202014-07-05T17:35:00.000+02:002014-07-29T14:19:33.382+02:00Hvordan bruke iPad'en i sola i sommer<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-4M5B8qsuNls/U7Vx2SjUBJI/AAAAAAAAGCA/q4D8vxo-hSE/w1054-h765-no/IMG_5521.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://2.bp.blogspot.com/-4M5B8qsuNls/U7Vx2SjUBJI/AAAAAAAAGCA/q4D8vxo-hSE/w1054-h765-no/IMG_5521.JPG" height="290" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Det virker ikke bare enkelt å sette seg ut i hagen med dagens nettavis, men det finnes håp.</td></tr>
</tbody></table>
<br />
Noe er fortsatt best på papir, tror vi. Det er det i hvert fall lett å tenke når man setter seg ut i hagen en varm sommerdag for å lese avisen. På papir. iPad'en er det jo umulig å lese ute i sola. Tror vi.<br />
Når det skarpe lyset reflekteres i skjermen blir du nemlig en del av en gruppe du kanskje ikke så ofte tenker på: de svaksynte.<br />
<br />
Men Apple har laget gode hjelpemidler for denne gruppen som du nå for anledningen er en del av. Så hvorfor ikke bruke dem du også?<br />
<br />
Så hva gjør man når man knapt klarer å lese det som står på skjermen? Man begynner med å gå inn på <i>Innstillinger</i>, deretter <i>Generelt</i>, før man blar seg litt nedover og velger <i>Tilgjengelighet</i>. Her er det mye moro man kan prøve ut.<br />
<br />
Det første man kan prøve er å invertere fargene på skjermen. Det gjør at svart tekst på hvit bakgrunn blir hvitt på svart, eller omvendt. Noen ganger er det alt som skal til for å klare å lese teksten. Funker dog dårlig på Instagram og YouTube...<br />
<br />
Hvis du fortsatt ikke ser noe kan du ta andre sanser i bruk. Et annet valg under <i>Tilgjengelighet</i> heter <i>VoiceOver</i>. Dette er Apple sin skjermleser som leser teksten på skjermen for deg. Navigeringen blir litt annerledes, så det er lurt å øve seg litt på dette før man surfer av gårde.<br />
<br />
Når du har skrudd på VoiceOver kan du gå til hvilken som helst nettside og høre på den som en lydbok. Forutsatt at siden er universelt utformet, naturligvis.<br />
<br />
Android-brukere har også disse mulighetene med <i>TalkBack</i>-funksjonen, men sist jeg sjekket hadde ikke denne en norsk stemme. Det kan høres rart ut på norske sider, men funker utmerket på engelskspråklige.<br />
<br />
NB: Øreplugger er sterkt å anbefale hvis du forsatt vil ha et godt forhold til menneskene rundt deg. En gang jeg skulle demonstrere VoiceOver for noen kolleger tikket det inn en småsur sms fra en høygravid kone på overtid. Den ble lest opp i plenum før jeg rakk å skru den av, til stor forlystelse for mine kolleger. <br />
<br />twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-53332215962570597292014-05-31T01:47:00.000+02:002014-05-31T01:47:15.096+02:00Hvordan kvalitetssikre universell utformingLukk øynene og tegn en blomst. Ser den bra ut? Slik kan det føles å lage universelt utformede nettsider også. Utvikleren ser ikke nødvendigvis det samme som brukeren når hjelpemidler brukes. Den mest brukte skjermleseren for blinde, JAWS, er langt fra gratis, og ikke alle (snarere svært, svært få) selskaper tar seg råd til å kjøpe inn dette verktøyet. Bruk av skjermleser er dessuten noe som krever trening. Man må nok i praksis faktisk være blind for å oppleve hvordan det er å surfe i blinde.<div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-U4ZLvzKc9_4/U4jlCkVLqiI/AAAAAAAAFXI/GqUvN_tTJ5g/s1600/blomst.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Veldig stygg blomst" border="0" src="http://1.bp.blogspot.com/-U4ZLvzKc9_4/U4jlCkVLqiI/AAAAAAAAFXI/GqUvN_tTJ5g/s1600/blomst.png" title="" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mitt forsøk på å tegne en blomst i blinde</td></tr>
</tbody></table>
<br />
Og hva med alle andre hjelpemidler? Man skal både ha mye kunnskap og fantasi for å forestille seg alle mulige hjelpemidler som finnes der ute for alle mulige handicap. Alt dette trenger man heldigvis ikke vite, men noen innblikk er det mulig å få.</div>
<div>
</div>
<div>
<h3>
WCAG er din venn</h3>
Det er heldigvis noen som har gjort jobben for deg med å finne ut hva som må gjøres for at det du lager skal kunne brukes av alle mulige mennesker. Det de har kommet frem til er samlet i listen <a href="http://www.w3.org/Translations/WCAG20-no/" target="_blank">WCAG 2.0</a>. Dette er en liste på 61 punkter som man bør sjekke om fungerer på nettsidene. Disse er gradert fra nivå A, som er det nødvendigste, til AAA, som er toppkarakter. Den nye tilgjengelighetsloven krever at de 35 punktene med nivå A og AA oppfylles.<br />
<br />
<h3>
Automatisk validering</h3>
WCAG 2.0 bør sjekkes manuelt før man skal lansere store endringer, men i det dagligdagse arbeidet kan dette bli vel tidkrevende. Heldigvis finnes det verktøy som gjør grovarbeidet for deg.<br />
<br />
Det enkleste verktøyet å komme kjapt i gang med er nok Chrome-tillegget <a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb" target="_blank">Accessibility Developer Tools. </a>Man trenger bare å installere dette tillegget i Chrome, så legger den seg i Chrome's utviklerverktøy (F12) under <i>Audit-</i>knappen. I stedet for å henvise til WCAG 2.0 refererer den fra sitt eget regelsett, som stort sett går ut på det samme. <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-nAW7L-lug8U/U4iHeMfx61I/AAAAAAAAFWw/-YaXyR0jrzg/s1600/accessibiltyDeveloperTools.jpg" style="margin-left: auto; margin-right: auto;"><img alt="Skjermdump av Accessibility Developer Tools" border="0" src="http://4.bp.blogspot.com/-nAW7L-lug8U/U4iHeMfx61I/AAAAAAAAFWw/-YaXyR0jrzg/s1600/accessibiltyDeveloperTools.jpg" height="640" title="" width="449" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Accessibility Developer Tools er lett å bruke, men kunne gjerne henvist til WCAG 2.0.</td></tr>
</tbody></table>
Min foreløpige favorittvalidator er <a href="http://www.totalvalidator.com/" target="_blank">TotalValidator</a>, når det først er installert, vel å merke. Det er en selvstendig applikasjon som har en plugin til Firefox og Chrome. Det plasserer et ikon nederst i høyre hjørne som man kan klikke på når som helst mens man utvikler, og den forteller deg hvilke mangler du har i koden. Både Accessibility Developer Tools og TotalValidator kjører lokalt på din pc, slik at sidene du lager ikke trenger å være online for at validatoren skal kunne lese dem.</div>
<div>
</div>
<div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-wD2ThcsCCUA/U4iIh4a3xsI/AAAAAAAAFW8/lt2CGnsqIGA/s1600/TotalValidator.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Skjermdump fra Total Validator" border="0" src="http://3.bp.blogspot.com/-wD2ThcsCCUA/U4iIh4a3xsI/AAAAAAAAFW8/lt2CGnsqIGA/s1600/TotalValidator.jpg" height="337" title="" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">TotalValidator er enkel å bruke på lokale statiske sider, når den først er installert.</td></tr>
</tbody></table>
<br />
Ulempene med TotalValidator er at de kan ha problemer med tilgangen til sider som krever innlogging. Et annet problem er at den kun ser den opprinnelige kildekoden, ikke javascript-genererte oppateringer. Da må kan ty til en online validator som <a href="http://achecker.ca/checker/index.php" target="_blank">Achecker</a>. Her kan du enten validere en online side direkte eller lime inn html-kode fra Firebug eller liknende inspektører for å få med den riktige kildekoden. <a href="http://www.cynthiasays.com/Home.aspx" target="_blank">CynthiaSays</a> er en annen lekker online validator, men den kan kun validere online sider direkte.<br /><br />
<h3>
Skalering</h3>
Man trenger ikke ha spesielt dårlig syn før man får problemer med liten skrift. De fleste desktop nettlesere skjærer igjennom alle sider uansett hvor dårlig utformet de er med tastekombinasjonen ctrl+ og ctrl- for større eller mindre skrift. På mobiler og tablets derimot, er det mulig å låse sidens størrelse til skjermen, noe som gjøres alt for ofte. Tekst hugget i stein hører hjemme i steinalderen, og designerne må tørre å slippe stålkontrollen på sidene sine slik at alle skal kunne lese dem.<br />
<br />
<h3>
Tastenavigering</h3>
En av de enkleste måtene å teste på er å navigere med tastaturet. Med et enkelt design burde det ikke være noe problem å bestå denne testen, men har man rotet det til med komplisert layout kan man fort få en aha-opplevelse. Blir det veldig mange tastetrykk med tab og piltaster før man kommer til kjernen av innholdet bør man revurdere designet, lage snarveier eller bruke tabindex på de viktigste feltene (med forsiktighet).<br />
<br />
Mobiltjeneste, sier du? Bruker man ikke tastatur på mobiltelefoner? Er du sikker? Det er fullt mulig å koble et tastatur til en mobiltelefon. Har du f.eks. prøvd å bruke en pris-slider på en humpete buss? Det har jeg, og det ble dyrt. En av de største feilene man kan gjøre er å anta hva brukerne bruker eller ikke bruker.<br />
<br />
<h3>
Skjermlesere</h3>
Den vanligste skjermleseren, <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" target="_blank">JAWS</a>, men uten velvilje fra NAV er den som nevnt vanskelig for oss andre å få ta i. Men det finnes alternativer. For utviklere er det enkleste å installere <a href="https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn" target="_blank">ChromeVox</a> til Chrome-nettleseren. Den fungerer enkelt og greit med at den leser opp den teksten man drar musa over. Test spesielt grafikk og skjemaer. Finnes det alternativ tekst til alle bilder og etiketter til alle skjemafelter? Hvis ikke vil du oppdage det nå. Ulempen med ChromeVox er at den ikke har norsk tale, dermed kan norsk tekst høres rart ut.<br />
<br />
Min favoritt skjermleser er Apple sin VoiceOver. Den skrus på under innstillingene for tilgjengelighet på iPhone og iPad. Den leser opp teksten du drar fingeren over, og den fungerer bra på norsk. Neste gang du sitter med iPad eller iPhone ute i sola, skru på VoiceOver, og vips har du en lydbok i stedet for en uleselig nettside.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-Tfk4CDrQFmQ/U4j_9V29uxI/AAAAAAAAFck/Hv6aUq7atfI/s1600/IMG_5306.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Skjermdump av hvordan VoiceOver skrus på med iPhone." border="0" src="http://4.bp.blogspot.com/-Tfk4CDrQFmQ/U4j_9V29uxI/AAAAAAAAFck/Hv6aUq7atfI/s1600/IMG_5306.PNG" height="400" title="" width="225" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">VoiceOver skrus på under <i>innstillinger </i>og <i>tilgjengelighet</i>.</td></tr>
</tbody></table>
Tilsvarende funksjon finnes også på Android-telefoner, men i skrivende stund har heller ikke disse norsk ordliste. <br />
<br />
Skal du virkelig sette deg inn i hva de blinde ser (eller ikke ser), så installerer du <a href="http://www.nvaccess.org/" target="_blank">NVDA</a>. Det er en gratis skjermleser som fungerer for hele operativsystemet, akkurat som JAWS. Det spås at NVDA kommer til å overta dominansen til JAWS i nær fremtid. I såfall blir hverdagen litt enklere for oss utviklere.<br />
<br />
<h3>
Brukertest</h3>
Når du har validert alle dine sider, navigert med tastaturet, skalert sidene og sjekket at skjermleserne får med seg alt som står, da vil nok sidene også passere tilgjengelighetsloven. Vil du at sidene skal være ekstra robuste kan du få sidene brukertestet av "ekte" funksjonshemmede mennesker. Selskaper som <a href="http://www.funkanu.com/no/" target="_blank">Funka Nu</a> og <a href="http://medialt.no/" target="_blank">MediaLT</a> har spesialister (ofte funksjonshemmede) på hjelpemidler som kan teste nettsteder på måter og med utstyr som for de fleste av oss er vanskelig å forholde seg til. Dette er selvsagt ikke gratis og kan være steget for langt for de med lavt budsjett, men vil man briljere er disse nyttige å bruke.</div>
twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-5389610761389565122014-04-09T21:19:00.000+02:002014-04-09T21:20:36.274+02:00Ikke bare et framsideproblemDet er en gjengs oppfatning i bransjen at universell utforming er noe som framsideutvikleren tar seg av. Så lenge denne gjør jobben sin skikkelig er tilgjengelighet en selvfølge. Feil! Alle som er involvert i web-utvikling har sin del av ansvaret for hva som presenteres brukeren.<br />
<br />
<h3>
Et enkelt eksempel</h3>
På FINN eiendom finnes et produkt som heter Ukens bolig. Det er noe megleren kan betale litt ekstra for, så vil annonsen vises over resultatlisten. Da jeg nylig gjorde noen endringer på dette produktet la jeg merke til at meglerens logo hadde alt-teksten "Logo" (teksten som kommer frem hvis et bilde ikke kan vises). Teknisk sett er ikke dette en feil fordi det obligatoriske attributtet var fylt ut, men innholdet er verdiløst. I stedet for å fortelle brukeren at det her skulle vært en logo der burde vi heller ha skrevet navnet på meglerkontoret.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-WjBcwls5iBE/U0Wabj9chLI/AAAAAAAAD5g/MVFfzEPpDVM/s1600/alttekst.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Eksempel på intetsigende alt-tekst" border="0" src="http://2.bp.blogspot.com/-WjBcwls5iBE/U0Wabj9chLI/AAAAAAAAD5g/MVFfzEPpDVM/s1600/alttekst.png" height="121" title="" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Her burde den assosierte teksten være "Foss & Co".</td></tr>
</tbody></table>
<br />
Enkel sak, tenkte jeg, og prøvde å finne attributtet med navnet på kontoret. Jeg fant det ikke. Jeg gravde meg stadig dypere ned java-laget for å finne ut hvordan navnet kunne hentes opp til siden. Det viste seg til slutt at for å få til dette måtte database-prosedyrene skrives om. Da er det ikke lenger en enkel sak for en dum framsideutvikler. <br />
<br />
<h3>
Tenk tilgjengelighet i alle ledd</h3>
Skal man sikre god tilgjengelighet må alle involverte tenke på tilgjengelighet. Produktsjefen må tillate den ekstra tiden det tar å kvalitetssikre produktet. Designeren må velge farger med nødvendige kontraster, interaktivitet som tillater navigasjon med både mus, fingre og tastatur og alt det andre en tilgjengelig side krever. Backend-utvikleren må sørge for å få de nødvendige data oppover gjennom lagene. Til slutt må framsideutvikleren legge siste hånd på verket og sørge for at alle krav tilfredsstilles.<br />
<br />
Hvis framsideutvikleren på egenhånd skal sørge for universell utforming på en løsning som er designet for alt annet, vil han fort føle seg som denne eksperten som skal tegne røde streker med blått blekk.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/BKorP55Aqvg?feature=player_embedded' frameborder='0'></iframe></div>
<br />
<br />twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0tag:blogger.com,1999:blog-1009247048040457172.post-89051867231580724052014-04-06T23:01:00.000+02:002014-04-06T23:01:13.808+02:00Universell utforming for funksjonsfriske menneskerI løpet av nokså mange år som framside-utvikler hos finn.no har jeg fått meg et rykte for å være den som maser mest om at tjenesten må være universelt utformet. I et forsøk på å gjøre meg fortjent til dette ryktet våger jeg meg på å starte en blogg om temaet. Jeg skal forsøke å skrive mest om ting som bør være interessant for alle som jobber med eller mener noe om det som finnes på web'en, men en del teknisk fagprat kan det nok også bli.<br />
<br />
<h3>
Hva er universell utforming?</h3>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://distilleryimage8.ak.instagram.com/f35dfd22138811e2b95b22000a1fab39_7.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tastatur" border="0" src="http://distilleryimage8.ak.instagram.com/f35dfd22138811e2b95b22000a1fab39_7.jpg" height="320" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Hvem hadde trodd at noe som skulle hjelpe blinde med å skrive ville utvikle seg til å bli dette?</td></tr>
</tbody></table>
Universell utforming, eller <i>tilgjengelighet</i>, som jeg synes er et bedre ord, handler om at alle skal ha mulighet til å gjøre de samme tingene, selv om fysikken kan gjøre det vanskeligere for noen. Det er derfor man må bygge dører som er brede nok til at en rullestol kan passere og at det finnes blindeskrift på tastene i minibanken. Like kjent er det kanskje ikke at det er mulig for blinde å surfe på nettet eller at det kan gjøres uten bruk av mus eller trykkskjerm. Vel, det er ikke på alle sider det er mulig heller, men det er fordi mulighetene ikke brukes, ikke fordi de ikke finnes.<br />
<br />
Historien har vist oss at oppfinnelser som var ment som hjelpemidler for funksjonshemmede viste seg å være vel så nyttige for funksjonsfriske mennesker. Den vakreste historien er om den italienske oppfinneren <a href="http://historyofscience2007.blogspot.no/2007/03/pellegrino-turri-of-italy.html" title="Les mer om Pellegrino Turri">Pellegrino Turri</a>, som så sterkt ønsket at hans blinde elskerinne skulle kunne skrive brev til han at han i 1808 oppfant skrivemaskinen.<br />
<br />
Jeg har også hørt påstander om at fjernkontrollen ble produsert med tanke på invalide krigsveteraner, men det har vist seg å være langt flere som har problemer med å bevege seg fra sofaen til TV'n.<br />
<br />
Jeg tør til og med påstå at hjulet ble funnet opp av en person med dårlig rygg. ;-)<br />
<br />
<h3>
Tilgjengelig web</h3>
Da <abbr title="HtyperText Markup Language">HTML</abbr> ble utviklet <abbr title="HtyperText Markup Language"></abbr>for 25 år siden var universell utforming et av de grunnleggende prinsippene. Likevel er dette langt fra vanlig praksis på de sidene vi finner på nettet i dag. <abbr title="HtyperText Markup Language">HTML</abbr> er et glimrende format til det det var ment å gjøre, nemlig å publisere dokumenter på Internett som kan vises på alle slags dingser i alle størrelser, uansett om det er med skjerm, høyttalere eller papir.<br />
<br />
Det eneste man ikke klarte å forutse var hvilken suksess dette skulle bli. Næringslivet oppdaget raskt hvor billig og effektivt <abbr title="World Wide Web">www</abbr> kunne brukes til å nå ut med sine tjenester, men det trauste utseendet på sidene var ikke bra for nok datidens (og nåtidens) markedsfolk og designere, som savnet de frie tøylene man har når man designer trykksaker. Grafikk ble derfor i stor grad brukt til å erstatte tekst og ellers pynte på sidene. Hittil hadde man bare sett nettsider på PC-skjermer, og nettleseren het vanligvis Netscape, så at <abbr title="HtyperText Markup Language">HTML</abbr> skulle vært et portabelt format ble fort glemt.<br />
<br />
For å holde interessen varm lanserte Netscape sine egne tags som skulle gjøre sidene lekrere. Da Microsoft lanserte sin Internet Explorer kom de igjen med sine tags, og dermed var galskapen i gang. <abbr title="World Wide Web Consortium">W3C</abbr> kom løpende etter og forsøkte å tilpasse <abbr title="HtyperText Markup Language">HTML</abbr>-standarden, men de hadde mistet kontrollen over utviklingen.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-NuVaQSuuJOM/U0HACxdcH_I/AAAAAAAAD40/zc33-udj2Jg/s1600/nettlesere.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Nettlesere" border="0" src="http://4.bp.blogspot.com/-NuVaQSuuJOM/U0HACxdcH_I/AAAAAAAAD40/zc33-udj2Jg/s1600/nettlesere.png" height="159" title="" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Vanskelig å gjøre alle til lags</td></tr>
</tbody></table>
<br />
Med Internet Explorer ferdig installert på alle PCer vant Microsoft den første nettleserkrigen mot slutten av 90-tallet. Dermed glemte folk ikke bare at nettsider skulle fungere på ulike enheter, men også på ulike nettlesere. Det eneste som gjaldt nå var å få ting til å se bra ut i Internet Explorer.<br />
<br />
Microsoft fikk igjen konkurranse da Opera, Firefox og Chrome kom på banen utover 2000-tallet. Disse nye nettleserne var mer trofaste mot <abbr title="World Wide Web Consortium">W3C</abbr> sine standarder, men utviklerne fikk sitt svare strev med å lage sider som så bra ut både på disse nye nettleserne og på den nå akterutseilte, men akk fortsatt så markedsterke Internet Explorer 6.<br />
<br />
Endelig kom smarttelefonene på markedet, og verdien av å gjøre nettsidene lesbare andre steder enn på PCen ble tydelig. Men jeg er sikker på at man hadde begynt med mobilsurfing mye tidligere hvis grunnprinsippene for <abbr title="HtyperText Markup Language">HTML</abbr> og tilgjengelighet hadde blitt fulgt fra starten av.<br />
<br />
<h3>
Det neste store</h3>
Om mobilrevolusjonen har lært oss noe gjenstår å se. Ingen vet hva <i>the next big thing</i> blir, men vi kan være rimelig sikre på at innholdet også der vil være basert på <abbr title="HtyperText Markup Language">HTML</abbr>. Hvis man klarer å holde seg til universelt utformet <abbr title="HtyperText Markup Language">HTML </abbr>vil man trolig være tilgjengelig på den nye duppeditten fra dag en, i stedet for å lage enda en app eller spesialtilpasset side.<br />
<br />
Fra 1.juli trer den nye <a href="http://lovdata.no/dokument/NL/lov/2013-06-21-61">tilgjengelighetsloven </a>i kraft. En slik lov som krever at nettjenester skal være mulig å bruke også av folk med funksjonshemminger burde ikke være nødvendig, men kanskje er pålegg og bøter det eneste språket folk forstår. Håper at næringen i stedet for å <a href="http://www.aftenposten.no/okonomi/Tvinger-alle-virksomheter-til-a-skaffe-seg-nye-nettsider-7526952.html#.U0Gp-1cXJRA" title="Ekstern lenke til Aftenposten">skrike opp om overformynderi</a> heller vil oppdage hvilke muligheter tilgjengelige nettsider vil åpne for.twidero@gmail.comhttp://www.blogger.com/profile/17819503387032404729noreply@blogger.com0