Font Awesome Accessibility and Personal Practices

First of all I am writing this post as an reply to @mgifford, to share my opinions on Font Awesome regarding accessibility as well as some personal practices.

Accessibility

The first concern I had with Font Awesome was if the characters used for the icons were read by a screen reader. Since the icons are added with CSS psuedo class :before I first considered that the reader might not catch the content of :before and :after, but as it turned out it very much did. I then started looking into how the characters sounded when read, but to my surprise I found out that they are within Unicodes Private Use Area. What this means is that the screen reader will ignore these characters since they are intended for “other” private use, which is exactly what Font Awesome does.

Personal practices

I like how Font Awesome let’s you add icons effortlessly with <i class="icon-html5"></i>, but I also like clean and semantic HTML. So the approach that I personally prefer is to avoid using <i> as much as possible and instead make use of :before and :after in combination with classes.

CSS

a.like:before { content: "\f087"; font-family: "FontAwesome"; margin-right: 10px; }

HTML

<a href="#" class="like"><span class="count">10</span></a>

The benefit of this approach is that the icon is tied to a class which is already used to define a specific component and limited to only the CSS, which makes it easier to change and style the icons.

Since I am also using SASS (mostly) and LESS, I have another practice which is to include the Font Awesome scss/less file with every icon class commented out. This way I cut down on the generated CSS and only make icon classes available for the few cases where it is preferred to use <i>. I also create some Font Awesome base classes (usually with left and right alignment) to extend within my other classes, such as my previous .like example.

SCSS

.fontawesome-icon { content: "\f087"; font-family: "FontAwesome"; } .fontawesome-icon-left-align { @extend .fontawesome-icon; margin-right: 10px; } a.like:before { @extend .fontawesome-icon-left-align; }

IT-stöd i Undervisningen

För några dagar sedan läste jag artikeln Offentlig it får underkäntIDG, där Anna-Karin Hatt sa Vi är väldigt framstående inom vård, omsorg och miljöteknik. Om vi kan kombinera det med vår stora kunskap inom it tror jag Sverige kan nå stora framgångar. Men vi behöver bli bättre på att få in it i undervisningen. Det sistnämnda var vad som fångade mitt intresse.

Continue reading

Repetition

Den bittra sanningen med all kunskap är att den lätt går förlorad om man inte repeterar det man redan vet. Så för att undvika att det händer har jag tänkt läsa om några böcker från studietiden.

Software Quality Assurance

Först på tur står Software Quality Assurance av Daniel Galin, en väldigt nyttig bok nu när det är aktuellt att börja arbeta. QA är ett väldigt brett ämne som egentligen inte har några entydiga svar på sina problem, det gäller istället att lära sig de beprövade metoder som funkar och gå vidare därifrån. Jag tror dessutom att det finns en hel del att få ut från boken som vi inte tog upp under kursens gång och det är väl detta som jag främst är ute efter. När jag väl tagit mig genom SQA så funderar jag på att ge mig på Databaser och IT-säkerhet. Något minst lika viktigt, men som jag personligen tycker är mycket roligare.

CSS eller Bilder?

Den senaste tiden har jag skrivit ganska mycket CSS i och med att jag ändrade bloggens utseende. Av ren nyfikenhet kunde jag inte låta bli att titta på de nya finesserna i CSS 3. Det som jag uppskattar mest med den nya versionen är såklart border-radius som ger runda hörn och box-shadow som låter dig skapa inre eller yttre skuggor. Detta har man fått göra med hjälp av bilder som fästs på rätt ställe med hjälp av CSS och oftast några extra <div> taggar, alternativt med javascript. Det är kort sagt underbart att kunna skapa dessa visuella detaljer genom att istället skriva några få rader med text. Men som med allt gott inom IT världen så har det givetvis sina nackdelar.

Continue reading

Whalecastle Day

..ni får ursäkta mitt taffliga försök att leka med ord, men ibland är min humor torrare än ett sandpapper.

Prince of Persia Trilogy

Prince of Persia Trilogy

Igår började jag och Lina dagen med en trip till stan och kikade runt i några butiker. Vi passade även på med att käka citylunch på O’Learys vilket var kycklinggrillspett med pommes och bearnaise. Jag kan intyga om att det var riktigt gott och mättsamt. Innan vi skulle dra hem så gjorde jag ett snabbt besök på Trestad Musik där jag lyckades göra ett fynd, Prince of Persia Trilogy till PS3. Lite lustigt med tanke på att jag nyss sett filmen. Det blev även en ny lampa från SG Design som ska få sig en plats hemma så fort renoveringen är färdig.

O'Learys

Lunch på O’Learys

På kvällen var det dags för själva valborgsfirandet hemma hos Kristian. Det blev en liten tillställning, men en mycket trevlig sådan. Vi pratade, drack och lyssnade på go musik och kanske inte helt förvånansvärt gjorde jag och Kristian ett besök till pizzerian tvärs över gatan. Senare på kvällen dök John upp som hade med sig en mycket speciell whiskey(lustigt nog i burk). Den hade en väldigt mild smak, stack i hela tungan som hundra nålar och sen hände det häftiga att det välde fram en smak av kola från ingenstans. Whiskeyn var från Wales och hade något nästintill outtalbart namn på gaeliska, men jag ska definitivt hålla utkik efter den i fortsättningen. Kvällen kom till sitt slut någon gång vid tvåtiden, jag och Lina tackade för en trevlig kväll och gick hem under den kalla vårnatten.

Prince of Persia

I kväll passade vi på att gotta oss med tacos och filmen Prince of Persia.

Prince of Persia

För er som inte vet så är filmen baserad på spelserien med samma namn och till största del Prince of Persia – Sands of Time. Men jag tänker inte bli långrandig med en massa jämförelser mellan spel och film. Det lämnar jag istället till ett senare tillfälle.. Kortfattat handlar filmen om prinsen Dastan en av tre bröder, som under en attack på den heliga staden Alamut lyckas komma över en dolk med mystiska krafter. Han inser snart dolkens potential och dras in i en konspiration som inte bara hotar hans liv utan även hela riket.

Överlag tycker jag att filmen var bra, handlingen var relativt originell och lånade inte för mycket från spelen. Men i stort sett var det fightscenerna som lyckades få med schyssta inslag av parkour som var filmens höjdpunkt. Dialogen fungerade mestadels men ibland undrade jag om manusförfattaren verkligen tänkt igenom replikerna. Även handlingen hade sina brister från gång till gång och det största problemet var vissa partier som kändes utdragna och inte lyckades tillföra något. Som vanligt med nya filmer är karaktärerna ganska platta och utvecklas inte mycket under filmens gång. Dastan lyckades förmedla lite av en förändring från början till slut men hade kunnat förbättras avsevärt. Min åsikt är att karaktären hade lämpat sig bättre med en mörkare handling och inte varit anpassad för att vara lämplig för yngre tonåringar. Men jag antar att det är vad som händer när Disney är inblandade i produktionen. Slutligen när det gäller scenografi och kameravinklar så har jag inte särskilt mycket att tillägga än att det mesta var snyggt utfört. Några få tabbar kunde man inte undgå, men sånt går det att ha överseende med.

Trots att jag hackat på större delen av filmen så tycker jag ändå att den utan tvekan var sevärd och är man sugen på lite lättsmält äventyr/action-underhållning så håller Prince of Persia måttet.

Se trailern

IMDB Sida