Quality Assurance

• 

  Run through each page with the WAVE Chrome Extension.

  After running the WAVE: Web Accessibility Evaluation Tool, I received 11 errors. Five out of those errors were related to an empty heading. After further inspection, the web page uses empty headings as spacers. Additionally, 6 of those errors were related to empty links. These errors were existent inside of social media icons. I suggest adding ‘aria-label’ to these links in order to remove this error and improve accessibility.

  
  

  In addition to these errors, there were 6 “Very Low Contrast” errors. Although after further inspection, 2 of these errors were falsely flagged. I discovered this by testing the contrast with another application. I suggest improving the contrast by choosing more distinct colors like a foreground of black and background of white.

• 

  Users should be able to navigate through content using their keyboard.

  After going through the webpage by only using Tab and arrow keys, I was not able to get through a lot of the content. Therefore this this item in the checklist fails.

  
  

  The web page allows to show a button that lets the user skip to main content but instead it skips to the footer area of the webpage. One recommendation would be to add ‘tab-index’ into the html to highlight over the expand buttons which will allow the items to expand. Additionally adding focus to each item in the list would also be beneficial so users can tab through each item in that content area after expansion.

• 

  Users should be able to navigate content using a screen reader.

  Similar to the last point, navigating through content with a voice-over or screen reader is as difficult as using the webpage with just the keyboard. A lot of the content have missing focuses therefore it doesn’t read them aloud with the screen reader.

  Therefore, by adding the recommendations from the previous checklist item and adding alt text, to each focus item, users will be able to access the web page with a screen reader better.

• 

  The general architecture and hierarchy of the content should make sense.

  The general hierarchy of the content makes sense. The navigation bars are where they should be, the main body is shown with hidden expanding menus and the header and footer are well documented. The heading-title texts indicate what is under them and the remains hidden unless invoked by expanding.

  There is no recommendation needed for this checklist item.

• 

  Charts and images should all have alt-text so that users with screen readers or users on a slow connection will still be able to understand the images.

  There are not many images available on this web page therefore this checklist item isn’t as related as the others. Although, the few images that are available, are missing alt text on some of them. Therefore, by using a screen reader, it is very difficult to figure out what the image is.

  For example, social media icons don’t have alt text because they are shown as links. Adding alt text or removing them from screen readers with an “aria-label: hidden”, would suffice this failed check list item. Additionally, it is recomended that all images that are unrelated gets a "aria-label:hiden", not just social media icons.

• 

  Decorative images should not be visible to screen readers.

  Not only are decorative images visible to screen readers, the screen readers don’t explain what the image shows therefore it fails this item on the checklist. Additionally, the fact that the social media icons are seen and read by the screen reader but they don’t explain what the social media icons are. They are read solely as ‘link’.

  It is recommended that an ‘aria-label:hidden” is inserted to these social media icons to avoid being called out by the screen readers.