1
Sample Accessibility Report (SEC.gov) – October 2008
SEC.gov
AccessibilityAssessment
For: Sample
Jim Thatcher, Consultant
October 3, 2008
512-306-0931
Executive summary
This isanaccessibility assessment of fiveSEC.govpages. Some “techniques”are included in the report. These usually are part of a best practices document I prepare for clients.
From the perspective of the current Section 508 standards, these 5 pages fare quite well. There are only four issues listed here where Section 508 standards are not met; two are minor (unimportant images without alt-text) and two are major (explicit labeling of forms).
Relative to the proposed Section 508 Standards, there are eleven issues where these are not met.
Explanation of the table headers
- # is the item number in the table
- Page is a short name or the page being reviewed
- Issue – Description of where the page is not consistent with the specified accessibility guidelines and standards.
- Std (Standard) – The references in the table are the provision letters and numbers. The letters in this column refer to theSection 508 §1194.22 standards ( For example (a) refers to 1194.22(a), the first provision of the Section 508 Web Accessibility Standards which deals text alternatives for non-text content (alt-text). When a 21 prefaces the letter, that refers to the Section 508 Software Standards, §1194.21 ( The numbers (e.g. 1.1) in this column refer to the WCAG 1.0 checkpoints (Another set of numbers in this column (e.g. 1.3.1) refers to the WCAG 2.0 success criteria (
- Sev (Severity)- The severity column indicates the importance of the issue;
- High means that the corresponding errors are the most important to fix and are either Section 508 requirements or Priority 1 in WCAG 1.0.
- High means that the issue is at Level A (Priority 1) in the WCAG 2.0 guidelines and in the Section 508 Refresh. These issues are not violations of the current 508 Standards.
- Med generally indicates that the issue is at a Priority 2 level or a subjective interpretation of a Priority 1 requirement – e.g., alt text is present but could be improved.
- Low means some improvement would be great!
- Use indicates where usability of the access accommodation can be improved.
- Good – these are examples of things done well
- Modification– Suggestions for fixing the problem
Table of Contents
Accessibility Assessment
Executive summary
Explanation of the table headers
Table of Contents
SEC Home Page
SEC Search
SEC Site Map
SEC About
SEC Fast Answers
SEC Home Page
(Reviewed 9/29-30/2008)
# / Page / Issue / Std / Sev / Modification
1 / SEC Home / Active images. There are no errors on 5 active images. / (a) 1.1 1.1.1 / Low / I don’t call these errors, but in 4 of the 5 cases, the alt-text could be improved. See below.
TechniquesActive Images /
- If the image is active (image link, image button, image map area), then the alt-text should be the function of the image, what the image does, where the link goes.
- If the image is text, then the alt-text should (usually) be the same as the text in the image.
- If the image conveys infromation the alt-text should convey the same information
- Never use alt=”” on an image in an anchor without text in the anchor too.
(a) / / Alt-text: alt="Enforcement tips - how to send tips to the SEC's Division of Enforcement". That goes way beyond the text in the image alt=”enforcement tips” is correct. It may be that you wanted this information to appear as a text pop-up. If so, use the sucking alt-text suggested above, and put the longer text in the title attribute of the link (anchor).
(b) / / Again the alt-text is too long (alt=”Spotlight on Current SEC Topics”). Correct alt-text is alt=”Spotlight”.
(c) / / The image is just, , and has alt=”Rss Feeds” which would be OK, except it duplicates adjacent text – making it two RSS Feed links. The image should be combined with the text in one anchor (<a>) and then alt=”” on the image.
(d) / / Here alt=”Idea Logo” – but that is a description of the image, not where the link goes. Correct alt-text is alt=”IDEA”– maybe you want alt=”I D E A”so it is spelled out.
Techniques Decorative Images /
- If the image is decorative, redundant or generally conveys no information, then use alt=”” for the text alternative.
2 / SEC Home / Decorative images. There are 19 larger inactive images including ten of these, , with correct alt=”” down the left side. But the Logo has three parts, two have alt=”SEC Seal”. / (a) 1.1 1.1.1 / Med / Put alt=”” on this part of the seal(image on the right). Bottom part already has alt=””: /
3 / SEC Home / Formatting images. There are 153 smaller “formatting images” with correct alt=””. / (a) 1.1 1.1.1 / Good
Techniques Structural Markup /
- Use HTML list markup for lists and HTML heading tags for headings.
- Do not use list markup when the cotent is not a list – same for headings.
4 / SEC Home / Structural markup. There 19 cases of “bullet images” (see below) with alt=”*”which is read by a screen reader as “asterisk.” There are many lists on the page and only one singleton list at the top center is marked up as a list (samples below). / 3.6 1.3.1 / High / Eliminate all the “fake” lists and mark them up as unordered lists. The one instance where youdo have a ulelement (second link at the top of the main content) it is not really a list.
At the very least, use alt=”” on the bullets or use alt=”item” which is the information in the image
5 / SEC Home / In-page navigation. There is one heading at the top of the main content: “SEC Seeks More Transparent Disclosure for Investors” – that provides minimal compliance with section 508 requirement for a technique to skip repetitive navigation. / (o) 13.6 2.4.1 1.3.1 / High / You should have a “skip to main content” link at the top of the page, one that is visible when it gets focus. There are 19 tab-stops from the top of the page to main content. The heading works as a technique if you use a screen reader (or the Opera Browser) – but headings navigation does not work without a screen reader and with IE or Firefox.
Techniques In-page Navigation /
- Code all section headings on the page as HTML headings
- Make sure there is one such heading immediately following the main navigation links, thus providing a technique for skipping those navigation links
- Have an HTML heading at the top of each major section of each page
6 / SEC Home / In-page navigation. There are several section headings that should be marked up as headings. / (o) 13.6 2.4.1 3.5 1.3.1 / High / The heading at the top is h3 – it should be h1. The blue headings like should be h2 and probably one on right – “Information for:” shouldh3.
Techniques Contrast /
- The contrast between text color and background colors is measured by a “Luminosity Contrast Ratio” which can be evaluated with the Colour Contrast Analyser: The tool is also available on the Web Accessibility Toolbar,
- The contrast ratio should be at least 5:1 for normal text and 3:1 for large or bold text for level AA conformance.
7 / SEC Home / Contrast. All instances on this page comply with the WCAG 2.0 – except link text when focused – see portion of screen shot below / 2.2 1.4.3 / Med / This is unusually low contrast ratio, 1.4:1, and needs significant improvement.
8 / SEC Home / Link Text. Link text together with associated link context must say where what a link will do. Several instances of “More …” are typical violations of this requirement. / 13.1 2.4.4 / High / When the headings are properly marked up, #5, those headings will give context for all the More… links; that is true already for the very first such link.
SEC Search
(Reviewed 9/29-30/2008)
# / Page / Issue / Std / Sev / Modification9 / Search / Active images. Only one active image – alt-text is good. / (a) 1.1 1.1.1 / Good
10 / Search / Decorative image. There is one error, a section of the SEC seal (see #2) which has alt=”SEC seal”; this is redundant. / (a) 1.1 1.1.1 / Med / Use alt=””. /
Techniques Form Labels /
- Associate prompting text explicitly with their controls using the label element when the on-screen text is adequate and contiguous.
- When on-screen text is inadequate or dispersed, use the title attribute on the input element.
- Do not use both title and label on and control and do not use the label element as a container of both text and the control.
11 / Search / Form labels. There is no programmatic labeling on any of the 11 form controls. / (n) 12.4 1.3.1 / High / Use the label element with all the on-screen text for every control except for the radio buttons – there you must use title attribute as suggested below.
title=”and include ownership forms 3 4 and 5”
title=”and exclude ownership forms 3 4 and 5”
title=”and search only ownership forms 3 4 and 5”
12 / Search / In-page navigation. There is good placement of three headings in the main content area, the blue text like, “Search Company Filings”. These are all h1. There is also an h6 around the modification date at the bottom. / (o) 13.6 2.4.1 / High / The h6 on date modified is an error. Remove it.
Also there shouldn’t be 3 h1’s – a low priority issue in my opinion; they should be h2.
13 / Search / Structural Markup. There is one list on this page and it is marked up as an HTML list. / 3.6 1.3.1 / Good
14 / Search / Keyboard. As the screen shot above shows, tabindex has been assigned to some but not all input controls. The result is a disaster for keyboard users – for example the main search field is tab stop 1, the search button is tab stop 23! / 21(a) 9.4 2.4.3 / High / It is best to just remove the tabindex attributes. Alternatively, if you use tabindex for any from control be sure that all controls, links and buttons of that form are also assigned tabindex in the natural order.
SEC Site Map
(Reviewed 9/30/2008)
# / Page / Issue / Std / Sev / Modification15 / Site Map / In-page navigation. Again there is one heading (see screen shot) – This is a perfect example how very useful headings navigation would be – to be able to just step through the sections of the site using the H key. / (o) 13.6 1.3.1 / High / Make each of the red headings (like Regulatory Actions) an h2.
See #12 - remove the h6 at the bottom.
16 / Site Map / Structural markup. There is no HTML list markup here. / 3.6 1.3.1 / High / There are 12 lists on the page that should be marked up as lists (ul, li).
17 / Site Map / Inactive images. Those bullets (), 82 of them, have alt=”*”. / (a) 1.1 1.1.1 / Med / alt=”” – see #4
18 / Site Map / Formatting images. 15 of 41 formatting images have no alt-text. / (a) 1.1 1.1.1 / High / alt=””
19 / Site Map / Contrast. The main links (like What We Do) have a contrast ratio of 4.6:1 which almost meets the requirement which is 5:1. / 2.2 1.4.3 / Low / Changing text color to #626262 lifts the contrast ratio to a healthy 6.1:1. This is a low priority because the current contrast ratio is almost OK – on the other hand the change is trivial – a change in a few places in the CSS file – changing #737373 to #626262.
20 / Site Map / Active Images. The SEC seal, top left, is a link to home page. It is actually three separate images (see #10), two of them inside an anchor element (<a>) that links to home page. The first has alt=”SEC Seal”, the second is alt=” “ (quote space quote) / (a) 1.1 1.1.1 / High / But “SEC Seal” is not where this link goes. Correct alt-text is alt=”S E C” (spaces so it is spelled) or alt=”Security and Exchange Commission”. For the second part, alt=” ” is OK, but alt=”” is better.
SEC About
(Reviewed 10/2/2008)
# / Page / Issue / Std / Sev / ModificationAll the issues of the previous page plus …
21 / SEC About / Formatting Images. This time there are 65 formatting images with no alt-text. / (a) 1.1 1.1.1 / High / alt=””
22 / SEC About / In-page navigation. There is one heading as in the previous page above.More needed / (o) 13.6 1.3.1 / High / Make all red (What We Do, class=mainCat) and blue (Select Data, class=headerNoLink) headings into real HTML headings, h2. Note that the class name acknowledges it is a heading! I also think “About the SEC” on left should be h3.
23 / SEC About / Link Text. There are four instances of the link text “Rules” which open different pages. These links need context to elucidate what they do. / 13.1 2.4.4 / High / There are two possibilities here: 1) Add a title attribute to each link, consisting of the text in the table cell on the left.
2) Simpler; this is a data table, and mark it up appropriately. See #24.
TechniquesData Tables /
- For data tables, use the table header element, th, on each header cell
- And/or include the scope attribute on each header cell; scope=”row” if it is a row header and scope=”col” if it is a column header.
- If the corner cell is a heading it must have a scope attribute.
24 / SEC About / Data Tables. The table at the top right of the page is a data table even though it is small. The meaning of some of the data there (in particular the “Rules” links) depends on the row headers. / 2.2 1.4.3 / Med / This is easily fixed by using the second technique above; add scope=”row” to each of the four row headings. This will not change formatting, and now as a screen reader user goes down the column with “Rules” links, they will hear the data on the left, the row header.
SEC Fast Answers
(Reviewed 10/2/2008)
# / Page / Issue / Std / Sev / ModificationSomeissues on the previous pages plus …
25 / Fast Answers / Formatting Images. No errors here. / (a) 1.1 1.1.1 / Good
26 / Fast Answers / In-page navigation. There is the one obvious heading at the top – then each letter (in blue) is a level 2 heading. Perfect. Except that darn h6 at the bottom of the page. / (o) 13.6 1.3.1 / Good / (Remove the h6 on “Modified 9/23/2008”, see #11)
27 / Fast Answers / Form labels. The search form has no programmatic labeling. / (n) 12.4 1.3.1 / High / Use the label element around all the prompting text.
1
Jim Thatcher, Consultant CONFIDENTIAL