Why add ALT Text to an Image?

Adding ALT text to a website image is good for SEO, but is that all?

The image alt text is the short phrase that pops up when you hover over an image.

The alt text can also be shown when the image fails to load or download.

The alt text parameter associated with a website image is best known for its SEO requisite. However, it’s also important for Braille, screen readers and in case the image fails to download.

Oh, and if someone is viewing your website with the Lynx web browser.

Reasons to add Image alt Text

To summarise, adding descriptive text to your images is good for:

  • SEO
  • Search engine indexing
  • Braille readers
  • Screen readers
  • Disabled image download

SEO

SEO ranking is acheived through a number of factors. Amongst these is the quality of the underlying HTML code.

SEO includes adherence to the standards defined for website design and build.

Badly written website HTML code can adversely affect a website’s search engine ranking.

Included within badly written HTML code is the omission of the alt text from an image. So yes, not supplying this text can impact on your website.

Good alt text may also be used in promoting the web page and the image on the search image results. The text may help to have your image shown on the Google search results, image listing.

Search Engine Indexing

The search engine robots, crawling the Internet, are not able to interpret an image, understanding how you perceive it to be used.

For example, you have included a picture of a building on a web page. The alt text may be used to clarify its context. Perhaps you provided the interior design; your company is based here; as an architect it interests you; or maybe it’s simply a lovely building which inspires you.

Adding alt text to the image will clarify, to the search engine robot the context in which you are using the image.

Otherwise the only available reference info is the file name, and dependent upon the context within the surrounding text.

Screen Readers

A screen reader will convert the text on a web page to synthesised speech, or braille, allowing those with limited sight to browse the Internet, hearing the content of web pages.

Screen readers operate by converting the text content of a web page to either speech or braille. The text content for conversion includes not only the visible sentences of text but some of the underlying code to. To best understand a web page’s content a screen reader will handle elements such as tables and images by cleverly giving more information such as highlighting the table headers.

A screen reader will work best where the underlying HTML code is correctly structured. Making use of the less visible parameters such as the image alt text.

Simply having an image with no description, or the original camera file name won’t be of help.

Image Download Disabled

Disabling image download is the correct setting for best security, when configuring an email client.

Although not a page on your website it does illustrate the importance of adding a descriptive text to your images.

Why add alt Tex to an Image: Lynx Browser

A basic editor, such as Lynx doesn’t handle images. A useful tool if your desktop windowing system has crashed, or you are accessing via a terminal session.

Adding the alt Text

It’s really easy to add the alt text associated with an image.

The common CMSs all offer an easy option to add the descriptive text to the images.

For example WordPress, when editing an image in the media pages or on a page or post offers the alt text as a text box to be completed when editing an image. As shown in the image below.

Image alt Text WordPress Attachment Details

The WordPress CMS offers the appropriate text fields, when editing an image. Other CMSs do likewise.

If you are interested in how it’s implemented in HTML. It’s simply the addition of the parameter alt, as shown in the simplified version below, of the phone box image:

<img  src=”http://www.vntweb.co.uk/image-alt-text-wordpress-attachment-details.png” alt=”Image alt Text WordPress Attachment Details” />

Further Reading

For more information about why you should add alt text to your website images there’s a wikipedia screen reader article and RNIB has info about assistive technology, also read about the BBC’s view on accessability of their website with screen readers and WebAIM has details about designing for screen reader compatibility

Bootstrap3 One and a Half Offset

With 3 1/3 width columns, col-md-3, to be centred within a bootstrap3 col-md-12 I was looking at adding an offset at the left something similar to col-md-offset-1.

Centring 3 Bootstrap3 col-md-3 divs within a row requires an offset which is 1.5 times a single column width. ie. two of these widths, one each side, but we don’t need the one at the right end as we are using an offset.

The situation: for a website footer I was including a widget area which I wished to have 3 columns of links and corporate references.

To give a better looking footer I was looking to have larger side margins and use the bootstrap col-md-3 for each of the columns.

However, the one and a half width doesn’t exist in Bootstrap.

As a percentage this is 100% * 1.5/12 = 12.5%.

Looking at the percentage width assigned to a single width column this is given as 8.33333333%.

Working from the single column width to 1.5 times gives a width of 12.499999995%.

