search

18F / dol-whd-14c

The 14(c) system will become a modern, digital-first service. Applicants will be provided an intuitive online experience, guiding them through the information needed to complete their application correctly.
Other
16 stars 17 forks source link

Application Info Page #2 is accessible #287

Closed jmmcnj closed 6 years ago

jmmcnj commented 6 years ago

Remediate accessibility issues in the Application Info page, according to acceptance criteria noted in #198

Task

Acceptance Criteria

Functionality

No functional changes. The task is to remedy a11y issues.

Accessibility

  1. Keyboard Accessibility
    • [ ] 1.1 An interactive element or function can be accessed or activated by keyboard
    • [ ] 1.2 keyboard "trap" not found
    • [ ] 1.3 if non-standard keyboard commands are needed and they are documented
    • [ ] 1.4 TITLE provides information and equivalent information is found through text or visual context
    • [ ] 1.5 The visual focus can be determined at all times.
    • [ ] 1.6 focus always appears on the element it is programmatically on.
    • [ ] 1.7 if focus remains in the modal dialog box until the box is closed.
    • [ ] 1.8 if focus moves to revealed content OR a description of the content change is provided.
    • [ ] 1.9 the tab order is logical
  2. Web: Forms- Web forms include controls (checkboxes, radio buttons etc.), and editable content (text input, select options etc.).
    • [ ] 2.1 All form fields and their instructions and cues have HTML (‘Label for’ and ‘ID’ are used or TITLE is descriptive) or ARIA for association.
    • [ ] 2.2.All 'Label for' and 'ID' are valid code pairs.
    • [ ] 2.3 All form instructions that are provided by mouse over are available onscreen.
    • [ ] 2.4 All ARIA form fields have a NAME property that contains all of the instructions.
    • [ ] 2.5 All ARIA form fields have correct Role, State, and Value properties.
    • [ ] 2.6 All form controls identify their purpose. (Check if there are multiple form controls with the same visual label).
  3. Web: Links and User Controls Links and/or user controls must have meaningful names that describe the unique destination, function, and/or purpose of the control for assistive technology.
    • [ ] 3.1 All links have a unique and meaningful description.
    • [ ] 3.2 All scripted elements have a unique and meaningful description.
  4. Web: Images Web images include interactive images (links, buttons etc.), static images, charts, diagrams, text rendered as an image, etc.
    • [ ] 4.1 All images have an ALT, TITLE, or ARIA attribute.
    • [ ] 4.2 All meaningful images with ALT have an equivalent text description.
    • [ ] 4.3 All decorative images with ALT have ALT="".
    • [ ] 4.4 All images that contain text with ALT have the same text in the ALT attribute.
    • [ ] 4.5 CAPTCHA images describe their purpose. (DNA, after the captcha is removed)
    • [ ] 4.6 All components that have multiple statuses provide their current status
  5. Web: Image Maps (if no image map, then DNA) An image map is a single image that has designated regions or "hotspots" that contain links.Server-side image maps may not be used. Client-side image-maps must be used instead
    • [ ] 5.1 All image maps are client side
  6. Color and Contrast Color dependence is using color as the sole means to convey information. There must be contrasting colors/shades at a ratio of 4.5:1 for discerning between background and foreground content.
    • [ ] 6.1 if color is used but is not the only method to provide information.
    • [ ] 6.2 if the contrast ratio is 4.5:1 or greater when comparing all background and foreground colors. Page titles Programmatically identify Page Titles.
    • [ ] 6.3 There is a meaningful page title in plain language.
  7. Time Outs Messages and/or instructions to the user requesting their response within a given time are typically associated with sites that require a secure login. This includes both server time outs and client side security time outs. If a time out is about to occur, an alert must be posted for at least 20 seconds and the user must have the option to request more time. The alert (often a pop up window) and option to request more time must be keyboard accessible.
    • [ ] 7.1 The application provides notification before timing out.
    • [ ] 7.2 The application's time out notification is displayed for at least 20 seconds before timing out.
    • [ ] 7.3 The application provides user an option to request more time before timing out.
  8. Web: Language A default language must be programmatically identified for each page and for passages that use a language other than the default.
    • [ ] 8.1 if the correct default language for the page is programmatically set.
    • [ ] 8.2 if there is not a passage in a language that differs from the default language of the page. 9 Web: Section Headings Headings must be programmatically identified and must match the visual outline level.
    • [ ] 9.1 All visually apparent headings are programmatically identified with an . ( levels do not need to be correct.)
    • [ ] 9.2 Programmatic levels on all visually apparent headings match the visual structure.
  9. Web: Data Tables (If no table, then DNA) Data tables are those tables where the information in a cell requires a row or column header to adequately describe the cell's contents.
    • [ ] 10.1 HTML data tables' row and/or column headers are correctly identified programmatically.
    • [ ] 10.2 if there are data tables but none of them are images.
    • [ ] 10.3 if all HTML complex data tables' data cells are associated with their headers programmatically.
    • [ ] 10.4 if there are complex data tables but none of them are images
  10. Web: Style sheet Dependence style sheets are a means to provide visual formatting information to complement a web page's content.
    • [ ] 11.1 The order of the content did not change OR if the order of the content changed but is still logical.
    • [ ] 11.2 All relevant content and information from all meaningful images is available.
    • [ ] 11.3 All content does not overlap and stays legible.
    • [ ] 11.4 If no confusing elements are revealed on the page.
  11. Web: Frames Frames are a means of separating out sections of a web page into different navigable regions
    • [ ] 12.1 if all frames' Title or Name is descriptive.
  12. Web: Repetitive Content and Links - A method must be provided to skip blocks of repeated content or links on Web pages allowing a user to move directly to page-specific content.
    • [ ] 13.1 There is a method to skip repetitive content.
    • [ ] 13.2 There is a target for all skip links.
    • [ ] 13.3 All skip functions work properly
    • [ ] 13.4 If the relative order of the repeated components is the same as other pages.
  13. Web: Required Plug-ins (if no plug-In, then DNA)
    • [ ] 14.1 if on a public site, links to download all required plug-ins are provided.
    • [ ] 14.2 All plug-ins required to view content are compliant.
