top of page

Etsy.com

Acessibility Conformance Evaluation

Course: HCI 511- Accessibility and Design for Diverse Users

 

PROJECT SUMMARY

I conducted a conformance evaluation on a peer-to-peer ecommerce website called Etsy. I evaluated Etsy’s website home page and its phone case subpage. I used multiple tools, including the W3C’s Easy Checks First, HTML and CSS Checker, ARIA, and Cognitive Level Test to assess the multiple areas where the site needs improvement to become more accessible.  As a result, I determined eight recommendations for the website:

 

  1. Add alt text to all non-text content so screen readers and other assistive technologies can read them properly.

  2. Add text content to the five links that do not have text content that describes the target of each link to make the links more descriptive.

  3. Identify text fields appropriately in the website’s code. 

  4. Make the site more adaptable and compatible in order for it to properly fit in all device sizes.

  5. Ensure consistent functionality across all browsers. For example, make the text resizable and the tabbing function the same on all browsers.

  6. Add <h2> headings and change html markup for all header tags to properly organize the content in the logical H1 to H6 hierarchical structure.

  7. Use the appropriate landmarks (i.e. main and navigation) to identify the different visible elements and sections of a web page.

  8. Check the 'tab' focus order of the page to make sure the sequence of the focusable elements is meaningful.

 

 

METHODOLOGY

I used the folowing checkpoint tools found on http://www.w3.org/WAI/eval/preliminary.html.

 

  • Page titles: are the page titles unique and descriptive of content?

  • Image text alternatives: Do all pictures, illustrations, charts, etc. have alt text?

  • Headings: are all headings properly marked in the code?

  • Contrast ratio: Does it have good contrast colors between text and background?

  • Resize Text: Can the page be zoomed and still have legible content?

  • Keyboard access: Does it have keyboard focus and can you use in place of a mouse?

  • Forms, labels, and errors: Does it have proper labels and error recovery?

  • Multimedia alternatives: Can video/audio files be supported by captions, transcripts.

 

 

EASY CHECKS
HTML AND CSS CHECKER
ARIA
I checked the website’s code and the Wave tool for ARIA.
ACCESIBILITY CHECKING BY ONLINE TOOLS
READABILITY SCORE FOR COGNITIVE LEVEL

I checked the mark-up errors of the website’s HTML and CSS on http://validator.w3.org/.

 

I used Functional Accessibility Evaluator, Powermapper, and WAVE tools. All three evaluate WCAG and Section 508 compliance.

I checked that the cognitive level of the website’s content was of 8th grade reading level at http://www.readability-score.com/.

FINDINGS

Etsy’s evaluation results are presented below in the POUR (Perceivable, Operable, Understandable, and Robust) framework to determine its compliance with the Web Content Accessibility Guidelines 2.0.

 

  1. Text Alternatives:

    • Most pictures that represent options to assist the user have alt text, but not all images and icons/menu options have alt text.

    • Between the two evaluated pages, there is a total 77 errors:

      • Homepage: 68 images missing alt text, 1 instance missing form labels, and 2 instances missing links.

      • Subpage: 53  images missing alt text, 5 instances missing form labels, and 10 instances missing links.

    • 124 total alerts that include long alt texts (6), unlabeled form element with title (2), redundant links (74) and broken same-page link (6).

    • The screen reader reads long and undescriptive names of the pictures of the items sold on the page (alt text is in green in the screenshot below).

  2. Time-Based Media

    • ​The homepage and subpage do not have any time-based media.

  3. Adaptable

    • ​The search textbox does not have a descriptive alt text. Voice over reads it as “edit text field.

    • Horizontal scrolling is needed to read sentences and view content.

    • Text does not become blurry when zoomed in.

    • Found just one overlap of text (sell heading overlaps an con at 500%). 

    • When pictures are removed, the pages lose their structure.​

  4. Distinguishable

    • There is no contrast issues detected (Foreground blue and background white).

    • Contrast Ratio: 8.6:1.

    • h2 is skipped on both pages.

    • h4 looks like regular text although it is a different color from its content.

PERCEIVABLE
OPERABLE 

 

  1. Keyboard Accessible

    • ​On Chrome, users can tab through all the links and selections on the homepage and subpage by using “tab” and “page up”/”page down” keys. However, on Safari, users can only tab to textboxes, main dropdowns, and buttons on both pages. For instance, as soon as the homepage loads, the focus starts on Etsy’s logo, and then proceeds to the search textbox, search button, subscribe textbox, subscribe button and then loops back around.

    • Chrome:

      • At the beginning of the page, the focus goes backwards (starts on the textfield and then goes back to the page/site’s logo instead of going forward to the search button).

      • The focus on the dropdown list of the favorite button next to all of the item’s pictures gets skipped when tabbing.

      • Focus appears on the title of the pictures, but not on the actual pictures of the page when using tab.

  2. Enough Time

    • There are no time limits on the homepage or subpage.​

  3. Seizures

    • ​There is no flashing content or disturbing/ unpredictable visuals on the site which that might cause seizures.

  4. Navigable

    • ​The site uses ARIA. Pages contain two HMTL5 and ARIA instances: navigation and tab index.

    • The layout of the site is straightforward and simple. Similar content is properly grouped together which makes it easy to find specific information.

    • The site highlights images, links, and buttons when the cursor is on top of them or when the focus is on them when using tab. However, the highlighting and focus is not consistent. Sometimes you see a dark blue outline, other times a very light gray outline, and others not visible at all.

    • The page headings are unique and descriptive.

    • Most of the images and some of the icon links have either no alt text or unclear and non-descriptive names.

    •  190 elements are not contained in landmarks into one or more container elements with proper landmark roles (e.i. navigation and main).

    • Contains 794 hidden elements with renderable content.

 

UNDERSTANDABLE

 

  1. Readable

    • ​The average reading level for the homepage is 7th grade, and the subpage was assessed at grade level 6.5, both below the ideal 8th grade level.

  2. Predictable

    • The layout and navigation items on both pages are all consistent.

    • The links on both pages are highlighted when the user’s cursor hovers them or when the focus is on them when using tab, except on four of the main menu items (Home , Favorite, You, and Cart) located on the top right hand side of the subpage.

    • The same menu options are presented for all the pictures.

  3. Error Prevention and Recovery

    • ​Screen reader does not properly identify the search text field when the user skims through the pages by tabbing quickly, which may cause the user to miss the textfield and not know that that is where they have to enter what they are searching for.

    • Screen reader does provide a message instructing the user to enter text, but only after the focus is set on the text field for at least 3 seconds.

    • Search results suggestions are provided only when using the left arrow key.

ROBUST

 

  1. Compatible​

    • The website was compatible with Mac Voice Over. When Voice Over was turned on, I  easily read the content of the page.

    • The tabbing function works differently on Chrome and Safari. On Chrome, users can tab through all the links and selections on the homepage and subpage by using “tab” and “page up”/”page down” keys. However, on Safari, users can only tab to textboxes, main dropdowns, and buttons on both pages.

    • Internet Explorer, Chrome and Firefox display a security warning when a secure https:// web page includes http:// content.

    • SVG images are not supported in Internet Explorer 8 and earlier.

Other Work

bottom of page