I looked at the other column widths to see a consistent under valuing of the percentage.

I chose to use this width as it gives a small space between the columns, and less chance of the widths summing up to cause the floats to drop onto the next line.

With the 12.499999995% width I created a new offset specific to the larger width devices of col-md-offset-1-half.
thus giving

@media (min-width: 992px) {
   .col-md-offset-1-half { margin-left: 12.499999995%;}
}

I was unable to add the offset within the layout, it being a series of WordPress widgets. As I was managing the content I made the assumption that all 3 widget areas would be occupied.

So having created the above additional column and handled the responsive offsets, whilst writing this I was considering my original implementation decisions.

I found it easier to add this offset to the first element

@media (min-width: 992px) {
   .footer .widget:first-child{margin-left: 12.499999995%;}    
}

I could increase the left margin to get the desired insert.

For smaller width screens the insert can be appropriately reduced, if desired.

Based on this view I returned to my work to redesign it using row padding rather than affecting the column offset.

I had investigated the idea of creating a one-and-a-half offset for use in centring 3 columns in a bootstrap3 row. However, as I was unable to edit the particular row layout chose to add a margin to the first child element, when viewed on larger devices.

Linking to Another Website

Sooner or later you will want to create a link to another website. Perhaps an event, trade association or a customer’s website.

It’s easy to forget that links can also be internal within your own website. Written a blog article a few months ago and now writing an associated article? Why not add a link? After all it’s good for SEO and it may keep visitors on your website longer.

A little background can improve how you create links and correct those that don’t link properly, or perhaps don’t encompass all of the words.

Don’t just say “click here“. The best text links are contextual letting the visitor know why they should follow.

When it comes to adding links to your page or blog post, fortunately most CMSs such WordPress and Joomla hide the complicated bits.

The CMS editors are much alike, particularly for the the generic font styling, colours and actions like linking.

Linking to another website WordPress editor add link

In the example shown above I’ve chosen to use the WordPress editor to edit a blog post, adding a link to the WordPress website.

I began by highlighting the word WordPress. Clicking on the link icon on the top row popped up the link editor dialogue. This is first shown in its simplified form. Allowing the website address to be easily copied or typed in and accepted.

A link need not only point to another HTML web page, some of the possibilities are: an image; a sound file; a text document.

Why should I care about the technical?

Occasionally the editor will get it wrong, or you realise that you have missed a word from your link text.

Do you remove the link and start again, or do you flip the editor into HTML mode and move the closing tag </a> along a word?

HTML – The technicals

A link is made using the a (link) tag and the href attribute. A link tag looks like:

<a href=”http://www.vntweb.co.uk/contact-us/”>VNTweb: Contact us</a>

As can be seen it is a two part tag, wrapping the item which is to be used as the reference. The attribute href is used to define the link, in this case to the website vntweb.co.uk and the page contact us. The text which will be seen on the screen is VNTweb: Contact us. Here’s our constructed link:

VNTweb: Contact us

Here’s our example sentence, where the word us is outside of the link:

For more information about VNTweb<a href=”http://www.vntweb.co.uk/contact-us/”>Contact</a>us  today!

Knowing that the link is a two part tag, its easy to see that the ending </a> is wrongly located. and just needs moving along a little.

For more information about VNTweb<a href=”http://www.vntweb.co.uk/contact-us/”>Contact us</a>  today!

The target attribute may be used to define what happens when the link is clicked.

  • target=_blank will open a new browser window, leaving the original page open.
  • target=_self will open the link in the current browser window.

<a href=”http://www.vntweb.co.uk/contact-us/” target=”_blank”>VNTweb: Contact us</a>

Shown below are the two types of link:

The Contact us page (self)
The Contact us page (blank)

Using the target to open the link in a new window is particularly useful. With a simple link your website visitor will follow the link and is gone!! Possibly never to visit your site again, perhaps they happened upon your site by chance and can’t remember it’s address. With the link opening in a fresh tab, or window, your site is kept open. Once their journey has been completed your website is waiting for their return and to pick up from where they were.

It is also possible to link to an anchor point within a web page.

Rather than send a visitor to a page and leave them to find the content somewhere within the page, be helpful, take them to the section on the page. Nothing worse than following a link to a page and not finding wheat you are looking for.