jmmcnj commented 6 years ago

After IE issues is resolved, @binwang89 will review with Accessibility tool and move to Reviewed

binwang89 commented 6 years ago

@ltsheu I am testing the application page now, the help icons are working except the top one "Show Help for All Items" when i use keyboard key, it is not working. I will use the remediation worksheet for now for all the issues for each web page before we got QA process got finalized.

binwang89 commented 6 years ago

@ltsheu I have done my manual testing for application info, please see the updated excel page. DOL14c-Accessibility-Remediation_11022017.xlsx
The Repetitive Content and Links are still not working. Style sheet Dependence - it seems the footer DOL logo is disappeared after i disabled the style sheet.

ltsheu commented 6 years ago

@binwang89 I'm not sure we can prevent the footer logo from disappearing when the stylesheet is disabled. The footer logo image is white, so without the red background behind it (stylesheet disabled), it is a white image on a white background (thus invisible). All DOL sites with this footer have the same issue. Can we replace it with the color logo? Are we allowed to deviate from the DOL footer template?

binwang89 commented 6 years ago

@ltsheu Yes, we are using the template from DOL and I am checking with the agency (OPA) that provided the template. I will keep you posted.

binwang89 commented 6 years ago

@ltsheu Yes, technically it's a problem that the image is white on a white background, but the "United States Department of Labor" text follows it so people would know that's what the link is for. Per OPA response -

  1. Not sure why the ALT text for the footer DOL seal is "Seal of the United States Department of Labor". The ALT text should be "United States Department of Labor".

  2. The template for the footer need to be change ( from OPA) to To make the template having the footer image as a background image, so the screen reader only read “United States Department of Labor" once.

can we change the ALT to match the image ?

ltsheu commented 6 years ago

Hi @binwang89 I have updated the alt text to say "United States Department of Labor" as requested. Once we can get back into the 14c application you can review again. 😄

I'm not sure we should change the logo to be a background image, as stated by OPA. The DOL footer template that we have been given uses an <img> there. The 14(c) footer template will be updated to the DOL template when we execute User Story #349.

ltsheu commented 6 years ago

@binwang89 I have fixed the keyboard functionality for the 'Show Help for All Items' Link.

binwang89 commented 6 years ago

@ltsheu we are not change the template, it will be done by DOL(OPA).
Thanks for update the ALT for footer impage.

binwang89 commented 6 years ago

@ltsheu tested it again, they looks good now. I will move it to next pipeline.