Developing An Accessible Searchable Directory For Evenbreak
Published: June 6, 2017
I’d like to tell you about a project that I have recently been working on called, Evenbreak. They provide such a fantastic service that I feel I need to spread the word.
The aim of Evenbreak is to help disabled people and inclusive employers find each other. Employers upload jobs and disabled people register their employment interests and upload their CV’s. Evenbreak was set up by Jane Hatton as a social enterprise and it is one of those rare projects that is run by and for disabled people.
“With Evenbreak, inclusive employers can be confident that they will attract additional disabled candidates that they may not find through any other recruitment channels. Disabled jobseekers can be confident that employers who have chosen to place their vacancies on this site are serious about looking beyond their disabilities to identify what skills they have to offer.”
“Evenbreak is run by disabled people, for disabled people. As a social enterprise we are keen to promote a positive image of disabled people in employment, and any surplus income will fund positive publicity campaigns promoting the benefits of employing disabled people, to balance out some of the current negative, and inaccurate, portrayals of disabled people in the media.”
Jane Hatton got in touch to ask if I could develop a new companion website that would provide employers with “confidence around the practical issues around inclusion and accessibility in the work place.” The new website would be a searchable resource of content related to inclusive employment. It would be a members only website.
Although the visual design of the site was already existed (i.e. the existing Evenbreak site), my job was to create all the functional aspects. I.e. all of the membership requirements (registration, secure login, members access levels and so on), a way to add, edit, tag and display the content, a way to hide content from non-members and alternative ways to search the content. Although most of the content would be hidden there would need to be a way to show some ‘teaser’ content to encourage new members to join.
Jane already had a huge amount of content to add to the new site, including over 300 documents on every imaginable subject related to employing disabled people. All of this content needed to be stored, categorised and tagged appropriately to ensue it could be found. All the forms needed to be accessible and easy to use.
Within the constraints of fulfilling the aims for the site I was given a free rein in terms of the technologies used and the approach taken.
As the budget was small I decided to create the site using WordPress and where possible to create the functionality using existing technologies and modifications of existing plugins. The budget did not stretch to creating a custom application from scratch.
The other constraint, apart from money, was time. It all had to be functioning by the time of a pre-arranged meeting that Jane had set up to show the service to a room of potential corporate clients. The meeting date was set for 6 weeks from the point Jane got in touch.
Given the complexity of the project this was an incredibly tight time-frame. However, I did manage to provide a fully functioning website by the time of the meeting. The site was still located on my development server rather than on the evenbreak server at that point but nonetheless it was a bit of a miracle to get it done so quickly. The new site had to include a huge number of document and rsources so that the breadth of content could be demonstrated during the presentation.
I was delighted when Jane provide the following ‘testimonial’ which is so good it would get my in to heaven. 🙂
“Jim came highly recommended from experts in web accessibility, and so we engaged him to take over the Evenbreak site for us. However, Evenbreak is an online job board, and therefore a very complex site, with facilities for employers to pay for and post their roles, candidates to register and search for jobs, and many other complexities. Jim took all of this in his stride, having to understand the thinking of the previous developers very quickly. In addition to all of this, we asked Jim to design a bespoke portal for us, with very little lead-in time, which he worked on tirelessly, ensuring it was up to a fantastic standard for when we launched it.”
“I have vast confidence in Jim’s abilities, and am frankly quite amazed that he met all of our very demanding requirements so quickly and so professionally! We will be asking him to entirely re-build our site using his talents to build in both accessibility and responsiveness from the start. Many developers claim to have knowledge in these areas, but in my experience, very few if any have the practical knowledge and pragmatic approach that Jim has. I would advise any organisation looking for a high quality accessible website to talk to Jim. You won’t be disappointed (heąs also incredibly easy to work with).” Founder/Director, Evenbreak.
Give me a shout if you have an idea for a development project you would like to see realised. Tel: 07810 098119
Making non-text elements, particularly images, accessible is fundamental to accessible web design; even if you attended to this issue alone, you would make a big impact on the accessibility of your site.
All non-text elements must have labels (i.e. add the alt attribute); the alt attribute is a requirement for both HTML 4 and XHTML W3C standards based documents.
Text labels should serve the same purpose as the visual or auditory content it describes or replaces.
When all non-text elements are labelled by using alt attributes this ensures that:
The text labels can be read out by screen readers
People browsing with images off will still be able read the text
Search engines can index the text – helping the page to be found by potential visitors.
Text equivalents are needed for the following:
graphical representations of text
images used as list bullets
In these notes I will concentrate on how to add labels to images. However, the same principles described here will apply to other non-text elements.
Using the ‘alt’ attribute
The alt attribute is used to add a text label to non-text content.
The following example is from the photography gallery at the Glasgow West End website
<img src=”http://www.glasgowwestend.co.uk/imageuploads/uniave203bwsmall.jpg” alt=”Photo: University Avenue.” height=”206″ width=”319″ >
In the example above I have given a very short description of the photograph, using alt=”Photo: University Avenue.”. You will notice I have also included the additional text ‘Photo:’ – In the discussion part of this document I will explain my reasoning behind adding this additional text.
Should the text label describe the image, or describe the function of the image?
When trying to decide on the appropriate text to use: think, ‘what is this image for?”
Is it just a photograph as part of an image gallery?
Is it a photograph of a person?
Is it a submit button for a form?
Is it a navigation bar?
Is it a graph?
Is it a decorative image, spacer gif, or horizontal rule?
Labels for image gallery photographs, and photographs of people
For a photograph as part of an image gallery, a short description of the photo, like the example above, is appropriate.
Similarly with a photo of a person I would use the alt attribute to provide the persons name:
<img src=”http://www.glasgowwestend.co.uk/images/jimbyrne.jpg” height=”116″ width=”76″ alt=”Photo: Jim Byrne”>
There are other HTML attributes, namely the title and longdesc attributes, you can use to add further information – we will have a look at these shortly.
How to decide what to write in your descriptions?
In the case of a photograph or a decorative image – if I said, “what does the picture/image look like” and you had to sum it up in a only a few words, your reply to me is what you write as your alt attribute. Alt attributes should be short and to-the-point. More verbose descriptions can be provided by the use of the title and longdesc attributes, if necessary.
An image as a button
If the image is a button or link – then the label should describe the function or destination of the button or link. Usually the alt text is what you would have written if the link had just been text. For example: if you have a button and text written on it says, ‘About MCU’ , then your alt attribute value will be ‘About MCU’.
An example from the BBC website; the button they use on their search form is an image:
Both the image and the alt text say the same thing: ‘Search’.
In this example the alt attribute text describes the function of the image – it is not a description of what the image looks like.
When images are used as links, as they are on many navigation bars, the alt attribute should describe the destination of the link – in this case the function is to tell you about the contents of the page linked to. Here is another example from the BBC website:
In the above example the text in the alt atribute simply describes the page you are linking to, in this case the weather page.
How long should alt text be?
There are no technical limits to the length of alt attributes – but keep them short. Joe Clark in ‘Building Accessible Websites’ suggests limiting alt text to 1,024 characters – which seems a bit too long to me.
Use your own judgement when deciding how long your alt text should be, however, consider the following possible problems.
Problems with long alt attribute text.
Alt text if too long can be unreadable if the text is wider than the width of the image it describes. If you browse the web with images off you will come across many examples. Here is an example from part of the ‘Apple Computers’ home page:
As you can see, none of the above descriptions are readable, because the text in each case stretches beyond the width of the original image size.
Using the title, and longdesc attributes
Both the title, and longdesc attributes can be used to provide additional information for a non-text element.
the title attribute
The W3C explains the function of the title attribute:
“This attribute offers advisory information about the element for which it is set”
Not terribly clear, but the general idea is simple enough; use the title to provide some additional information over and above that used in the alt attribute. In the following example I have added the title attribute to the image tag used to display the photograph of University Avenue,
<img src=”http://www.glasgowwestend.co.uk/imageuploads/uniave203bwsmall.jpg” alt=”Photo: University Avenue.” height=”206″ width=”319″ title=”A photograph of University Avenue in the West End of Glasgow, taken on a bright winter morning” >
On many web browsers, when titles are used, a pop up speech bubble, or strip of text, appears on the screen when the pointer hovers over the picture (i.e. ‘tool tips’).
Adding longer descriptions – use the longdesc attribute
Unfortunately the longdesc attribute is not supported by current browsers, but it is still considered good practice to add it when appropriate to accommodate future browser revisions.
Use of the longdesc provides the opportunity to give a longer description or explanation than can be provide by either the alt or title attribute. The longdesc points to a full html page containing the description, e.g.
<img src=”http://www.glasgowwestend.co.uk/imageuploads/uniave203bwsmall.jpg” alt=”Photo: University Avenue.” longdesc=”uniavenue.html”>
The file, ‘uniavenue.html’ is a standard HTML page containing the text describing the look or the function of the image. The longdesc attribute would be appropriate for describing information contained within a graph or similar complex image.
Examples by type of image
Describe the most representative or final frame of the animation.
arrows and bullets
Use HTML entities, or left or right arrows or -> <-
Bullets use alt=”*” or use entitites: alt =”*” or alt=”&ast'”.
If you would like to use images as bullets in a list specify them in a style sheet:
ul [list-style: url(urlofimage)]
If you feel you really need to create a bulleted list without style sheets use star the character or the appropriate entities in the alt attribute.
<IMG SRC=”bullet.gif” ALT=”* “>
Company and Organisation Logos
The alt attribute should contain the name of the organisation or the company – do not describe the logo. There is no need to add the word ‘logo’ onto the organisation name. If the logo is also a link to the home page of the site, you can add the word ‘ – home to the end of the organisation name.
When a clickable button is followed by a text link, and clicking both leads to the same page, leave the alt tag empty for the button. Otherwise screen readers will read the same text twice.
Spacer images or decorative images with no ‘content’
Many web designers make use of what is called the ‘single pixel gif trick’, i.e. they use single pixel gifs resized appropriately to help create page layouts.
Always ensure that you add alt attributes to spacer or purely decorative images. Use the space character in the alt attribute, or leave the alt attribute empty: <IMG src=”spacer.gif” hspace=100 vspace=10 alt=” “>
This will ensure that screen readers ignore these images.
Other non-text elements
When using the FRAME element, the title attribute, and/or the longdesc attribute, should always be added:
<FRAME src=”body.htm” longdesc=”maindesc.htm” title=”Main content.”>
Add the alt attribute to audio files:
<A HREF=”hello.wav”> <IMG SRC=”helloaudio.gif” ALT=”Sound file: Hello. “>
The sound of hello.
Adding labels to images is a not always a simple matter
The value of an alt attribute for a non-text element is, for a certain group of users, one of the most contentious issues in the area of accessible Web design.
After publishing article on how to create accessible HTML tables (called ‘Table Manners’) I got an e-mail from Jouni Heikniemi pointing out what he saw as a problem with my use of the alt attribute for the photographs on the page. To summarise – he suggested I should use empty alt attributes for my pictures, (i.e. no labels) because the content of the pictures did not add to his understanding of the page.
The argument he put forward was that for people using screen readers, the introduction of a text description of the photographs just ‘got in the way’ and the content of the label could lead to confusion.
My take on it is that many of the disagreements spring from the following beliefs,
Alt attributes are all about making pages accessible to blind or visually impaired users. or
Alt attributes are for the benefit of everyone, including those who surf with images off, but like to retain the choice to click to download the images they are interested in – and need the alt attribute to help them make that decision.
The problem is that implementation of alt attributes will be different for each of these groups. Let’s take the example of the picture on some of the MCU pages. If you have looked at any pages on the site you will see that I have used photographs at the top of some of the pages. Sometimes these photographs will add to the understanding and meaning of the page, and sometimes they are merely decorative, or acting as section breaks.
For those images that do not directly add to the meaning of the page, the consensus seems to be that the first group above, i.e. those who believe that alt tags are purely for the benefit of blind users, will best be served by making the image invisible, by putting a space character, or no content, in the alt attribute. Doing it this way means that phrases like, ‘picture of a flower’ will not suddenly be read out (out of context) by a screen reader such as Jaws. This approach does, of course, take away the choice to know about all the images available on the page.
The above problem does not occur for those surfing with images off, because the text label occupies its own physical space on the page, and will generally be ignored by a user reading the main text. For visual readers, there is no chance of the image, or its text label, getting ‘in the way’ of the ‘real’ text. The visual user gets the benefit of knowing what the image is, even if it is only decorative.
The ideal situation may be one where information about decorative images is always given, and users can choose to make the text descriptions invisible or visible. For people using screen readers, the ability to turn the labels of decorative images off, while still having access to the labels of navigation bars or form buttons would be a good solution.
This implies that we need to be able to provide more ‘meta’ information about the images that appear on Web pages. How else would the client know what is a decorative and what is not a decorative image?
As a solution to the possible problems created by my use of alt attributes on the ‘Table Manners’ article I have added the ‘meta’ text ‘Decorative image:’ followed by a description of the image.
The photos, although mostly decorative are used on occasion to add a comment, or provide a humourous or analogous connections with the text. These are not intended to be obvious and are not essential for understanding of the text. An example would be the stop sign’ that is the first image on the ‘Table Manners’ article, in long hand I could be saying – “Stop! you shouldn’t be using tables for layout”, or I might not. The reader may, or may not, make a connection. By providing some text descriptions of the photo this ‘function’ is still retained.
Making this into a general rule, I now add a short descriptive label to all of my image labels. If I am adding a alt attribute to the image tag of a photograph I add ‘photo:’, if it is a decorative with useful content I put ‘image:’. However, I make decisions whether to add a text label at all, on a ‘case by case’ basis, depending on the context. On my image gallery in the Glasgow West End website I aways add image descriptions, in an article about a technical topic, such as one about making web text accessible, for decorative photos I leave the alt attribute empty if the content of the photo or image does not add to the understanding of the page.