Review of: https://learndigital.dev/programs/

In Assignment 2C: Accessibility, we are reviewing the web page above to determine if it meets accessibility standards. Accessibility standards are defined in cognitive load, language usage, color and typography.

COGNITIVE LOAD

Cognitive load revolves around the amount of information we can process. Because we can only process so much, it’s important design a website to help the visitor absorb information. Let’s go over the 6 parts of cognitive load.

Grouping:

The Web Design and Development program webpage does this very well. Content is grouped where it is relevant, and separated when it is not. There is clear physical separation by use of sections. This makes each area of the webpage easy to follow.

Chunking:

The webpage breaks information up so it is easer to read and take-in. A good example is when smaller sections are used to break-up information dense certificate/diploma program options.

Hierarchy:

By use of clearly defined headers, the webpage has a good hierarchy structure. We’re able to see the clear physical separation of content, which allows me as a visitor to quickly access what I want.

Anchors:

Anchors do not appear to be in use. This may be purposeful, as it does force the visitor to engage in other content on the site, such as the career opportunities and affordability of programs. However, the webpage may benefit from a sticky menu to easily traverse its content.

Consistency:

The design is clean and predictable: my attention is drawn to the focal points.

Grid:

There is a solid visual structure and theme to the webpage, which lends to its predictability and readability.

No cross-referencing:

The webpage requires very little in the way of cross-referencing, if any at all. Information contained within each section is self-reliant, and does not cause an increase to cognitive load be having to retrace my steps to confirm information.

LANGUAGE

The webpage condenses, and simplifies, a difficult subject very well. It’s not easy to make post-secondary education programs understandable – this kind of stuff is information rich and often very complex by nature.

However, the use of acronyms throughout the program options – UI/UX, HTML/CSS – and undefined terminology (Javascript, WordPress, Front-end, Swift, etc) is neither easy to interpret nor interactive for the visitor. Instead, defining these items with practical examples/images could help visitors become more interested.

COLOR

The color theme is appropriate and helps the visitor progress through the webpage: the use of whitespace prevents cluttering.

TYPOGRAPHY

The typefaces Open Sans and Agenda create a consistent textual theme across the webpage: their similarities allow them to blend well together. The use of Agenda for headers, and Open Sans for paragraph text, with variations on font styles helps create a visual flow. Being that the fonts are similar, there is no apparent disruption when switching between them.

PRINCIPLES OF ACCESSIBILITY

PERCEIVABLE

In Firefox and Chrome, the webpage adjusts very well with the zoom function, allowing seamless transition to “larger” text for those with visual impairments. There are alt texts that could be added/updated to further improve perceivability. Contrast appears to be a small concern with some items, but not prohibitively so. Tests with Read Aloud were effective. For those with significant visual impairment, the webpage may better assist them with an embedded audio file that summarizes the content of this page, or perhaps even a recording for each respective section.

UNDERSTANDABLE

The layout and design is intuitive, and stylistically flows. The content itself is presented in a satisfying way, and is interpreted with relative ease. It is no simple task to breakdown, and present, academic discussion and materials – but I do believe the webpage does a great job of this. According to WebFX Readability Test, the pages text scores in a range suitable for ages 16+, which is ideal considering NIC’s target audience. The only concern to address would be the use of acronyms and coding languages without any practical examples; however, this is understandable. By increasing the amount of text, or interactivity of how information is provided, you not only increase the complexity but as well potentially reduce the accessibility.

OPERABLE

There are multiple concerns regarding operability addressed in the Accessibility Concerns section of this audit. Of the principals of accessibility, this may be the most impacted; however, not in such a way as to prevent total disruption of service. It is, however, worth noting that there is room for improvement.

ROBUST

The webpage is robust. Inspecting the webpage shows good use of semantic HTML, and the website itself scales well and presents fine on a smart device and desktop computer with multiple browsers. There are insignificant concerns with Google Chrome that are discussed in more detail below, but I do not believe it to be a fault of the designers.

TOTAL SCORE

3.5/5 would be the total score. There is room for improvement, but the existing webpage does not have prohibitive concerns that would unfairly restrict access to any particular group of people.

ACCESSIBILITY CONCERNS

There are only minor accessibility concerns. I would not classify it at a higher grade, since there are no significant issues that prevent a total disruption of service. Even without the below concerns addressed, the webpage would retain 94% or more functionality. We’ll list concerns going from the top of the page to the bottom. A combination of the WAVE Accessibility Tool and manual code inspection were utilized to determine accessibility concerns.

  • NIC Digital Design logo (cropped-DigitalDesignAndDevelopment_HorzLogo_Tag-01-2.png) contains alt text of “h”, this is not descriptive.
  • “Get Started” text appears small, and according to WAVE tool has poor contrast. I ran it through color vision deficiency simulators and it showed well in all variations; however, I feel the text size could be increased for greater legibility.
  • After Rajneet, my Chrome web browser is displaying LSEP. From what I can tell on stackoverflow, this issue may be related to Chrome, the font type, or a server-side scripting error; however, I am not sure it would be server-side as the issue appears to be when the line break (<br>) is not being used. In this case, the line break is being used. This displays correctly on Firefox: no LSEP appears. This does not appear to be an accessibility issue for screen readers, I tested this using Read Aloud, the extension did not try to interpret LSEP. However, it is worth noting this may confuse those who are not familiar with web errors or do not have English as a first language and may not be able to discern this is not part of its syntax.
  • WAVE tool indicates a skipped heading level on the <h1> for “Study at a trusted Canadian public post-secondary institution”, it reports that skipped headings can have navigation issues for assistive technology users.
  • LSEP appears chrome browser on <h3> for “Enjoy affordable digital education LSEPtuition and fees”
  • WAVE tool indicates the contrast of white text on the Web Design Fundamentals, Communication Design, and Digital Design + Development (Design Stream) blocks using the background color #00c4b3, is difficult to read; however, it appeared fine in color vision deficiency simulations.
  • When resizing a web browser, or being on a smart device, the header text in blocks for certificates/diploma’s sometimes overlaps the transparent objects (semi-circle, quarter circles). This leads to white text bleeding on a semi-white background: in color vision deficiency simulations, this displayed but it was difficult to discern the letters affected.
  • WAVE tool indicates skipped header on the <h5> for “Web Design Fundamentals”
  • WAVE tool indicates an event handler concern with all the certificate/diploma blocks . I manually inspected the code, confirmed the use of the command onclick=”expandcard(‘card#)”, and tested this on a smartphone and browser. On the smart device it was response; however, if a persons stylus was defective, or the touchscreen was defective, achieving a solid click may not be easy. Further, I am not sure how the “onclick” command operates with persons relying on a voice activated navigation assistant. Would the tool/software tell them they need to say “click” if the resolution was such that the block did not open?
  • In the “Study on Vancouver Island” section, featuring a world map, the worldmap.png does not contain alt text.
  • In the aforementioned section, WAVE tool indicates a skipped heading in the cultural acknowledgement.
  • Quotation marks (quotation-mark.png) picture used in multiple sections does not have alt text.
  • Icons for Facebook, Twitter and Instagram on the last section do not contain alt text.

Lastly, we’ll briefly discuss the contact modal. I tested this on a smart device and two different web browsers. There appears to be no significant concerns, it would be advisable that the drop-down menu for selecting your area of interest be modified. The contact box is, itself, rather large. It’s already taking up a great degree of space, making it a bit longer so visitors are not required to click once to drop the interest menu, then click again to select an interest, would be preferred. The close button could be re-colored to be more apparent.