Evaluation Report for Process Shepherd — Agent Access
About the Evaluation
- Report Creator: Angela Sison
- Evaluation Commissioner: Jarrod Neven
- Evaluation Date: Tue Jun 20 2023
Executive Summary
This report describes the conformance of the Process Shepherd website with W3C's Web Content Accessibility Guidelines (WCAG).
Based on this evaluation, the Process Shepherd website is close to meeting WCAG 2.1, Conformance Level AA. Some areas and compliances still need to be addressed.
Summary of failed compliances:
altattributes on image tags are not yet implemented.- Color contrast ratio on some images on the wizard session steps are still below the minimum required ratio. To resolve this, only icons or images that are not too bright should be used — preferably blue icons or images close to the website colors.
- Some pages still have font sizes below 14px. The smallest recommended font size for desktop is 14px. Font sizes smaller than that could be an issue for users with poor eyesight.
- Close icon and buttons on the course modals still do not highlight when on focus via keyboard, making it difficult to navigate through the modal using the keyboard.
Feedback on this evaluation is welcome.
Scope of the Evaluation
- Website name: Process Shepherd
- Scope: Testing if the website meets the minimum requirements of WCAG 2.1 with Level AA conformance. URLs for testing:
https://demo.dev.processshepherd.cc/loginandhttps://blue.dev.processshepherd.cc/login. Pages successfully tested: Keyboard compliance (Articles List, Full Articles, eLearning Section, Wizard Section); Font Accessibility (Articles List, Pagination buttons); Color contrast ratio (Wizard Sessions page). Not yet tested: Images for alt attributes, placeholder names or descriptions for when an image fails to load. - WCAG Version: 2.1
- Conformance target: AA
- Accessibility support baseline: Google Chrome
- Additional evaluation requirements: The report includes a description of the problem and repair suggestions for any errors listed. The evaluation covers all web pages and web content of the website, rather than a selected sample only.
Detailed Audit Results
Summary
Reported on 46 of 50 WCAG 2.1 AA Success Criteria.
- 29 Passed
- 4 Failed
- 0 Cannot tell
- 13 Not present
- 4 Not checked
All Results
1 Perceivable
1.1 Text Alternatives
| Success Criterion | Result | Observations |
|---|---|---|
| 1.1.1: Non-text Content |
Entire sample: Failed Articles List Page: Not present Wizard Catalog: Not present Wizard Session: Not present Course Presentation: Failed Wizard Sessions Page: Failed Wizard Sessions List: Not present eLearning Course List: Failed eLearning My Courses: Failed Full Articles page: Failed |
Entire sample: Text alternatives for images to name or describe them — if they fail to load or for text-to-speech for blind users — have not yet been implemented on the Process Shepherd website. Course Presentation: Text alternatives for images are not implemented. Image tags should have alt attributes as placeholder text for images that fail to load.Wizard Sessions Page / Wizard Sessions List / eLearning Course List / eLearning My Courses / Full Articles page: Same issue applies — alt attributes are missing on image tags.
|
1.2 Time-Based Media
| Success Criterion | Result | Observations |
|---|---|---|
| 1.2.1: Audio-only and Video-only (Prerecorded) | Not present | No audio-only or video-only content on the Process Shepherd website. |
| 1.2.2: Captions (Prerecorded) | Not present | There is no audio content on the Process Shepherd website. |
| 1.2.3: Audio Description or Media Alternative (Prerecorded) | Not present | There is no audio description or media alternative on the Process Shepherd website. |
| 1.2.4: Captions (Live) | Not present | No live audio content on the Process Shepherd website. |
| 1.2.5: Audio Description (Prerecorded) | Not present | There is no prerecorded video content on the Process Shepherd website. |
1.3 Adaptable
| Success Criterion | Result | Observations |
|---|---|---|
| 1.3.1: Info and Relationships |
Entire sample: Passed Articles List Page: Not present Wizard Catalog: Not present Wizard Session: Not present Course Presentation: Not present Wizard Sessions Page: Not present Wizard Sessions List: Not present eLearning Course List: Not present eLearning My Courses: Not present Full Articles page: Not present |
Asterisks are present for required fields, fields are highlighted when active, and error messages appear on error. Implemented in wizard creator forms, wizard flow creator forms, and modal forms. |
| 1.3.2: Meaningful Sequence | Entire sample: Passed All pages: Passed |
Layout and structure of all pages flow in a meaningful sequence from top to bottom and left to right. |
| 1.3.3: Sensory Characteristics |
Entire sample: Passed Wizard Session: Passed Course Presentation: Passed Wizard Sessions Page: Passed Others: Not present |
Flow creator: Use of rectangle boxes (blocks) and colors to identify different block types, and line connectors to link blocks. Course Presentations: Use of arrows to guide the user through slides. Wizard Sessions page: Color difference for buttons to identify active and disabled states. |
| 1.3.4: Orientation | Entire sample: Passed All pages: Passed |
All content is displayed in landscape orientation. Desktop-first display across all pages. |
| 1.3.5: Identify Input Purpose | Entire sample: Passed Most pages: Not present |
Tooltips are available throughout the website on forms and input fields, guiding users on the purpose of required fields. |
1.4 Distinguishable
| Success Criterion | Result | Observations |
|---|---|---|
| 1.4.1: Use of Color | Entire sample: Passed All pages: Passed |
Use of color is balanced and compliant with color contrast ratio requirements. Red and green are used in forms to indicate success and errors. |
| 1.4.2: Audio Control | Entire sample: Not present All pages: Not present |
The website does not have audio/video files that run on autoplay. Process Shepherd occasionally has embedded YouTube videos — no hardcoded videos. |
| 1.4.3: Contrast (Minimum) |
Entire sample: Failed Articles List Page: Passed Wizard Catalog: Passed Wizard Session: Failed Course Presentation: Passed Wizard Sessions Page: Passed Wizard Sessions List: Passed eLearning Course List: Passed eLearning My Courses: Passed Full Articles page: Passed |
Passed on the majority of pages. The minimum contrast ratio is 3.1 for the green and 3.42 for the main blue. Wizard Session (Failed): Images with a red question mark (?) used on the sessions page need to be swapped with less bright colored icons — preferably icons close to the website's blue color. |
| 1.4.4: Resize text |
Entire sample: Failed Articles List Page: Passed Wizard Catalog: Passed Wizard Session: Failed Course Presentation: Passed Wizard Sessions Page: Passed Wizard Sessions List: Failed eLearning Course List: Failed eLearning My Courses: Failed Full Articles page: Passed |
Some pages use 13px as the smallest font size. The minimum recommended desktop font size is 14px. Wizard Session / Wizard Sessions List: Smallest font size on the table is 13px — should be at least 14px. eLearning Course List / eLearning My Courses: Some font sizes are below 14px. |
| 1.4.5: Images of Text | Not present | Process Shepherd does not use images of text on the website. |
| 1.4.10: Reflow | Entire sample: Passed All pages: Passed |
The website is responsive and retains most elements until 780px. At 320px some elements are no longer fully visible. Process Shepherd is not a mobile-first website. |
| 1.4.11: Non-text Contrast | Entire sample: Passed All pages: Passed |
Adjacent blue colors on the side nav have a color contrast ratio of 3.87. |
| 1.4.12: Text Spacing | Entire sample: Passed All pages: Passed |
Spacing on the website passes the minimum requirements. |
| 1.4.13: Content on Hover or Focus | Entire sample: Passed All pages: Passed |
Tooltips are visible when hovering over an icon or text and are immediately dismissed once the cursor leaves the element. They do not obstruct other elements for a long period of time. |
2 Operable
2.1 Keyboard Accessible
| Success Criterion | Result | Observations |
|---|---|---|
| 2.1.1: Keyboard | Entire sample: Passed All pages: Passed |
The Agent user account is fully accessible with a keyboard across all tested pages. |
| 2.1.2: No Keyboard Trap | Entire sample: Passed | |
| 2.1.4: Character Key Shortcuts | Not present |
2.2 Enough Time
| Success Criterion | Result | Observations |
|---|---|---|
| 2.2.1: Timing Adjustable | Entire sample: Not present All pages: Not present |
Process Shepherd does not have time-sensitive features. It would help to detect user inactivity on wizard sessions and confirm if the user needs more time before proceeding. |
| 2.2.2: Pause, Stop, Hide | Entire sample: Passed All tested pages: Passed |
Pre-loaders and lazy loading are implemented across the website, providing feedback to users that content is still loading. |
2.3 Seizures and Physical Reactions
| Success Criterion | Result | Observations |
|---|---|---|
| 2.3.1: Three Flashes or Below Threshold | Not present |
2.4 Navigable
| Success Criterion | Result | Observations |
|---|---|---|
| 2.4.1: Bypass Blocks | Entire sample: Passed | |
| 2.4.2: Page Titled | Entire sample: Passed | |
| 2.4.3: Focus Order | Entire sample: Passed All pages: Passed |
When navigating via keyboard, focus goes in a standard left-to-right, top-to-bottom order across all pages. |
| 2.4.4: Link Purpose (In Context) |
Entire sample: Passed Course Presentation: Not present Wizard Sessions Page: Not present All other pages: Passed |
Link labels and titles are described adequately for users to understand where the link will redirect and what content they will see. |
| 2.4.5: Multiple Ways | Entire sample: Passed All pages: Passed |
Users can navigate out of the current page via the side navigation or by clicking the browser back button. |
| 2.4.6: Headings and Labels | Entire sample: Passed | |
| 2.4.7: Focus Visible |
Entire sample: Failed Articles List Page: Passed Wizard Catalog: Passed Wizard Session: Passed Course Presentation: Passed Wizard Sessions Page: Passed Wizard Sessions List: Passed eLearning Course List: Failed eLearning My Courses: Failed Full Articles page: Passed |
Focus indicators are present throughout the site, except for the course list modal. The "X" icon, "Add to my courses & start later", and "Enroll Now" buttons on the modal do not highlight when navigated via keyboard. |
2.5 Input Modalities
| Success Criterion | Result | Observations |
|---|---|---|
| 2.5.1: Pointer Gestures | Not present | |
| 2.5.2: Pointer Cancellation | Not present | |
| 2.5.3: Label in Name | Entire sample: Passed | |
| 2.5.4: Motion Actuation | Not present |
3 Understandable
3.1 Readable
| Success Criterion | Result | Observations |
|---|---|---|
| 3.1.1: Language of Page | Entire sample: Passed All pages: Passed |
Default language is English across all pages. |
| 3.1.2: Language of Parts | Not checked |
3.2 Predictable
| Success Criterion | Result | Observations |
|---|---|---|
| 3.2.1: On Focus | Entire sample: Passed All pages: Passed |
Focus behavior is consistent and predictable across all pages. |
| 3.2.2: On Input | Entire sample: Passed | |
| 3.2.3: Consistent Navigation | Entire sample: Passed | |
| 3.2.4: Consistent Identification | Entire sample: Passed |
3.3 Input Assistance
| Success Criterion | Result | Observations |
|---|---|---|
| 3.3.1: Error Identification | Entire sample: Passed | Input field and form validations are implemented. Error messages appear to inform the user which field is incorrect. |
| 3.3.2: Labels or Instructions |
Entire sample: Passed Course Presentation: Passed All other pages: Not present |
All forms and input fields have labels and placeholder text. |
| 3.3.3: Error Suggestion | Entire sample: Passed All pages: Passed |
Error messages, tooltips, and success/error toast messages are visible to inform the user of their actions. |
| 3.3.4: Error Prevention (Legal, Financial, Data) | Not checked |
4 Robust
4.1 Compatible
| Success Criterion | Result | Observations |
|---|---|---|
| 4.1.1: Parsing | Entire sample: Passed | |
| 4.1.2: Name, Role, Value | Not checked | |
| 4.1.3: Status Messages | Not checked |
Sample of Audited Web Pages
- Articles List Page —
https://demo.dev.processshepherd.cc/articles/catalog - Wizard Catalog —
https://demo.dev.processshepherd.cc/wizard/catalog - Wizard Session —
https://demo.dev.processshepherd.cc/wizard/15/sessions/66 - eLearning Course List —
https://demo.dev.processshepherd.cc/courses - eLearning My Courses —
https://demo.dev.processshepherd.cc/my-courses - Full Articles page — Articles page where the user can read and view the full articles
- Course Presentation —
https://demo.dev.processshepherd.cc/course-presentation/25 - Wizard Sessions Page —
https://demo.dev.processshepherd.cc/wizard/session?page=1&per_page=25&sort=date_ended&sort_order=asc - Wizard Sessions List —
https://demo.dev.processshepherd.cc/wizard/session?page=1&per_page=25&sort=date_ended&sort_order=asc
Web Technology
HTML, CSS, JavaScript, Vue.JS
Recording of Evaluation Specifics
Not provided.