Scope of Report
| URL | https://www.ride.ri.gov/ |
|---|---|
| Conformance Target | WCAG 2.1 Level AA |
| Last Updated | 02/27/2023 |
Report Overview
| Principle | WCAG 2.0 Success Criteria | Case Examples |
|---|---|---|
| 1. Perceivable | Text Alernatives, Multimedia Captions, Adaptable, Distinguishable | Enough contrast between foreground and background colors on content |
| 2. Operable | Keyboard Accessible, Enough Time, Seizures and Physical Reactions, Navigable, Input Options | Some people cannot use a mouse or sensor pad, so a website needs to be accessible via keyboard |
| 3. Understandable | Readable, Predictable, Input Assistance | Use active voice when writing text content and provide error messages when necessary |
| 4. Robust | Compatible | Ensure users can easily access a website on all devices (e.g., mobile compliant) |
Remediation Report
| Success Criteria | Description | Responsibility | Date of Completion |
|---|---|---|---|
| 1.1.1 | IFRAME tags should have alternate content. | Production | N/A |
| 1.1.1 | IMG tags must have an ALT attribute. | Production | N/A |
| 1.1.1 | IMG tags need more descriptive ALT attribute text. | Production | N/A |
| 1.1.1 | Change redundant alt text. | Production | N/A |
| 1.1.1 | Recommend moving the link off of the image. | Production | N/A |
| 1.3.1 | PDFs must be tagged to be accessible by screen readers. | Production | N/A |
| 1.3.1 | Remove content from layout table. | Production | N/A |
| 1.3.1 | Remove content from layout table. | Developer | N/A |
| 1.3.1 | If more tabs are not going to be added, we recommend moving the content out of the tabs. | Production | N/A |
| 1.3.1 | Convert table(s) to data table(s). | Production | N/A |
| 1.3.1 | Data table has empty header. | Production | N/A |
| 1.3.1 | Data tables need to use table headers and scope. | Production | N/A |
| 1.3.1 | Data tables are complicated and difficult to parse. | Production | N/A |
| 1.3.1 | Headers should not be skipped within the main content. | Production | N/A |
| 1.3.1 | Should use largetext class instead of headers for intro text. | Production | N/A |
| 1.4.3 | Color contrast doesn't look like it would meet standards. Needs design review. | Developer | N/A |
| 1.4.3 | Sidebar callout needs container so that white image is visible. | Production | N/A |
| 2.1.1 | Popup is not operable by keyboard. Recommend moving content to page. | Production | N/A |
| 2.1.1 | TreeView is not keyboard accessible. | Developer | N/A |
| 2.4.1 | IFRAME tags must have the TITLE attribute. | Production | N/A |
| 2.4.1 | PDF document titles must not be blank. | Production | N/A |
| 2.4.3 | Links can be tabbed to that are not visible. | Developer | N/A |
| 2.4.7 | Need keyboard focus style. | Production | N/A |
| 3.1.2 | Text in another language should be marked with the lang attribute. | Production | N/A |
| 3.2.4 | Add icon headers to contact information. | Production | N/A |
| 4.1.1 | Categories needs to be cleaned of tables and hidden images. | Developer | N/A |
| 4.1.1 | Optimize markup. | Developer | N/A |
| 4.1.1 | Condense duplicate link tags. | Production | N/A |
| 4.1.1 | Condense lists. | Production | N/A |
| 4.1.1 | Clean content of inline styles, empty tags and improperly used headers. | Production | N/A |
| 4.1.1 | Clean empty tags from pager. | Production | N/A |
| 4.1.1 | Use only one(1) H1 on a page. | Production | N/A |
| 4.1.1 | Page needs an H1 at the top of the page. | Production | N/A |
| 4.1.1 | Remove longdesc from image. | Production | N/A |
| 4.1.1 | Videos should be switched to iframe code. | Production | N/A |
Additional Issues
| Description | Responsibility | Date of Completion |
|---|---|---|
| No new issues at this time | Developer | N/A |
Principle 1: Perceivable
1.1 Text Alternative
1.1.1 Non-text Content: (Level A)
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
Outcome: Tentative
Notes:
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
1.2 Time-based Media
1.2.1 Audio-only and Video-only (Prerecorded): (Level A)
Prerecorded video and audio have alternate content.
Outcome: Tentative
1.2.2 Captions (Prerecorded): (Level A)
Captions are provided for prerecorded video.
Outcome: Tentative
1.2.3 Audio Description or Media Alternative (Prerecorded): (Level A)
An audio description or alternative content is provided for video content.
Outcome: Tentative
1.2.4 Captions (Live): (Level AA)
Captions are provided for live video.
Outcome: Tentative
1.2.5 Audio Description (Prerecorded): (Level AA)
An audio description is provided for video content.
Outcome: Tentative
1.3 Adaptable
1.3.1 Info and Relationships: (Level A)
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Outcome: Tentative
Notes:
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
1.3.2 Meaningful Sequence: (Level A)
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Outcome: Tentative
1.3.3 Sensory Characteristics: (Level A)
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
Outcome: Tentative
1.4 Distinguishable
1.4.1 Use of Color: (Level A)
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Outcome: Tentative
1.4.2 Audio Control: (Level A)
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Outcome: Tentative
1.4.3 Contrast (Minimum): (Level AA)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
Outcome: Tentative
Notes:
Show Locations
- Flagged pages to go here
1.4.4 Resize text: (Level AA)
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Outcome: Tentative
1.4.5 Images of Text: (Level AA)
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text.
Outcome: Tentative
Principle 2: Operable
2.1 Keyboard Accessible
2.1.1 Keyboard: (Level A)
All functionality of the content is operable through a keyboard interface.
Outcome: Tentative
Notes:
- Flagged pages to go here
Show Locations
- Flagged pages to go here
2.1.2 No Keyboard Trap: (Level A)
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface.
Outcome: Tentative
2.2 Enough Time
2.2.1 Timing Adjustable: (Level A)
Users have the option to turn off, adjust or extend any time limit set by the content unless it is essential or longer than 20 hours.
Outcome: Tentative
2.2.2 Pause, Stop, Hide: (Level A)
Users have the ability to pause, stop, or hide any content that is auto-updating, movinve, blinking or scrolling.
Outcome: Tentative
2.3 Seizures
2.3.1 Three Flashes or Below Threshold: (Level A)
Web pages do not contain anything that flashes more than three times in any one second period.
Outcome: Tentative
2.4 Navigable
2.4.1 Bypass Blocks: (Level A)
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Outcome: Tentative
2.4.2 Page Titled: (Level A)
Web pages have titles that describe topic or purpose.
Outcome: Tentative
Notes:
- Flagged pages to go here
2.4.3 Focus Order: (Level A)
Focusable components receive focus in an order that preserves meaning and operability.
Outcome: Tentative
Notes:
- Flagged pages to go here
2.4.4 Link Purpose (In Context): (Level A)
The purpose of each link can be determined from the link text alone.
Outcome: Tentative
2.4.5 Multiple Ways: (Level AA)
More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
Outcome: Tentative
2.4.6 Headings and Labels: (Level AA)
Headings and labels describe topic or purpose.
Outcome: Tentative
2.4.7 Focus Visible: (Level AA)
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Outcome: Tentative
Notes:
Principle 3: Understandable
3.1 Readable
3.1.1 Language of Page: (Level A)
The default human language of each Web page can be programmatically determined.
Outcome: Tentative
3.1.2 Language of Parts: (Level AA)
The default human language of each passage or phrase can be programmatically determined if it differs from the surrounding content.
Outcome: Tentative
Notes:
- Flagged pages to go here
3.2 Predictable
3.2.1 On Focus: (Level A)
When any component receives focus, it does not initiate a change of context.
Outcome: Tentative
3.2.2 On Input: (Level A)
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
Outcome: Tentative
3.2.3 Consistent Navigation: (Level AA)
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
Outcome: Tentative
3.2.4 Consistent Identification: (Level AA)
Components that have the same functionality within a set of Web pages are identified consistently.
Outcome: Tentative
Notes:
- Flagged pages to go here
3.3 Input Assistance
3.3.1 Error Identification: (Level A)
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
Outcome: Tentative
3.3.2 Labels or Instructions: (Level A)
Labels or instructions are provided when content requires user input.
Outcome: Tentative
3.3.3 Error Suggestion: (Level AA)
If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user.
Outcome: Tentative
3.3.4 Error Prevention (Legal, Financial, Data): (Level AA)
For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, the user must have the option to reverse the submission, check the data for input error or be able to review the information before submission.
Outcome: Tentative
Principle 4: Robust
4.1 Compatible
4.1.1 Parsing: (Level A)
In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
Outcome: Tentative
Notes:
- Flagged pages to go here
Show Locations
- Search
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
Show Locations
- Flagged pages to go here
4.1.2 Name, Role, Value: (Level A)
For all user interface components, the name and role can be programmatically determined.
Outcome: Tentative
Save your progress. Note: This data is stored locally and will only be available on the computer on which it is saved.
Color Contrast
| Foreground | Background | Level AA | Level AAA | Contrast Ratio |
|---|---|---|---|---|
| #FFFFFF | #195186 | Pass | Pass | 12.1:1 |
| #bebebe | #141414 | Pass | Pass | 9.9:1 |
| #141414 | #95bddf | Pass | Pass | 9.3:1 |
| #FFFFFF | #293684 | Pass | Pass | 10.7:1 |
| #141414 | #97aaf2 | Pass | Pass | 8.2:1 |
| #1b243b | #ff8e47 | Pass | Pass (Large Text Only) | 6.8:1 |
| #141414 | #ffb383 | Pass | Pass | 10.6:1 |
Design Recommendations
Download a preview of the new RIDE Public website theme layout color code chart:
RIDE eCMS Platform Color Palette [PDF, 174 KB]
Additional Recommendations
Notes: Check for highest standard - Level AAA compliance
Content is generally more accessible as HTML. It is recommended that content be moved onto the website whenever possible. If that is not possible or feasible, PDFs can be made accessible using the instructions in the Resources section.
PDFs to be made accessible
- Flagged pages to go here
Overview
Here are some guidelines for content maintenance to make sure that any new content added to the site meets accessibility compliance guidelines.
Please Note: The following online trainings are legacy instructional videos based on the old publishing system. However, the techniques applied for accessibility are still valid and in use today.
Text Content
Content should be written as if styling on the site didn’t exist. For example, do not reference objects on the page via color or shape.
Why is this important?- Users with vision impairments may not be able to tell what color or shape is being referenced; either because they cannot tell shades apart or because they are reliant on assistive technology like a screen reader.
- Some users may be using text-only browsers or special stylesheets which would change the look of the objects being referenced.
Headers
Use header styles wherever possible instead of using bolded text or images as headers.
Why is this important?- Headers give the content semantic meaning that images and bolded text cannot. Screen readers will tell the user which level of header is applied so that the user can understand how the header relates to the rest of the content on the page. This will give the user a better mental map of how the page is structured.
- Some assistive technology, screen readers in particular, give users access to an outline of the page that is built with headers. This is so they can easily jump down the page to whichever section they are interested in. Having text as a header rather than styled text or an image will make the section available in this outline.
There should only be one H1 on the page.
Why is this important?- Having one H1 header on the page helps the assistive technology build the outline of the page.
- Having multiple H1s on a page was considered invalid code until fairly recently. Support for multiple H1s has not made it into all assistive technology programs. Also, assistive technology is expensive, and it is common for users to be very slow to update to the new versions even if they may have better support.
Do not skip header levels within the main content area. There can be multiple H2s, H3, etc., but a page shouldn’t go from H1 directly to H3.
Why is this important?- Skipping heading levels can be confusing for users who are not able to visually see the content structure.
- If headers are not in a logical order, some assistive technology may have trouble forming the page outline. This could lead to some sections being left out.
Links
- Link text should indicate where the link should go. Avoid “click here” or “learn more” type language for link text.
- If you are going to add a document type indicator, it should be separate from the functional link text. For example, a link to an annual report PDF should be Annual Report [PDF, file size]
- Note: Document type indicators are neither recommended nor discouraged. The formatting is recommended so that the information is readily available to screen reader users but including it in the first place is simply a matter of preference.
- Screen reader users are able to skip from link to link or get a list of all links on the page. These tools remove the link from its context, so it is important that the user is able to tell where a link will go from the text alone. For these users, having generic "Learn More" text or having the document type indicator outside of the link text does not give them all the information they should have before they decide whether or not to click the link.
Image Content
Avoid adding images that contain text that is important to the comprehension of the page. For example, logos that supplement text are okay but using an image as a header may hinder screen-reader users.
Why is this important?- It is easier for assistive technology to relay text content to a user than it is to relay content via an image. Also, text in images is not available for users with text-only browsers.
- To meet accessibility requirements, text must be used to convey information unless the presentation of the text is essential to the information being conveyed. Logotypes is considered essential.
All images should have alt text:
- If an image is serving a function (such as an image that links out), the alt text should describe the function or indicate the link destination.
- Alt text should describe the image itself as succinctly as possible.
- Alt text should not be redundant to the copy around it.
- If an image is a complex graphic, the alt text should just be an identifier and the contents of the graphic should be described in the content of the page.
- If an image is purely decorative, it is okay to have an empty alt tag.
- For image links, it is more important to describe where a link will go or what it will do rather than the contents of the image.
- It takes much longer for screen reader users to get through a page than sighted users. Having succinct descriptions of images saves the user some time. They should be able to understand the purpose of the image quickly and then get back to the rest of the content on the page.
- Removing redundant text also saves time for users. Redundant alt text is often an indicator for insuffient alt text and can be replaced with a more meaningful description.
- Complex images provide challenges to both users with vision impairments and users with cognative disabilities. Having the description of the image as text within the content of the page will benefit all users, whether or not they are using assistive technology. Adding the indicator in the alt text connects the image to the content text for screen reader users.
- Decorative images do not need to be described, but if there is no alt text, screen readers will read out the file name of the image. Having the empty alt text prevents this so that the user is not given unnecessary information.
Table Content
Avoid using tables unless a data table is required.
Why is this important?- Tables are difficult for screen reader users to understand. They are unable to quickly make the visual associations sighted users would be able to. If a table is used for layout only, a user may try to find associations that don't exist and get confused. Data tables provide more context for the user and can be used.
Data Tables
- Data tables must have headers in the first row. To do:
- Right click on the table
- Go to “Table Properties”
- Go to the “Accessibility” tab
- Change “Heading rows” to “1”
- Data table headers must indicate scope (associates cells in a column with their respective header cells). To do:
- Right click on the table
- Go to “Table Properties”
- Go to the “Accessibility” tab
- Check off “Associate cells with headers”
- These settings add headers to a table and associates those headers with the rest of the cells in the table. When a screen reader goes through a table, the header will be read along with the cell content.
Layout Tables
If layout tables are unavoidable, table headers and scope must not be applied.
Why is this important?- If adding headers doesn't make sense for the content, it is better to just leave them off. No context is better than false context.
Note: A good rule to follow when distinguishing between Data and Layout tables is if headers are pertinent to the information then it is most likely a data table.
Video Content
Videos must have properly synchronized closed captioning. This can be done through YouTube, which has an instructions page and video tutorial describing how to add subtitles and closed captions to a video.
Why is this important?- Closed captioning gives the deaf and hard of hearing users access to video content that would otherwise only be available to users able to hear audio.
Embedded Content
This includes YouTube videos and other iFrames (HTML documents embedded inside another HTML document)
- The embed code of all iFrames must have a title attribute added describing the contained content.
- This will need to be added in the HTML view of the editor.
- Example:
<iframe title=”What is a Community Foundation Video” width="420" height="315" src="https://www.youtube.com/embed/cognB4M_Rtw" frameborder="0" allowfullscreen></iframe>
- The embed code of all iFrames must have alternate content. This is similar to “alt text” for images. If for any reason the video or other content does not display correctly in the browser the “alternate content” will. Thus, we recommend alternate content to just be a link to the content where it is not embedded.
- This will need to be added in the HTML view of the editor.
- Example:
<iframe title=”What is a Community Foundation Video” width="420" height="315" src="https://www.youtube.com/embed/cognB4M_Rtw" frameborder="0" allowfullscreen>Watch the <a href=”https://www.youtube.com/watch?v=cognB4M_Rtw” target=”_blank”>What is a Community Foundation Video</a></iframe>
- Without a title, assistive technology cannot automatically tell what is within the iFrame. The title gives a brief summary of the content to the user before they enter the frame.
- Alternate content will appear in browsers that do not support iFrames, like text-only browsers.
JavaScript
Any functionality provided through JavaScript must also follow accessibility requirements. We recommend that any new JavaScript embeds are reviewed for accessibility before they are added to the site.
PDF Content
The easiest time to create accessible PDFs is during conversion from a Word document to a PDF.
To create an accessible document from Word 2016:
- First, use the same guidelines above to make sure that the text and images are best accessible in the Word document.
- To save, select “File” and then “Export.”
- Next, choose “Create PDF/XPS.”
- Select the Options button at the bottom of the Export window.
- In the pop-up window, ensure that “Document structure tags for accessibility” is checked off.
- Choose “Publish” to Export/Save document.
For older versions of Word and alternate instructions, please use this resource: https://webaim.org/techniques/acrobat/converting
Why is this important?- By default, PDFs are difficult for screen readers to understand. The content is not structured semantically like HTML is, so the reading order may not always make sense. Exporting the PDF for accessibility provides more hints for the screen reader to use when it reads through the document.