Writing HTML - Creating accessible pages and maximising Search Engine rankings

Meet SENDA legislation

The introduction of legislation (Special Educational Needs and Disabilities Act 2001) means that web authors can now be held accountable for the accessibility of our pages. The Act came into force on the 1st September 2002, and from that point onwards we need to have reached a minimum standard of accessibility on all of our pages. The World Wide Web consortium have produced long and detailed guidelines on the subject, summarised into ten basic points.

  1. Images and animations

    Use the alt attribute to describe the function of each visual.
    The alt attribute should be present in all img tags, eg

    <img alt="Liverpool John Moores University" src="jmulogo.gif" />

    It provides alternative text in the absence of the image, either because of a problem with the image file, or because the user has turned images off, to allow a screen reader to read the page. The ALT attribute should replace the purpose of what's in the image; it may do that better if you describe the picture, or if you use some different text that serves the same purpose, eg the alt text for a graphic showing an arrow to the right might most suitably read "More..."

    Image sizes - pixels and bytes

    The sizes of images need careful consideration. Take care to use images of an appropriate pixel width and height to your page layout, as this can cause flow problems. The file size must be kept as low as possible also to make sure a page loads quickly, this can be acheived by lowering the JPEG image quality, and by resizing.

    Choosing a pixel size and file size for your image depends on where the image will be used, for example on the first page of a website, it is better to have a page load very fast, so you might keep your images small in size, optimised for fast loading, or both. While on a page of information about a person, you can assume that by entering the page the user wants to read and see images of the person, so you may choose a larger or higher quality image here.

    If your image is a photograph, it is better to use the JPEG format (file extension .jpg), and to save the file with as much compression as possible without losing too much image detail. If the image is a design element using few colours and perhaps some text, then a GIF format might be better, as this allows you to minimise the colours to reduce the file size.

  2. Hypertext links

    Use text that makes sense when read out of context.

    For example, avoid Click Here.

    Lots of screen readers allow you to skip from link to link using the tab key - you can do the same with Internet Explorer, and then hit Enter to follow the link.

    However, when a sighted person does this, there is alot of supplementary information around the link to indicate its purpose. A screen reader will only read out the text of the link itself, or the alt text of a linked graphic, so a page filled with Click Here links will appear meaningless. Make sure the linked text gives enough information to allow someone to decide if the link is useful.

  3. Page organisation

    Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

    HTML was (and is) intended to be a hierarchical language. It is supposed to define the structure of a page, but it was quickly hijacked by the need to control how the page looks. Consequently, our own pages have tended use font tags where a h1 heading was more appropriate, because it was historically more difficult to control the size and colour of a h1 tag, in most browsers.

    Now that Cascading Style Sheets (CSS) are in common use, there is no need to use font tags in this way, or at all in fact, as they've been phased out of the HTML standard1. Instead, the stylesheet is used to define how h1 looks, the HTML simply describes the structure of our document.

    The JMU header file includes a standard CSS stylesheet which affects the shape, size and colour of most of the text and headings on our pages. The advantage to disabled users is that stylesheets can be overridden in the browser, too. If a user has a visual impairment, or a disability such as dyslexia, and finds that certain combinations of colours are better than others, they can use their own stylesheet to look at ALL pages. It also allows page authors to include alternative stylesheets, enabling them to provide one content page with perhaps a default, print, large text or high contrast set of views. CSS will give way to the locally applied style sheet, but font tags may not.

  4. Tables

    Make line-by-line reading sensible. Summarize.

    In the real world, tables have two possible purposes: to display a matrix of tabular information, and (more commonly) to control the layout of a page. How you make a table accessible really depends on why you're using it at all.

    A matrix table will probably be laid out in a fairly predictable way. It will have headings, perhaps at the tops of columns, or down one side, and then rows or columns of data relating to those headings. It displays information in a very structured way, to the visual observer, but not in a way that is easily made sensible as linear text, read aloud. Make sure, then, that you summarize your tables with a tag like this:

    <table summary="This table demonstrates that the combined income of this project exceeds the combined expenses by £24,000, and that the project can therefore be viewed as a success">

    <caption>Profitability of this project.</caption>

    Likewise, a caption will outline the purpose of a table, and allow a user to assess it's worth without ploughing through all the data.

    Identify header cells as distinct from data cells by using the <th> (table header) tags rather than the <td> (table data) tags. To associate columns with with a particular header, use an id attribute in the th tag, to give the heading an identity that other cells can be associated with, eg

    <th id="header1"> followed further down by <td headers="header1">

    A layout table comes with a significant health warning. ALL types of table are less accessible, ie, more difficult to read for many users, than paragraphs of ordinary text. Their use for aesthetic purposes has been frowned upon by W3C for some time. Ideally Layout tables are to be avoided in favour of a CSS based layout. CSS is widely supported on all modern browsers.

    Layout tables highlight the transitional state of web development. They are still widely used, but a growing body of web designers and programmers advocate the benefits of using HTML with CSS to eliminate non-semantic tables. Websites A List Apart and the Web Standards Project provide information and tutorials on standards-compliant HTML, For an introduction, please see the Web Standards Project page:What are web standards and why should I use them?

    A useful tool for checking the readability of your tabled content is the Lynx emulator at http://www.delorie.com/web/lynxview.html which will display a page as if read by a text-only browser. If the layout of your table doesn't make sense, this tool will make it quite apparent.

    Obviously, if this type of table doesn't have tabular headings in the same way as a matrix would, then don't use the th tags - they would be confusing.

  5. Graphs and charts

    Summarize or use the longdesc attribute.

    With any graphically displayed data, a summary or description will help to get the information across - use the summary attribute, or the longdesc attribute, as before.

  6. Image maps

    Use the client-side map and text for hotspots.

    We don't have many image maps on our pages, and those that we have are already client-side, as CIS don't run any server-side image mapping software. Server-side image maps are not normally accessible, as the details of targets and descriptions are only resolved at the server-side once a link is followed.

    As with more ordinary images, make sure that the links are adequately captioned with the longdesc and alt tags.

    Providing the same links as text outside the image map is also recommended.

  7. Frames

    Use the noframes element and meaningful page titles.

    What it says, really. CIS have always advised that frames be used sparingly, if at all, because they create all sorts of problems for most users, without the additional accessibility considerations. However, if you do choose to use them, make sure that the same information is available in a noframes tag, and that the titles of your individual frames bear some relation to the nature of their content.

  8. Scripts, applets and plug ins

    Provide alternative content in case active features are inaccessible or unsupported.

    For most people, this means Javascript. Just like with frames, if key information is conveyed by script on a page, there are noscript tags between which you can place alternative content. If possible, make sure that the events that trigger your script are not device dependent. For example, if a user prefers to navigate with the keyboard, rather than the mouse, will they miss out on something important on your page?

  9. Multimedia

    Provide captioning and transcripts of audio, and descriptions of video.

    A written transcript of audio material is always a good idea - the quality of audio reception over the web can depend as much on the quality of a users computer, as on what you try to broadcast. Likewise, video should be described, in case network congestion causes some of the visual effect to be lost. If you conform to those rules, then accessibility should not present any extra problems.

  10. Search Engine Optimisation

    Anticipating Search Engine access and making the most of it

    Search Engines such as Google and Yahoo, and even our own LJMU search system are an important audience to target when writing your pages. Accessibility, page structure and content are the key elements of good page writing, and are also of great importance to Search Engines.

    Search Engines visit your pages, assess their quality, content, and read the descriptions, keywords and the text of the page to judge it's relevance to specific topics.The better the quality of your pages and the higher the relevance, the higher they ought to rank in relevant searches.

    While there is no way to ensure a high ranking without promotion, the following are a few methods of adding Search Engine specific information to make the most of your page:

    Page Title

    A descriptive page title will always assist the ranking of a page.

    Page Content

    Search Engines read your pages, so the more readable they are, the more they have to go on. If your homepage has a Flash Animation, asking a visitor to enter the site, but no text within the HTML of the page, it has no information to decide what the page is about.

    Meta Tags: Description and keywords

    These fields take the following form:

    <meta name="keywords" content="LJMU, Liverpool, Undergraduate Courses" />

    <meta name="description" content="Information about LJMU" />

    The keywords meta tag allows you to specify words and phrases of relevance to the page. You might want to investigate the kind of search terms people use to find pages like your own, and include them here, separate each word or phrase with a comma. Aim to use between 17 and 23 keywords/phrases.

    The description meta tag allows you to specify a brief synopsis of the page. This text sometimes appears in Search Engine listings and helps to clarify what the page is about specifically. Aim to use between 17 and 23 words to do this.

    There are other well documented meta tag details you can use, some of which are codified for organisations, such as Dublin Core. Other commonly used meta fields include "author", to specify the page's author or author's, "generator", to specify the software used to write/generate the page.

    These suggestions will help Search Engines to read and classify your pages, but there are many factors involved in improving your search engine ranking in addition to the quality of your page, for example the number of other websites linking to your pages.

  11. Validate Your Work

    Provide captioning and transcripts of audio, and descriptions of video.

    Check your work. Use tools, checklist, and guidelines at
    http://www.w3.org/TR/WCAG

    This is actually the most useful piece of advice in the list. The W3C run code validators for HTML, XHTML and CSS. If your HTML and stylesheets meet the requirements of these validators, then you are already a long way down the road to accessible pages. The standards for HTML and CSS have been designed so that pages can be interpreted appropriately by different media. By following these rules, a page isn't just disabled-friendly - it can also be opened and viewed on a hand-held PC, for example, or an in-car audio browser, for surfing whilst you drive. The RNIB strongly recommend a single, standards-based web page, which allows for lots of different media, rather than a separate, text only page that is quickly forgotten about, and becomes out of date.

Further Reading

Please take a look at our latest advice for creating web pages from a Microsoft Word source, MS Word and Web Development.   Notes
  1. The font tag was deprecated following HTML 4.0


    Page last modified by Unknown on 28 October 2011.
     
    LJMU Logo banner imageLJMU Logo banner image (print)
    LJMU banner image
    LJMU Dream, Plan Achieve - Page ID:118190