A page with a multiple sections can have an anchor added at the start of each section.For our example this page, referencing the HTML technicals section.

To do this we need to first create an anchor point <a name=”htmltechnicals”>:

Now amend our website link to incorporate this additional information. The link from our previous example becomes:

<a href=”https://www.vntweb.co.uk/linking-to-another-website#htmltechnicals”>HTML Technicals</a>

This will now link to the HTML technicals title above.

Link to technicals

A common error, and so easy to miss, is the http:// from the front of the link.

Links can also be created to documents and images as well as links to websites and web pages.

To link to a document include the directory path on the website server. For example if the Christmas menu is in the docs directory the link could be:

<a href=”http://www.vntweb.co.uk/docs/menu-christmas-2017.pdf”>Christmas menu</a>

Links are also used to open the email client on the computer, and more recently enable a mobile phone to dial a number shown in a link.

  • Document: <a href=”http://www.vntweb.co.uk/docs/menu-christmas-2017.pdf”>Christmas menu</a>
  • Email mail to <a href=”mailto:sales@example.com”>email us</a>
  • Telephone <a href=”tel:01234-456-789″>01234 456 789</a>

The email mailto option has been used for many years to pop a new email within the client email package. There are options to set the title and content, helping to future the details of the created email.

Mobile phones can make use of the tel: link. If you are adding your business telephone number to the page then if you create it as a link mobile phones can ring the number when clicked.

SEO

For best SEO consideration of your link don’t simply use the old phrase click here. It doesn’t tell the search engines the context of the link. Be more imaginative inform your website visitor why they should click. Include a part the link title within the wording.

If you don’t wish to give the linked website any value consider using the nofollow parameter. Each page has potential energy to be transferred to another website, shows across all of its links. To block the floor to a given linked website add the motor parameter, as in the example below:

<a href=”http://www.vntweb.co.uk/contact-us/” rel=”nofollow”>contact us</a>

There’s a title attribute which you may also wish to use. It will clarify the purpose of the link.

Links made within your website to another internal page add value. After all if the page was that good and you wish to reference it!

Layer Flash Below HTML DIV sub-menu

Historically a flash video on a website, for example a custom website presentation or a YouTube video, would always sit above anything else on the page.

Recently I was investigating the positioning of a menu drop down hiding below a YouTube flash video.

Increasing the CSS z-index value for the sub-menu was making no difference, it was positioning below  the flash video.

In practice the layering of individual web page items the flash object is rendered last, the top most element.

Most annoying to see a drop down menu disappear below the flash video.

Reading on the Internet for a solution to this I saw suggestions regards JavaScript and jQuery.

However, I was looking for a fix for the flash positioning which could be reasonably repeated.

Changes could be made globally, for example via CSS, or with a generic piece of JQuery/JavaScript code.

Thinking of my customers. I wanted the addition of the flash embedding code to the website to be simple and easy. Preferably via the CMS’s editor, with a simple understandable tweak.

Nothing too complicated, the simpler the instructions the better.

I found an article on Stack Overflow which suggested the use of two parameters, one added to the flash file reference and one as a parameter.

This seemed like a good option. It’s clear where the changes are to be made and easy to do.

To correct the way browsers display flash players above all other page content the parameter wmode is added twice.

  • once at the end of the YouTube file reference
  • once as a separate parameter

Here’s my example modified YouTube flash reference, with the extras in bold:

<iframe width=”560″ height=”315″ frameborder=”0″ src=”https://www.youtube.com/embed/4fekwVhg2sw?wmode=transparentwmode=”opaque”></iframe>

The article referenced is

http://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index

Which Image Format to Use: gif, jpg or png?

Each of the three image formats: GIF, JPG and PNG, have their merits and are best suited to different intents.

Differences are related to the transparency or alpha channel, the number of colours in the palette and the compression efficiency.

GIF Images

GIF images are limited to 256 colours. This limited colour palette may cause poor rendering of subtle colour changes.

GIF images should be used for line drawings, where less than 256 colours will be required.

Use GIF images where text is in the image, JPG images don’t tend to render sharp colour contrasts as well, the edges becoming blurred.

JPG Images

JPG images have a colour palette of more than 16 million colours. JPG images use a compression algorithm to reduce the file size.

