{"id":5815,"date":"2019-01-07T19:52:49","date_gmt":"2019-01-07T19:52:49","guid":{"rendered":"https:\/\/visionar.design\/blog\/?p=5815"},"modified":"2019-03-15T14:12:50","modified_gmt":"2019-03-15T14:12:50","slug":"making-visionar-design-more-accessible","status":"publish","type":"post","link":"https:\/\/visionar.design\/blog\/making-visionar-design-more-accessible\/","title":{"rendered":"Making vision\u00e4r.design More Accessible"},"content":{"rendered":"

As user experience is key for Vision\u00e4r, we have decided to take a step forward in making our services and designs accessible to all. The <\/span>current Vision\u00e4r website was created <\/span>a few years ago to echo our values and share our care for clients. That said, it needed to be updated to be available to all. Yes, we’re talking about accessibility, i.e. making a product that can be used by people with disabilities.<\/span><\/p>\n

We decided to try and comply with the WCAG, the Web Content Accessibility Guidelines: (a lot of) standards created to<\/span> motivate us all to think <\/span>of the web differently and to create more inclusive experiences from the early stages of development (see <\/span>[What’s new with WCAG 2.1]<\/span>).<\/p>\n

First steps<\/h3>\n

We used <\/span>the product Achecker<\/span> on all pages of the Vision\u00e4r website to highlight the problems linked to HTML and CSS: this is the first step to a better-structured site, as you will see below. Achecker can detect the potential problems thanks to its implemented rules.<\/span><\/p>\n

Here is an example of how it works<\/span> and the kinds of outputs it produces:<\/span><\/p>\n

Check 178<\/span><\/p>\n

“Error: ‘Alt text does not convey the same information as the image.'”<\/span><\/p>\n

Achecker reads the name of the image and<\/span> looks to see if the alt-text contains the same information.<\/span><\/p>\n

“FAIL: src=’owl.jpg’ alt=’a brown dog’<\/span><\/p>\n

PASS: src=’owl.jpg’ alt=’a giant owl'”<\/span><\/p>\n

Achecker is smart, but not always accurate: this file may be an image of a dinosaur, no matter what its name is, which is why a human needs to verify the information.<\/span><\/p>\n

We reviewed these automated checks and kept the most relevant ones by looking at the website and its code. Achecker detected about 200 potential problems on each of our pages, some of them making no sense in our case (“Check 270: Unicode right-to-left marks or left-to-right marks may be required”), and the others that we carefully appointed were mainly about the structure and defining elements.<\/span><\/p>\n

Why are all of these details about the code important?<\/span><\/h3>\n

When you use a webpage, you don’t see <\/span>the components that are behind<\/span> it. People with disabilities may use screen readers and other devices that use the webpage code to function.<\/span> These “assistive technolog<\/span>ies” \u00a0see how the webpage is constructed and apply what they find to make the page accessible to people with disabilities.<\/p>\n

If a website didn\u2019t take <\/span>that it’s available to assistive technologies into account when written, it may not be compatible with these devices and therefore not accessible to people with disabilities. Alt text, for instance, that we’ve just seen <\/span>above, is a way to present images to people with low-vision by reading what an image or another element is about. This attribute, however, shouldn’t be used to describe solely\u00a0decorative images that could interfere with the use of the webpage.<\/span><\/p>\n

In the end, there are a lot of things to think about regarding the website structure, and we learned a lot in the process.<\/span><\/p>\n

Other elements<\/h3>\n

All of these HTML elements to implement or modify gave us, in a way, the theoretical part.<\/span><\/p>\n

For a better understanding of what these elements <\/span>are<\/span> for, we decided to move on to some more practical things:<\/span><\/p>\n