Most errors encountered during accessibility audits fall into a handful of categories. Making sure that your content is free from the following accessibility issues will expedite the review of your content prior to launch and, after launch, help you avoid having issues identified during periodic accessibility reviews.
1. Missing or Inappropriate ALT Text for Images
Adding alternative text (or ALT text) for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation, however, there are some basic principles and guidelines to follow when creating your ALT text.
- DO use ALT text that describes the image's content in context using natural prose and inculding punctuation, when appropriate.
- DO use "null" ALT text for images that are purely decorative, such as; embellishments, lines, bars and bullets.
- DO use descriptive ALT text for all images that are links or indicate another function, such as; a play button, navigational arrows, etc.
- DO use "null" ALT text if the ALT text is already used as visible text adjacent to the image, such as; captions or headshots of people when their name is adjacent to the image.
- DO include any text embedded in the image in the ALT text.
- DON'T include underscores or use file names for ALT text.
- DON'T include words like "photo of ..." or "image of ..."
- DON'T write exceptionally long ALT text (more than 125 characters). If an image requires a long description, create a textual alternative within the visible content or link to a separate page descibing the image's content in greater detail.
2. Vague or Inappropriate Link Text
Because links are so basic to the functionality of web content, inaccessible links are one of the most severe barriers to overall accessibility. Good link text is concise, clearly states the link's destination, makes sense out of context, describes any content that might launch non-HTML content (such as an email link, link to a PDF), and alerts the user if a link will open in a new window or tab.
Why is this important? Clear links make it easier for all users to scan a page for content. However, screen reader users often navigate from link to link, skipping the text in between, so understanding where a link will lead the user needs to be clear. Additionally, screen reader users sometimes utilize an alphabetically-organized list of links on a page, so link text should be constructed to be ordered intuitively when alphabetized.
- DO use link text that is short in length but clearly describes the link destination and will fall into a logical alpabetical order. For example, "contact us" vs. "you can contact us," or "how to contact us."
- DO include identify non-HTML file type links within the actual link text, for example; Application for Employment (PDF).
- DO signify in the link text any link that will launch a new window or tab, for example; Google (opens in a new window).
- DON'T use vague link text, such as; "read more," "click here," "this page" etc.
- DON'T include obvious (and to a screen reader redundant) words like "link," "webpage," or "website" in your link text.
- DON'T create adjacent links going to the same URL. (When adjacent links go to the same location this results in additional navigation and repetition for keyboard and screen reader users.)
3. Incorrectly Formatted Tables
Content in tables can be challenging to consume for any user, but if the table is not marked up correctly, it can be absolutely impossible to decipher for a user using a screen reader.
- DO designate row and/or column headers for all data tables. Headings can be set using the "table properties" dialog box or by using properly coded <th> tags in the raw HTML.
- DO try to "flatten" the table, when possible, and avoid spanned cells and multiple levels of header cells.
- DO use the scope attribute in the markup of complex tables and those that include multiple levels of headers.
- DO separate content into multiple tables when the headings or types of content change. (It's better to have multiple "smaller" tables than to "mash" multiple tables into a single table.)
- DON'T use tables for purely layout purposes, but if you must, make sure that the content makes sense when read linearly from left to right and top to bottom.
4. Incorrectly Used or Inappropriately Nested Headings and Lists
Pages should be structured in a hierarchical manner, generally with one 1st degree headings (<h1>) being the most important (usually page titles or main content heading), then 2nd degree headings (<h2> - usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on. Lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).
- DO make sure your lower level headings (especially, <h3> to <h6>) fit contextually under the previous higher level heading on the page.
- DO write heading text that succinctly describes the content that follows it. Use the styles menu to increase the font size of text that is not heading text, as desired.
- DON'T skip heading levels going down the page.
- DON'T use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<h1> - <h6>) for all content headings.
- DON'T repeat headings, especially don't repeat your page title heading (<h1>) in your main content area.
List of links or other content presented in a "list like" format should be formatted as HTML unordered or ordered lists. The content in HTML lists is much easier for screen reader users to parse and search.
- DO use HTML lists (ordered and unordered) for lists of items.
- DO use additional formatting in HTML lists to add additional semantic meaning or to stylize list items.
- DON'T simply use line breaks (<br>) or new paragraphs to present content that should read like a list of items or choices.
5. Missing or Automated Video Captions
Captions allow the content of web audio and video to be accessible to those who do not have access to audio. Though captioning is primarily intended for those who cannot hear the audio, it has also been found to help those that can hear audio content, those who may not be fluent in the language in which the audio is presented, those for whom the language spoken is not their primary language, etc.
- DO make sure any video content on or linked to from your web pages includes captions (open or closed).
- DO include a full text transcript of the video if captioning is not possible.
- DON'T rely solely on auto-captioning features offered by video hosting services, such as, YouTube. These auto-captioning features are an excellent starting point, but these captions need to be editted to add proper punctuation, fix transcription errors, and to add any additionally captioning information about non-spoken audio content (eg. "music playing," "a siren is heard approaching")