JPG typically render an image well, but for a website graphic, perhaps text on a plain background distortions are apparent where the text transitions to the flat background.

JPG images should be used for photographic images and other images where the change in colour is continuous, without sharp edges.

When saving a JPG image consider whether the quality maybe reduced without visible deterioration. This will provide for a smaller file size with faster downloading.

PNG Images

PNG was introduced as a an alternative image format given the patent/license restrictions of JPG and GIF formats.

The PNG format combines features from both of the other two formats.

The PNG format is patent free, although this is now less relevant than it was, the patents on the GIF and JPG formats now having expired.

Note Internet Explorer 6 does not render the Alpha layer transparencies of the PNG format correctly. It is only able to cope with a simple on/off state for the transparency setting.

Unlike GIF images, PNG doesn’t support moving images.

Image Quality

If possible reduce the quality of the image. A reduction to 90% can significantly reduce the size of the saved file, improving the responsiveness of the website and making it better for mobile devices.

When reducing the quality look for blotching and pixelation of the result. This indicates that you have reduced too far.

Built-in HTML Formatting Styles

HTML provides a number of built-in text formatting styles, for rendering addresses, code and quotations.

Four tags which have their own rendering style, affecting how the enclosed content is displayed are:

  • Address
  • Code
  • Pre
  • Blockquote

These tags are used to create a section of text which is isolated from the main flow to highlight the particular content, be it an address, a block of code or pre-rendered section of content, possibly taken from another document.

The tags are implemented with an opening and closing tag, wrapping the content to be rendered. For example the blockquote tag shown below.

<blockquote>CMS Website Development</blockquote>

It is considered to be good practice to use lower case when implementing the tags.

Unless you are developing your own website, from scratch using plain HTML, there is likely to be inherent styling within the site governing these styles. Many of the CMS website frameworks have a default rendered style configured which can be over-ridden as required to create the desired website appearance.

Address

<address></address>

Content within this tag pair is used to portray the contact details for the author of the document or page content.

The tag content can be the email address, telephone number and name of the author. The recommendation is not to use the tag to wrap arbitrary addresses.

The tag begins its embedded content on a new line separating it from the flow of text, with a gap above and below.

Neil
www.VNTweb.co.uk

Blockquote

<blockquote></blockquote>

The blockquote tag is used to group a quotation, or reference, from another piece of work.

The content wrapped by the tag is separated from the flow of text, placing it on a new line, with a gap above and below.

The default presentation of the tag is indented. In the example below a graphic is also added by the sites CSS configuration.

CMS Website

Design & Development

Pre

<pre></pre>
The pre tag preserves the enclosed white space.

Normally HTML renders multiple spaces as a single space. Using the pre tag this multiple spacing is preserved. New lines are also maintained.

By default the font used is Monotype, giving a distinctive appearance, separating it from the surrounding content.

CMS Websites
  WordPress
  DotNetNuke
  Joomla

Code

<code></code>
This tag is used to denote that the enclosed content is code. The text is shown in Monotype.


if (typeof(item) != "undefined") {
actions here
}

CMS Editors

CMS editors usually offer both the pre and address as paragraph styling options. Their selection is typically found under the paragraph formatting.

CSS

The default rendering of these tags is often overridden by the website.

Most CMSs will have their own default styling which is implemented for the various HTML tags, including those covered above.

Modifying the appearance of these built-in tags is by reference to the tag in CSS:

address{
  font-weight:bold;
  color:#00d;
}

Mobile Device Viewport Metatag

The mobile viewport meta tag determines how mobile devices handle the scaling of a web page.

The size of the viewport is the area visible on the screen.

For desktop computers and laptops the size, in pixels, is a direct mapping.

For mobile browsers the default handling of a web page is to zoom out to show the full page width, with vertical scrolling as required.

For mobile devices the layout of the web page, content wrapping and page scrolling, is determined by the viewport.

The example below shows the meta viewport code, with an initial scaling of half the full size and the user is unable to zoom in and out.

<meta name="viewport" content="initial-scale=.5, user-scalable=no">

The table below shows the properties and a description of their associated parameters.

