Quick Tips for an Accessible Web Site
The following tips are things which can quickly and easily be done to any web site to ensure that it meets basic accessibility requirements. Please view the W3C-WAI checkpoints for a list of guidelines to create a fully accessible site.
1. Images & animations: Use the alt (alternative text) attribute to describe the function of each visual. (Level A/1)
Images can be made accessible to those using non-graphical browsers (text only) or those with impaired sight who use screen readers by providing alternative text which aims to provide equivalent information to the user that is presented visually by the image.
Every single image must have an alt description tag giving equivalent functional, descriptive or contextual information in a clear text format. Alt text too often contains superfluous, un-necessary information, making it harder for screen reader users to extract the useful on-page information. Therefore, alt text should be kept short and succinct. However, if an image has no significant meaning then it must be given an empty alt tag in preference to no alt tag. An empty or null alt attribute is shown as alt="" and should be used for images that are intended to create purely visual (non-meaningful, non-semantic) design effects.
When a site is viewed without pictures it must have the same information and be as easily accessible as the graphic version of the site.
Ensure that alt attributes are used to convey meaning to your visitors, rather than meaning to you and your colleagues for example, on a logo that also works as a link back to a home page, use alt="Cardiff University home page" rather than alt="Cardiff University logo". To a vision impaired user it is of little interest that the image that they cannot see is a logo. The fact that by clicking the image they will be taken back to the home page is far more significant.
For images that are used as links, the alt text should make sense as a link title when read out of context. For images that are purely decorative and contain no information, such as spacers, lines and fills, use the null alt text attribute (alt="").
For extremely informative and complex images, it may be more appropriate to use the Long Description (longdesc) attribute. As a rule of thumb, alt text should be no longer than 70-80 characters, any longer, and the longdesc attribute should be used.
Do not precede the alt text with "Image of..." or "Picture of....". Screen readers automatically announce that there is an "Image" unless the alt text is null.
If both alt text and a longdesc attributed to the same image, do not repeat the alt text within the longdesc if possible. The same is true of image captions, the text used in the caption should be more informative than that in the alt text and should not just be a copy of the shorter alt text.
2. Hypertext links: Clearly identify the target of each link, using text that makes sense when read out of context for example, avoid "click here". (Level AA/2)
Clear link titles are essential for users to decide whether or not they want to follow a link and to understand what happens when they do. They are particularly important for people who are not overly familiar with computers and the web.
For users of assistive technology who are listening to the content of a web page, it is important to identify the target of links via link text. Screen reader users will often review the list of links on a page before investing the time to read through the page content. This is the equivalent of visually scanning a page to get an overview of what a page contains and the options available. Because the list of link titles is read out of context, it is important to provide link titles that do not require the user to read the surrounding information.
All link text, whether it is visible on a web page or as alt text on image links, must clearly tell the user the purpose and destination of the link.
Provide clear, upfront information about the consequences of following a link, including its destination and any associated effects, must be provided. The information provided should include the destination of the link; if following the link takes the user away from the current web site; if following the link opens up a new browser window; if following the link activates a feature which could tie up the browser for a while, such as a file download; and if following the link submits information to a database.
Links should not open new browser windows and if they do so, it must be made clear to the user. Include a warning such as "(opens a new window)" as part of any link title which activates a pop-up window. Including this warning makes the link title more meaningful when read out of context.
Links opening documents and downloads must be followed by, or include, information regarding the document type and its size, for example, ("report.pdf 180K)". If possible, it is also useful to provide estimates of the download times for various types of connections alongside the document/download link, for example, "(180K modem - 8 minutes)".
Phrases link "click here" and "more" are of little use to someone using a screen reader especially when read aloud and out of context. It is important that link text describe the target of the link. If possible, you should also avoid using the same alt text more than once on a page.
3. Heading Levels: Use headings to convey document structure, in addition to lists and consistent structure. (Level AA/2)
Headers are things like titles, section headings and row and column headings in tables, which are used to communicate structure of the information on a web page. Headers should only be used to convey information structure, and not to create presentation effects such as different sized text.
For users of assistive technologies, page structure and the use of headings is critical in visualising the content of the page.
Use header elements to convey structure on a page. HTML allows you to specify a hierarchy of heading levels by using different header tags, for example, H1, H2, H3 > H6 so that an H1 heading looks bigger and bolder than an H2 heading
Headings should always follow a logical hierarchical order.
Some screen readers will read content assigned as a header in a different tone or voice to other content on a page, providing the user with important clues about document structure.
Using heading tags to make non-heading text bigger and bolder can confuse users by making content which is not a header look like one. This makes it very difficult to gain an understanding of the structure of a document or page, and should therefore not be used to create presentation effects such as different sized text.
Missing heading attributes will therefore miss-inform and confuse screen reader users.
4. Divide large blocks of information: ensure that large blocks of information are divided into more manageable groups where natural and appropriate. (Level AA/2)
Computer users are generally uncomfortable with reading large blocks of text on a computer screen and tend to skim through content by scanning headings, subheadings, lists etc. This is easier to do if content is broken down into easily digestible chunks.
As a rule of thumb, a user should not have to scroll down a page for more than approximately two inches. If however, this is not possible, 'Back to top' links or something similar, should be used to break up text and allow the user to quickly and easily jump back to the top of the screen.
Where possible, break page content into easy to comprehend logical chunks of information such as sections and sub-sections. Use heading tags to give pages structure and improve content navigation.
Inserted 'Back to top' links at natural breaks within a page, should be positioned on the left hand side of the screen, as screen readers scan text from top to bottom, left to right.
Group related links at the top of a web page.
Have extremely long pages of text with no logical breaks or links back to the top of the page.
Do not randomly divide groups of information on a page, this can confuse users and has no benefit.
5. Colour: Ensure that all information conveyed by colour is also available without colour. In addition, ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen. (Level A/1 & Level AA/2)
Colour is useful for conveying information by should be solely relied upon to communicate meaning. Not all users can easily perceive differences in colour and they would find it difficult to understand information which is communicated by colour alone, for example, a red-green colour-blind user will find it hard to distinguish between two identically shaped and sized buttons when one is green and the other is red.
Users who work with poor quality or monochrome display screens also find it hard to perceive colours.
If colour is used to denote information (such as clickability), reinforce it with additional signs for example, make the link text bold, underline the link.
Ensure that the difference in contrast between the colour of text and the colour of the background are sufficient for users to be able to read the text, including users who have impaired colour vision or who use a black and white screen.
Refer to colour in text, for example, "visit the red box for Help", as this is useless direction for users who can not see or who can not distinguish between colours.
Avoid colour combinations such as red and green together. Of computer users, one in twelve are red-green colour-blind. To these users, red and green can both appear as an olive green colour and it is difficult for them to distinguish between the two colours.
6. Tables: Make line by line reading sensible. Summarise, and for data tables, identify row and column headers. (Level A/2, Level AA/2 & Level AAA/3)
Most accessibility problems encountered with tables arise from using these structural elements for aesthetic and presentational purposes. Before using tables, review the reasons for including them. Tables should only be used on web pages if they provide a logical format for the data and not because they are visually pleasing i.e., a data table should only contain information which is presented in tabular format, for example, in a timetable.
For users of assistive technologies, each time a table is used, screen readers announce the existence of the table and its row and columns. If table rows and headers are not correctly identified in the HTML, the contextual information required to make sense of the structure of the table is lost when read aloud, rendering the information in the table useless to the user.
When it is necessary to use a table for layout, the table must linearise in a readable order where the contents of the cells become a series of paragraphs one after another. Cells should make sense when read in row order and should include structural elements (that create paragraphs, headings, lists etc) so the page make sense after linearization.
Identify table headers and use appropriate mark-up to associate data cells <td> and header cells <th> for tables that have two or more logical levels of row and column headers. In a table that lists members of academic and research staff, a typical table header might be 'Academic Staff', and table cells associated with it would include Paul Jackson, Mike Patterson, Andrew Ridgley, and so on. A sighted user who is using a graphical browser will see the connection between 'Academic Staff' and the column of names directly below. But screen reader users require additional mark-up that connects the table headers to its associated data cells.
Provide a summary of the purpose and structure of the contents of a data table helps users who may be using a screen reader or text only devise. A table summary displayed in an HTML attribute but which is not displayed in a standard browser window, will only read aloud be a screen reader. The summary attribute is read aloud before the contents of the table cells to ensure that the user is aware of the information presented in the table.
<table summary "insert your table summary here">
Use data tables to house non-tabular data. There are a couple of ways to determine whether or not data is tabular, if the information that you are going to place on a page is information that would make sense to record or track in a spreadsheet, it is almost certainly tabular data.
If you are going to have header fields at the top of columns of data or to the left of rows of data, then it is tabular and a table should be used.
More modern screen readers are getting quite good at spotting layout tables and are ignoring most of them, but to be on the safe side use stylesheets for layout, not tables.
7. Pop-up or spawned windows: Do not cause pop-ups or other windows to appear or redirect the user without informing them. (Level AA/2)
Pop-up or spawned windows can be confusing and frustrating for users who are not overly familiar with computers and the web. Many users find them annoying as they take control of the desktop away from the user, who can then quickly become disoriented.
Pop-ups or spawned windows cause problems for screen reader users because they take the focus without warning, causing it to read the content in the new window, usually without warning the user that a new window has opened. If the new window contains content from another site, the user can become very disoriented or confused.
If pop-up or spawned windows are used, the uses should be informed.
If it is not possible to redirect an external link so that the new page opens within the existing browser window, include a message like "opens a new window" as part of the link title which activate the pop-up.
Including a warning as part of the hyperlink makes the link title more meaningful when read out of context, for example, it will be read by a screen reader when the user opts to call up a list of links on a page.
Use pop-up or spawned windows where possible.
Pop-up or spawned windows should not be used as a way to present error messages.
8. Acronyms & Abbreviations: Specify the expansion of each abbreviation or acronym when it first occurs. (Level AAA/3)
Abbreviations and acronyms may be indecipherable when machine spoken or output as Braille. Correct mark-up of abbreviations or acronyms makes reading easier for users of screen readers, audio browsers and Braille devices.
Providing explanations of acronyms and abbreviations improves readability for foreign language users, those who have never encountered the abbreviation before and those with reading difficulties.
Provide explanations of acronyms and abbreviations directly in content text, as you would in a document created in Word. Use the <abbrev> and <acronym> elements.
Ignore these elements. You would not think to include an acronym or abbreviation without a relevant expansion in a paper document, therefore, the same rule applies for online information.
9. Clear & simple language: Use the clearest and simplest language appropriate to a site's content. (Level A/1)
Overuse of technical words and jargon makes web content difficult to understand for many users. Complex, or long sentences and paragraphs are difficult to read and comprehend.
Divide large blocks of information into more digestible chunks (see point 2).
Review page content to ensure that it is free of jargon.
For technical or complex words, it is recommended that a Glossary of terms be created to accommodate both dyslexic and foreign language students.
Use clear headings to provide context and page structure.
Publish large and long blocks of information on a page.
Include heavily complex and technical words unless completely necessary. Unless a web site features specialised content requiring specialised terminology, the language used to communicate information should be understandable by the widest possible audience.
10. Avoid Un-necessary Punctuation & quotation mark-up: Do not use un-necessary punctuation in your content or use quotation mark-up for formatting effects such as indentation. (Level AA/2)
Text which is a quotation should be marked up as a quotation, rather than having quote marks and indentation specified as attributes.
Correct use of the quotation mark-up can break a page into chunks of content which help users to read content more easily. Some screen readers will read quotations in a different tone of voice, providing users with important clues about document structure.
Every form of punctuation is read and announced to screen reader users. "." is announced as "full stop"; "/" as "forward slash" etc.
Use the "Q" tag for quotations and the "BLOCKQUOTE" tag for longer quotes, which are 'blocked' or indented from page margins.
Misuse the quotation attribute, this can confuse screen reader users.
Avoid any non-essential punctuation for example, removed those colons from form labels; avoid using "...." at the end of a sentence; take out the ">>" from submit buttons. If these items must be used, insert them as background images through the stylesheet, so that they do not get announced to screen reader users.
11. Bold and Italic text: Do not use bold text on web pages. If you need to emphasis text, use the <strong> element. (Best Practice)
Bold and Italic text cause problems for users with vision impairments and for those using screen readers.
Italic text appears to wobble on screen for many users and is therefore difficult to read. Bold text can appear 'fuzzy' looking for some users but also causes problems for screen reader users, as it is often used to denote structure on a page which is not interpreted by screen readers.
Use correct HTML mark-up in the form of header elements to denote bold text.
For journals and publications, Italic text is the recognised format for titles. This use of Italic text is accepted however, it should be kept to a minimum and not used whenever possible.
Use Italic text where possible, and avoid using bold text at all times.
12. Graphs & charts: Summarise or use the longdesc (Long Description) attribute. (Level A/1 & Level AAA/3)
If an image such as a graph or chart contains information beyond what can be conveyed in a short alt attribute (see point .1) you can use the longdesc attribute, allowing you to describe the image in as much detail as you like. The value of the longdesc attribute specifies a link to another page or file that contains a detailed description of the content of the image, the longdesc attribute should be used on the <img>element.
Use the longdesc attribute to assign meaning to graphs and charts. Along with the 'summary' attribute (see point 9), these can aid screen reader users to mentally visualise the purpose and results of graphs, charts and tables.
Do not duplicate the graph or chart's alt text in the longdesc, the text used is in the longdesc attribute should be more informative than that in the alt text.
13. Frames: Use noframes element and meaningful titles.
For visually enabled users, frames may organise a page into different zones, for non-visual users, relationships between the content in frames for example, one frame has a table of contents, another the contents themselves, must be conveyed through other means. The use of the title attribute of the frame element to describe the contents of each frame provides a label for the frame so that users can determine which frame to enter and explore in detail.
Note: the title attribute labels frames, and is different from the title element which labels documents. Both should be provided, since the first facilitates navigation among frames and the second clarifies the user’s current location.
Not all browsers can support frames and thus the noframes element is used so that the browser may still display the frame content. Meaningful content should be provided in the noframes element which follows the frameset and contains a body element. Meaningful content can include a version of the entire content of the frames in the frameset, or it can consist of instructions and links for users to find the content. Often the links point to the frame documents, outside their frames context. Noframes content must not consist of instructions for users to switch to a frames-capable browser.