Property Description
width The width of the virtual viewport. A number defines the pixel width. Alternatively “device-width” sets  the viewport to the physical width of the device’s screen.
height The height of the virtual viewport. A number defines the pixel height. Alternatively “device-height” sets  the viewport to the physical height of the device’s screen.
initial-scale The initial zoom of the webpage, where a value of 1.0 means no zoom.
minimum-scale The minimum scale by which the user can zoom out from the web page. A value of 1.0 means that zooming is not possible.
maximum-scale The maximum scale by which the user can zoom into the web page. A value of 1.0 means that zooming is not possible.
user-scalable Whether the user us allowed to zoom in and out of the web page. Set to yes or no.

Without the use of a viewport the mobile web browser will render the page zoomed out so that it fits on the screen. Using a viewport the starting width can be configured and the browser will show a section, or all of the page, dependant upon the configuration.

Defining the viewport to have the width of device-width will cause the browser to render the page according to the responsive CSS rules of the website.

Take care when configuring the viewport. Using the wrong combination of parameters can leave the web page difficult to view, requiring lots of scrolling. Setting any of maximum-scale=1; minimum-scale=1; or to 1 or initial-scale=1 will prevent the page from zooming, leaving its size fixed.

The rendering specific to the mobile sizes is included in the CSS files. Here amendments are given to adjust the page according to the detected page orientation and width.

The CSS below is used by the browser if the device is orientated vertically and the minimum width is 800px. Outer and Inner are two divs wrapping the page content. Their maximum width is reduced to ensure that the page content is displayed, at a reasonable size, within the browser screen. The menu is turned off, allowing a simplified menu to show at the top of the screen

@media only screen and (min-width: 800px) and (orientation:portrait)  {
  #Outer{max-width:800px;}
  #Inner{max-width:780px;}
  #menu {display: none;}
  #menuSimple { display: block; }
}

Adding an Image in HTML

HTML uses the <img> tag to add images to a web page.

<img src=”/images/myimagefile” >

This is a stand alone element, without a closing part. The content added will also be in-line, occurring at the position of the tag.

For an image the source of the content is specified. This may either be relative to the current content html file position, for example src=”logo.jpg” if the file is in the same directory, or its position is known relative to the current file position. It is also possible to reference an image on another website src=”http://www.example.com/images/logo.jpg”. The copyright terms on images referenced in this way should be checked. where the image is available for re-use it is be better to copy the image to your server, rather than use another’s bandwidth. Also there’s the chance that the remote image may be moved or deleted.

Using the image tag in this way there is no control over the size of your image. It will be shown in the browser at the same size as the original image. The image tag also permits the height and width to be specified. If only one of them is specified then the image will be sized proportionately according to that one.

It is better to use the width and height attributes to specify the image size correctly. Specifying a smaller size wastes bandwidth and specifying a larger size will result in a degraded image.

The align attribute may be used to determine the positioning and flow of text around an image. This allows an image to be embedded within paragraph text, generally to the left or the right.

To avoid cramping the image with the adjacent text there are two parameters providing spacing hspace and vspace horizontal and vertical spacing respectively.

The article img Tag Parameters includes a table of the different parameters available.

HTML 5 and all That

HTML 5 requires that tags which are standalone, which don’t use a second closing tag to wrap content, should have a slash included before the closing greater than sign. There is also a requirement to provide alternative text readable by screen readers using the alt parameter.

<img src=”/images/myimagefile” alt=”My image” />

Using the other parameter tags is now deemed to be out of vogue. They should now be implemented through CSS.

SEO

It is considered good SEO to follow the current practice on adding an image. The addition of the alt text description is considered important.

The use of descriptive text and the addition of the closing slash to the tag will reduce the number of errors when the website page is validated against the current standards. This is also considered to be influential.

Missing Empty Table Cell Borders

When using tables in HTML the border can be missing from some of the cells. By default a browser will not add borders to an empty cell.
An example of this is the following table, which has an empty cell, and its rendered version below.

<table  border="1">
<tr>
<td>Day</td>
<td>Fruit</td>
<td>Veg</td>
<tr>
<tr>
<td>Monday</td>
<td>3</td>
<td>2</td>
</tr>
<tr>
<td>Tuesday</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>Wednesday</td>
<td></td>
<td></td>
</tr>
</table>
Day Fruit Veg
Monday 3 2
Tuesday 3
Wednesday 2 2

The missing borders can be achieved either by inserting an empty character code &nbsp; or through CSS styling.

<td>Tuesday</td><td>3</td><td>&nbsp;</td></tr>

The CSS approach is easier to implement, it works across the whole website and doesn’t require the addition of blank characters to populate every empty table cell.

To add a border to every table cell a border is added as a part of the td and th table cell entries in the CSS file. An example is:


td, th {

border: 1px solid #CCCCCC;
padding: 5px;

}

This websites uses the CSS approach for the table cells. For this reason, if you like at the page source you’ll see that I’ve countermanded the site’s CSS styling for the empty table cell using style=”border:0px;”.

Setting the Font Colour, Size and Face

In HTML the font appearance was set using the <font> tag. Additional parameters being included within the opening part of the font tag to define the colour, size and font.

Colour

Throughout the use of website code, be it HTML, CSS or JavaScript the English word colour is replaced by its American spelling of color. If your text isn’t showing the colour you are expecting its worth checking your spelling.

The example below shows some text wrapped by the font tag, to set the colour to blue, followed by the rendered text.

Text some of which is <font color=”blue”>blue</font> in colour.

Text some of which is blue in colour.

In the above example the colour is set using a named colour. There is a limited set of colours which are known by their colour name.

Colour is also defined using the RGB values color=”#0000ff”. The colour is defined by 3 pairs of numbers, representing the combination of red, green and blue which forms the colour. Because the numbers used are in hexadecimal this translates to a number between 0 and 255 (decimal) for each of the three colours.

Size

The size parameter may be used to control the size of the text. size=”2″ will give a larger font than size=”1″.

The example below illustrates a part of a sentence wrapped with the font tag, with a size setting of 1. The code is given first, followed by the rendered text.

Text used to illustrate <font size=”1″>two</font> different <font size=2>sizes</font> of font.

Text used to illustrate two different sizes of font.

Using numbers to represent the font size, as in the above example, will provide for relative font sizes. Alternatively the font sizes may be defined by their point size, size=”10pt”. text defined in this way will be rendered to the defined size. The size descriptions commonly used are:

  • numeric 1 to 5
  • pixels (px)
  • points (pt)
  • relative to a fixed value (em)
  • descriptive (larger, smaller)

Font Face

To define the font-face to be used add face=”” to the tag, for example:

<font face=”arial”>Sample text</font>

Historically 10 different fonts were available across a range of operating systems. Other fonts could be specified but the availability of the font on the computer was not guaranteed and hence fonts used were restricted to these 10. The list of fonts is:

arial, arial black, comic sans ms, courier, courier new, georgia, helvetica, impact, palatino, times new roman, trebuchet ms, verdana.

Hexadecimal Numbering

It is more usual to represent the colours assigned to a font using hexadecimal notation and RGB. Examples of this are:

#ff0000 – red
#00ff00 – green
#ffff00 – yellow

In the above examples the three colour components making up the colour are given as two sets of hexadecimal numbers.

A hexadecimal number is to the power of 16. Instead of counting from 0 to 9 we count from 0 to 15. To represent this the numbers 0 to 9 and the first 6 characters of the alphabet. are used. An example is the decimal value 12, which in hexadecimal notation is c.

Table of hexadecimal numbers

Hex Decimal Hex Decimal Hex Decimal
0 0 10 16 20 32
1 1 11 17 30 48
2 2 12 18 40 64
3 3 13 19 50 80
4 4 14 20 60 96
5 5 15 21 70 112
6 6 16 22 80 128
7 7 17 23 ff 255
8 8 18 24
9 9 19 25
a 10 1a 26
b 11 1b 27
c 12 1c 28
d 13 1d 29
e 14 1e 30
f 15 1f 31

Notes.

Old HTML code uses the <font> tag. However, in the latest XHTML and HTML 5 compliant code it is replaced by the <span> tag with the font parameters defined in the style parameter. An example of this change is the replacement of

some <font color=”blue”>blue</font> text

by the text

some <span style=”color:blue;”>blue</span> text

Where possible it is better to transfer the styling of fonts to the CSS flies associated with a website. Elements on a web page can then be assigned a class. This allows the styling throughout a website to be controlled from a small number of files, making changes easy to implement across the whole of a website.